/*
Theme Name: Timedrip Child
Theme URI: https://thetimedrip.com
Description: 風格菸酒 大安店 — 暗色酒窖×吧檯暖光（prototype v1 移植）
Author: TIME DRIP
Template: twentytwentyfive
Version: 0.1.0
Text Domain: timedrip
*/

/* timedrip prototype v1 — Dark Cellar Warm
   設計來源：DESIGN_SYSTEM.md v1｜2026-09-13 */
:root{
  --bg:#0F0E0C; --bg-elev:#1A1815; --bg-soft:#141210;
  --accent:#C9A24B; --text:#F5F1E8; --text-dim:#B9B2A4;
  --wood:#6B4F3A; --amber:#D98E48;
  --line:rgba(201,162,75,.22);
  --radius:14px; --radius-lg:20px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --font-serif:"Noto Serif TC","Source Han Serif TC","Songti TC",'Times New Roman',serif;
  --font-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --w:min(1180px,92vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-serif); font-weight:600; line-height:1.35; letter-spacing:.02em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:var(--w); margin-inline:auto}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.eyebrow{font-size:.8rem; letter-spacing:.35em; text-transform:uppercase; color:var(--accent)}
.lead{color:var(--text-dim); max-width:56ch}
.glow{
  background:
    radial-gradient(60% 55% at 70% 25%, rgba(217,142,72,.20), transparent 65%),
    radial-gradient(50% 45% at 20% 80%, rgba(201,162,75,.12), transparent 60%),
    var(--bg);
}
/* ── 18+ 入口層 ─────────────────────────── */
.agegate{
  position:fixed; inset:0; z-index:100; display:flex;
  background:rgba(10,9,8,.96); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; text-align:center;
}
.agegate[hidden]{display:none}
.agegate .card{
  width:min(520px,90vw); padding:44px 36px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--bg-elev); box-shadow:var(--shadow);
}
.agegate h2{margin:10px 0 6px; font-size:1.5rem}
.agegate p{color:var(--text-dim); font-size:.92rem}
.agegate .row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; justify-content:center}
/* ── Header ─────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(15,14,12,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{
  width:var(--w); margin-inline:auto; display:flex; align-items:center;
  justify-content:space-between; height:64px;
}
.brand{display:flex; flex-direction:column; line-height:1.2}
.brand .en{font-family:var(--font-serif); letter-spacing:.14em; font-size:.95rem; color:var(--text)}
.brand .zh{font-size:.72rem; color:var(--text-dim); letter-spacing:.28em}
.brand--logo{flex-direction:row; align-items:center; gap:12px}
.brand--logo .brand-text{display:flex; flex-direction:column; line-height:1.25}
.brand-mark{
  width:40px; height:40px; border-radius:9px; background:#fff;
  border:1px solid rgba(201,162,75,.35); padding:2px; object-fit:contain;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.brand-mark--dark{
  background:#0A0A0A; border-color:rgba(245,241,232,.18); padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.nav{display:flex; gap:26px; font-size:.85rem}
.nav a{color:var(--text-dim); transition:color .15s ease}
.nav a:hover,.nav a:focus{color:var(--accent)}
.nav .cta{color:var(--accent)}
/* ── Buttons ────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  padding:.85em 1.6em; border-radius:999px; border:1px solid var(--accent);
  font-size:.9rem; letter-spacing:.06em; cursor:pointer; transition:all .18s ease;
  background:transparent; color:var(--accent); font-family:var(--font-sans);
}
.btn:hover,.btn:focus{background:rgba(201,162,75,.12); box-shadow:0 0 0 4px rgba(201,162,75,.08)}
.btn--solid{background:var(--accent); color:#191408; border-color:var(--accent)}
.btn--solid:hover{background:#d8b25c; box-shadow:0 8px 26px rgba(201,162,75,.28)}
.btn--ghost{border-color:rgba(245,241,232,.28); color:var(--text)}
.btn--ghost:hover{background:rgba(245,241,232,.06)}
/* ── Hero ───────────────────────────────── */
.hero{padding:120px 0 96px; position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:auto -20% -40% -20%; height:70%;
  background:radial-gradient(50% 60% at 50% 40%, rgba(217,142,72,.16), transparent 70%);
  pointer-events:none;
}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem); margin:14px 0 18px}
.hero .sub{color:var(--text-dim); max-width:52ch; margin-bottom:30px}
.hero .row{display:flex; gap:14px; flex-wrap:wrap}
.hero .meta{display:flex; gap:28px; margin-top:42px; color:var(--text-dim); font-size:.82rem; flex-wrap:wrap}
.hero .meta b{color:var(--accent); font-family:var(--font-serif); font-size:1.05rem; margin-right:.4em}
/* ── Section head ───────────────────────── */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:38px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.sec-head .more{color:var(--accent); font-size:.85rem}
/* ── Product grid ───────────────────────── */
.grid-products{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.pcard{
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px 18px; position:relative; transition:all .2s ease; overflow:hidden;
}
.pcard::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  opacity:0; transition:opacity .2s ease;
}
.pcard:hover{transform:translateY(-4px); border-color:rgba(201,162,75,.45); box-shadow:var(--shadow)}
.pcard:hover::before{opacity:1}
.pcard .bottle{
  height:150px; border-radius:10px; margin-bottom:16px;
  background:
    radial-gradient(38% 60% at 50% 108%, rgba(217,142,72,.55), transparent 70%),
    linear-gradient(180deg, rgba(201,162,75,.12), rgba(15,14,12,.2)),
    var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); color:rgba(201,162,75,.55); letter-spacing:.3em; font-size:.7rem;
  border:1px solid rgba(201,162,75,.14);
}
.pcard h3{font-size:1rem; margin-bottom:2px}
.pcard .region{color:var(--text-dim); font-size:.78rem; letter-spacing:.08em}
.pcard .tags{display:flex; gap:6px; margin:10px 0 14px; flex-wrap:wrap}
.tag{font-size:.68rem; padding:.25em .7em; border-radius:999px; border:1px solid var(--line); color:var(--text-dim)}
.tag--gold{border-color:rgba(201,162,75,.5); color:var(--accent)}
.pcard .price{font-size:.8rem; color:var(--text-dim); margin-bottom:12px}
.pcard .btn{width:100%; padding:.65em 1em; font-size:.82rem}
/* ── Lounge（吧檯）─────────────────────── */
.lounge{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.lounge .visual{
  aspect-ratio:4/3; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:
    radial-gradient(52% 42% at 62% 38%, rgba(217,142,72,.35), transparent 70%),
    radial-gradient(40% 60% at 25% 75%, rgba(107,79,58,.5), transparent 70%),
    linear-gradient(160deg,#221d17,#0d0c0a);
  position:relative;
}
.lounge .visual::after{
  content:""; position:absolute; inset:auto 12% 10% 12%; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.6;
}
.lounge h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:12px 0 16px}
.lounge ul{list-style:none; margin:18px 0 26px}
.lounge li{padding-left:1.4em; position:relative; color:var(--text-dim); margin-bottom:8px}
.lounge li::before{content:"◆"; position:absolute; left:0; color:var(--accent); font-size:.6em; top:.55em}
/* ── Art strip ──────────────────────────── */
.art{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.art .frame{
  aspect-ratio:4/5; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));
  display:flex; align-items:flex-end; padding:20px; position:relative; overflow:hidden;
}
.art .frame::before{content:""; position:absolute; inset:12%; border:1px solid rgba(201,162,75,.25); border-radius:8px}
.art .frame:nth-child(2)::before{inset:18% 20%; border-color:rgba(125,60,60,.5)}
.art .frame:nth-child(3)::before{inset:16% 14%; border-color:rgba(90,125,90,.45)}
.art .cap{font-family:var(--font-serif); font-size:.85rem; color:var(--text-dim); letter-spacing:.1em}
/* ── Notes ──────────────────────────────── */
.notes{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.note{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft)); transition:border-color .2s ease;
}
.note:hover{border-color:rgba(201,162,75,.45)}
.note .k{font-size:.72rem; letter-spacing:.3em; color:var(--accent); text-transform:uppercase}
.note h3{margin:10px 0 8px; font-size:1.15rem}
.note p{color:var(--text-dim); font-size:.9rem}
/* ── Store ──────────────────────────────── */
.store{display:grid; grid-template-columns:1fr 1fr; gap:48px}
.store .info dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin-top:20px}
.store dt{color:var(--accent); font-size:.85rem; letter-spacing:.08em}
.store dd{color:var(--text-dim); font-size:.92rem}
.store .map{
  border-radius:var(--radius-lg); border:1px solid var(--line); min-height:320px;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(217,142,72,.14), transparent 70%),
    linear-gradient(160deg,#191612,#0d0c0a);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:.85rem;
}
/* ── Footer ─────────────────────────────── */
.foot{border-top:1px solid var(--line); padding:44px 0; color:var(--text-dim); font-size:.8rem}
.foot .cols{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot .warn{margin-top:22px; padding-top:18px; border-top:1px dashed rgba(185,178,164,.25); letter-spacing:.12em}
/* ── 詢價 Drawer ────────────────────────── */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(430px,94vw); z-index:90;
  background:var(--bg-elev); border-left:1px solid var(--line);
  transform:translateX(102%); transition:transform .25s ease; padding:34px 30px; overflow:auto;
  box-shadow:-30px 0 60px rgba(0,0,0,.5);
}
.drawer.open{transform:translateX(0)}
.drawer h3{font-size:1.25rem; margin-bottom:6px}
.drawer .sub{color:var(--text-dim); font-size:.85rem; margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block; font-size:.78rem; color:var(--text-dim); letter-spacing:.06em; margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%; padding:.8em .9em; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-soft); color:var(--text); font-family:var(--font-sans); font-size:.92rem;
}
.field input:focus,.field textarea:focus{outline:2px solid rgba(201,162,75,.5); border-color:transparent}
.drawer .close{
  position:absolute; top:18px; right:18px; background:none; border:none; color:var(--text-dim);
  font-size:1.5rem; cursor:pointer; line-height:1;
}
.steps{display:flex; gap:8px; margin-bottom:18px; font-size:.72rem; color:var(--text-dim)}
.steps b{color:var(--accent)}
/* ── Responsive ─────────────────────────── */
@media (max-width:980px){
  .grid-products{grid-template-columns:repeat(2,1fr)}
  .lounge,.store{grid-template-columns:1fr; gap:34px}
  .notes{grid-template-columns:1fr}
  .art{grid-template-columns:repeat(3,1fr); gap:12px}
}
@media (max-width:620px){
  .section{padding:64px 0}
  .hero{padding:84px 0 64px}
  .nav{display:none}
  .grid-products{grid-template-columns:1fr 1fr; gap:14px}
  .pcard{padding:16px 14px 14px}
  .pcard .bottle{height:110px}
  .art{grid-template-columns:1fr 1fr}
  .foot .cols{flex-direction:column}
}
/* 淺色 fallback：手動切換（data-theme="light"）；深色為品牌預設
   （註：「跟隨系統」列為正式版決策點——原型以深色為主展示） */
:root[data-theme="light"]{--bg:#F7F3EA; --bg-elev:#FFFFFF; --bg-soft:#F1EBDE; --text:#241F17; --text-dim:#6B6252; --line:rgba(120,90,40,.25)}
:root[data-theme="light"] .site-head{background:rgba(247,243,234,.9)}
:root[data-theme="light"] .btn{color:#7A5B14}
:root[data-theme="light"] .btn--solid{background:#B98A2E; color:#fff}
:root[data-theme="light"] .pcard{background:linear-gradient(180deg,#fff,#F1EBDE)}
:root[data-theme="light"] .pcard .bottle{background:radial-gradient(38% 60% at 50% 108%, rgba(185,138,46,.4), transparent 70%),linear-gradient(180deg, rgba(185,138,46,.1), rgba(255,255,255,.5)),#EFE8D9}
:root[data-theme="light"] .foot .warn{border-top-color:rgba(120,90,40,.3)}
.nav-theme{background:none;border:1px solid var(--line);color:var(--text-dim);border-radius:999px;padding:.22em .75em;cursor:pointer;font-size:.9rem;line-height:1.6}
.nav-theme:hover{color:var(--accent);border-color:rgba(201,162,75,.5)}