/* ============================================================
   BaanMart — สไตล์เปลือกเว็บไซต์ (หัวเว็บ/ท้ายเว็บ) สำหรับจอคอม
   ทุกอย่างอยู่ใน @media (min-width:1000px) — ต่ำกว่านั้นไม่มีผลใด ๆ
   มือถือยังเป็นแอปเหมือนเดิมทุกพิกเซล
   ============================================================ */

.ws-shell-top, .ws-shell-bottom { display: none; }
.ws-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (min-width: 1000px) {
  .ws-shell-top, .ws-shell-bottom { display: block; }

  /* หน้าเว็บไม่ใช่การ์ดมือถือลอยกลางจออีกต่อไป — ตัดกรอบ เงา มุมโค้งของเฟรมทิ้ง */
  body.ws-on { padding: 0; background: var(--cream); }
  body.ws-on #phone {
    max-width: none; border-radius: 0; box-shadow: none; min-height: 0;
    background: none; overflow: visible;
  }
  /* เนื้อหาแอปอยู่ในคอนเทนเนอร์กลางเหมือนเว็บทั่วไป */
  body.ws-on #app { max-width: 1200px; margin: 0 auto; padding: 26px 24px 60px; }

  /* แถบล่างแบบมือถือไม่ต้องมีแล้ว หัวเว็บทำหน้าที่แทน */
  body.ws-on #bottomNav { display: none !important; }

  /* ช่องค้นหาย้ายขึ้นไปอยู่บนหัวเว็บแล้ว ไม่ต้องมีซ้ำอีกอันในเนื้อหา
     (ตัว input เดิมยังอยู่ในหน้า เพราะหัวเว็บส่งคำค้นต่อให้มันทำงาน) */
  body.ws-on .search-row { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* บรรทัดตำแหน่ง + ปุ่มโซน จัดเป็นแถบเดียวแบบเว็บ ไม่ใช่ซ้อนกันเป็นชั้น ๆ แบบมือถือ */
  body.ws-on .loc-line { font-size: 1.05rem; padding-bottom: 4px; }
  body.ws-on .zone-btns { max-width: 560px; }
  body.ws-on .d2-actionbar {
    position: sticky; bottom: 20px; left: auto; transform: none;
    max-width: 780px; margin: 24px auto 0; border-radius: 999px;
    border: 1px solid #F0E4D8;
  }

  .ws-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* จุดสังเกตสำหรับปุ่มกลับขึ้นบน — วางลอยที่ 500px จากบนสุดของเอกสาร
     ใช้ absolute เพื่อไม่ให้ไปดันเนื้อหาลง และไม่ใช้หัวเว็บเป็นตัวเฝ้าเพราะมัน sticky */
  .ws-sentinel { position: absolute; top: 500px; left: 0; width: 1px; height: 1px; pointer-events: none; }

  /* ---------- ลิงก์ข้ามไปเนื้อหา ---------- */
  .ws-skip {
    position: absolute; left: 16px; top: -60px; z-index: 200;
    background: var(--o-600); color: #fff; padding: 11px 20px;
    border-radius: 0 0 14px 14px; font-weight: 600; text-decoration: none;
    transition: top .18s ease;
  }
  .ws-skip:focus { top: 0; }

  /* ---------- แถบบนสุด ---------- */
  .ws-utility { background: var(--o-700); color: #FFE9D2; font-size: .84rem; }
  .ws-utility .ws-wrap { display: flex; align-items: center; gap: 18px; min-height: 38px; }
  .ws-utility-tag { display: inline-flex; align-items: center; gap: 7px; opacity: .95; }
  .ws-utility-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .ws-utility-nav a, .ws-lang {
    color: #FFE9D2; text-decoration: none; padding: 8px 12px; border-radius: 999px;
    font: inherit; font-family: 'Prompt', sans-serif; background: none; border: 0;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background-color .2s ease, color .2s ease;
  }
  .ws-utility-nav a:hover, .ws-lang:hover { background: rgba(255,255,255,.16); color: #fff; }

  /* ---------- หัวเว็บหลัก ---------- */
  .ws-head {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,252,248,.9);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid #F0E4D8;
  }
  .ws-head-in { display: flex; align-items: center; gap: 18px; min-height: 76px; }

  .ws-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
  .ws-brand img { border-radius: 12px; display: block; }
  .ws-brand-tx { display: flex; flex-direction: column; line-height: 1.12; }
  .ws-brand-tx b { font-size: 1.1rem; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
  .ws-brand-tx i { font-style: normal; font-size: .76rem; color: var(--ink-2); }

  /* ช่องค้นหาเป็นพระเอกของหัวเว็บ — คนมาตลาดมือสองเพื่อ "หา" ของ */
  .ws-search {
    flex: 1; min-width: 0; position: relative; display: flex; align-items: center;
    background: #fff; border: 1.5px solid #F0E4D8; border-radius: 999px;
    padding: 0 6px 0 16px; height: 50px; gap: 10px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .ws-search:focus-within { border-color: var(--o-400); box-shadow: 0 0 0 4px var(--o-50); }
  .ws-search > svg { color: var(--ink-3); flex: none; }
  .ws-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: none;
    font-family: 'Prompt', sans-serif; font-size: .97rem; color: var(--ink);
  }
  .ws-search input::placeholder { color: var(--ink-3); }
  .ws-search-go {
    flex: none; border: 0; cursor: pointer; height: 38px; padding: 0 22px;
    border-radius: 999px; font-family: 'Prompt', sans-serif; font-weight: 700; font-size: .93rem;
    color: #fff; background: linear-gradient(180deg, var(--o-400), var(--o-600));
    transition: filter .2s ease;
  }
  .ws-search-go:hover { filter: brightness(1.06); }

  .ws-nav { display: flex; align-items: center; gap: 2px; flex: none; }
  .ws-nav a {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    color: var(--ink-2); font-size: .93rem; font-weight: 500;
    padding: 10px 13px; border-radius: 999px; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
  }
  .ws-nav a:hover { background: var(--o-50); color: var(--o-700); }
  .ws-nav a.is-on { background: var(--o-50); color: var(--o-700); font-weight: 600; }

  .ws-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  .ws-icon-btn {
    position: relative; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; color: var(--ink-2); text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
  }
  .ws-icon-btn:hover { background: var(--o-50); color: var(--o-700); }
  .ws-dot {
    position: absolute; top: 9px; right: 10px; width: 9px; height: 9px;
    border-radius: 50%; background: #E5484D; border: 2px solid var(--cream);
  }
  .ws-dot[hidden] { display: none; }

  .ws-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
    font-family: 'Prompt', sans-serif; font-weight: 700; font-size: .94rem;
    text-decoration: none; border: 1.5px solid transparent; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  .ws-btn-ghost { background: #fff; color: var(--o-700); border-color: var(--o-200); }
  .ws-btn-ghost:hover { background: var(--o-50); }
  .ws-btn-primary {
    background: linear-gradient(180deg, var(--o-400), var(--o-600)); color: #fff;
    box-shadow: 0 6px 18px rgba(238,96,2,.26);
  }
  .ws-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 8px 24px rgba(238,96,2,.34); }

  /* ---------- ท้ายเว็บ ---------- */
  .ws-foot {
    margin-top: 40px; background: #FFFCF8;
    border-top: 1px solid #F0E4D8; padding: 52px 0 26px;
  }
  .ws-foot-top {
    display: grid; grid-template-columns: minmax(300px, 1.25fr) 2fr;
    gap: 48px; padding-bottom: 38px;
  }
  .ws-foot-brand p {
    margin: 15px 0 20px; color: var(--ink-2); font-size: .93rem; max-width: 40ch; line-height: 1.75;
  }
  .ws-stores { display: flex; gap: 11px; flex-wrap: wrap; }
  .ws-store {
    display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
    background: var(--ink); color: #fff; padding: 9px 18px 9px 15px; border-radius: 14px;
    transition: box-shadow .18s ease;
  }
  .ws-store:hover { box-shadow: 0 8px 20px rgba(36,28,24,.24); }
  .ws-store span { display: flex; flex-direction: column; line-height: 1.2; }
  .ws-store i { font-style: normal; font-size: .68rem; opacity: .78; }
  .ws-store b { font-size: .95rem; font-weight: 700; }
  .ws-store.is-soon { background: #E8DED4; color: var(--ink-2); cursor: not-allowed; }
  .ws-store.is-soon:hover { box-shadow: none; }

  .ws-foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .ws-foot-cols h3 {
    margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .ws-foot-cols a {
    display: block; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: .93rem;
    transition: color .2s ease;
  }
  .ws-foot-cols a:hover { color: var(--o-700); }

  .ws-foot-bottom {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    border-top: 1px solid #F0E4D8; padding-top: 22px;
    color: var(--ink-3); font-size: .87rem;
  }
  .ws-foot-bottom a { margin-left: auto; color: var(--ink-2); text-decoration: none; }
  .ws-foot-bottom a:hover { color: var(--o-700); }

  /* ---------- ปุ่มกลับขึ้นบน ---------- */
  .ws-top {
    position: fixed; right: 26px; bottom: 26px; z-index: 55;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    border: 1px solid #F0E4D8; background: #fff; color: var(--ink);
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(60,40,25,.14);
    transition: background-color .2s ease, color .2s ease;
  }
  .ws-top:hover { background: var(--o-50); color: var(--o-700); }
  .ws-top[hidden] { display: none; }

  /* ---------- ประกาศการใช้ข้อมูล (PDPA) ---------- */
  .ws-consent {
    position: fixed; left: 26px; bottom: 26px; z-index: 70; max-width: 460px;
    display: flex; align-items: center; gap: 18px;
    background: #fff; border: 1px solid #F0E4D8; border-radius: 20px;
    padding: 18px 20px; box-shadow: 0 14px 40px rgba(60,40,25,.18);
  }
  .ws-consent[hidden] { display: none; }
  .ws-consent p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
  .ws-consent a { color: var(--o-700); }
  .ws-consent .ws-btn { flex: none; padding: 0 18px; min-height: 40px; font-size: .9rem; }

  /* โฟกัสต้องเห็นชัดทุกจุดที่กดได้ คนใช้คีย์บอร์ดล้วนต้องหาตัวเองเจอ */
  .ws-shell-top :focus-visible, .ws-shell-bottom :focus-visible {
    outline: 3px solid var(--o-400); outline-offset: 2px; border-radius: 12px;
  }

  /* จอ 1000–1180px เบียดกัน ซ่อนเมนูรองก่อนเพื่อไม่ให้ช่องค้นหาถูกบีบ */
  @media (max-width: 1180px) {
    .ws-nav { display: none; }
    .ws-foot-cols { grid-template-columns: repeat(2, 1fr); }
    .ws-foot-top { grid-template-columns: 1fr; gap: 34px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-skip, .ws-btn, .ws-store, .ws-top, .ws-nav a, .ws-icon-btn, .ws-search,
  .ws-search-go, .ws-utility-nav a, .ws-lang, .ws-foot-cols a { transition: none; }
}