/* ===== ธีมคอมพิวเตอร์รุ่นใหม่ (desktop-v2) : แท่นเมนูลอยด้านล่างพื้นใสฝ้า + ทรานซิชันตอนสลับหน้า =====
   โหลดต่อจาก styles.css เฉพาะจอ >= 821px (ไม่ชอบ: ลบบรรทัด <link ... desktop-v2.css> ใน index.html ก็กลับเป็นแบบเดิมทันที) */
#pageTabs{display:none}               /* แท่นลอยด้านล่างแทนแถบ "หน้าแรก / สินค้าทั้งหมด" ด้านบน */
body{padding-bottom:112px}

.bottombar{display:flex!important;position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:40;gap:6px;padding:9px 12px;border-radius:34px;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.78);box-shadow:0 16px 44px rgba(60,20,20,.18),0 2px 10px rgba(60,20,20,.06),inset 0 1px 0 rgba(255,255,255,.9)}
.bottombar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:92px;padding:6px 12px;color:#7d706b;text-decoration:none;font-size:.78rem;font-weight:600;border-radius:24px;transition:color .25s}
.bottombar a svg{width:26px;height:26px;box-sizing:content-box;transition:transform .28s cubic-bezier(.22,.8,.3,1),margin .28s cubic-bezier(.22,.8,.3,1),padding .28s cubic-bezier(.22,.8,.3,1),background .28s,box-shadow .28s,stroke .2s}
.bottombar a:hover{color:var(--brand)}
.bottombar a:hover svg{transform:translateY(-3px)}
.bottombar a:focus-visible{outline:3px solid #1a5fd0;outline-offset:2px}
.bottombar a.on{color:var(--brand)}
.bottombar a.on svg{stroke:#fff!important;background:linear-gradient(135deg,#8a1620,#710F16);border-radius:50%;padding:11px;margin-top:-24px;margin-bottom:-2px;box-shadow:0 12px 24px rgba(113,15,22,.35),0 0 0 5px rgba(255,255,255,.7)}
.bottombar a.on:hover svg{transform:translateY(-2px)}
.bottombar .bbwrap{position:relative;display:inline-flex;font-style:normal}
.bottombar .bbcount{position:absolute;top:-4px;right:-10px;min-width:18px;height:18px;border-radius:999px;background:#fff;color:var(--brand);font-size:.7rem;line-height:18px;text-align:center;padding:0 5px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.bottombar .bbcount[hidden]{display:none}
.bottombar a.on .bbcount{top:-28px;right:-16px;background:var(--brand);color:#fff}
.bottombar .bb-account{display:none}
body.has-member .bottombar .bb-account{display:flex}
.bottombar .bb-pic{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block}
.bottombar a.on .bb-pic{box-shadow:0 0 0 3px var(--brand),0 10px 20px rgba(113,15,22,.3);margin-top:-16px}

/* ทรานซิชันตอนสลับหน้า: หน้าใหม่เลื่อนเข้าตามทิศของเมนู + ค่อยๆ ชัด */
html,body{overflow-x:clip}
@keyframes pageInFwd{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes pageInBack{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes pageInFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page:not([hidden]){animation:pageInFade .34s 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}
@media (prefers-reduced-motion:reduce){.page:not([hidden]){animation:none!important}.bottombar a svg{transition: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}
#products{padding-top:28px}
/* เบอร์โทร/LINE มีอยู่แล้วในส่วนท้ายเว็บ (Footer) ของหน้าคอม จึงไม่ต้องมีกล่องซ้ำใต้รายการสินค้า (กล่องนี้ใช้เฉพาะมือถือ) */
.shop-contact{display:none!important}