/* ============================================================
   沁玥 QINYUE — 網站樣式
   色彩系統:
     --ink      #0F2A24  深玉墨綠(主背景)
     --ink-2    #163A32  墨綠-淺(卡片/區塊底)
     --gold     #C9A227  鑲金-主
     --gold-lt  #E4C878  鑲金-亮
     --paper    #F7F1E3  宣紙米(內容卡片底)
     --maroon   #7A2E2E  硃紅(促銷標籤強調,少量使用)
     --text-lt  #F3ECDA  深底上的文字色
     --text-dk  #241C10  淺底上的文字色
   字體系統:
     品牌字:  'Ma Shan Zheng'  — 僅用於「沁玥」品牌字,毛筆書法感
     標題:   'Noto Serif TC'  — 襯線,古典質感
     內文:   'Noto Sans TC'   — 無襯線,好讀
   ============================================================ */

:root {
  --ink: #3B0F0F;
  --ink-2: #4A1818;
  --gold: #C9A227;
  --gold-lt: #E4C878;
  --paper: #F7F1E3;
  --maroon: #1F1A16;
  --text-lt: #F3ECDA;
  --text-dk: #241C10;
  --rule: rgba(228, 200, 120, 0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--text-lt);
  font-family: 'Noto Sans TC', sans-serif;
  line-height: 1.8;
  /* 針織/纖維紋理 — CSS 生成,無版權疑慮 */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(228,200,120,0.05), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(228,200,120,0.04), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.89  0 0 0 0 0.78  0 0 0 0 0.47  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, auto, 160px 160px;
}

h1, h2, h3, h4, .brand-serif {
  font-family: 'Noto Serif TC', serif;
  color: var(--text-lt);
  letter-spacing: 0.03em;
}

.brand-mark {
  font-family: 'Ma Shan Zheng', cursive;
  color: var(--gold-lt);
  letter-spacing: 0.08em;
}

a { color: var(--gold-lt); text-decoration: none; }
a:hover { color: var(--gold); }

.text-dk { color: var(--text-dk); }

/* ---------- 鑲金邊框元件 ---------- */
.gold-frame {
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 3px rgba(228,200,120,0.18), inset 0 0 0 4px rgba(201,162,39,0.35);
  border-radius: 2px;
}

.gold-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-lt) 50%, var(--gold) 80%, transparent);
  border: none;
  margin: 0.5rem 0 2rem;
}

.divider-diamond {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--gold);
  margin: 0.75rem 0 2rem;
}
.divider-diamond::before, .divider-diamond::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider-diamond span { font-size: 0.8rem; transform: rotate(45deg); border: 1px solid var(--gold); width: 8px; height: 8px; display:inline-block; }

/* ---------- Navbar ---------- */
.navbar-qy {
  background: linear-gradient(180deg, rgba(15,42,36,0.98), rgba(15,42,36,0.94));
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(4px);
}
.navbar-qy .navbar-brand { font-size: 1.8rem; display:flex; align-items:center; gap:0.6rem; }
.navbar-qy .logo-slot {
  width: 40px; height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.navbar-qy .logo-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.navbar-qy .nav-link {
  color: rgba(243,236,218,0.82) !important;
  font-family: 'Noto Serif TC', serif;
  margin: 0 0.6rem;
  position: relative;
}
.navbar-qy .nav-link:hover, .navbar-qy .nav-link.active { color: var(--gold-lt) !important; }
.navbar-qy .nav-link.active::after {
  content: "";
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: -4px;
  height: 1px; background: var(--gold);
}

/* ---------- Hero / 輪播 ---------- */
.hero-carousel {
  position: relative;
  min-height: 460px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(circle at 75% 30%, rgba(228,200,120,0.10), transparent 55%), var(--ink-2);
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide .container { display:flex; align-items:center; gap: 2.5rem; flex-wrap: wrap; }
.hero-slide h2 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.hero-slide p { color: rgba(243,236,218,0.82); max-width: 480px; }
.hero-dots { position:absolute; bottom: 1.25rem; left:0; right:0; display:flex; justify-content:center; gap:0.5rem; z-index: 2; }
.hero-dots button {
  width: 9px; height: 9px; border-radius:50%;
  border: 1px solid var(--gold); background: transparent; padding:0; cursor:pointer;
}
.hero-dots button.active { background: var(--gold); }

.mascot-slot {
  width: 220px; height: 220px;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 3px rgba(228,200,120,0.18);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.mascot-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.mascot-slot.small { width: 110px; height: 110px; }

/* ---------- Section ---------- */
.section { padding: 3.5rem 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;}
.section-head h2 { margin:0; font-size:1.5rem; }
.section-head .tagline { color: var(--gold-lt); font-size: 0.85rem; }
.section-head .more-link { font-size: 0.85rem; }

/* ---------- 商品卡片(首頁橫向列 + 商品列表) ---------- */
.product-row { display:flex; gap:1.25rem; overflow-x:auto; padding-bottom: 0.5rem; }
.product-card {
  background: var(--paper);
  color: var(--text-dk);
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 220px;
  position: relative;
  border: 1px solid var(--gold);
}
.product-grid .product-card { flex: unset; width: 100%; }
.product-card .thumb { aspect-ratio: 1 / 1; background:#EDE6D3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-card .thumb img { width:100%; height:100%; object-fit:cover; }
.product-card .info { padding: 0.85rem 0.9rem 1rem; }
.product-card .info h4 { font-size: 0.95rem; color: var(--text-dk); margin: 0 0 0.25rem; }
.product-card .price { font-family:'Noto Serif TC',serif; color: var(--maroon); font-weight:700; }
.product-card .tag-badge {
  position:absolute; top:0.6rem; left:0.6rem;
  background: var(--maroon); color:#fff; font-size:0.68rem;
  padding: 0.15rem 0.55rem; border-radius: 2px;
}
.product-card .sold-badge {
  position:absolute; inset:0; background:rgba(36,28,16,0.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Noto Serif TC',serif; font-size:1.1rem; letter-spacing:0.2em;
}

.product-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 1.5rem; }

/* ---------- 側欄篩選(架上商品頁) ---------- */
.filter-panel { background: rgba(228,200,120,0.05); border:1px solid var(--rule); border-radius:3px; padding: 1.25rem; }
.filter-group { border-bottom: 1px solid var(--rule); padding-bottom: 0.9rem; margin-bottom: 0.9rem; }
.filter-group:last-child { border-bottom:none; margin-bottom:0; }
.filter-group summary {
  cursor:pointer; list-style:none; font-family:'Noto Serif TC',serif;
  color: var(--gold-lt); display:flex; justify-content:space-between; align-items:center;
}
.filter-group summary::-webkit-details-marker { display:none; }
.filter-group summary::after { content:"+"; }
.filter-group[open] summary::after { content:"–"; }
.filter-group .opt { display:block; margin-top:0.55rem; font-size:0.9rem; color: rgba(243,236,218,0.85); cursor:pointer; }
.filter-group .opt input { margin-right:0.4rem; accent-color: var(--gold); }
.filter-group .opt:hover { color: var(--gold-lt); }

.ask-bar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem;
  background: rgba(228,200,120,0.06); border:1px solid var(--gold); border-radius:3px;
  padding: 0.85rem 1.25rem; margin-bottom: 1.75rem;
}
.line-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  background: #06C755; color:#fff; border:none; border-radius: 3px;
  padding: 0.5rem 1.1rem; font-weight:700; cursor:pointer; font-family:'Noto Sans TC',sans-serif;
}
.line-btn:hover { filter: brightness(1.08); color:#fff; }
.line-icon { width:18px; height:18px; }

/* ---------- LINE Modal ---------- */
.qy-modal-backdrop {
  position: fixed; inset:0; background: rgba(15,42,36,0.75);
  display:none; align-items:center; justify-content:center; z-index: 50;
}
.qy-modal-backdrop.show { display:flex; }
.qy-modal {
  background: var(--paper); color: var(--text-dk);
  border: 1px solid var(--gold); border-radius: 4px;
  padding: 1.75rem; max-width: 340px; width: 90%; text-align:center; position:relative;
}
.qy-modal .close-x { position:absolute; top:0.6rem; right:0.9rem; cursor:pointer; font-size:1.2rem; color: var(--text-dk); }
.qy-modal .qr-slot {
  width: 180px; height:180px; margin: 1rem auto;
  border: 1px dashed var(--maroon); display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color: var(--maroon); text-align:center; padding: 0.5rem;
}

/* ---------- 商品詳情頁 ---------- */
.gallery-main { border:1px solid var(--gold); border-radius:3px; overflow:hidden; background:#EDE6D3; position:relative; cursor: zoom-in; }
.gallery-main img { width:100%; display:block; }
.zoom-toggle {
  position:absolute; top:0.6rem; right:0.6rem; z-index:3;
  background: var(--ink); color: var(--gold-lt); border:1px solid var(--gold);
  border-radius: 50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem;
}
.zoom-toggle.active { background: var(--gold); color: var(--ink); }
.zoom-lens {
  position:absolute; border:1px solid var(--gold); background: rgba(228,200,120,0.15);
  display:none; pointer-events:none; width:120px; height:120px; border-radius:50%;
}
.gallery-main.zoom-active .zoom-lens { display:block; }
.gallery-thumbs { display:flex; gap:0.6rem; margin-top:0.75rem; flex-wrap:wrap; }
.gallery-thumbs img { width:64px; height:64px; object-fit:cover; border:1px solid var(--rule); border-radius:2px; cursor:pointer; }
.gallery-thumbs img.active { border-color: var(--gold); }

.product-meta-row { display:flex; gap:0.6rem; flex-wrap:wrap; margin: 0.75rem 0 1.25rem; }
.product-meta-row .chip {
  border:1px solid var(--gold); color: var(--gold-lt); font-size:0.78rem;
  padding: 0.2rem 0.65rem; border-radius: 20px;
}

.product-video-wrap {
  max-width: 380px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  margin-top: 1.5rem;
}
.product-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 訂購方式頁 ---------- */
.order-side { background: rgba(228,200,120,0.05); border:1px solid var(--rule); border-radius:3px; padding:1.5rem; }
.order-steps { counter-reset: step; list-style:none; padding:0; margin:0; }
.order-steps li { position:relative; padding-left:2.6rem; margin-bottom:1.5rem; }
.order-steps li::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:-0.1rem;
  width:1.9rem; height:1.9rem; border:1px solid var(--gold); border-radius:50%;
  color: var(--gold-lt); display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif TC',serif;
}

/* ---------- Footer ---------- */
footer.site-footer { background: #0A1F1A; padding: 2.5rem 0 1.5rem; border-top: 1px solid var(--rule); }
footer.site-footer .small-note { color: rgba(243,236,218,0.5); font-size:0.78rem; }

.social-badges { display:flex; gap:0.6rem; }
.social-badge {
  width: 38px; height: 38px; border-radius:50%;
  border: 1px solid var(--gold); background: rgba(228,200,120,0.06);
  color: var(--gold-lt); display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.social-badge:hover { background: var(--gold); color: var(--ink); }
.social-badge svg { width:18px; height:18px; }

/* ---------- Misc ---------- */
.btn-gold {
  background: transparent; border:1px solid var(--gold); color: var(--gold-lt);
  padding: 0.55rem 1.4rem; border-radius: 2px; font-family:'Noto Serif TC',serif;
  display:inline-block; cursor:pointer;
}
.btn-gold:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 767px) {
  .hero-slide .container { flex-direction: column; text-align:center; }
  .mascot-slot { width:160px; height:160px; }
}