:root{
  --bg-cream:#fffaeb; --brand-gold:#bf9b60; --brand-rose:#e1aeac;
  --ink:#5d4037; --muted:#a08b86; --line:#f0e6d2; --card:#fffdf7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-cream);color:var(--ink);
  font-family:'Inter','Sarabun',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--line);background:var(--bg-cream);
  position:sticky;top:env(safe-area-inset-top,0);z-index:10}
.site-header .brand{display:flex;align-items:center;gap:12px;text-decoration:none;
  font-family:'Playfair Display',serif;font-size:22px;color:var(--brand-gold);font-weight:700}
.site-header .brand img{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);object-fit:cover}
.site-header nav a{margin-left:20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.site-header nav a:hover{color:var(--brand-gold)}
.wrap{max-width:1040px;margin:0 auto;padding:28px 24px 56px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:20px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand-gold)}
h1{font-family:'Playfair Display',serif;color:var(--ink);line-height:1.2;margin:0 0 6px}
h2{font-family:'Playfair Display',serif;color:var(--brand-gold);margin:32px 0 12px;font-size:22px}
.lead{font-size:17px;color:#7c5e58;margin:0 0 8px}
/* product hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:720px){.hero{grid-template-columns:1fr}}
.hero .photo{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center}
.hero .photo img{border-radius:10px}
.pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-gold);background:#faf3e3;border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin-bottom:10px}
.price{font-size:30px;font-weight:800;color:var(--brand-gold);margin:8px 0}
.stock{font-size:13px;font-weight:700;display:inline-block;padding:3px 10px;border-radius:6px}
.stock.in{color:#1a7f4b;background:#e8f6ee}
.stock.out{color:#b42318;background:#fdecea}
.cta{display:inline-block;margin-top:18px;background:var(--brand-rose);color:#fff;text-decoration:none;
  font-weight:700;letter-spacing:.05em;padding:14px 28px;border-radius:999px;transition:filter .2s}
.cta:hover{filter:brightness(1.05)}
ul.contents{list-style:none;padding:0;margin:10px 0}
ul.contents li{padding:7px 0 7px 26px;border-bottom:1px solid var(--line);position:relative}
ul.contents li:before{content:"•";color:var(--brand-rose);position:absolute;left:8px;font-weight:800}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:#7c5e58;margin-top:8px}
.meta-row b{color:var(--ink)}
/* card grid (hub + related) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(191,155,96,.14)}
.card .thumb{aspect-ratio:1/1;background:#faf8f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:12px 14px 16px}
.card .name{font-family:'Playfair Display',serif;font-size:15px;line-height:1.3;margin:0 0 4px}
.card .p{color:var(--brand-gold);font-weight:700;font-size:15px}
.callout{background:#fdf1f0;border:1px solid #f3d9d7;border-radius:14px;padding:18px 20px;margin-top:32px}
.site-footer{border-top:1px solid var(--line);padding:24px;text-align:center;font-size:13px;color:var(--muted)}
.site-footer a{color:var(--brand-gold);text-decoration:none}
/* journal */
.article{max-width:760px}
.byline{color:var(--muted);font-size:14px;margin:2px 0 14px}
.byline .ai-note{font-size:12px;opacity:.75}
.prose{font-size:16.5px;line-height:1.75}
.prose h2{font-family:'Playfair Display',serif;color:var(--brand-gold);font-size:22px;margin:28px 0 10px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:6px 0}
.prose strong{color:var(--ink)}
.prose a{color:var(--brand-gold)}
dl.faq{margin:8px 0 4px}
dl.faq dt{font-weight:700;color:var(--ink);margin-top:16px}
dl.faq dd{margin:6px 0 0;color:#7c5e58}
.j-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.j-card .body{padding:18px 20px 20px}
.j-card .j-author{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold);margin:0 0 6px}
.j-card .name{font-size:18px;margin:0 0 8px;line-height:1.3}
.j-card .name a{text-decoration:none;color:var(--ink)}
.j-card .name a:hover{color:var(--brand-gold)}
.j-card .j-excerpt{color:#7c5e58;font-size:14.5px;margin:0 0 12px}
.j-card .j-more{color:var(--brand-gold);text-decoration:none;font-weight:700;font-size:14px}