: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; }

/* ===== 2026 storefront redesign ===== */
.shop-page {
  background: radial-gradient(circle at 86% 8%, rgba(184,145,47,.09), transparent 29rem), #f5f7fb;
}
.shop-page .container { max-width: 1180px; padding-left: 20px; padding-right: 20px; }
.shop-page .nav .wrap, .shop-page .ubar .wrap { max-width: 1280px; }

.shop-hero {
  position: relative; overflow: hidden; min-height: 250px; margin-top: 30px;
  padding-top: 42px; padding-bottom: 42px; display: flex; align-items: center; justify-content: space-between; gap: 34px;
  border: 1px solid rgba(184,145,47,.42); border-radius: 24px;
  background: linear-gradient(118deg,#0e1c46 0%,#183477 72%,#24438a 100%);
  box-shadow: 0 18px 44px rgba(14,28,70,.16); color: #fff;
}
.shop-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 48px 48px; pointer-events: none; }
.shop-hero-copy, .shop-hero-visual { position: relative; z-index: 1; }
.shop-hero-copy { padding-left: 24px; max-width: 660px; }
.shop-eyebrow, .catalog-eyebrow, .filter-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; color: #e4c978; font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
}
.shop-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-2); }
.shop-hero h1 { margin: 9px 0 10px; color: #fff; font: 800 clamp(31px,4.4vw,48px)/1.15 var(--serif); }
.shop-hero h1 span { color: #e4c978; }
.shop-hero p { max-width: 610px; margin: 0; color: rgba(255,255,255,.76); font-size: 15px; }
.shop-benefits { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 21px; color: rgba(255,255,255,.86); font-size: 13px; }
.shop-benefits span { display: inline-flex; align-items: center; gap: 7px; }
.shop-benefits svg { width: 17px; height: 17px; color: var(--gold-2); }
.shop-hero-visual { width: 260px; height: 180px; margin-right: 28px; flex: 0 0 260px; }
.hero-orbit { position: absolute; border: 1px solid rgba(202,164,69,.24); border-radius: 50%; }
.hero-orbit.one { width: 220px; height: 220px; right: -20px; top: -20px; }
.hero-orbit.two { width: 150px; height: 150px; right: 15px; top: 15px; }
.hero-bag {
  position: absolute; left: 40px; top: 22px; width: 130px; height: 138px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3); border-radius: 26px; transform: rotate(-6deg);
  color: var(--navy-900); background: linear-gradient(145deg,#fff,#e9d18d); box-shadow: 0 22px 35px rgba(0,0,0,.18);
}
.hero-bag svg { width: 58px; height: 58px; }

.shop-page .shop-layout { grid-template-columns: 238px minmax(0,1fr); gap: 18px; padding-top: 20px; padding-bottom: 62px; }
/* หน้าร้านเป็นกริดสองคอลัมน์ (ตัวกรอง | เนื้อหา) ทั้งแถบชุดสินค้าและตารางสินค้าต้องปักไว้
   คอลัมน์ขวาให้ชัด — ปล่อยให้ auto-placement จัดเองไม่ได้ เพราะพอมีลูกสามตัว
   ตารางสินค้าจะถูกดันไปนั่งในคอลัมน์แคบของตัวกรอง (กว้าง 238px) */
.shop-page .bundlewrap,
.shop-page .prodwrap { grid-column: 2; }
.shop-page .card { border-color: #dfe5f0; border-radius: 16px; box-shadow: 0 8px 26px rgba(15,32,74,.05); }
.shop-page .sidebar { top: 104px; padding: 22px 18px; }
.filter-eyebrow { color: var(--gold); }
.shop-page .sidebar h2 { margin-top: 4px; font-size: 22px; }
.shop-page .sidebar .sub { margin: 3px 0 17px; color: #6b768a; }
.shop-page .sidebar .group { margin-top: 20px; padding-top: 18px; }
.shop-page .sidebar h3 { margin-bottom: 11px; color: #657188; font-size: 11.5px; letter-spacing: .08em; }
.shop-page .chips { gap: 7px; }
.shop-page .chip { min-height: 37px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; }
.shop-page .chip.active { box-shadow: 0 6px 14px rgba(29,47,110,.16); }

.shop-page .prodwrap { padding: 20px; }
.catalog-head { margin-bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.catalog-eyebrow { color: var(--gold); }
.catalog-head h2 { margin-top: 2px; font-size: 24px; }
.catalog-count { min-width: 86px; min-height: 50px; padding: 7px 13px; display: flex; align-items: baseline; justify-content: center; gap: 5px; border-radius: 12px; color: var(--navy-700); background: #eef3ff; }
.catalog-count b { font: 800 22px/1 var(--serif); }
.catalog-count span { font-size: 11.5px; font-weight: 700; }
.shop-page .tools { padding: 12px; margin: 0 0 18px; border: 1px solid #e2e7f0; border-radius: 14px; background: #f9fafe; }
.shop-search { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.shop-search:focus-within { border-color: var(--navy-700); box-shadow: 0 0 0 4px rgba(29,47,110,.1); }
.shop-search svg { width: 19px; height: 19px; flex: none; color: #6f7b8f; }
.shop-page .tools .input { min-height: 46px; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; }
.shop-page .tools .input:focus { border: 0; box-shadow: none; }
.shop-page .tools .select { min-height: 46px; padding: 0 35px 0 13px; border-width: 1px; border-radius: 11px; }
.shop-page .tools .btn { min-height: 46px; padding: 0 14px; border-radius: 11px; }
.refresh-btn svg { width: 17px; height: 17px; }

.shop-page .grid-products { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.shop-page .product { border-color: #dde4ef; border-radius: 14px; }
.shop-page .product:hover { border-color: rgba(184,145,47,.56); box-shadow: 0 14px 30px rgba(15,32,74,.1); transform: translateY(-2px); }
.shop-page .p-thumb { aspect-ratio: 1.08/1; border-bottom-color: #e2e7f0; }
.shop-page .sh-heart { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 5px 14px rgba(15,32,74,.1); }
.shop-page .sh-tag { padding: 4px 9px; border-radius: 7px; }
.shop-page .p-body { padding: 16px; gap: 9px; }
.shop-page .p-name { min-height: 44px; font-size: 16px; font-weight: 700; }
.shop-page .p-price { font-size: 20px; }
.shop-page .p-memhint { display: inline-block; margin-top: 2px; color: #7c4f13; font-size: 11.5px; }
.shop-page .p-actions { gap: 7px; }
.shop-page .mini { min-height: 41px; padding: 0 11px; border-width: 1px; border-radius: 10px; }
.shop-page .mini.primary { background: var(--navy-700); }

.shop-page .empty {
  min-height: 320px; padding: 46px 22px; display: grid; place-items: center; align-content: center;
  border: 1px solid #dfe5f0; border-radius: 14px; background: #fbfcfe; color: var(--muted);
}
.shop-empty-icon { width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid #dbe5fb; border-radius: 19px; background: #eef3ff; color: var(--navy-700); }
.shop-empty-icon svg { width: 31px; height: 31px; }
.shop-page .empty h3 { margin: 17px 0 5px; font-size: 21px; }
.shop-page .empty p { max-width: 430px; margin: 0; color: #6b768a; font-size: 14px; }
.shop-page .empty .btn { margin-top: 18px; border-radius: 10px; }

.shop-page footer.ft { margin: 0; padding: 23px max(24px,calc((100vw - 1140px)/2)); display: flex; justify-content: space-between; gap: 20px; text-align: left; }
.shop-page .ft-links { display: flex; gap: 18px; }
.shop-page .ft a { color: inherit; }
.shop-page .ft a:hover { color: var(--gold-2); }

.shop-page .drawer .panel { width: 430px; border-top: 0; border-left: 3px solid var(--gold); }
.shop-page .drawer .panel > header, .shop-page .drawer .panel > footer { background: #fbfcfe; }
.shop-page .drawer .panel > header .btn { border-radius: 9px; }
.shop-page .cart-item, .shop-page .wish-item { border-radius: 10px; }

@media (max-width: 900px) {
  .shop-page .shop-layout { grid-template-columns: 1fr; }
  /* จอแคบเหลือคอลัมน์เดียว — ถ้ายังปักคอลัมน์ 2 ไว้ กริดจะงอกคอลัมน์ที่สองขึ้นมาเอง */
  .shop-page .bundlewrap,
  .shop-page .prodwrap { grid-column: 1; }
  .shop-page .sidebar { position: static; }
  .shop-page .sidebar .group { margin-top: 14px; padding-top: 14px; }
}

@media (max-width: 700px) {
  .shop-page .brand > div { display: none; }
  .shop-page .nav .wrap { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .shop-page .nav .brand img { width: 44px; height: 44px; }
  .shop-page .nav .shop-tools { margin-left: auto; gap: 6px; }
  .shop-page .nav .shop-tools .cartbtn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 9px; }
  .shop-page .nav .burger { margin-left: 0; }
  .shop-hero { min-height: 0; margin-top: 16px; padding-top: 27px; padding-bottom: 27px; border-radius: 18px; }
  .shop-hero-copy { padding-left: 4px; }
  .shop-hero-visual { display: none; }
  .shop-benefits { align-items: flex-start; flex-direction: column; gap: 8px; }
  .shop-page .shop-layout { padding-top: 14px; padding-left: 12px; padding-right: 12px; }
  .shop-page .sidebar { padding: 17px; }
  .shop-page .prodwrap { padding: 13px; }
  .shop-page .tools { flex-wrap: wrap; }
  .shop-search { flex-basis: 100%; }
  .shop-page .tools .select { flex: 1; }
  .shop-page .refresh-btn span { display: none; }
  .shop-page .refresh-btn { width: 46px; padding: 0; justify-content: center; }
  .shop-page .grid-products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .shop-page .p-thumb { aspect-ratio: 1/1; }
  .shop-page .p-body { padding: 12px; }
  .shop-page .p-name { min-height: 40px; font-size: 14px; }
  .shop-page .p-price { font-size: 17px; }
  .shop-page .p-actions { flex-direction: column; }
  .shop-page .mini { width: 100%; }
  .shop-page footer.ft { align-items: center; flex-direction: column; text-align: center; }
}

@media (max-width: 410px) {
  .shop-page .grid-products { grid-template-columns: 1fr; }
  .catalog-head h2 { font-size: 21px; }
}

/* ===== ชุดสินค้า (migration 036/037) ===== */
.bundlewrap { margin-bottom: 22px; }
.grid-bundles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.bundle-card {
  border: 1px solid var(--line, #e5e7eb); border-radius: 14px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.bn-thumb { position: relative; aspect-ratio: 4 / 3; background: #f1f5f9; }
.bn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-save {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 4px 10px; border-radius: 999px; background: #15803d; color: #fff;
  font-size: 12px; font-weight: 700;
}
.bn-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bn-name { font-weight: 700; font-size: 15px; line-height: 1.5; }
.bn-list { color: var(--muted, #64748b); font-size: 13px; line-height: 1.6; flex: 1; }
.bn-ends { color: #a35b00; font-size: 12.5px; font-weight: 600; }
.bn-price { font-weight: 800; font-size: 17px; }
.bn-was { color: var(--muted, #94a3b8); text-decoration: line-through; font-weight: 500; font-size: 14px; margin-left: 7px; }
.bundle-card .mini { margin-top: 6px; width: 100%; justify-content: center; }

/* กล่องเลือกตัวเลือกในชุด — ใช้โครงเดียวกับกล่องเข้าคิวสำรอง (.wl-*) */
.bn-row { padding: 11px 0; border-bottom: 1px solid #f1f5f9; }
.bn-row:last-of-type { border-bottom: 0; }
.bn-row-name { font-weight: 600; font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.bn-qty { color: var(--muted, #64748b); font-weight: 400; }
.bn-row-note { color: var(--muted, #94a3b8); font-size: 13px; }
.bn-row .select { width: 100%; }
.bn-total {
  margin: 12px 0 10px; padding: 10px 12px; border-radius: 10px;
  background: #f4f8ff; border: 1px solid #cddffb; font-size: 14.5px; line-height: 1.7;
}
.bn-total b { font-size: 17px; }
.bn-total-wait { color: #a35b00; font-weight: 600; }
.bn-total-note { color: var(--muted, #64748b); font-size: 12.5px; }
#bnSubmit:disabled { opacity: .5; cursor: not-allowed; }

/* บรรทัดในตะกร้าที่มาจากชุด */
.cart-bundle-tag {
  display: inline-block; margin: 3px 0; padding: 2px 8px; border-radius: 999px;
  background: #eef4ff; color: #1d3f8f; border: 1px solid #cddffb;
  font-size: 11.5px; font-weight: 700;
}
.cart-fixed-qty { color: var(--muted, #64748b); font-size: 13px; }
/* ชุดที่ของหมด — การ์ดยังอยู่ แต่บอกให้ชัดว่าซื้อไม่ได้และขาดอะไร */
.bn-out { color: #a12b2b; font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.bundle-card .mini[disabled] { opacity: .55; cursor: not-allowed; }