/* =============================================================================
   MUUNIQUE Store — [muunique_shop] layout (Claude Design: paper/ink/LINE green)
   ========================================================================== */
.mqshop{--paper:#F4F4F2;--ink:#0A0A0A;--white:#fff;--line:rgba(0,0,0,.10);--muted:rgba(0,0,0,.55);
  --green:#06C755;--green-ink:#06A047;--sale:#E11D2A;--radius:14px;
  background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans Thai','IBM Plex Sans',sans-serif;}
.mqshop *{box-sizing:border-box}
.mqshop__wrap{max-width:1320px;margin:0 auto;padding:34px 28px 80px}
.mqshop a{color:inherit;text-decoration:none}
.mqshop button{font-family:inherit;cursor:pointer}
.mqshop__mono{font-family:'IBM Plex Mono',monospace}

/* --- topbar --- */
.mqshop__topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.mqshop__crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.mqshop__crumb a:hover{color:var(--ink)}
.mqshop__crumb span{color:var(--ink)}
.mqshop__title{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;font-size:clamp(38px,6vw,72px);line-height:.95;letter-spacing:-.02em;margin:0}
.mqshop__count{margin:10px 0 0;font-size:14px;color:var(--muted)}
.mqshop__count b{color:var(--ink)}
.mqshop__sort{display:flex;justify-content:flex-end}
.mqshop__sortbtn{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:12px 20px;font-size:14px;font-weight:600;color:var(--ink);transition:border-color .15s}
.mqshop__sortbtn:hover{border-color:var(--ink)}
.mqshop__sortbtn svg{width:17px;height:17px}
.mqshop__caret{width:15px!important;height:15px!important;opacity:.6}

/* --- body layout --- */
.mqshop__body{display:grid;grid-template-columns:270px 1fr;gap:44px;align-items:start}
.mqshop__mfilter{display:none}

/* --- sidebar --- */
.mqshop__side{position:sticky;top:88px}
.mqshop__fhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mqshop__fttl{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:18px}
.mqshop__fttl svg{width:18px;height:18px}
.mqshop__clear{background:none;border:0;color:var(--muted);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.mqshop__clear:hover{color:var(--ink)}
.mqshop__mclose{display:none}

.mqshop__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer}
.mqshop__tlabel{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600}
.mqshop__dot{width:8px;height:8px;border-radius:999px;background:var(--green)}
.mqshop__toggle input{display:none}
.mqshop__sw{position:relative;width:42px;height:24px;border-radius:999px;background:rgba(0,0,0,.18);transition:background .2s;flex:0 0 auto}
.mqshop__sw:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mqshop__toggle input:checked+.mqshop__sw{background:var(--green)}
.mqshop__toggle input:checked+.mqshop__sw:before{transform:translateX(18px)}

/* filter group (accordion) */
.mqf{border-bottom:1px solid var(--line)}
.mqf__head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;
  padding:18px 0;font-size:16px;font-weight:600;color:var(--ink);text-align:left}
.mqf__head svg{width:18px;height:18px;transition:transform .2s;opacity:.6}
.mqf.is-collapsed .mqf__head svg{transform:rotate(-90deg)}
.mqf__body{padding-bottom:20px;display:flex;flex-direction:column;gap:13px}
.mqf.is-collapsed .mqf__body{display:none}

.mqf__check{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14.5px}
.mqf__check input{display:none}
.mqf__box{width:20px;height:20px;border:1.5px solid rgba(0,0,0,.25);border-radius:6px;flex:0 0 auto;position:relative;transition:.15s}
.mqf__check:hover .mqf__box{border-color:var(--ink)}
.mqf__check input:checked+.mqf__box{background:var(--ink);border-color:var(--ink)}
.mqf__check input:checked+.mqf__box:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mqf__txt{color:rgba(0,0,0,.8)}

.mqf__sizes{display:flex;flex-wrap:wrap;gap:10px}
.mqf__size{width:52px;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-weight:600;font-size:14px;color:var(--ink);transition:.15s}
.mqf__size:hover{border-color:var(--ink)}
.mqf__size.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

.mqf__price{padding-top:4px}
.mqf__track{position:relative;height:4px;border-radius:999px;background:rgba(0,0,0,.14);margin:14px 8px 0}
.mqf__fill{position:absolute;left:16%;right:22%;top:0;bottom:0;background:var(--ink);border-radius:999px}
.mqf__knob{position:absolute;top:50%;width:18px;height:18px;border-radius:999px;background:#fff;border:2px solid var(--ink);transform:translate(-50%,-50%)}
.mqf__knob--min{left:16%}.mqf__knob--max{left:78%}
.mqf__prow{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);margin:12px 4px 16px}
.mqf__quick{display:flex;flex-direction:column;gap:12px}

/* --- product grid --- */
.mqshop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px}
.mqp{display:flex;flex-direction:column}
.mqp__media{position:relative;aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line);overflow:hidden;
  background:#EFEFEC;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.045) 0 2px,transparent 2px 15px)}
.mqp__code{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.2em;color:rgba(0,0,0,.28)}
.mqp__tags{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;z-index:2}
.mqp__tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;padding:6px 11px;border-radius:999px}
.mqp__tag--new{background:var(--ink);color:var(--paper)}
.mqp__tag--free{background:var(--green);color:#fff}
.mqp__fav{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--ink);transition:.15s;z-index:2}
.mqp__fav svg{width:18px;height:18px}
.mqp__fav:hover,.mqp__fav.is-fav{background:var(--ink);color:#fff;border-color:var(--ink)}
.mqp__cat{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.mqp__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mqp__name{font-size:16px;font-weight:600;line-height:1.3;margin:0}
.mqp__price{font-size:16px;font-weight:700;white-space:nowrap}
.mqp__sub{display:flex;align-items:center;gap:9px;margin-top:5px}
.mqp__old{font-size:13px;color:var(--muted);text-decoration:line-through}
.mqp__off{font-size:12px;font-weight:700;color:var(--sale)}
.mqp__add{margin-top:14px;width:100%;padding:13px;background:transparent;border:1px solid rgba(0,0,0,.22);border-radius:999px;
  font-weight:600;font-size:13.5px;color:var(--ink);transition:.15s}
.mqp__add:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* --- responsive --- */
@media(max-width:1080px){ .mqshop__grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:860px){
  .mqshop__body{grid-template-columns:1fr}
  .mqshop__mfilter{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);
    border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;margin-bottom:22px}
  .mqshop__mfilter svg{width:18px;height:18px}
  .mqshop__side{position:fixed;inset:0;z-index:9999;background:var(--paper);padding:20px 22px;overflow-y:auto;
    transform:translateX(-100%);transition:transform .28s ease;top:0}
  .mqshop__side.is-open{transform:none}
  .mqshop__mclose{display:inline-flex;background:none;border:0;font-size:18px;color:var(--ink)}
  .mqshop__grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
}
@media(max-width:480px){ .mqshop__grid{grid-template-columns:repeat(2,1fr);gap:22px 12px} }

/* --- override Elementor kit global <button> styles (specificity > .elementor-kit-N button) --- */
.mqshop .mqf__head{background:none;border:0;box-shadow:none;color:var(--ink)}
.mqshop .mqshop__clear{background:none;border:0;box-shadow:none;color:var(--muted)}
.mqshop .mqshop__sortbtn{background:var(--white);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.mqshop .mqshop__sortbtn:hover{border-color:var(--ink)}
.mqshop .mqf__size{background:var(--white);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.mqshop .mqf__size.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.mqshop .mqp__add{background:transparent;border:1px solid rgba(0,0,0,.22);box-shadow:none;color:var(--ink)}
.mqshop .mqp__add:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mqshop .mqp__fav{background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.mqshop .mqp__fav:hover,.mqshop .mqp__fav.is-fav{background:var(--ink);color:#fff;border-color:var(--ink)}
.mqshop .mqshop__mfilter{display:none;background:var(--white);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.mqshop .mqshop__mclose{display:none;background:none;border:0;box-shadow:none;color:var(--ink)}
@media(max-width:860px){
  .mqshop .mqshop__mfilter{display:inline-flex}
  .mqshop .mqshop__side.is-open ~ * .mqshop__mclose,
  .mqshop .mqshop__mclose{display:inline-flex}
}

/* --- Phase 2: real product images + dependent (unavailable) states -------- */
.mqp__media{display:block}
.mqshop .mqp__img{position:absolute!important;inset:0;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:cover!important;display:block;z-index:1}
.mqp__media .mqp__tags,.mqp__media .mqp__fav{z-index:3}
.mqp__name a{color:inherit}
.mqf__check.is-unavailable,.mqf__size.is-unavailable{opacity:.3;pointer-events:none}
.mqf__check{transition:opacity .18s}
.mqf__size{transition:opacity .18s,border-color .15s,background .15s,color .15s}
.mqshop__empty{grid-column:1/-1;padding:70px 12px;text-align:center;color:var(--muted);font-size:15px;
  border:1px dashed var(--line);border-radius:14px}
.mqshop__grid{transition:opacity .15s}
.mqshop a.mqp__add{display:block;text-align:center;text-decoration:none}
.mqshop__count[data-mqshop-count],.mqshop .mqshop__count{margin:0}
.mqp__tag--sale{background:var(--sale);color:#fff}
/* price slider knobs draggable */
.mqf__knob{cursor:grab;touch-action:none}
.mqf__knob:active{cursor:grabbing}
.mqf__track{cursor:pointer}
/* price manual input */
.mqshop .mqf__prow{align-items:center}
.mqshop .mqf__pwrap{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;background:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);line-height:1}
.mqshop .mqf__pwrap:focus-within{border-color:var(--ink)}
.mqshop .mqf__pin{width:58px;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;
  padding:0;margin:0;box-shadow:none;height:auto;min-height:0}

/* ---- Home product rows ([muunique_home_products]) — การ์ดหน้าตาเดียวกับ Shop ---- */
.mqhome-prods{max-width:1320px;margin:0 auto}
/* แบบเลื่อนแนวนอน (scroll="yes") — เช่น สินค้าขายดี */
.mqhome-prods--scroll .mqshop__grid{
  display:flex;grid-template-columns:none;flex-wrap:nowrap;
  overflow-x:auto;gap:22px;padding-bottom:14px;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#0a0a0a #e3e2de;
}
.mqhome-prods--scroll .mqshop__grid::-webkit-scrollbar{height:6px}
.mqhome-prods--scroll .mqshop__grid::-webkit-scrollbar-track{background:#e3e2de;border-radius:999px}
.mqhome-prods--scroll .mqshop__grid::-webkit-scrollbar-thumb{background:#0a0a0a;border-radius:999px}
.mqhome-prods--scroll .mqshop__grid > .mqp{flex:0 0 auto;width:23%;min-width:230px;scroll-snap-align:start}
@media(max-width:768px){ .mqhome-prods--scroll .mqshop__grid > .mqp{width:62%;min-width:0} }
/* จำนวนคอลัมน์กำหนดเอง (cols="2/3") — เช่น การ์ดฝั่งขวาของ dnmfeat1 */
.mqhome-prods--cols2 .mqshop__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mqhome-prods--cols3 .mqshop__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){
  .mqhome-prods--cols2 .mqshop__grid,.mqhome-prods--cols3 .mqshop__grid{grid-template-columns:repeat(2,1fr)}
}