/* ============================================================
   Scentre Parfum — Guerlain-inspired French luxury UI / UX
   黑白 + 暖古銅金 · 高對比襯線 · 細金線 · 克制留白
   ============================================================ */
:root{
  --ink:#121212;
  --ink-soft:#3a3a3a;
  --gold:#b0894e;          /* Guerlain 暖古銅金 */
  --gold-deep:#8c6a36;
  --paper:#ffffff;
  --paper-2:#f6f4ef;       /* 微暖白 */
  --muted:#3a3a3a;  /* 2026-09-16 Rocky：內文統一深灰，移除中灰 */
  --line:rgba(18,18,18,0.12);
  --line-gold:rgba(176,137,78,0.42);
  --serif:"Playfair Display","Noto Serif TC",Georgia,serif;
  --sans:"Jost","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);background:var(--paper);
  font-size:16px;font-weight:400;line-height:1.9;letter-spacing:.3px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:.5px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.fine{font-size:12px;color:var(--muted);letter-spacing:.5px;}
#footerTag{display:none;}
.center{text-align:center;}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px 5vw;background:rgba(255,255,255,.97);
  /* 注意：呢度唔可以加 filter / backdrop-filter —
     呢啲屬性會令 header 入面 position:fixed 嘅手機抽屜 menu
     被困喺 header 入面（走位、得半截） */
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;}
.brand-logo{height:32px;width:auto;object-fit:contain;transition:filter .3s;}
.brand:hover .brand-logo{filter:sepia(1) hue-rotate(10deg) saturate(2.5);}
.footer-logo{height:24px;width:auto;object-fit:contain;filter:brightness(0) invert(1);}
.nav{display:flex;gap:30px;align-items:center;justify-content:center;list-style:none;}
.nav>li{position:relative;}
.nav a{
  font-family:var(--sans);font-size:14.3px;letter-spacing:1.2px;color:var(--ink);
  text-transform:uppercase;padding:8px 0;display:block;position:relative;font-weight:400;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s;}
.nav a:hover::after,.nav a.active::after{width:100%;}
/* 安全網：導覽列入面嘅 inline SVG 一律封頂 24px。
   SVG 冇指定 width/height 時會用預設 300×150，一放落 nav 就爆到超大嚿
   （之前嘅 .m-wa-link 就係咁中招）。有呢條就唔會再發生。 */
.nav a svg{width:22px;height:22px;max-width:22px;max-height:22px;display:block;}
.has-dropdown>.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--paper);border:1px solid var(--line);
  min-width:210px;padding:10px 0;list-style:none;
  opacity:0;visibility:hidden;transition:.25s;box-shadow:0 20px 50px rgba(0,0,0,.10);
}
.has-dropdown:hover>.dropdown{opacity:1;visibility:visible;}
.dropdown li a{padding:12px 26px;white-space:nowrap;text-transform:none;font-size:14px;letter-spacing:1px;font-family:var(--sans);color:var(--ink-soft);}
.dropdown li a:hover{background:var(--paper-2);color:var(--gold-deep);}

.header-icons{display:flex;align-items:center;gap:14px;justify-content:flex-end;}
.icon-btn{position:relative;background:none;border:none;color:var(--ink);cursor:pointer;padding:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;transition:.2s;}
.icon-btn:hover{color:var(--gold-deep);}
.icon-btn svg{width:22px;height:22px;stroke-width:1.6;display:block;}
.cart-count{position:absolute;top:-4px;right:-6px;background:var(--gold);color:#fff;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;font-size:10px;font-family:var(--sans);}
.cart-count.is-zero{display:none;} /* 數量 0 時收起圓點（導覽列更清爽） */
.menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);}

/* ---------- BUTTONS ---------- */
.btn-primary{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:15px 38px;border-radius:0;letter-spacing:3px;
  font-family:var(--sans);font-size:11px;text-transform:uppercase;cursor:pointer;border:1px solid var(--ink);transition:.25s;font-weight:400;
}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn-primary.full{width:100%;}
.btn-ghost{background:none;border:1px solid var(--line);padding:15px 30px;border-radius:0;cursor:pointer;letter-spacing:2px;text-transform:uppercase;font-size:11px;color:var(--ink);font-family:var(--sans);transition:.25s;}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
.btn-line{display:inline-block;border:1px solid var(--gold);color:var(--gold-deep);padding:13px 30px;border-radius:0;letter-spacing:3px;font-size:11px;text-transform:uppercase;transition:.25s;font-family:var(--sans);}
.btn-line:hover{background:var(--gold);color:#fff;}

/* ---------- HERO BANNER (full-screen video, Guerlain style) ---------- */
.hero-banner{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 6vw;background:#0d0d0d;color:#fff;overflow:hidden;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:transparent;}
/* 影片 banner 底色＝海報圖（唔用純黑）。影片緩衝期間、或瀏覽器載唔到影片時，
   都顯示海報圖，唔會出現「黑屏」。影片播放時會蓋住呢層背景。 */
.hero-banner--video{background:url("hero-poster.jpg") center/cover no-repeat,#0d0d0d;}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,13,13,.45) 0%,rgba(13,13,13,.30) 45%,rgba(13,13,13,.62) 100%);}
.hero-content{position:relative;z-index:2;max-width:920px;}
.hero-kicker{text-transform:uppercase;letter-spacing:6px;font-size:12px;color:var(--gold);margin-bottom:28px;}
.hero-title{font-family:var(--serif);font-size:clamp(44px,8vw,92px);white-space:pre-line;margin-bottom:26px;font-weight:500;color:#fff;line-height:1.05;text-shadow:0 2px 30px rgba(0,0,0,.35);}
.hero-sub{max-width:560px;margin:0 auto 40px;color:#ece7dd;font-size:16px;font-weight:400;text-shadow:0 1px 12px rgba(0,0,0,.4);}
.hero-cta{position:absolute;bottom:calc(44px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;color:#fff;text-transform:uppercase;letter-spacing:3px;font-size:12px;font-family:var(--sans);padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.35);transition:.25s;}
.hero-cta:hover{color:var(--gold);border-bottom-color:var(--gold);}

/* ---------- SECTION ---------- */
.section{padding:100px 6vw;max-width:1240px;margin:0 auto;}
.section-head{text-align:center;margin-bottom:62px;position:relative;}
.section-head h2{font-size:clamp(32px,4.5vw,48px);margin-bottom:14px;}
.section-head .en{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);}
.section-head p{color:var(--muted);max-width:640px;margin:14px auto 0;font-size:16px;}
.section-head::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:26px auto 0;}

/* ---------- PRODUCT GRID (fine-line grid) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.product-card{background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding-bottom:30px;transition:.3s;}
.product-card:hover{background:var(--paper-2);}
.bottle-wrap{height:300px;display:grid;place-items:center;background:var(--paper-2);}
.bottle-wrap svg{width:120px;height:170px;}
/* 產品圖統一 1080×1350 (4:5) */
.bottle-img{width:100%;height:100%;object-fit:cover;object-position:center top;}

/* ---------- 產品卡懸停動效（輕微上浮 + 圖放大） ---------- */
.product-card{position:relative;}
.product-card .bottle-wrap{overflow:hidden;}
.product-card .bottle-img,
.product-card .bottle-fill svg{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(18,18,18,.10);}
.product-card:hover .bottle-img,
.product-card:hover .bottle-fill svg{transform:scale(1.06);}
.product-card .btn-add{transition:.25s,transform .25s;}
.product-card:hover .btn-add{transform:translateY(-2px);}

.p-family{text-transform:uppercase;letter-spacing:4px;font-size:10px;color:var(--gold-deep);margin:26px 0 8px;}
.p-name{font-family:var(--serif);font-size:25px;font-weight:500;}
.p-cn{font-size:13px;color:var(--muted);margin-top:3px;letter-spacing:1px;}
.p-notes{font-size:12px;font-style:italic;color:var(--ink-soft);margin:14px 20px 6px;}
.p-desc{font-size:13px;color:var(--muted);margin:0 24px 20px;min-height:64px;}
.p-bottom{display:flex;align-items:center;justify-content:center;gap:20px;}
.p-price{font-family:var(--serif);font-size:20px;font-weight:600;}
.btn-add{background:none;border:1px solid var(--ink);padding:11px 24px;cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-family:var(--sans);transition:.25s;}
.btn-add:hover{background:var(--ink);color:#fff;}

/* ---------- FEATURE ROW (home) ---------- */
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:80px;border-top:1px solid var(--line);}
.feature{padding:36px 30px;border-right:1px solid var(--line);}
.feature:last-child{border-right:none;}
.feature h4{font-family:var(--serif);font-size:24px;margin-bottom:10px;}
.feature p{color:var(--muted);font-size:14px;}

/* ---------- SERIES HERO ---------- */
.series-hero{padding:90px 6vw 50px;text-align:center;}
.series-hero .en{text-transform:uppercase;letter-spacing:6px;font-size:11px;color:var(--gold-deep);}
.series-hero h1{font-size:clamp(36px,5.5vw,60px);margin:14px 0;font-weight:500;}
.series-hero p{max-width:680px;margin:0 auto;color:var(--muted);font-size:16px;}

/* ---------- PRODUCT DETAIL ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;max-width:1100px;margin:0 auto;padding:90px 6vw;}
.detail .bottle-stage{height:480px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper-2);}
.detail .bottle-stage svg{width:210px;height:300px;}
.bottle-img-detail{width:100%;height:100%;object-fit:cover;object-position:center top;}
.detail h1{font-size:48px;margin-bottom:8px;font-weight:500;}
.detail .cn{font-size:16px;color:var(--muted);margin-bottom:20px;letter-spacing:1px;}
.detail .meta{font-size:11px;letter-spacing:2px;color:var(--gold-deep);text-transform:uppercase;margin-bottom:20px;}
.detail .notes{font-style:italic;color:var(--ink-soft);margin-bottom:20px;}
.detail .desc{color:var(--muted);margin-bottom:30px;font-size:16px;}
.detail .price{font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:28px;}
.detail .back{display:inline-block;margin-bottom:24px;font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.detail .back:hover{color:var(--gold-deep);}

/* ---------- ZIGZAG PRODUCT EDITORIAL (Chanel-like, full-bleed) ---------- */
.zig-section{width:100%;}
.zig-head{text-align:center;padding:96px 6vw 56px;max-width:900px;margin:0 auto;}
.zig-head h2{font-size:clamp(32px,4.5vw,48px);margin-bottom:14px;}
.zig-head .en{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);}
.zig-head p{color:var(--muted);max-width:660px;margin:14px auto 0;font-size:16px;}
.zig-head::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:26px auto 0;}
.zig{display:block;width:100%;}
.zig-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:84vh;}
.zig-media{position:relative;overflow:hidden;background:var(--paper-2);min-height:84vh;}
.zig-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.zig-row:hover .zig-media img{transform:scale(1.04);}
.zig-media .bottle-fill{width:100%;height:100%;display:grid;place-items:center;}
.zig-media .bottle-fill svg{width:44%;max-width:300px;height:auto;}
.zig-text{display:flex;flex-direction:column;justify-content:center;padding:6vw 7vw;}
.zig-num{font-family:var(--serif);font-size:13px;letter-spacing:4px;color:var(--gold);margin-bottom:16px;}
.zig-text .z-family{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);margin-bottom:16px;}
.zig-text h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);font-weight:500;margin-bottom:6px;line-height:1.08;}
.zig-text .z-cn{font-size:14px;color:var(--muted);letter-spacing:2px;margin-bottom:20px;}
.zig-text .z-meta{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px;}
.zig-text .z-notes{font-style:italic;color:var(--ink-soft);margin-bottom:22px;font-size:15px;}
.zig-text .z-desc{color:var(--muted);font-size:16px;line-height:1.9;margin-bottom:16px;}
.zig-text .z-detail{color:var(--ink-soft);font-size:16px;line-height:1.95;margin-bottom:30px;}
.zig-text .z-bottom{display:flex;align-items:center;gap:24px;}
.zig-text .z-price{font-family:var(--serif);font-size:26px;font-weight:600;}
/* 偶數行：圖右字左，形成 Z 形 */
.zig-row:nth-child(even) .zig-media{order:2;}
.zig-row:nth-child(even) .zig-text{order:1;}

/* Z 型排版：CTA 區域 + Portfolio */
.zig-cta{padding:50px 7vw 30px;}
.zig-portfolio{padding:0 7vw 60px;}
.zig-portfolio .zig-row{min-height:50vh;}
.zig-portfolio .zig-media{min-height:50vh;}
.zig-portfolio .zig-text{padding:3vw 4vw;}

@media(max-width:920px){
  .zig-head{padding:64px 7vw 36px;}
  .zig-row{grid-template-columns:1fr;min-height:0;}
  .zig-media{min-height:62vh;}
  .zig-row:nth-child(even) .zig-media{order:0;}
  .zig-row:nth-child(even) .zig-text{order:0;}
  .zig-text{padding:44px 7vw 60px;}
}

/* ---------- PROSE (story / ambassador / pages) ---------- */
.prose{max-width:800px;margin:0 auto;padding:100px 6vw;}
.prose .kicker{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);text-align:center;margin-bottom:16px;}
.prose h1{font-size:clamp(36px,5vw,56px);text-align:center;margin-bottom:48px;font-weight:500;}
.prose h3{font-family:var(--serif);font-size:28px;margin:54px 0 20px;padding-top:36px;border-top:1px solid var(--line-gold);font-weight:500;}
.prose p{color:var(--ink-soft);margin-bottom:22px;font-size:16px;}
.ambassador-card{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;margin-top:30px;}
.ambassador-portrait{height:340px;border:1px solid var(--line-gold);display:grid;place-items:center;background:var(--paper-2);font-family:var(--serif);font-size:70px;color:var(--gold);}
.traits{list-style:none;margin-top:24px;}
.traits li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.points{list-style:none;margin-top:28px;}
.points li{padding:16px 0 16px 30px;position:relative;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.points li::before{content:"—";position:absolute;left:0;color:var(--gold);}
.sessions{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line);}
.session{border-bottom:1px solid var(--line);padding:26px 28px;}
.session h4{font-family:var(--serif);font-size:22px;margin-bottom:8px;}
.session p{color:var(--muted);font-size:14px;}

/* ---------- GUIDE (accordion) ---------- */
.guide{max-width:840px;margin:0 auto;}
.guide-item{border-bottom:1px solid var(--line);}
.guide-q{width:100%;text-align:left;background:none;border:none;padding:26px 0;cursor:pointer;font-size:19px;font-family:var(--serif);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.guide-q .plus{color:var(--gold);font-size:24px;transition:.25s;}
.guide-item.open .guide-q .plus{transform:rotate(45deg);}
.guide-a{max-height:0;overflow:hidden;transition:max-height .45s ease;color:var(--muted);}
.guide-item.open .guide-a{max-height:1400px;padding-bottom:26px;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1000px;margin:0 auto;padding:0 6vw;}
.contact-info p{margin-bottom:18px;color:var(--ink-soft);line-height:1.7;}
.contact-info .label{text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--gold-deep);display:block;margin-bottom:3px;}
.contact-form{max-width:1000px;margin:0 auto;padding:0 6vw 60px;}
@media(max-width:760px){
  .contact-grid{grid-template-columns:1fr;gap:36px;padding:0 7vw;}
  .contact-form{padding:0 7vw 50px;}
  .contact-info p{font-size:15px;}
}

/* ---------- EVENTS / 活動花絮 ---------- */
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto;padding:10px 6vw 60px;}
.event-card{margin:0;}
.event-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);}
.event-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.event-card:hover .event-img img{transform:scale(1.04);}
.event-card figcaption{padding:14px 2px 0;}
.event-date{font-size:11px;letter-spacing:2px;color:var(--gold-deep);text-transform:uppercase;margin-bottom:6px;}
.event-card h4{font-family:var(--serif);font-size:19px;margin-bottom:6px;font-weight:500;}
.event-cap{font-size:14px;color:var(--muted);}
@media(max-width:900px){.events-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.events-grid{grid-template-columns:1fr;padding:10px 7vw 50px;}}

/* 首頁活動花絮預覽條 */
.events-strip{padding:80px 6vw;border-top:1px solid var(--line);}
.events-strip-head{text-align:center;margin-bottom:34px;}
.events-strip-head .kicker{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);margin-bottom:12px;}
.events-strip-head h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);font-weight:500;}
.events-strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1100px;margin:0 auto;}
.event-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);}
.event-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.event-tile:hover img{transform:scale(1.05);}
.event-tile .event-date{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);padding:4px 10px;font-size:10px;letter-spacing:1px;color:var(--ink);margin:0;}
.events-more{text-align:center;margin-top:26px;}
.events-more a{font-size:13px;letter-spacing:2px;color:var(--gold-deep);border-bottom:1px solid var(--line-gold);padding-bottom:4px;}
@media(max-width:900px){.events-strip-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.events-strip{padding:54px 7vw;}.events-strip-grid{gap:10px;}}

/* ---------- 結賬：付款方式選擇（Allinpay 網上付款） ---------- */
.pay-choice{margin:16px 0 4px;padding:14px 16px;border:1px solid var(--line);background:var(--paper-2);}
.pc-label{display:block;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--gold-deep);margin-bottom:10px;}
.pc-opt{display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.5;}
.pc-opt input[type="radio"]{margin-top:3px;flex:0 0 auto;accent-color:var(--gold-deep);}
@media(max-width:560px){.pay-choice{padding:12px 13px;}.pc-opt{font-size:13px;}}

/* ---------- FOOTER ---------- */
.site-footer{background:#0d0d0d;color:#d8d2c6;padding:70px 6vw 34px;margin-top:50px;}
.footer-grid{display:grid;grid-template-columns:1.2fr .9fr .8fr .9fr 1fr;gap:30px;max-width:1280px;margin:0 auto;}
.f-brand{font-family:var(--serif);font-size:24px;letter-spacing:2px;}
.footer-grid a{display:block;color:#bdb6a8;font-size:13px;padding:6px 0;letter-spacing:.5px;transition:.2s;}
.footer-grid a:hover{color:var(--gold);}
.f-head{text-transform:uppercase;letter-spacing:3px;font-size:10px;color:var(--gold);margin-bottom:16px;}
.social-row{display:flex;gap:12px;margin-top:14px;}
.social-row a{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;font-size:11px;color:#bdb6a8;transition:.25s;}
.social-row a:hover{border-color:var(--gold);color:var(--gold);}
.copyright{text-align:center;color:#7d776b;font-size:12px;margin-top:50px;border-top:1px solid rgba(255,255,255,.12);padding-top:26px;letter-spacing:1px;}

/* ---------- CART DRAWER ---------- */
.overlay{position:fixed;inset:0;background:rgba(13,13,13,.45);opacity:0;pointer-events:none;transition:.25s;z-index:60;}
.overlay.show{opacity:1;pointer-events:auto;}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);background:var(--paper);z-index:70;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column;box-shadow:-12px 0 50px rgba(0,0,0,.14);}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:26px;border-bottom:1px solid var(--line);}
.cart-head h3{font-size:22px;}
.close-x{background:none;border:none;font-size:28px;cursor:pointer;color:var(--muted);line-height:1;}
.cart-items{flex:1;overflow-y:auto;padding:14px 24px;}
.empty{color:var(--muted);text-align:center;margin-top:50px;}
.cart-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.cr-bottle{width:60px;height:78px;border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;background:var(--paper-2);}
.cr-bottle svg{width:42px;height:58px;}
.cr-img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.cr-info{flex:1;}
.cr-name{font-size:15px;font-weight:500;}
.cr-price{font-size:13px;color:var(--muted);}
.cr-qty{display:inline-flex;align-items:center;gap:12px;margin-top:8px;}
.cr-qty button{width:26px;height:26px;border:1px solid var(--line);background:none;cursor:pointer;font-family:var(--sans);}
.cr-remove{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;}
.cart-foot{padding:24px;border-top:1px solid var(--line);}
.cart-foot.is-empty{display:none;} /* 購物袋清空 → 收起小計／去結賬 */
.cart-total{display:flex;justify-content:space-between;margin-bottom:18px;font-size:16px;}
.cart-total strong{font-family:var(--serif);font-weight:600;font-size:20px;}

/* ---------- MODALS ---------- */
.modal{position:fixed;inset:0;background:rgba(13,13,13,.5);display:none;place-items:center;z-index:80;padding:20px;}
.modal.show{display:grid;}
.modal-box{background:var(--paper);border-radius:0;padding:42px;width:min(460px,100%);position:relative;max-height:92vh;overflow-y:auto;}
.modal-box.center{text-align:center;}
.modal-box h3{font-size:30px;margin-bottom:20px;font-weight:500;}
.checkout-form label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:16px 0 6px;}
.checkout-form input,.checkout-form select,.checkout-form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:0;font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink);resize:vertical;}
.checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus{outline:none;border-color:var(--gold);}
.success-mark{width:60px;height:60px;border-radius:50%;background:var(--paper-2);color:var(--gold);display:grid;place-items:center;font-size:30px;margin:0 auto 16px;}
.success-text{color:var(--muted);font-size:14px;margin:8px 0 24px;}
.success-actions{display:flex;flex-direction:column;gap:10px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .site-header{grid-template-columns:auto 1fr auto;column-gap:14px;}
  .menu-toggle{display:block;}
  /* 抽屜 menu 係 .site-header 嘅手足（唔係子孫），z-index:65 高過 ☰ 掣（auto=0），
     所以一開 menu，抽屜嘅紙色底就會冚住個 ☰，令用戶撳唔到 ☰ 去閂 menu（實測要卡死）。
     呢度將 ☰ 提到 70，高過抽屜嘅 65，就可以再撳嚟閂。 */
  .menu-toggle{position:relative;z-index:70;justify-self:start;}
  /* 平板 + 手機：logo 靠左、貼近 ☰（2026-09-13 Rocky 要求，同手機版一致）。
     舊寫法 justify-content:center 會因為左右兩欄闊度唔同而「假置中」（實測偏左 97px），
     改用 flex-start 就係真·靠左。 */
  .brand{justify-content:flex-start;}
  .brand-logo{height:28px;}
  .nav{position:fixed;top:0;left:0;height:100%;width:80vw;max-width:340px;background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;padding:90px 28px;transform:translateX(-100%);transition:.3s;z-index:65;border-right:1px solid var(--line);}
  .nav.open{transform:translateX(0);}
  .nav a{padding:16px 0;width:100%;border-bottom:1px solid var(--line);}
  .has-dropdown>.dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;padding:0 0 10px 16px;display:none;}
  .has-dropdown.open>.dropdown{display:block;}
  /* 手機抽屜 menu 開啟時：鎖背景捲動 + 半透明底層（撳底層即關） */
  body.nav-open{overflow:hidden;}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;}
  /* 關鍵：.site-header 本身 z-index:50 會建立 stacking context，令入面個 .nav(65) 被困喺 50 層；
     手機開 menu 時遮罩(body::after) z-index:60 > 50，會蓋住成個 header 連 nav，搞到 menu 撳唔到。
     所以開 menu 時將 header 提高過遮罩(66>60)，nav 先會顯示喺遮罩上面、可以撳。 */
  body.nav-open .site-header{z-index:66;}
  /* 抽屜用 dvh，避開 iOS 網址列高度問題 */
  .nav{height:100dvh;}
  .feature-row{grid-template-columns:1fr;}
  .feature{border-right:none;}
  .detail{grid-template-columns:1fr;gap:36px;padding-top:50px;}
  .detail .bottle-stage{height:380px;}
  .ambassador-card{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
}
/* ---------- 中窄桌面 / 平板橫向（921–1150px）----------
   8 項導覽欄喺呢個寬度空間最緊張。字級加大到 14.3px 之後，
   1024px（iPad 橫向）會迫到換行，所以收窄 gap 由 30px → 20px 保住一行。
   （順帶：原本 13px 版本喺 960px 以下已經會換行，呢段唔會令情況變差。） */
@media(min-width:921px) and (max-width:1150px){
  .nav{gap:20px;}
}
@media(max-width:560px){
  .hero-cta{font-size:11px;letter-spacing:2.5px;bottom:calc(28px + env(safe-area-inset-bottom));}
  .footer-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .feature-row{grid-template-columns:1fr;}
  /* ---- 手機 header：7 嘢塞 390px 會黐埋，要慳位 + 拉開距離 ---- */
  .site-header{padding:12px 4vw;column-gap:12px;}
  .menu-toggle{font-size:20px;}
  .brand-logo{height:26px;}
  .header-icons{gap:6px;}
  .icon-btn{width:32px;height:32px;}
  .icon-btn svg{width:20px;height:20px;}
  .lang-select{padding:4px 5px;padding-right:17px;font-size:10px;background-position:right 5px center;}
  .cart-count{width:15px;height:15px;font-size:9px;top:-3px;right:-5px;}
  /* 歷史：以前靠 translateX(-25% → -40%) 將「假置中」嘅 logo 硬推向 ☰。
     2026-09-13 改成 .brand{justify-content:flex-start} 之後 logo 本身就靠左，
     呢個 hack 唔再需要（而且會令唔同寬度嘅間距忽大忽小），已移除。
     想微調 ☰ 同 logo 之間距離，改上面 .site-header 嘅 column-gap（現時 12px）。 */
}

/* ---------- 浮動 WhatsApp 掣（桌面 + 手機，右下角） ---------- */
/* 取代頁首嗰個 WhatsApp 圖示。原因：頁首本來就迫，而實心圖示放喺
   心形／購物籃／登入呢堆 1.6px 幼線圖示隔離，視覺上會顯得特別大嚿。
   改做右下角浮動掣，任何頁面一撳即開 WhatsApp 對話。
   z-index:55 係刻意嘅：低過 overlay(60) / nav(65) / cart(70) / modal(80)，
   所以一開抽屜 menu、購物車或彈窗，個掣會自動被遮住，唔使寫 JS 收埋。
   想轉品牌色（黑底金字）：background 改 var(--ink)、color 改 var(--gold)。 */
.wa-fab{
  position:fixed;
  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:55;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.24);
  transition:transform .25s, box-shadow .25s;
}
.wa-fab svg{width:30px;height:30px;display:block;}
.wa-fab:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.3);color:#fff;}
.wa-fab:active{transform:translateY(-1px) scale(.96);}
@media(max-width:560px){
  .wa-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:52px;height:52px;}
  .wa-fab svg{width:28px;height:28px;}
}

/* ---------- 手機直度：成條 16:9 cover banner 要完整顯示，唔好裁走左右 ---------- */
/* 問題：banner 方框原本係 min-height:100vh（直度高瘦），
   但影片係 16:9 橫度。object-fit:cover 會將條片放大到填滿方框，
   直度手機上左右兩邊會被裁走超過一半。
   解決：手機上改為「方框本身維持 16:9」——
   闊度 100%、高度按 16:9 自動計，咁 cover 就等於原片完整顯示，零裁切。
   再落 object-fit:contain 做雙重保險（影片實際係 1920x1068，同 16:9 差 1%，
   用 contain 連嗰 1% 都唔會裁，背景 #0d0d0d 同影片同色，睇唔出黑邊）。 */
@media(max-width:920px){
  .hero-banner--video{
    min-height:0;
    aspect-ratio:16/9;
    padding:20px 5vw;
  }
  .hero-banner--video .hero-video{object-fit:contain;}
}
@media(max-width:560px) and (orientation:portrait){
  .hero-banner--video{padding:14px 5vw;}
  .hero-kicker{margin-bottom:18px;letter-spacing:4px;}
  .hero-title{font-size:clamp(34px,9.5vw,48px);margin-bottom:20px;}
  .hero-sub{font-size:15px;margin-bottom:28px;max-width:420px;}
}

/* ---------- LANGUAGE SWITCH (繁 / 简 / EN) ---------- */
/* 語言下拉選擇器 */
.lang-select{background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:1px;color:var(--muted);padding:5px 8px;transition:.2s;outline:none;appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' fill='none' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 6px center;padding-right:20px;}
.lang-select:hover{border-color:var(--gold);color:var(--gold-deep);}
.lang-select:focus{border-color:var(--gold);}

/* ---------- IMAGE SLOT (placeholder) ---------- */
.img-slot{width:100%;height:100%;min-height:160px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#f6f4ef,#f6f4ef 12px,#efece4 12px,#efece4 24px);border:1px dashed var(--line);color:var(--muted);font-family:var(--sans);font-size:12px;letter-spacing:1px;}
.img-slot span{padding:8px 14px;background:rgba(255,255,255,.72);}

/* ---------- STORY PAGE (richer layout with images) ---------- */
.story-figure-row{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;margin:10px 0 24px;}
.story-portrait{height:360px;border:1px solid var(--line-gold);overflow:hidden;background:var(--paper-2);}
.story-portrait img,.story-portrait .img-slot{width:100%;height:100%;object-fit:cover;}
.story-band{height:380px;margin:10px 0 24px;border:1px solid var(--line);overflow:hidden;background:var(--paper-2);}
.story-band img,.story-band .img-slot{width:100%;height:100%;object-fit:cover;}
.story-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:30px;}
.story-fig{height:240px;border:1px solid var(--line);overflow:hidden;background:var(--paper-2);margin:0;}
.story-fig img,.story-fig .img-slot{width:100%;height:100%;object-fit:cover;}
.ambassador-portrait img{width:100%;height:100%;object-fit:cover;}

/* ---------- PORTFOLIO (past works / 作品集) ---------- */
.portfolio{max-width:1240px;margin:0 auto;padding:0 6vw 100px;}
.portfolio-head{font-family:var(--serif);font-size:clamp(26px,3.5vw,38px);text-align:center;margin-bottom:34px;font-weight:500;}
.portfolio-head::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:18px auto 0;}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;}
.portfolio-item{margin:0;border:1px solid var(--line);background:var(--paper-2);}
.portfolio-item .img-slot{min-height:260px;}
.portfolio-item img{width:100%;height:260px;object-fit:cover;display:block;}
.portfolio-item figcaption{padding:12px 14px;font-size:13px;color:var(--ink-soft);text-align:center;letter-spacing:.5px;}

/* ---------- MOBILE tweaks for new blocks ---------- */
@media(max-width:920px){
  .story-figure-row{grid-template-columns:1fr;}
  .story-portrait{height:320px;}
  .story-band{height:280px;}
}

/* ============================================================
   新增：品牌物語 hub + 獨立子頁
   ============================================================ */
/* ---------- 品牌物語：整體 Z 形編輯式 ---------- */
.story-hero{position:relative;width:100%;min-height:78vh;display:grid;place-items:center;overflow:hidden;background:#b8945a;}
.story-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.story-hero--color{background:linear-gradient(135deg,#b8945a33,#b8945a0c);}
.story-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.18),rgba(18,18,18,.46));}
.story-hero-text{position:relative;text-align:center;padding:0 6vw;color:#fff;}
.story-hero-text .en{text-transform:uppercase;letter-spacing:6px;font-size:12px;color:rgba(255,255,255,.82);margin-bottom:18px;}
.story-hero-text h1{font-size:clamp(40px,7vw,80px);font-weight:500;color:#fff;line-height:1.06;text-shadow:0 2px 40px rgba(0,0,0,.35);}
.story-lead{color:var(--ink-soft);font-size:17px;line-height:1.95;max-width:760px;margin:0 auto;}
.story-intro{max-width:860px;margin:0 auto;padding:90px 6vw;text-align:center;}
.story-intro .story-lead{font-size:19px;line-height:2;}
.zig--story .zig-text h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);font-weight:500;margin-bottom:18px;}
.zig--story .zig-text .z-family{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;}
.zig--story .zig-text .z-detail{color:var(--ink-soft);font-size:16px;line-height:1.95;margin-bottom:26px;max-width:540px;}
/* 故事段「更多」掣 */
.z-go{display:inline-block;font-size:13.2px;letter-spacing:3.6px;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid var(--gold);padding-bottom:6px;transition:.25s;}
.z-go:hover{color:var(--ink);border-color:var(--ink);}
/* 圖片佔位框（無圖時） */
.img-slot{width:100%;height:100%;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);}
.img-slot span{font-size:12px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
.story-gallery-wrap{padding:10px 0 100px;}
.story-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;max-width:1180px;margin:0 auto;padding:0 6vw;}
.story-fig{height:300px;border:1px solid var(--line);overflow:hidden;background:var(--paper-2);margin:0;}
.story-fig img,.story-fig .img-slot{width:100%;height:100%;object-fit:cover;}

/* ---------- 品牌物語：獨立子頁（hero + 優雅正文） ---------- */
.story-sub-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;max-width:1180px;margin:0 auto;padding:90px 6vw;}
.story-sub-hero-media{height:520px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);}
.story-sub-hero-media img,.story-sub-hero-media .img-slot{width:100%;height:100%;object-fit:cover;object-position:center top;}
.story-sub-hero-text .en{text-transform:uppercase;letter-spacing:6px;font-size:11px;color:var(--gold-deep);margin-bottom:16px;}
.story-sub-hero-text h1{font-family:var(--serif);font-size:clamp(38px,5vw,60px);font-weight:500;margin-bottom:10px;line-height:1.08;}
.story-sub-hero-text .sub-role{color:var(--muted);font-size:14px;letter-spacing:2px;text-transform:uppercase;}
.prose--narrow{max-width:760px;margin:0 auto;padding:60px 6vw 110px;}
.prose--narrow .story-lead{font-size:18px;line-height:2;text-align:left;}
.traits{list-style:none;margin:34px 0 0;padding:0;}
.traits li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:15px;}
.traits li:last-child{border-bottom:1px solid var(--line);}
.traits li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg);}

/* ---------- 系列大 banner ---------- */
.series-banner{width:100%;aspect-ratio:21/9;min-height:420px;max-height:90vh;display:grid;place-items:center;overflow:hidden;position:relative;}
.series-banner img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.series-banner--color{display:grid;place-items:center;text-align:center;padding:120px 6vw;}
/* 系列大 banner 一律用原圖 21:9，任何螢幕都完整顯示成幅圖（cover 唔會裁走左右/上下）。
   下面嘅 16:9 / 3:2 轉換只留畀產品圖（pd-banner，香水樽要睇到樽底），唔適用於系列 banner。 */
/* 設咗 Banner 之後，名稱＋介紹文字顯示喺 banner 下方 */
.series-caption{text-align:center;padding:72px 6vw 14px;max-width:880px;margin:0 auto;}
.series-caption .en{text-transform:uppercase;letter-spacing:6px;font-size:11px;color:var(--gold-deep);}
.series-caption h1{font-size:clamp(34px,5vw,60px);margin:14px 0;font-weight:500;}
.series-caption p{color:var(--ink-soft);font-size:16px;max-width:680px;margin:0 auto;line-height:1.9;}
.series-banner-text{max-width:820px;}
.series-banner-text .en{text-transform:uppercase;letter-spacing:6px;font-size:11px;color:var(--gold-deep);}
.series-banner-text h1{font-size:clamp(38px,6vw,72px);margin:16px 0;font-weight:500;}
.series-banner-text p{color:var(--ink-soft);font-size:16px;max-width:680px;margin:0 auto;}

/* ---------- 產品詳情（大 banner → 居中名 → 文字 → Z 形 → 購買/收藏 → 相關） ---------- */
/* 1. 大 banner（全幅） */
.pd-banner{width:100%;}
.pd-banner-media{
  width:100%;
  aspect-ratio:21/9;
  min-height:420px;
  max-height:90vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--paper-2);
}
.pd-banner-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.pd-banner-media .bottle-fill{width:100%;height:100%;display:grid;place-items:center;}
.pd-banner-media .bottle-fill svg{width:34%;max-width:300px;height:auto;}
/* 桌面全螢幕時自動轉高身比例，確保整支香水樽睇得到（21:9 會裁走樽底） */
@media (min-width:1400px) and (min-height:800px){
  .pd-banner-media{aspect-ratio:16/9;}
}
@media (min-width:1800px) and (min-height:960px){
  .pd-banner-media{aspect-ratio:3/2;}
}
/* 2. 居中產品名 + 價錢 */
.pd-title{max-width:760px;margin:0 auto;padding:64px 6vw 10px;text-align:center;}
.pd-title .back{display:inline-block;font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:22px;transition:.2s;}
.pd-title .back:hover{color:var(--gold-deep);}
.pd-title .z-family{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);margin-bottom:16px;}
.pd-title h1{font-family:var(--serif);font-size:clamp(40px,5.5vw,64px);font-weight:500;margin-bottom:10px;line-height:1.08;}
.pd-title .z-cn{font-size:15px;color:var(--muted);letter-spacing:2px;margin-bottom:26px;}
.pd-price{font-family:var(--serif);font-size:30px;font-weight:600;margin-bottom:18px;}
.pd-title .pd-stock{justify-content:center;margin-bottom:8px;}
/* 5. 購買 / 收藏 CTA 區塊（Z 形之後、相關產品之前） */
.pd-cta{max-width:760px;margin:0 auto;padding:54px 6vw 20px;text-align:center;}
.pd-cta .pd-actions{justify-content:center;margin-top:0;}
.pd-zig .zig-text .en{text-transform:uppercase;letter-spacing:4px;font-size:11px;color:var(--gold-deep);margin-bottom:14px;}
.pd-zig .zig-text h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);font-weight:500;margin-bottom:18px;}
.note-list{list-style:none;display:grid;gap:0;margin:0;}
.note-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-soft);letter-spacing:.5px;}
.note-list li:first-child{border-top:1px solid var(--line);}
.pd-notes{ width:100%; padding:8px 6vw 36px; text-align:center; background:var(--paper-2); }
.pd-notes-inner{ max-width:560px; margin:0 auto; padding:44px 0; }
.pd-notes .en{ text-transform:uppercase; letter-spacing:5px; font-size:11px; color:var(--gold-deep); margin-bottom:18px; }
.pd-notes .note-list{ max-width:560px; margin:0 auto; }
.pd-zig .zig-row{ min-height:60vh; }
.pd-zig .zig-media{ min-height:60vh; }
.pd-wear{width:100%;padding:80px 6vw;text-align:center;}
.pd-wear-inner{max-width:720px;margin:0 auto;}
.pd-wear .en{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);margin-bottom:16px;}
.pd-wear .z-detail{color:var(--ink-soft);font-size:16px;line-height:1.95;}
.btn-more{display:inline-block;margin-top:26.4px;font-size:13.2px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid var(--gold);padding-bottom:4.8px;transition:.25s;}
.btn-more:hover{color:var(--ink);border-color:var(--ink);}

/* ---------- 新增區塊嘅手機版 ---------- */
@media(max-width:920px){
  .pd-banner-media{aspect-ratio:auto;height:46vh;min-height:300px;}
  .pd-title{padding-top:44px;}
  .pd-title h1{font-size:clamp(34px,8vw,48px);}
  .series-banner{aspect-ratio:21/9;height:auto;min-height:0;}
  .story-hero{min-height:58vh;}
  .story-intro{padding:60px 7vw 30px;}
  .story-sub-hero{grid-template-columns:1fr;gap:30px;padding-top:50px;}
  .story-sub-hero-media{height:400px;}
  .prose--narrow{padding:40px 7vw 80px;}
}

/* ============================================================
   新增：社媒單色官方 icon（footer）
   ============================================================ */
.social-row a{font-family:var(--sans);font-weight:500;text-decoration:none;}
.social-row a svg{width:20px;height:20px;display:block;}
.social-row a svg path,.social-row a svg circle,.social-row a svg rect{fill:currentColor;}
.social-mini a svg{width:15px;height:15px;display:block;}
.social-mini a svg path{fill:currentColor;}

/* ============================================================
   新增：法律頁 / 聯絡表單 / 會員 / 庫存 / 相關產品
   ============================================================ */
/* 法律頁（簡潔閱讀式） */
.legal-page{max-width:820px;margin:0 auto;padding:90px 6vw 110px;}
.legal-page .kicker{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);text-align:center;margin-bottom:16px;}
.legal-page h1{font-size:clamp(32px,5vw,52px);text-align:center;margin-bottom:40px;font-weight:500;}
.legal-page .legal-body{color:var(--ink-soft);font-size:16px;line-height:1.9;}
.legal-page .legal-body p{margin-bottom:2.2em;line-height:1.9;}
.legal-page .legal-body p:last-child{margin-bottom:0;}

/* 聯絡表單 */
.contact-form{max-width:560px;margin:30px auto 0;display:grid;gap:18px;}
.contact-form label{display:block;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.contact-form input,.contact-form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:0;font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink);resize:vertical;}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);}
.contact-form .form-note{font-size:13px;color:var(--gold-deep);text-align:center;min-height:18px;}
.contact-form button{justify-self:start;}

/* 會員 modal / dashboard */
.member-switch{display:flex;gap:0;margin-bottom:22px;border:1px solid var(--line);}
.member-switch button{flex:1;background:none;border:none;padding:12px;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:1px;color:var(--muted);transition:.2s;}
.member-switch button.active{background:var(--ink);color:#fff;}
.member-dash{max-width:760px;margin:0 auto;padding:90px 6vw 110px;}
.member-dash .m-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:14px;}
.member-dash h1{font-size:clamp(28px,4vw,42px);font-weight:500;}
.m-order-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:center;}
.m-order-row .m-no{font-family:var(--serif);font-weight:600;}
.m-order-row .m-status{padding:4px 12px;border:1px solid var(--gold);color:var(--gold-deep);font-size:11px;letter-spacing:1px;text-transform:uppercase;text-align:center;}
.m-orders-empty{color:var(--muted);text-align:center;margin-top:40px;}

/* 庫存徽章（產品卡 / 詳情） */
.stock-badge{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;margin-top:10px;border:1px solid var(--line);color:var(--muted);}
.stock-badge.low{color:var(--gold-deep);border-color:var(--line-gold);}
.stock-badge.out{color:#a8434a;border-color:#e6c9cb;}
.pd-stock{display:flex;justify-content:center;margin:6px 0 24px;}
.pd-stock .stock-badge{margin-top:0;}
/* 2026-09-16 Rocky：暫時隱藏「現貨」徽章功能 */
.pd-stock{display:none!important;}
/* 3. 居中文字段落 */
.pd-intro{max-width:720px;margin:0 auto;padding:40px 6vw 30px;text-align:center;}
.pd-intro .en{text-transform:uppercase;letter-spacing:5px;font-size:11px;color:var(--gold-deep);margin-bottom:14px;}
.pd-intro .z-detail{color:var(--ink-soft);font-size:16px;line-height:1.95;}

/* 相關產品（同系列） */
.related{max-width:1240px;margin:0 auto;padding:70px 6vw 110px;}
.related h2{font-family:var(--serif);font-size:clamp(26px,3.5vw,38px);text-align:center;margin-bottom:34px;font-weight:500;}
.related h2::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:18px auto 0;}

/* ---------- 收藏（心形） ---------- */
.fav-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;padding:9px 16px;font-size:13px;letter-spacing:.5px;font-family:var(--serif);transition:.2s;}
.fav-btn:hover{border-color:var(--gold);color:var(--gold-deep);}
.fav-btn .heart{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;transition:.25s ease;}
.fav-btn.on{color:var(--gold-deep);border-color:var(--gold);}
.fav-btn.on .heart{fill:var(--gold-deep);stroke:var(--gold-deep);transform:scale(1.15);transform-origin:center;}
.fav-btn--big{padding:13px 22px;font-size:14px;}
.fav-btn--big .heart{width:20px;height:20px;}
/* header 心形掣 */
#favBtn .heart{fill:none;stroke:currentColor;stroke-width:1.6;transition:.25s ease;}
#favBtn.has-fav .heart{fill:#c0392b;stroke:#c0392b;}

/* 產品頁：購買 + 收藏並排 */
.pd-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px;}
.pd-actions.center{justify-content:center;}
.product-card .pd-actions{justify-content:center;margin-top:16px;}
.product-card .fav-btn{padding:8px 14px;}

/* 收藏頁 */
.fav-page{max-width:1240px;margin:0 auto;padding:80px 6vw 110px;}
.fav-head{text-align:center;margin-bottom:42px;}
.fav-head h1{font-family:var(--serif);font-size:clamp(30px,4vw,46px);font-weight:500;}
.fav-head .fine{color:var(--muted);margin-top:10px;letter-spacing:1px;}
.favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.favorites-grid .product-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding-bottom:26px;}
.fav-empty{color:var(--muted);text-align:center;margin-bottom:30px;font-size:15px;line-height:1.8;}

/* 會員中心收藏列表 */
.m-fav-list{max-width:560px;}
.m-fav-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;}
.m-fav-row a{color:var(--ink);font-family:var(--serif);}
.m-fav-row .fav-btn{padding:5px 9px;}
.m-fav-row .fav-btn .fav-btn-label{display:none;}

/* 頂部收藏按鈕（與購物車共用 .icon-btn / .cart-count） */
#favBtn .cart-count{background:var(--gold-deep);}
#favBtn.on{color:var(--gold-deep);}

/* 付款方式（結賬成功頁） */
.pay-methods{display:grid;gap:12px;margin:18px 0 8px;text-align:left;}
.pay-method{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);padding:14px 16px;background:var(--paper-2);}
.pay-method .pm-ic{font-family:var(--serif);font-size:22px;color:var(--gold-deep);width:30px;text-align:center;}
.pay-method .pm-t{font-weight:500;font-size:14px;letter-spacing:.5px;}
.pay-method .pm-d{font-size:12px;color:var(--muted);margin-top:3px;}
.pay-note{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;}

/* 後台：庫存 / 訂單 / 匯出 */
.admin-section h3{margin-top:30px;}
.admin-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;}
.admin-table th,.admin-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;}
.admin-table th{background:var(--bg);font-weight:600;color:var(--mut);}
.admin-table input[type=number]{width:70px;padding:5px 6px;border:1px solid var(--line);}
.admin-box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:14px 0;}
.admin-box p{font-size:13px;color:var(--mut);margin:0 0 10px;}
.inv-status{font-size:13px;color:var(--gold-deep);min-height:16px;margin-top:8px;}

/* ---------- EDITORIAL Z 形圖文段落（1080×1350 / 4:5 直幅，無 Banner） ---------- */
/* 對齊產品頁：相片 full-bleed 鋪滿半屏，min-height 同產品頁 60vh 一致 */
.ed-row{ min-height:60vh; align-items:stretch; }
.ed-row .zig-media.ed-media-wrap{ min-height:60vh; background:var(--paper-2); }
.ed-media{ width:100%; height:100%; overflow:hidden; background:var(--paper-2); }
.ed-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.ed-media .img-slot{ width:100%; height:100%; display:grid; place-items:center; }
.ed-zig .zig-text .z-detail{ white-space:pre-line; }
.ed-zig{ padding-bottom:30px; }

@media(max-width:920px){
  .ed-row{ min-height:0; }
  .ed-row .zig-media.ed-media-wrap{ min-height:62vh; }
  .ed-media{ width:100%; height:100%; }
}

/* ===== 桌面版內文放大 20%（2026-09-16 Rocky 要求）=====
   只針對「閱讀用內文」：引言、章節簡介、個案正文、產品描述。
   唔掂 10–13px 嘅按鈕／標籤／圖說，避免爆版。
   16px→19.2px ｜ 15px→18px ｜ 14px→16.8px */
@media(min-width:921px){
  .zig-head p,.section-head p,.series-hero p{font-size:19.2px;}
  .detail .desc,.detail .cn{font-size:19.2px;}
  .zig-text .z-desc{font-size:19.2px;}
  .zig-text .z-detail,
  .zig--story .zig-text .z-detail,
  .pd-wear .z-detail,
  .pd-intro .z-detail{font-size:19.2px;}
  .zig-text .z-notes{font-size:18px;}
  .feature p{font-size:16.8px;}
}

/* ---------- COOKIE CONSENT BAR (2026-09-21) ---------- */
/* z-index 刻意定 56：高過頁面內容同 sticky header(50)，但低過 overlay(60)／購物袋(70)／
   彈窗(80)。咁樣開購物袋或結賬彈窗時，橫額唔會蓋住「去結賬」「立即付款」等關鍵按鈕。 */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--paper);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.10);
  padding:14px 6vw;transition:opacity .3s ease,transform .3s ease;}
.cookie-bar[hidden]{display:none;}
.cookie-bar.hide{opacity:0;transform:translateY(100%);}
.cookie-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap;justify-content:space-between;}
.cookie-txt{flex:1 1 420px;margin:0;color:var(--muted);font-size:13px;line-height:1.7;}
.cookie-btns{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.cookie-ok{padding:11px 26px;font-size:11px;letter-spacing:2px;}
.cookie-more{font-size:12px;color:var(--gold-deep);letter-spacing:.5px;text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s;}
.cookie-more:hover{border-bottom-color:var(--gold);}
/* 橫額顯示時抬高 WhatsApp 浮動掣，避免被遮住 */
body.has-cookie .wa-fab{bottom:calc(88px + env(safe-area-inset-bottom));}
@media(max-width:640px){
  .cookie-bar{padding:12px 5vw calc(12px + env(safe-area-inset-bottom));}
  .cookie-inner{gap:12px;}
  .cookie-txt{flex:1 1 100%;font-size:12.5px;}
  .cookie-btns{width:100%;justify-content:space-between;}
  body.has-cookie .wa-fab{bottom:calc(148px + env(safe-area-inset-bottom));}
}

/* ---------- CHECKOUT 專業兩欄式 (2026-09-23) ---------- */
.co-box{width:min(940px,100%);padding:34px 34px 30px;}
.co-h{font-family:var(--serif);font-size:26px;font-weight:500;margin-bottom:22px;}
.co-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:start;}
.co-sec{margin-bottom:22px;}
.co-sec-h{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:11px;
  color:var(--gold-deep);margin:0 0 12px;font-weight:500;}
.co-grid label{display:block;margin-bottom:14px;}
.co-grid label>span{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;letter-spacing:.5px;}
.co-grid .req{color:var(--gold-deep);font-style:normal;font-size:12px;margin-left:3px;}
.co-grid input,.co-grid select,.co-grid textarea{width:100%;border:1px solid var(--line);background:#fff;
  padding:12px 14px;font-size:14px;font-family:var(--sans);color:var(--ink);outline:none;transition:.2s;border-radius:0;}
.co-grid input:focus,.co-grid select:focus,.co-grid textarea:focus{border-color:var(--gold);}
.co-side{background:var(--paper-2);border:1px solid var(--line);padding:20px 20px 18px;position:sticky;top:0;}
.co-items{max-height:236px;overflow-y:auto;margin-bottom:12px;}
.co-item{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);}
.co-item .ci-img{width:44px;height:56px;flex:0 0 auto;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;}
.co-item .ci-img img{width:100%;height:100%;object-fit:cover;}
.co-item .ci-mid{flex:1 1 auto;min-width:0;}
.co-item .ci-name{font-size:13px;line-height:1.4;}
.co-item .ci-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.co-item .ci-price{font-size:13px;white-space:nowrap;margin-left:8px;}
.co-line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-soft);padding:5px 0;}
.co-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:8px;padding-top:12px;}
.co-total span{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-soft);}
.co-total strong{font-family:var(--serif);font-size:24px;font-weight:600;}
.co-pay{margin-top:16px;padding:16px 20px;font-size:13px;letter-spacing:2px;width:100%;}
/* 付款掣：桌面只用右欄嘅；手機改用表單最底嘅（避免未填資料就見到付款掣） */
.co-pay-foot{display:none;margin-top:20px;}
.co-secure{font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px;}
.co-legal{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:14px;}
.co-legal a{font-size:11.5px;color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;transition:.2s;}
.co-legal a:hover{border-bottom-color:var(--gold);}
.co-redirect{margin-top:16px;padding:16px;border:1px solid var(--gold);background:var(--paper-2);text-align:center;}
.co-redirect .cr-t{font-size:13px;color:var(--ink);margin-bottom:10px;}
.co-redirect a{display:inline-block;background:var(--gold);color:#fff;padding:12px 22px;font-size:12px;letter-spacing:1.5px;text-decoration:none;}
/* 付款方式：一列列（專業感） */
.pay-choice{margin:0;padding:0;border:none;background:none;}
.pc-label{display:none;}
.pc-opt{display:flex;align-items:center;gap:11px;padding:14px 15px;margin-bottom:9px;border:1px solid var(--line);
  background:#fff;cursor:pointer;transition:.2s;font-size:14px;line-height:1.4;}
.pc-opt:hover{border-color:var(--gold);}
.pc-opt:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.pc-opt input[type="radio"]{margin:0;flex:0 0 auto;accent-color:var(--gold-deep);}
@media(max-width:760px){
  .co-box{width:100%;padding:24px 18px;max-height:94vh;}
  .co-grid{grid-template-columns:1fr;gap:18px;}
  .co-side{position:static;order:-1;}
  .co-items{max-height:none;}
  .co-pay-side{display:none;}      /* 手機：隱藏摘要卡內嘅付款掣 */
  .co-pay-foot{display:block;}     /* 手機：付款掣改放表單最底 */
}
/* 會員中心：訂單列 + 「立即付款」 */
.m-order-list{display:flex;flex-direction:column;gap:10px;}
.m-order-row{display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid var(--line);background:#fff;font-size:14px;}
.m-order-row .m-no{font-family:var(--serif);letter-spacing:.5px;color:var(--ink);}
.m-order-row .m-status{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);padding:3px 9px;border-radius:999px;white-space:nowrap;}
.m-pay{background:var(--ink);color:#fff;border:1px solid var(--ink);padding:9px 16px;font-size:11.5px;
  letter-spacing:1.5px;cursor:pointer;transition:.2s;white-space:nowrap;font-family:inherit;}
.m-pay:hover{background:var(--gold);border-color:var(--gold);}
.m-pay:disabled{opacity:.55;cursor:default;}
@media(max-width:760px){
  .m-order-row{grid-template-columns:1fr auto;row-gap:8px;}
  .m-pay{grid-column:1 / -1;width:100%;padding:12px;}
}