/* theme */
:root{--blue:#1d3557;--ink:#1a1a1a;--muted:#666;--bg:#faf9f7;--line:#e8e4dc}
*{box-sizing:border-box}
html,body{width:100%;margin:0}
body{font-family:"DM Sans","Noto Sans TC",sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 6vw;background:#fff;border-bottom:1px solid var(--line)}
.site-logo{display:flex;align-items:center;gap:10px;font-family:Unna,serif;font-size:1.35rem;letter-spacing:.1em;color:var(--blue)}
.site-logo img{height:32px;width:auto}
.site-nav{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}
.site-nav a{font-size:.88rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.site-nav a:hover{color:var(--blue)}
.cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);background:#fff}
.cart-link svg{width:20px;height:20px;fill:var(--blue)}
#shop_quantity{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--blue);color:#fff;font-size:.7rem;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hero{width:100%;min-height:70vh;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:72px 6vw;background:linear-gradient(90deg,#f3efe7,#fff 45%,#e8eef6)}
.hero > div, .hero-copy{max-width:560px}
.hero h1,.hero-copy h1{margin:0 0 14px;font-family:Unna,serif;font-weight:400;font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:.04em;color:#111;line-height:1.15}
.hero p,.hero-copy p{margin:0 0 28px;color:var(--muted)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 24px;border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:.9rem;letter-spacing:.04em;cursor:pointer}
.btn.primary{background:var(--blue);color:#fff}
.btn.ghost,.btn.outline{background:transparent;color:var(--blue)}
.btn.ghost{border-color:#999;color:#444}
.btn.outline{background:#fff}

/* homepage hero-well / chapter (used by index) */
.hero-well{padding:88px 6vw 56px;text-align:center;background:linear-gradient(180deg,#f3efe7 0%,#fff 55%,var(--bg))}
.hero-well .kicker{color:var(--blue);letter-spacing:.22em;text-transform:uppercase;font-size:.75rem;margin-bottom:16px;font-weight:500}
.hero-well h1{margin:0 auto 16px;max-width:18ch;font-family:Unna,serif;font-weight:400;font-size:clamp(2.1rem,5vw,3.4rem);color:var(--blue);line-height:1.2}
.hero-well p{margin:0 auto 28px;max-width:520px;color:var(--muted);font-size:1.02rem}
.hero-well .btn{margin-top:4px}
.chapter{padding:56px 6vw;border-top:1px solid var(--line);display:grid;grid-template-columns:160px 1.2fr .9fr;gap:28px;align-items:center;background:#fff}
.chapter .label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);opacity:.75}
.chapter h2{margin:0 0 10px;font-family:Unna,serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--blue)}
.chapter p{margin:0;color:var(--muted)}
.chapter img{max-height:240px;object-fit:contain;margin:0 auto;background:#fff;padding:18px;border:1px solid var(--line)}
.pack-grid{max-width:1100px;margin:0 auto;padding:12px 6vw 56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pack-card{display:block;padding:22px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.pack-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.pack-card img{width:100%;height:150px;object-fit:contain;margin:0 0 14px}
.pack-card h3{margin:0 0 8px;font-family:Unna,serif;font-weight:400;font-size:1.35rem;color:var(--blue)}
.pack-card .meta{color:var(--muted);font-size:.92rem}
.site-footer{background:#1a1a1a;color:#ddd;padding:40px 6vw;font-family:Unna,serif;letter-spacing:.06em;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-footer a{color:#ddd;margin-right:14px;font-family:"DM Sans","Noto Sans TC",sans-serif;letter-spacing:.02em;font-size:.9rem}
.site-footer a:hover{color:#fff}
.section{padding:64px 6vw;width:100%}
.section-title{text-align:left;margin-bottom:36px;border-bottom:1px solid var(--line);padding-bottom:16px}
.section-title h2{margin:0 0 6px;font-family:Unna,serif;font-weight:400;font-size:2rem;color:var(--blue)}
.section-title p{margin:0;color:var(--muted)}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.p-card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:28px 0 8px;text-align:left;box-shadow:none}
.p-card img{width:100%;max-height:280px;object-fit:contain;margin-bottom:16px;background:#fff}
.p-card h3{margin:0 0 6px;font-family:Unna,serif;font-weight:400;font-size:1.5rem;color:var(--blue)}
.p-card .desc{color:var(--muted);font-size:.9rem;margin-bottom:8px}
.p-card .price{color:#111;font-weight:600;margin-bottom:14px}
.badge{display:inline-block;background:transparent;color:var(--blue);border:1px solid var(--blue);font-size:.72rem;padding:2px 10px;border-radius:0;margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}
.trust{background:#fff;padding:56px 6vw;border-top:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.trust-item{background:transparent;border-top:1px solid var(--line);border-radius:0;padding:20px 0;text-align:left;box-shadow:none}
.site-footer{background:#1a1a1a;color:#ddd;padding:40px 6vw;font-family:Unna,serif;letter-spacing:.06em}
.site-footer a{color:#ddd}
.page-hero{padding:56px 6vw 28px;background:linear-gradient(90deg,#f3efe7,#fff);border-bottom:1px solid var(--line)}
.page-hero h1{margin:0 0 8px;font-family:Unna,serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--blue)}
.page-hero p{margin:0;color:var(--muted)}
.page-content{padding:40px 6vw 64px;max-width:860px}
.page-content h2{font-family:Unna,serif;font-weight:400;color:var(--blue);margin:28px 0 10px}
.info-table{width:100%;border-collapse:collapse;margin:12px 0 24px}
.info-table td{border:1px solid var(--line);padding:12px 14px;background:#fff}
.detail{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;padding:40px 6vw 64px;max-width:1100px;margin:0 auto;align-items:start}
.detail-img{background:#fff;border:1px solid var(--line);padding:28px;align-self:start;height:fit-content}
.detail-img img{max-height:400px;object-fit:contain;margin:0 auto}
.detail h1{margin:8px 0 4px;font-family:Unna,serif;font-weight:400;font-size:2rem;color:var(--blue)}
.detail h2{margin:0 0 16px;color:var(--muted);font-size:1rem;font-weight:500}
.spec-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.spec-table td{border:1px solid var(--line);padding:11px 14px;background:#fff}
.spec-table td:first-child{width:32%;background:#f5f2ec;color:var(--muted)}
.warning{background:#fff8ec;border:1px solid #e8d3a8;color:#7a5a16;padding:12px 14px;margin-bottom:14px;font-size:.92rem}
.detail-price{font-size:1.5rem;font-weight:700;color:#111;margin:10px 0 16px}
.qty-row{display:inline-flex;border:1px solid var(--line);overflow:hidden;background:#fff;margin:0 12px 16px 0;vertical-align:middle}
.qty-row button,.qty-btn{width:42px;height:42px;border:0;background:#f5f2ec;cursor:pointer;color:var(--ink);font-size:1.1rem}
.qty-row input{width:52px;height:42px;border:0;text-align:center;font-size:1rem}
.related{margin-top:20px;display:flex;gap:16px;flex-wrap:wrap}
.related a{color:var(--blue);font-weight:600}
.breadcrumb{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 16px;color:var(--muted);font-size:.9rem;flex-wrap:wrap}
.breadcrumb li::after{content:"/";margin-left:8px;opacity:.5}
.breadcrumb li:last-child::after{content:""}
.site-footer .brand{margin-bottom:12px}
.site-footer .links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.site-footer .copy{opacity:.8;font-size:.88rem;font-family:"DM Sans",sans-serif;letter-spacing:0}
.article-cover img{width:100%;max-height:280px;object-fit:contain;background:#fff;margin-bottom:14px;border:1px solid var(--line)}
.article-meta{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.article-cta{margin-top:24px}
.cart-page{padding:40px 6vw 64px;max-width:920px;margin:0 auto}
.cart-empty,.cart-item{background:#fff;border:1px solid var(--line);padding:20px;margin-bottom:12px}
.cart-empty{text-align:center;padding:48px 20px}
.cart-item{display:grid;grid-template-columns:80px 1fr auto auto auto;gap:14px;align-items:center}
.cart-item img{width:80px;height:80px;object-fit:contain}
.cart-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end;margin-top:16px}
.cart-summary .total{margin-right:auto;font-size:1.25rem;font-weight:700;color:var(--blue)}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .product-grid,.pack-grid{grid-template-columns:1fr}
  .chapter{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
  .cart-item{grid-template-columns:70px 1fr}
}

/* layout polish */
@media(max-width:900px){
  .site-header{padding:12px 16px !important}
  .site-nav{gap:4px 12px !important}
  .site-nav a{font-size:.78rem !important;text-transform:none !important}
  .hero-well{padding:56px 16px 36px !important}
  .chapter{padding:36px 16px !important}
}

/* sticky-footer */
html{height:100%}
body{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
body > .site-header{flex:0 0 auto;width:100%}
body > .page-hero,
body > .pack-grid,
body > .section,
body > .hero-well,
body > .chapter,
body > .x-arts,
body > main{flex:0 0 auto;width:100%}
body > .site-footer{
  margin-top:auto;
  flex:0 0 auto;width:100%;
}
.site-footer-outer{
  margin-top:auto;
  flex:1 0 auto;width:100%;min-height:0;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:transparent;
}
.site-footer-outer > .site-footer{width:100%;flex:0 0 auto;margin-top:0}