:root{
      --navy-900:#0e1c46; --navy:#16255c; --navy-700:#1d2f6e; --royal:#2a4499;
      --gold:#b8912f; --gold-2:#caa445; --gold-soft:#e7d9b0;
      --ink:#20262f; --muted:#5c6472; --line:#dde3ef; --line-2:#e9edf5;
      --paper:#f4f6fa; --tint:#eceff6; --white:#fff;
      --serif:'Bai Jamjuree','Sarabun',serif; --sans:'Sarabun',system-ui,sans-serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6}
    a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
    h1,h2,h3{font-family:var(--serif);color:var(--navy-900)}
    .ic{width:1.1em;height:1.1em;flex:none;vertical-align:-2px}
    .container{max-width:1200px;margin:0 auto;padding:0 24px}

    /* buttons */
    .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:2px;border:1.5px solid var(--line);
      cursor:pointer;font-family:var(--sans);font-size:14.5px;font-weight:600;background:#fff;color:var(--navy-700);transition:.16s;line-height:1;text-decoration:none}
    .btn:hover{border-color:var(--gold);color:var(--navy-900)}
    .btn.primary{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
    .btn.primary:hover{background:var(--gold-2);border-color:var(--gold-2)}
    .btn.solid{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
    .btn.solid:hover{background:var(--navy-900)}
    .mini{padding:8px 12px;border-radius:2px;border:1.5px solid var(--line);background:#fff;color:var(--navy-700);
      font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
    .mini:hover{border-color:var(--navy-700)}
    .mini.primary{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
    .mini.primary:hover{background:var(--navy-900)}

    /* header */
    .nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
    .nav::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-2) 60%,var(--gold))}
    .nav .bar{max-width:1200px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;gap:16px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand img{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold-soft)}
    .brand .t{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--navy-900)}
    .back{margin-left:6px}
    .nav .sp{margin-left:auto;display:flex;gap:10px;align-items:center}
    .cartbtn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:2px;
      border:1.5px solid var(--line);background:#fff;color:var(--navy-700);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
    .cartbtn:hover{border-color:var(--gold);color:var(--navy-900)}
    .cart-count{display:none;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
      background:var(--gold);color:var(--navy-900);border-radius:10px;font-size:11.5px;font-weight:700}
    @media(max-width:720px){ .brand .t{display:none} .cartbtn span:not(.cart-count){display:none} }

    /* layout */
    .shop-layout{display:grid;grid-template-columns:262px 1fr;gap:24px;align-items:start;padding:28px 0 48px}
    @media(max-width:900px){ .shop-layout{grid-template-columns:1fr} }
    .card{background:#fff;border:1px solid var(--line);border-radius:4px}

    /* sidebar */
    .sidebar{padding:22px 20px;position:sticky;top:92px}
    @media(max-width:900px){ .sidebar{position:static} }
    .sidebar h2{font-size:20px}
    .sidebar .sub{color:var(--muted);font-size:13.5px;margin:4px 0 16px}
    .sidebar .group{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
    .sidebar h3{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chip{padding:7px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;font-family:var(--sans);
      font-size:13.5px;font-weight:600;color:#475569;cursor:pointer;transition:.15s}
    .chip:hover{border-color:var(--gold)}
    .chip.active{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

    /* products area */
    .prodwrap{padding:20px}
    .tools{display:flex;gap:12px;align-items:center;margin-bottom:20px}
    .tools .input{flex:1;min-width:0;padding:11px 14px;border:1.5px solid var(--line);border-radius:2px;font-family:inherit;font-size:14.5px;background:#fff}
    .tools .input:focus{outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(29,47,110,.1)}
    .tools .select{padding:11px 14px;border:1.5px solid var(--line);border-radius:2px;font-family:inherit;font-size:14px;background:#fff;color:var(--navy-700);cursor:pointer}
    @media(max-width:560px){ .tools{flex-wrap:wrap} .tools .input{flex-basis:100%} }

    .grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:20px}
    .product{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s,transform .16s}
    .product:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(16,32,80,.1);transform:translateY(-3px)}
    .p-thumb{position:relative;aspect-ratio:1/1;background:var(--tint);overflow:hidden;border-bottom:1px solid var(--line)}
    .p-thumb .pimg{width:100%;height:100%;object-fit:cover;transition:transform .3s}
    .product:hover .p-thumb .pimg{transform:scale(1.05)}
    .sh-heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
      background:rgba(255,255,255,.95);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:transform .12s}
    .sh-heart:hover{transform:scale(1.1)}
    .sh-heart svg{width:18px;height:18px;stroke:#64748b;fill:none;stroke-width:1.8}
    .sh-heart.on svg{fill:#dc2626;stroke:#dc2626}
    .sh-tags{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:5px}
    .sh-tag{padding:3px 9px;border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.3px}
    .sh-tag.members{background:var(--gold);color:var(--navy-900)}
    .sh-tag.video{background:rgba(14,28,70,.82);color:#fff}
    .sh-tag.new{background:#0369a1;color:#fff}
    .sh-tag.hot{background:#be123c;color:#fff}
    .sh-tag.soldout{background:#64748b;color:#fff}
    .sh-tag.coming{background:#a16207;color:#fff}
    .p-price .old{color:#94a3b8;text-decoration:line-through;font-weight:600;font-size:14px;margin-right:6px}
    .p-memhint{font-size:12px;color:#7c3aed;font-weight:700}
    .p-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
    .p-name{font-family:var(--serif);font-weight:600;font-size:15.5px;color:var(--navy-900);line-height:1.4;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:43px}
    .p-price{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--navy-700)}
    .p-actions{margin-top:auto;display:flex;gap:8px}
    .p-actions .mini{flex:1;text-align:center;justify-content:center}
    .empty{grid-column:1/-1;text-align:center;color:#93a0b6;padding:44px;border:1px dashed var(--line);border-radius:4px}

    footer.ft{background:var(--navy-900);color:rgba(255,255,255,.6);text-align:center;padding:22px;font-size:13.5px}

    /* drawers (cart / wishlist) */
    .drawer{position:fixed;inset:0;z-index:500;visibility:hidden;opacity:0;transition:opacity .2s}
    .drawer.active{visibility:visible;opacity:1}
    .drawer .mask{position:absolute;inset:0;background:rgba(8,16,44,.6)}
    .drawer .panel{position:absolute;top:0;right:0;height:100%;width:400px;max-width:90%;background:#fff;
      display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(6,12,40,.3);border-top:3px solid var(--gold);transform:translateX(100%);transition:transform .25s}
    .drawer.active .panel{transform:none}
    .drawer .panel>header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
    .drawer .panel>header h3{font-size:18px}
    .drawer .body{flex:1;overflow-y:auto;padding:18px 20px}
    .drawer .panel>footer{padding:18px 20px;border-top:1px solid var(--line)}
    .total{display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-weight:700;font-size:18px;color:var(--navy-900);margin-bottom:6px}
    .muted{color:var(--muted);font-size:12.5px;margin-bottom:12px}
    .sub{color:var(--muted);font-size:14px}
    .cart-item,.wish-item{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;
      border:1px solid var(--line);border-radius:3px;padding:10px;margin-bottom:10px}
    .cart-item img,.wish-item img{width:58px;height:58px;object-fit:cover;border-radius:3px;background:var(--tint);border:1px solid var(--line)}
    .qty{display:flex;align-items:center;gap:8px;margin-top:6px}
    .qty button{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:2px;cursor:pointer;color:var(--navy-700);font-weight:700}
    .qty button:hover{border-color:var(--navy-700)}

/* cart + wishlist tools kept inside the site nav (stay visible on mobile) */
.nav .shop-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0 }
.nav .shop-tools .cartbtn { white-space: nowrap }
/* icon-only inside the nav: the shop nav already carries brand + menu + account
   + cart + wishlist, so the text labels don't fit — keep the icons only */
.nav .shop-tools .lbl-wide { display: none }

/* The shop nav carries more than the other pages (cart + wishlist), so it needs
   a wider row and collapses the link menu into the burger sooner. The
   header.nav / body prefixes win over site-nav.css, which is linked afterwards. */
body .ubar .wrap,
header.nav .wrap { max-width: 1280px }
header.nav .acct-name { max-width: 100px }
@media (max-width: 1280px) {
  header.nav .links { display: none }
  header.nav .actions { display: none }
  header.nav .burger { display: flex }
}
/* ===== เข้าคิวสำรอง (waitlist join) — self-contained modal, shop.html ไม่โหลด style.css ===== */
.wl-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; }
.wl-modal.show { display: flex; }
.wl-mask { position: absolute; inset: 0; background: rgba(14, 28, 70, .45); }
.wl-box { position: relative; z-index: 1; width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(14, 28, 70, .25); }
.wl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wl-head h3 { font-family: var(--serif); color: var(--navy-900); font-size: 18px; }
.wl-x { border: none; background: none; font-size: 16px; color: var(--muted); cursor: pointer; padding: 4px 6px; line-height: 1; }
.wl-x:hover { color: var(--navy-900); }
.wl-sub { color: var(--muted); font-size: 13.5px; margin: 2px 0 14px; }
.wl-field { margin-bottom: 12px; }
.wl-field label { display: block; font-size: 13px; color: var(--navy-700); font-weight: 600; margin-bottom: 5px; }
.wl-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); font-family: var(--sans); font-size: 14.5px; background: #fff; }
.wl-input:focus { outline: none; border-color: var(--gold); }
.wl-hint { font-size: 12px; color: var(--muted); margin: 2px 0 14px; line-height: 1.5; }
.wl-submit { width: 100%; padding: 12px; border: none; border-radius: 10px; background: var(--navy-700); color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer; min-height: 44px; }
.wl-submit:hover { background: var(--navy-900); }
.wl-msg { font-size: 13px; margin-top: 10px; text-align: center; min-height: 1em; }
.wl-msg.err { color: #dc2626; }
.wl-msg.ok { color: #16a34a; }