/* ===== ธีมมือถือรุ่นใหม่ (mobile-v2) : เรียบ สะอาด การ์ดสินค้าไร้กรอบ พื้นรูปสีเทาอ่อน ปุ่มกลม — ใช้สีแบรนด์เดิม =====
   โหลดต่อจาก styles.css เฉพาะจอ <= 820px  (ไม่ชอบ: ลบบรรทัด <link ... mobile-v2.css> ใน index.html ก็กลับเป็นแบบเดิมทันที) */
:root{--m-tile:#f4f1ef;--m-ink:#17120f;--m-sub:#8c7f7a;--m-line:#ebe4e1;--m-field:#f3efed}
body{background:#fff}

/* ส่วนหัว + ช่องค้นหา */
.topbar{background:rgba(255,255,255,.94);border-bottom:0;box-shadow:none}
.topbar .bar{padding:8px 16px 4px}
.member-btn{height:38px!important;padding:0 14px!important;font-size:.85rem!important;box-shadow:none!important}
.search-slot{padding:6px 16px 4px!important}
#searchForm{gap:8px}
#searchForm input{height:46px!important;border:0!important;background:var(--m-field)!important;border-radius:16px!important;padding-left:16px;font-size:.95rem;box-shadow:none!important}
#searchForm input:focus{background:#fff!important;box-shadow:0 0 0 2px rgba(113,15,22,.25)!important}
#searchForm .btn{min-height:46px!important;border-radius:16px!important;padding:0 16px!important;box-shadow:none!important}

/* แบนเนอร์สีแดงด้านบนหน้าสินค้า: ซ่อนบนมือถือ (เกะกะ) แต่เก็บหัวข้อ H1 ไว้ให้ Google/โปรแกรมอ่านหน้าจอ ส่วนเบอร์โทร/LINE ย้ายไปไว้ใต้รายการสินค้า (.shop-contact) */
.hero{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap}
.shop-contact{display:flex!important;flex-direction:column;gap:10px;margin:6px 16px 8px;padding:16px;border-radius:22px;background:var(--m-field);text-align:center}
.shop-contact>span{font-weight:700;font-size:.95rem;color:var(--m-ink)}
.shop-contact .sc-row{display:flex;flex-wrap:wrap;gap:8px}
.shop-contact a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 10px;border-radius:16px;background:#fff;color:var(--m-ink);font-weight:700;font-size:.84rem;white-space:nowrap;text-decoration:none;box-shadow:0 1px 4px rgba(60,20,20,.08)}
.shop-contact a:active{background:var(--brand-tint)}
/* หัวข้อ + ตัวกรอง */
h2.sec{font-size:1.25rem!important;margin:22px 0 12px!important}
h2.sec::before{display:none!important}
.chips{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:38px!important;padding:0 16px!important;border:1.5px solid var(--m-line)!important;background:#fff!important;box-shadow:none!important;color:var(--m-ink)!important;font-size:.88rem;font-weight:600}
.chip.on{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.sort select,#sort{border-radius:12px!important;border:1.5px solid var(--m-line)!important;background:#fff!important;font-size:.85rem}

/* การ์ดสินค้า: ไร้กรอบ รูปอยู่บนพื้นเทาอ่อนโค้งมน */
#grid{gap:18px 14px!important}
.card{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;overflow:visible!important}
.card:hover{transform:none!important;box-shadow:none!important}
.card .thumb.pic{background:var(--m-tile)!important;border-radius:22px!important;overflow:hidden;border:0!important}
.card .thumb.pic img{mix-blend-mode:multiply;object-fit:contain}
.card .badge{top:10px!important;left:10px!important;border-radius:999px!important;font-size:.72rem!important;padding:.1rem .55rem!important;box-shadow:none!important}
.card-b{position:relative;padding:10px 2px 0!important;gap:3px!important}
.card .cat{font-size:.74rem;color:var(--m-sub);font-weight:500}
.card .name{font-size:.93rem!important;line-height:1.35;font-weight:600;color:var(--m-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .price{font-size:1.05rem!important;font-weight:700;color:var(--m-ink);padding-right:48px;display:flex;align-items:baseline;gap:2px 6px;flex-wrap:wrap}
.card .price s{font-size:.78rem;font-weight:400;color:var(--m-sub)}
.card .price .save{display:none}
.giftline{font-size:.75rem!important;border-radius:12px!important;margin:4px 50px 0 0}
/* ปุ่มใส่ตะกร้า = ปุ่มกลมมุมขวาล่าง (กดที่รูป/ชื่อเพื่อดูรายละเอียด) */
.card .btn[data-add]{position:absolute;right:0;bottom:2px;width:42px;min-height:42px!important;height:42px;padding:0!important;margin:0!important;border-radius:50%!important;font-size:0!important;gap:0}
.card .btn[data-add] *{display:none}
.card .btn[data-add]::before{content:"+";font-size:1.7rem;font-weight:400;line-height:1;color:#fff;margin-top:-2px}
.card .btn[disabled]{position:static;width:auto!important;height:34px;min-height:34px!important;padding:0 12px!important;margin-top:6px!important;border-radius:999px!important;font-size:.8rem!important}

/* แถบ Flash Sale */
.flashstrip{margin:12px 16px 4px!important;border-radius:24px!important}
.fs-item{border-radius:18px!important}

/* หน้ารายละเอียดสินค้า: รูปบนพื้นเทา + แผ่นข้อมูลโค้งมนทับขึ้นมา + ปุ่มปิดกลม */
#modalOverlay{padding:0!important;align-items:flex-end!important}
#modal{width:100%!important;max-height:100dvh!important;height:auto;border-radius:0!important;background:var(--m-tile)!important}
#modal>.x{top:max(12px,env(safe-area-inset-top))!important;right:14px!important;left:auto;width:42px;height:42px;padding:0!important;border-radius:50%!important;background:#fff!important;border:0!important;box-shadow:0 4px 14px rgba(0,0,0,.14)!important;font-size:0!important;display:grid;place-items:center;z-index:5}
#modal>.x::before{content:"✕";font-size:1.05rem;color:var(--m-ink)}
#modal .gal,#modal .thumb.pic{background:var(--m-tile)!important;border-radius:0!important}
#modal .gal img,#modal .thumb.pic img{mix-blend-mode:multiply}
#modal .pd-b{background:#fff;border-radius:28px 28px 0 0;margin-top:-26px;position:relative;padding:22px 20px 24px!important}
#modal .pd-b h2{font-size:1.3rem!important;line-height:1.35}
#modal .pd-b .price{font-size:1.7rem!important}
#modal .pd-sticky{border-top:0!important;box-shadow:0 -10px 28px rgba(60,20,20,.1)!important;border-radius:24px 24px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;gap:12px!important}
#modal .ps-price b{font-size:1.25rem!important;color:var(--m-ink)!important}
#modal .ps-qty{border-radius:16px!important;border:1.5px solid var(--m-line)!important}
#modal .ps-add{min-height:52px!important;border-radius:18px!important;font-size:1rem!important}

/* ตะกร้า (เต็มหน้า) */
.cpi{border:0!important;box-shadow:none!important;background:transparent!important;border-bottom:1px solid var(--m-line)!important;border-radius:0!important;padding:14px 0!important}
.cpi.gift{background:#f3fbf6!important;border-radius:16px!important;padding:12px!important;margin-top:8px;border-bottom:0!important}
.cpi .cpi-img{background:var(--m-tile)!important;border-radius:18px!important;overflow:hidden}
.cpi .cpi-img img{mix-blend-mode:multiply}
.cpi-b b{font-size:.98rem;font-weight:600}
.cpi-q button{border-radius:50%!important}
.cpi-q button[data-inc]{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.cpi-q button[data-dec]{background:#fff!important;border:1.5px solid var(--m-line)!important;color:var(--m-ink)!important}
.cartp-h{font-size:1.05rem!important}
.cartp-row,.payopt,.cartp-sum{border-radius:18px!important}
.cartp-cta .btn,.cartp-cta button{min-height:54px!important;border-radius:18px!important;font-size:1.02rem}
.couponbox .cp-card{border-radius:16px!important}

/* แถบเมนูล่าง: ลอยเหนือหน้าจอ พื้นใสฝ้า (glass) ปุ่มที่เลือกเป็นวงกลมสีแบรนด์ยกขึ้นเล็กน้อย */
body{padding-bottom:104px!important}
.cartp-cta{bottom:98px!important}
#bottomBar{left:14px!important;right:14px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;border-radius:30px!important;
  background:rgba(255,255,255,.58)!important;-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75)!important;padding:8px 8px!important;
  box-shadow:0 12px 34px rgba(60,20,20,.16),0 2px 8px rgba(60,20,20,.06),inset 0 1px 0 rgba(255,255,255,.9)!important}
#bottomBar a{color:#7d706b;font-size:.66rem;gap:3px;padding:4px 2px;border-radius:20px;transition:color .2s}
#bottomBar a svg{width:25px;height:25px;box-sizing:content-box;transition:transform .25s,background .25s,box-shadow .25s}
#bottomBar a.on{color:var(--brand)}
#bottomBar a.on svg{stroke:#fff!important;background:linear-gradient(135deg,#8a1620,#710F16);border-radius:50%;padding:10px;margin-top:-20px;margin-bottom:-2px;box-shadow:0 10px 20px rgba(113,15,22,.35),0 0 0 4px rgba(255,255,255,.7)}
#bottomBar .bbcount{top:-3px!important;right:-8px!important;background:#fff;color:var(--brand);box-shadow:0 2px 6px rgba(0,0,0,.18)}
#bottomBar a.on .bbcount{top:-24px!important;right:-14px!important;background:var(--brand);color:#fff}
#bottomBar a.on .bb-pic{box-shadow:0 0 0 3px var(--brand),0 8px 18px rgba(113,15,22,.3);margin-top:-14px}

/* ทรานซิชันตอนสลับหน้า (หน้าแรก / สินค้า / ตะกร้า / บัญชี): หน้าใหม่เลื่อนเข้าตามทิศของเมนู + ค่อยๆ ชัด */
html,body{overflow-x:clip}
@keyframes pageInFwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pageInBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes pageInFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page:not([hidden]){animation:pageInFade .3s cubic-bezier(.22,.8,.3,1) both}
body[data-dir="fwd"] .page:not([hidden]){animation-name:pageInFwd}
body[data-dir="back"] .page:not([hidden]){animation-name:pageInBack}
/* ปุ่มวงกลมที่เลือกในแถบเมนูล่าง ค่อยๆ เปลี่ยนตำแหน่ง/สี */
#bottomBar a svg{transition:margin .28s cubic-bezier(.22,.8,.3,1),padding .28s cubic-bezier(.22,.8,.3,1),background .28s,box-shadow .28s,stroke .2s!important}
#bottomBar a{transition:color .25s!important}
@media (prefers-reduced-motion:reduce){.page:not([hidden]){animation:none!important}#bottomBar a svg{transition:none!important}}

/* รูปสินค้าในหน้ารายละเอียด: ขอบบน/ล่างเท่ากัน (เดิมมีช่องว่างด้านบน 58px แต่ด้านล่างถูกแผ่นข้อมูลทับ) */
#modal .pd .gal{margin-top:0!important;padding:max(20px,env(safe-area-inset-top)) 0 46px}
#modal .gal-count{bottom:50px!important}
#modal .gal-btn{top:calc(50% - 12px)}
#modal .pd-details{margin-top:14px}
.shop-contact .line-logo{flex:0 0 auto;border-radius:7px}
.shop-contact a span{min-width:0}