:root{--teal:#066885;--mint:#1abc9c;--deep:#0a445b;--ink:#12343f;--muted:#5a7a86;--bg:#f3fafb;--line:#cfe3e8;--sand:#eef6f4}
*{box-sizing:border-box}html,body{margin:0;width:100%}
body{font-family:"Noto Sans TC",sans-serif;color:var(--ink);background:var(--bg);line-height:1.75}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;background:transparent;color:#fff;mix-blend-mode:difference}
.site-header.is-solid{background:rgba(243,250,251,.92);color:var(--deep);mix-blend-mode:normal;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.site-logo{font-family:"Cormorant Garamond",serif;font-size:1.6rem;letter-spacing:.12em}
.site-logo img{display:none}
.site-nav{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.site-nav li{display:flex;flex:0 0 auto}
.site-nav a{font-size:.8rem;letter-spacing:.1em;text-transform:none;white-space:nowrap}
.cart-link{position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor}
.cart-link svg{width:16px;height:16px;fill:currentColor}
#shop_quantity{position:absolute;top:-8px;right:-8px;min-width:16px;height:16px;border-radius:8px;background:var(--mint);color:#fff;font-size:.65rem;display:flex;align-items:center;justify-content:center}
.hero-edit{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 6vw 64px;background:
  linear-gradient(180deg,rgba(10,68,91,.25),rgba(6,104,133,.82)),
  url("../images/bg/blue-bg.jpg") center/cover no-repeat;
  color:#fff}
.hero-edit .label{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;opacity:.85;margin-bottom:18px}
.hero-edit h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(3rem,8vw,5.5rem);line-height:.95;margin:0 0 18px;max-width:10ch}
.hero-edit p{max-width:420px;margin:0 0 28px;opacity:.92}
.btn{display:inline-block;padding:12px 24px;border:1px solid currentColor;background:transparent;color:inherit;letter-spacing:.08em;font-size:.85rem;cursor:pointer}
.btn.fill{background:var(--mint);border-color:var(--mint);color:#fff}
.btn.dark{background:var(--deep);border-color:var(--deep);color:#fff}
.band{display:grid;grid-template-columns:140px 1fr 1fr;gap:24px;align-items:center;padding:72px 6vw;border-bottom:1px solid var(--line);background:#fff}
.band:nth-child(even){background:var(--sand)}
.band .idx{font-family:"Cormorant Garamond",serif;font-size:4rem;color:var(--teal);line-height:1}
.band .copy h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:2.4rem;margin:0 0 10px;color:var(--deep)}
.band .copy p{margin:0 0 18px;color:var(--muted);max-width:420px}
.band .copy .price{font-size:1.3rem;font-weight:700;color:var(--teal);margin-bottom:16px}
.band img{max-height:280px;object-fit:contain;margin:0 auto}
.story{padding:80px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.story h2{font-family:"Cormorant Garamond",serif;font-size:2.8rem;font-weight:500;margin:0 0 14px;color:var(--deep);line-height:1.15}
.story p{color:var(--muted);margin:0 0 12px}
.site-footer{background:var(--deep);color:#dff3f6;padding:48px 6vw;display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.site-footer .big{font-family:"Cormorant Garamond",serif;font-size:2rem;margin-bottom:10px}
.site-footer a{color:#dff3f6;margin-right:14px;font-size:.88rem}
.page-hero{padding:140px 6vw 40px;background:linear-gradient(180deg,#d8eef2,var(--bg))}
.page-hero h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2.4rem,5vw,3.6rem);margin:0 0 8px;color:var(--deep)}
.page-hero p{margin:0;color:var(--muted)}
.page-content{padding:24px 6vw 64px;max-width:760px}
.page-content h2{font-family:"Cormorant Garamond",serif;font-size:1.9rem;font-weight:500;color:var(--deep);margin:28px 0 8px}
.info-table{width:100%;border-collapse:collapse;margin:12px 0 20px}
.info-table td{border-bottom:1px solid var(--line);padding:12px 4px}
.detail{padding:40px 6vw 64px;display:grid;grid-template-columns:1fr 1fr;gap:40px;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:420px;object-fit:contain;margin:0 auto}
.detail h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:2.6rem;margin:8px 0 6px;color:var(--deep)}
.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-bottom:1px solid var(--line);padding:10px 4px}
.warning{background:#fff8e8;border-left:3px solid #d4a017;padding:12px 14px;margin-bottom:14px;font-size:.92rem}
.detail-price{font-size:1.6rem;font-weight:700;color:var(--teal);margin:8px 0 14px}
.qty-row{display:inline-flex;border:1px solid var(--line);margin:0 10px 14px 0;background:#fff}
.qty-row button,.qty-btn{width:40px;height:40px;border:0;background:var(--sand);cursor:pointer}
.qty-row input{width:48px;height:40px;border:0;text-align:center}
.related{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap}
.related a{color:var(--teal);border-bottom:1px solid var(--teal)}
.badge{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--teal);padding-bottom:2px;margin-bottom:8px}
.breadcrumb{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 12px;color:var(--muted);font-size:.85rem}
.breadcrumb li::after{content:"·";margin-left:8px}.breadcrumb li:last-child::after{content:""}
.article-cover img{width:100%;max-height:280px;object-fit:contain;background:#fff;margin-bottom:14px}
.cart-page{padding:140px 6vw 64px;max-width:920px}
.cart-empty,.cart-item{background:#fff;border:1px solid var(--line);padding:18px;margin-bottom:12px}
.cart-empty{text-align:center;padding:48px}
.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.3rem;font-weight:700;color:var(--teal)}
@media(max-width:900px){
  .band,.story,.detail,.site-footer{grid-template-columns:1fr}
  .band .idx{font-size:3rem}
  .cart-item{grid-template-columns:70px 1fr}
  .site-header{mix-blend-mode:normal;background:rgba(243,250,251,.94);color:var(--deep);border-bottom:1px solid var(--line)}
}

/* layout polish */
@media(max-width:900px){
  .site-nav{gap:16px !important}
  .band{padding-left:16px !important;padding-right:16px !important}
  .hero-edit{padding:100px 16px 48px !important}
  .hero-edit h1{max-width:none !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 > .band,
body > .story,
body > .hero-edit,
body > .section,
body > .detail,
body > main{flex:0 0 auto;width:100%}
.site-footer-outer{
  flex:1 0 auto;width:100%;min-height:0;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--deep,#0a445b);
}
.site-footer-outer > .site-footer{width:100%;flex:0 0 auto}
@media (max-width:900px){
  body{min-height:auto;display:block}
  .site-footer-outer{flex:none}
}