:root{
  --wz-bg:#0b0b0d; --wz-bg2:#141416; --wz-border:rgba(255,255,255,.08);
  --wz-text:#fff; --wz-text-dim:rgba(255,255,255,.65);
  --wz-red:#cc0000; --wz-red2:#ff0000;
}

/* ---------- Base + Glass on scroll ---------- */
.wz-nav{
  position:sticky; top:0; z-index:50;
  background:transparent;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}
.wz-nav.is-glass{
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.wz-nav__wrap{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wz-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.wz-brand__logo{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.5px;background:linear-gradient(135deg,var(--wz-red),var(--wz-red2));box-shadow:0 8px 24px rgba(255,0,0,.18)}
.wz-brand__text{display:flex;flex-direction:column;line-height:1}
.wz-brand__text small{color:var(--wz-text-dim);font-size:11px;margin-top:2px}

/* ---------- Desktop menu/auth ---------- */
.wz-menu{display:none;gap:6px}
.wz-menu__item{
  position:relative;
  padding:8px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--wz-text-dim);
  transition:color .2s ease;
}
.wz-menu__item::after{
  content:"";
  position:absolute; left:0; right:auto; bottom:-4px;
  height:2px; width:0;
  background: var(--wz-red);
  border-radius:9999px;
  transition: width .3s ease;
}
.wz-menu__item:hover{ color: var(--wz-red2); background: transparent; }
.wz-menu__item:hover::after{ width:100%; }
.wz-menu__item.is-active{ color: var(--wz-red2); }
.wz-menu__item.is-active::after{ width:100%; }

.wz-menu__item--em{color:var(--wz-red2);font-weight:600}
.wz-auth{display:none;align-items:center;gap:8px}
.wz-btn{display:inline-block;padding:8px 14px;border-radius:12px;font-weight:600;text-decoration:none}
.wz-btn--primary{background:var(--wz-red);color:#fff}
.wz-btn--primary:hover{background:#e11111}
.wz-btn--ghost{border:1px solid var(--wz-border);color:#fff}
.wz-btn--ghost:hover{background:rgba(255,255,255,.06)}
.wz-btn--danger{background:#c0392b;color:#fff}
.wz-btn--block{display:block;width:100%;text-align:center}

/* ---------- User dropdown ---------- */
.wz-user{position:relative}
.wz-user__btn{display:flex;align-items:center;gap:10px;border-radius:12px;padding:8px 10px;background:transparent;border:0;color:var(--wz-text);cursor:pointer}
.wz-user__btn:hover{background:rgba(255,255,255,.06)}
.wz-user__avatar{width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.wz-user__meta{display:none}
@media (min-width:640px){ .wz-user__meta{display:block;line-height:1.1} }
.wz-user__name{font-size:14px;font-weight:600}
.wz-dd{position:absolute;right:0;top:calc(100% + 8px);width:220px;background:var(--wz-bg2);border:1px solid var(--wz-border);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:6px;display:none}
.wz-dd__item{display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:10px;color:#eaeaea;text-decoration:none;font-size:14px}
.wz-dd__item:hover{background:rgba(255,255,255,.06)}
.wz-dd__item--danger{color:#ff0000}
.wz-dd__sep{height:1px;background:var(--wz-border);margin:6px 4px}
[data-dd][data-open="1"] [data-dd-menu]{display:block}

/* ---------- Burger (mobile) ---------- */
.wz-burger{display:inline-flex;flex-direction:column;gap:4px;width:40px;height:38px;border-radius:10px;border:1px solid var(--wz-border);background:transparent;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;z-index:60}
.wz-burger:hover{background:rgba(255,255,255,.05)}
.wz-burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.wz-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.wz-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wz-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Mobile panel ---------- */
.wz-mnav__overlay{ position:fixed; inset:0; z-index:40; background: rgba(10,12,14, .92); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.wz-mnav{
  position:fixed; top:0; right:0; bottom:0; z-index:50;
  width:84%; max-width:360px;
  background: #111215;
  border-left:1px solid var(--wz-border);
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -10px 0 25px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:8px;
  padding: 18px 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.wz-nav[data-open="1"]{ background:#0b0b0d !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
[data-nav][data-open="1"] .wz-mnav{transform:translateX(0)}
[data-nav][data-open="1"] .wz-mnav__overlay{ opacity:1; pointer-events:auto; }

/* ===== Mobile list: ALWAYS vertical ===== */
.wz-mnav__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.wz-mnav__item{
  display:block;                 /* <<< สำคัญ: ให้กินทั้งแถว */
  width:100%;
  padding:12px 10px;
  border-radius:10px;
  color:#eaeaea;
  text-decoration:none;
  font-size:15px;
  transition:background .2s;
}
.wz-mnav__item:hover{background:rgba(255,255,255,.08)}
.wz-mnav__item--em{color:var(--wz-red2);font-weight:700}
.wz-mnav__auth{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--wz-border)}

/* ---------- Breakpoints ---------- */
@media (min-width:768px){
  .wz-menu{display:flex}
  .wz-auth{display:flex}
  .wz-burger{display:none}
  .wz-mnav, .wz-mnav__overlay{display:none !important}
}

/* ---------- SweetAlert2 ---------- */
.swal2-container{z-index:10050 !important}
.swal2-popup{border-radius:16px}

/* --- Dropdown for "ร้านค้า" (desktop) --- */
.wz-menu__item--dd { position: relative; }
.wz-menu__item--dd .wz-menu__btn { display:inline-flex; align-items:center; gap:.5rem; }
.wz-menu__item--dd .dd-caret { font-size:.8em; opacity:.8; transition:transform .15s ease; }

/* Centered panel */
.wz-ddmenu{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  transform-origin: top center;
  min-width: 220px;
  background: #111318;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.wz-menu__item--dd:hover .wz-ddmenu,
.wz-menu__item--dd:focus-within .wz-ddmenu,
.wz-ddmenu.is-open{ opacity:1; visibility:visible; transform: translate(-50%,0); }
.wz-menu__item--dd:hover .dd-caret,
.wz-menu__item--dd:focus-within .dd-caret,
.wz-ddmenu.is-open ~ .dd-caret{ transform: rotate(180deg); }

.wz-ddmenu__item{ display:block; padding:.55rem .75rem; border-radius:10px; color:#eaecef; text-decoration:none; font-weight:600; }
.wz-ddmenu__item.is-active{ color:#ff3b3b; }
.wz-ddmenu__item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.wz-ddmenu__sep{ height:1px; margin:6px 4px; background:rgba(255,255,255,.12); border-radius:1px; }

/* ---------- Mobile: Accordion (Shop group) ---------- */
.wz-acc{ border-radius:12px; background:transparent; }
.wz-acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 10px; border-radius:10px; color:#eaeaea; background:transparent; border:0;
  font-size:15px; font-weight:700; text-align:left;
}
.wz-acc__btn:hover{ background:rgba(255,255,255,.08); }
.wz-acc__chev{ transition: transform .2s ease; opacity:.9; }
.wz-acc[data-open="1"] .wz-acc__chev{ transform: rotate(180deg); }

.wz-acc__panel{
  overflow:hidden; max-height:0; transition:max-height .25s ease;
}
.wz-mnav__item--sub{
  display:block; width:100%;
  padding:12px 14px 12px 28px;   /* อินเดนต์ให้เป็นชั้นย่อย */
  margin:2px 0; border-radius:10px;
}
.wz-mnav__item--sub:before{
  content:"•"; margin-right:8px; color:rgba(255,255,255,.45);
}

/* Accordion (mobile shop) */
.wz-acc__panel{
  overflow: hidden;
  max-height: 0;           /* เริ่มปิด */
  transition: max-height .25s ease;
}
.wz-acc__panel[hidden]{ display:none; }
.wz-acc[data-open="1"] .wz-acc__panel{
  /* จะเปิดโดย JS เซ็ต max-height ให้เท่ากับ scrollHeight */
  display:block;
}
.wz-acc__chev{ transition: transform .25s ease; }
.wz-acc[data-open="1"] .wz-acc__chev{ transform: rotate(180deg); }