/* BARFnista — หน้าขาย ebook */
:root{
  --brand:#2d5a27; --brand-dark:#1a3a15; --brand-light:#f0f7eb; --brand-soft:#e3f0d8;
  --ink:#1f2320; --ink2:#4a534b; --ink3:#7b857d;
  --cream:#fbfaf6; --line:#e6e4dc; --white:#fff;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Prompt','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.75; letter-spacing:0;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
.wrap{max-width:720px; margin:0 auto; padding:0 20px}
section{padding:44px 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h1,h2,h3{line-height:1.35; margin:0 0 14px; font-weight:700}
h2{font-size:25px; color:var(--brand-dark)}
h3{font-size:19px}
p{margin:0 0 14px}
.lead{font-size:19px; color:var(--ink2)}
.muted{color:var(--ink3); font-size:15px}
.center{text-align:center}

/* hero */
.hero{background:var(--brand-light); border-bottom:1px solid var(--line); padding:30px 0 40px}
.badge{display:inline-block; background:var(--brand); color:#fff; font-size:13.5px;
  font-weight:600; padding:6px 15px; border-radius:999px; margin-bottom:18px}
.hero img.cover{border-radius:var(--radius); box-shadow:0 8px 28px rgba(0,0,0,.13); margin:0 auto 26px; max-width:430px}
.hero h1{font-size:32px; color:var(--brand-dark); margin-bottom:8px}
.hero .sub{font-size:19px; color:var(--ink2); margin-bottom:6px}
.hero .tag{font-size:16px; color:var(--brand); font-style:italic; margin-bottom:24px}

/* price */
.price{display:flex; align-items:baseline; justify-content:center; gap:12px; margin-bottom:6px; flex-wrap:wrap}
.price .old{font-size:22px; color:var(--ink3); text-decoration:line-through}
.price .new{font-size:44px; font-weight:700; color:var(--brand-dark); line-height:1}
.save{display:inline-block; background:#fff3d6; color:#8a5a00; font-weight:600;
  font-size:14.5px; padding:5px 14px; border-radius:999px; margin-bottom:22px}

/* นับถอยหลังราคาช่วงเปิดตัว */
.cd{max-width:430px; margin:0 auto 20px; background:#fff; border:1px solid var(--brand-soft);
  border-radius:var(--radius); padding:14px 16px 13px; text-align:center}
.cd-head{font-size:15px; font-weight:600; color:var(--brand-dark); margin:0 0 10px}
.cd-head span{display:block; font-size:13.5px; font-weight:400; color:var(--ink3); margin-top:2px}
.cd-row{display:flex; justify-content:center; gap:8px}
.cd-u{flex:1; max-width:82px; background:var(--brand-light); border-radius:11px; padding:8px 4px}
.cd-u b{display:block; font-size:26px; font-weight:700; color:var(--brand-dark);
  line-height:1.1; font-variant-numeric:tabular-nums}
.cd-u i{display:block; font-size:12.5px; font-style:normal; color:var(--ink3); margin-top:1px}
.cd-note{font-size:13px; color:var(--ink3); margin:10px 0 0}
.cd-done{background:var(--cream)}
.cd-done .cd-head{margin-bottom:0}
.cd-done .cd-note{margin-top:4px}

/* button */
.btn{display:block; width:100%; max-width:430px; margin:0 auto; background:var(--brand);
  color:#fff; font-size:20px; font-weight:700; text-align:center; padding:18px 20px;
  border-radius:14px; border:0; cursor:pointer; box-shadow:0 5px 16px rgba(45,90,39,.3);
  font-family:inherit; transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(45,90,39,.38)}
.btn:active{transform:translateY(0)}
.btn .small{display:block; font-size:14px; font-weight:400; opacity:.9; margin-top:3px}
.under-btn{text-align:center; font-size:14.5px; color:var(--ink3); margin-top:14px}

/* lists */
ul.check{list-style:none; padding:0; margin:0}
ul.check li{position:relative; padding:0 0 0 32px; margin-bottom:13px}
ul.check li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--brand);
  font-weight:700; font-size:19px}
ul.plain{padding-left:22px; margin:0 0 14px}
ul.plain li{margin-bottom:9px}

/* cards */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:16px}
.card.hi{background:var(--brand-light); border-color:var(--brand-soft)}

/* table */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff}
table{border-collapse:collapse; width:100%; min-width:400px; font-size:16px}
th,td{padding:13px 15px; text-align:left; border-bottom:1px solid var(--line)}
th{background:var(--brand); color:#fff; font-weight:600; font-size:15px; white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.win td{background:var(--brand-light); font-weight:700; color:var(--brand-dark)}

/* faq */
details{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:11px}
details[open]{background:var(--brand-light)}
summary{font-weight:600; cursor:pointer; list-style:none; font-size:17px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+"; float:right; color:var(--brand); font-weight:700; font-size:21px; line-height:1.2}
details[open] summary:after{content:"−"}
details p{margin:12px 0 0; color:var(--ink2); font-size:16px}

/* ตัวอย่างหน้าในเล่ม */
.pagefig{margin:0 0 22px}
.pagefig img{border:1px solid var(--line); border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.09); width:100%}
.pagefig figcaption{font-size:14.5px; color:var(--ink3); margin-top:10px; text-align:center;
  line-height:1.6}

/* author */
.author{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.author img{width:88px; border-radius:12px; flex:none}
.author div{flex:1; min-width:220px}

/* chooser */
.pick{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0}
.pick a{display:block; background:#fff; border:2px solid var(--line); border-radius:var(--radius);
  padding:16px; text-align:center; color:var(--ink); transition:border-color .15s, transform .15s}
.pick a:hover{border-color:var(--brand); transform:translateY(-3px)}
.pick img{border-radius:10px; margin-bottom:12px}
.pick b{display:block; font-size:19px; color:var(--brand-dark)}
.pick span{font-size:14.5px; color:var(--ink3)}

/* footer */
footer{background:var(--brand-dark); color:#c9d6c4; padding:32px 0; font-size:14.5px}
footer a{color:#fff; text-decoration:underline}
.disclaimer{background:#fff8ec; border:1px solid #f0e0c0; border-radius:var(--radius);
  padding:18px 20px; font-size:14.5px; color:#6b5730; margin-top:8px}

@media (max-width:560px){
  body{font-size:16px}
  .hero h1{font-size:26px}
  h2{font-size:22px}
  .price .new{font-size:38px}
  .btn{font-size:18px}
  .pick{grid-template-columns:1fr}
}