/* Nara Sticker Lab — sticker-fast.com */
:root{--ink:#241a12;--muted:#6b5a48;--bg:#fff8f1;--card:#fff;--accent:#ff6a00;--accent2:#ff9a3d;--red:#e4002b;--green:#06c755;--line:#f0e2d2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Leelawadee UI',Tahoma,-apple-system,sans-serif;color:var(--ink);line-height:1.6;
background:var(--bg);
background-image:radial-gradient(#ffd9b3 1.3px,transparent 1.3px),radial-gradient(#ffe6cc 1.3px,transparent 1.3px);
background-size:28px 28px;background-position:0 0,14px 14px}
a{color:var(--accent)}
img{max-width:100%}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
/* nav */
header.nav{position:sticky;top:0;z-index:20;background:rgba(255,248,241,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{font-weight:900;font-size:20px;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
.nav nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav nav a{color:var(--ink);text-decoration:none;font-size:14px;padding:7px 11px;border-radius:18px}
.nav nav a:hover,.nav nav a.on{background:#fff0e0;color:var(--accent)}
.nav .cta{background:var(--green);color:#fff;padding:8px 15px;border-radius:20px;font-weight:700;font-size:14px}
/* hero */
.hero{background:linear-gradient(135deg,#ffb347,#ff6a00);color:#fff;padding:52px 0 46px;text-align:center}
.hero h1{font-size:34px;margin:0 0 12px;line-height:1.25}
.hero p{font-size:18px;margin:0 auto 22px;max-width:680px;opacity:.97}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 24px;border-radius:26px}
.btn.line{background:#fff;color:#0a7a37}
.btn.ghost{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.btn.sm{padding:8px 16px;font-size:14px}
/* sections */
main{padding:10px 0 40px}
section{padding:30px 0}
h2{font-size:25px;margin:0 0 6px}
.lead{color:var(--muted);margin:0 0 20px;max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{background:#fff0e0;color:#b4591a;font-size:13px;padding:5px 13px;border-radius:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.feat h3{margin:0 0 6px;font-size:18px}
.feat p{margin:0;color:var(--muted);font-size:14px}
.feat .ic{font-size:26px}
/* cards (designs) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{background:#faf3ea;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:16px}
.card .b{padding:12px 14px 14px}
.card h3{margin:0 0 4px;font-size:16px}
.card .d{font-size:12.5px;color:var(--muted);margin:0 0 10px;min-height:34px}
.card .buy{display:flex;align-items:center;justify-content:space-between}
.price{font-size:20px;font-weight:900;color:var(--red)}
.tag{display:inline-block;font-size:11px;background:#e3f5ff;color:#0277bd;padding:2px 8px;border-radius:11px;margin-left:6px}
/* price table */
table.price{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
table.price th,table.price td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)}
table.price th{background:#fff0e0;color:#b4591a}
table.price tr:last-child td{border-bottom:0}
.badge{background:var(--accent);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px}
/* steps / faq */
ol.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
ol.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 16px 16px 54px;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:28px;height:28px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer;padding:12px 0}
.faq p{margin:0 0 14px;color:var(--muted)}
.note{background:#fff3cd;border:1px solid #ffe08a;border-radius:10px;padding:11px 15px;font-size:14px;margin:16px 0}
/* footer */
footer{background:#241a12;color:#e9ddcf;padding:34px 0 26px;font-size:14px}
footer a{color:#ffb974;text-decoration:none}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:18px}
footer h4{margin:0 0 8px;color:#fff;font-size:15px}
.flink{display:flex;flex-wrap:wrap;gap:8px}
.flink a{display:block}
.copy{border-top:1px solid #3a2c1f;padding-top:14px;color:#b5a695;font-size:12.5px}
/* hero สองคอลัมน์ + ภาพหมู่สติ๊กเกอร์ */
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;text-align:left}
.hero-grid .htext h1{text-align:left}
.hero-grid .htext p{margin-left:0}
.hero-art{display:flex;justify-content:center}
.hero-art img{width:100%;max-width:520px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.18))}
.hero .btns{justify-content:flex-start}
/* การ์ดลาย = ลุคสติ๊กเกอร์จริง (ภาพมีขอบขาว+เงาในตัว) */
.card{transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.card .thumb{background:
 radial-gradient(circle at 30% 25%,#fff,#fbf1e6);}
.card .thumb img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));transition:transform .2s}
.card:hover .thumb img{transform:rotate(-3deg) scale(1.04)}
/* แถบแกลเลอรีสติ๊กเกอร์ */
.strip{display:flex;flex-wrap:wrap;gap:6px 2px;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 10px}
.strip img{width:118px;height:118px;object-fit:contain;transition:transform .2s}
.strip img:hover{transform:scale(1.12) rotate(-4deg)}
/* swatch วัสดุ */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.sw{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sw .pic{height:120px;display:flex;align-items:center;justify-content:center}
.sw .b{padding:12px 14px}
.sw h3{margin:0 0 4px;font-size:16px}
.sw p{margin:0;color:var(--muted);font-size:13px}
/* ลูกเล่นหัวข้อ + สลับพื้นเซกชัน */
section{border-radius:18px}
section.band{background:#fff;border:1px solid var(--line);padding:26px 22px;margin:18px 0}
h2 .em{color:var(--accent)}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-grid .htext h1,.hero-grid .htext p{text-align:center}.hero .btns{justify-content:center}.hero-art{order:-1}}
@media(max-width:560px){.hero h1{font-size:27px}.nav nav a{padding:6px 8px}.strip img{width:92px;height:92px}}