/* =============================================================================
   MUUNIQUE — Home Section Builder (CPT) front-end styles
   ========================================================================== */
.mqhs{--paper:#f4f4f2;--ink:#0a0a0a;--line:rgba(0,0,0,.12);--muted:rgba(0,0,0,.55);--green:#06C755;
  font-family:'IBM Plex Sans Thai','IBM Plex Sans',sans-serif;color:var(--ink)}
.mqhs *{box-sizing:border-box}
/* SEO: H1 หน้าแรกแบบ screen-reader-only (มีในโค้ด/SEO แต่ไม่กินพื้นที่ดีไซน์) */
.mqhs-sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mqhs__sec{width:100%}
.mqhs__inner{width:100%}

/* ===== SHARED HOVER ZOOM — ต่อ section: เปิด/ปิดด้วยคลาส .mqhs--zoom (render ใส่ให้ตาม ACF)
   ความแรงมาจากตัวแปร --mqhs-zoom (เช่น 1.07) · transition !important กัน reduced-motion killer ===== */
.mqhs-split__media,.mqhs-banner{overflow:hidden}
.mqhs--zoom .mqhs-look__img,
.mqhs--zoom .mqhs-cat__img img,
.mqhs--zoom .mqhs-bento__cell img,
.mqhs--zoom .mqhs-split__media img,
.mqhs--zoom .mqhs-banner__img,
.mqhs--zoom .mqp__img{transition:transform .5s cubic-bezier(.2,.6,.2,1)!important}
.mqhs--zoom .mqhs-look__card--shop:hover .mqhs-look__img,
.mqhs--zoom .mqhs-cat__card:hover .mqhs-cat__img img,
.mqhs--zoom .mqhs-bento__cell:hover img,
.mqhs--zoom .mqhs-split__media:hover img,
.mqhs--zoom .mqhs-banner:hover .mqhs-banner__img,
.mqhs--zoom .mqp:hover .mqp__img{transform:scale(var(--mqhs-zoom,1.07))}

/* ---------- Hero ---------- */
.mqhs-hero{display:block;line-height:0;position:relative;overflow:hidden}
.mqhs-hero__img{width:100%;height:auto;display:block}
.mqhs-hero__slide{display:block;line-height:0;flex:0 0 100%;min-width:0;position:relative}
button.mqhs-hero__slide{border:0;background:none;padding:0;cursor:pointer;width:100%}
.mqhs-hero__hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);
  color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 22px;line-height:1;opacity:0;transition:opacity .2s;z-index:2;white-space:nowrap}
.mqhs-hero__slide--shop:hover .mqhs-hero__hint{opacity:1}
/* !important ยกเว้น hero slider จาก Elementor reduced-motion killer
   (@media prefers-reduced-motion → html *{transition-duration:0s!important} เมื่อ Windows ปิดอนิเมชัน) */
.mqhs-hero--slider .mqhs-hero__track{display:flex;
  transition:transform .5s cubic-bezier(.6,0,.2,1)!important;transition-delay:0s!important}
.mqhs-hero__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;
  background:rgba(255,255,255,.85);color:var(--ink);cursor:pointer;display:grid;place-items:center;z-index:2}
.mqhs-hero__nav svg{width:22px;height:22px}
.mqhs-hero__nav:hover{background:#fff}
.mqhs-hero__nav--prev{left:16px}.mqhs-hero__nav--next{right:16px}
.mqhs-hero__dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px;z-index:2}
.mqhs-hero__dot{width:9px;height:9px;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:.2s}
.mqhs-hero__dot.is-active{width:26px;background:#fff}

/* ---------- Banner + Product ---------- */
.mqhs-bp__banner{line-height:0;border-radius:16px;overflow:hidden}
.mqhs-bp__banner img{width:100%;height:auto;display:block}
.mqhs-bp__head{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;
  font-size:calc(clamp(22px,3vw,34px) * var(--mqhs-title-scale,1));text-transform:uppercase;letter-spacing:-.01em;margin:22px 0 18px}

/* ===== SHARED RAIL (ใช้ร่วมทุก type ที่มีแถวเลื่อน) =====
   "กล่อง" ที่ inset ด้วย margin ซ้าย-ขวา → overflow ตัดการ์ดที่ขอบกล่อง (กรอบคงที่ทุกตำแหน่งเลื่อน) */
.mqhs-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:14px;margin-left:var(--mqhs-pl,0);margin-right:var(--mqhs-pr,0);
  scrollbar-width:thin;scrollbar-color:#0a0a0a #e3e2de;cursor:grab}
.mqhs-rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.mqhs-rail::-webkit-scrollbar{height:6px}
.mqhs-rail::-webkit-scrollbar-track{background:#e3e2de;border-radius:999px}
.mqhs-rail::-webkit-scrollbar-thumb{background:#0a0a0a;border-radius:999px}
/* การ์ดล้น (JS ตรวจเจอ) → เรียงชิดซ้ายเสมอ ไม่ให้ align ตัด/ซ่อนระยะเว้น */
.mqhs-rail.is-overflow{justify-content:flex-start!important}
/* ชิดขอบจอ — เต็มความกว้างลบระยะเว้น */
.mqhs-rail.is-fullbleed{margin-left:calc(50% - 50vw + var(--mqhs-pl,0px));margin-right:calc(50% - 50vw + var(--mqhs-pr,0px))}
/* การ์ดในแถว (ขนาดจาก --mqhs-cardw) */
.mqhs-rail__item{flex:0 0 auto;width:var(--mqhs-cardw,240px);min-width:0;scroll-snap-align:start}
.mqhs-rail__item .mqp{user-select:none}

/* ---------- Banner+Product ---------- */
.mqhs-bp--top .mqhs-bp__banner{margin-bottom:22px}
/* แบนเนอร์ข้าง — ความกว้างแบนเนอร์ = --mqhs-bp-bw (ปรับได้แยกจากการ์ด · default 45%) */
.mqhs-bp--left{display:grid;grid-template-columns:var(--mqhs-bp-bw,45%) minmax(0,1fr);gap:28px;align-items:stretch}
/* กลุ่มหัวข้อ+สินค้า จัดกึ่งกลางแนวตั้ง auto เทียบความสูงแบนเนอร์ (การ์ดเล็ก=ลอยกลาง ไม่ชิดบน) */
.mqhs-bp--left .mqhs-bp__wrap{display:flex;flex-direction:column;justify-content:center;min-height:0}
/* โหมดล็อกคอลัมน์: ช่องสินค้าหดพอดีการ์ด (ไม่ยืดเต็ม) + จัดทั้งบล็อกกึ่งกลาง → ไม่เหลือช่องว่างในช่องการ์ด */
.mqhs-bp--gridfixed.mqhs-bp--left{grid-template-columns:var(--mqhs-bp-bw,45%) auto;justify-content:center}
/* ภาพขวา: สลับคอลัมน์ + ตัวอักษรชิดขวา */
.mqhs-bp--left.mqhs-bp--imgright{grid-template-columns:minmax(0,1fr) var(--mqhs-bp-bw,45%)}
.mqhs-bp--gridfixed.mqhs-bp--imgright.mqhs-bp--left{grid-template-columns:auto var(--mqhs-bp-bw,45%)}
.mqhs-bp--left.mqhs-bp--imgright .mqhs-bp__banner{order:2}
.mqhs-bp--left.mqhs-bp--imgright .mqhs-bp__wrap{order:1}
.mqhs-bp--left.mqhs-bp--imgright .mqhs-bp__head{text-align:right}
/* ซ่อนสินค้า = โชว์แค่แบนเนอร์เต็มแถว (อัตราส่วนจริง) */
.mqhs-bp--noproducts{grid-template-columns:1fr!important}
.mqhs-bp--noproducts .mqhs-bp__banner img{height:auto}
.mqhs-bp--left .mqhs-bp__banner{height:100%}
.mqhs-bp--left .mqhs-bp__banner img{height:100%;object-fit:cover}
/* คอลัมน์สินค้า 2 โหมด — ล็อกจำนวนคอลัมน์ (จัดกึ่งกลาง) หรือเต็มความกว้าง */
.mqhs-bp--left .mqhs-bp__rail{display:grid;grid-auto-flow:row;
  overflow-x:visible;overflow-y:auto;max-height:760px;padding-right:8px;scrollbar-color:#0a0a0a #e3e2de}
/* โหมดล็อกคอลัมน์: การ์ดกว้างตาม --mqhs-cardw · การ์ดเล็ก=ชิดฝั่งภาพ (ซ้าย/ขวาตามตำแหน่งภาพ) */
.mqhs-bp--gridfixed .mqhs-bp__rail{
  grid-template-columns:repeat(var(--mqhs-bp-cols,2),minmax(0,var(--mqhs-cardw,200px)));
  justify-content:start}
.mqhs-bp--gridfixed.mqhs-bp--imgright .mqhs-bp__rail{justify-content:end}
/* โหมดเต็มความกว้าง: auto-fill ยืดเต็มกล่อง (การ์ดเล็ก=คอลัมน์เยอะ) */
.mqhs-bp--gridfill .mqhs-bp__rail{
  grid-template-columns:repeat(auto-fill,minmax(min(var(--mqhs-cardw,200px),100%),1fr))}
.mqhs-bp--left .mqhs-bp__rail::-webkit-scrollbar{width:6px;height:auto}
.mqhs-bp--left .mqhs-rail__item{width:auto;min-width:0}

/* ---------- Category ---------- */
.mqhs-cat__head{margin-bottom:20px}
.mqhs-cat__kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.mqhs-cat__title{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;
  font-size:calc(clamp(28px,4vw,48px) * var(--mqhs-title-scale,1));text-transform:uppercase;letter-spacing:-.01em;margin:6px 0 0}
/* image-only tile (ไม่มีกรอบ/ชื่อ) — hover zoom = ระบบ .mqhs--zoom ด้านล่าง */
.mqhs-cat__card{display:block;overflow:hidden}
.mqhs-cat__img{aspect-ratio:1/1;background:#eceae6}
.mqhs-cat__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Split scene ---------- */
/* ความกว้างรูป = --mqhs-split-mw (default 1fr = 50/50) · ปรับแยกจากข้อความ */
.mqhs-split{display:grid;grid-template-columns:var(--mqhs-split-mw,1fr) minmax(0,1fr);gap:48px;align-items:center}
.mqhs-split--right{grid-template-columns:minmax(0,1fr) var(--mqhs-split-mw,1fr)}
.mqhs-split--right .mqhs-split__media{order:2}
.mqhs-split__media{line-height:0}
.mqhs-split__media img{width:100%;height:auto;display:block}
.mqhs-split__kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
/* ขนาดหัวข้อ = คูณด้วย --mqhs-title-scale (เล็ก/ปกติ/ใหญ่/ใหญ่มาก) */
.mqhs-split__title{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;
  font-size:calc(clamp(28px,4vw,52px) * var(--mqhs-title-scale,1));text-transform:uppercase;letter-spacing:-.02em;line-height:1;margin:10px 0 0}
/* หัวข้อรอง — เล็กกว่าหัวข้อหลัก ตัวหนา (สเกลตาม title-scale เหมือนกัน) */
.mqhs-split__sub{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:600;
  font-size:calc(clamp(17px,2vw,24px) * var(--mqhs-title-scale,1));letter-spacing:-.01em;line-height:1.25;margin:12px 0 0;color:var(--ink)}
.mqhs-split__text{margin:18px 0 0;max-width:440px;font-size:16px;line-height:1.7;color:rgba(0,0,0,.62)}
.mqhs-split__btn{display:inline-block;margin-top:26px;padding:15px 26px;background:var(--ink);color:#fff;
  font-weight:600;font-size:14px;text-decoration:none}
.mqhs-split__btn:hover{background:#000}

/* ---------- Bento ---------- */
.mqhs-bento{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.mqhs-bento__col{display:flex;flex-direction:column;gap:18px;min-width:0}
.mqhs-bento__big{min-width:0}
.mqhs-bento__cell{display:block;line-height:0;overflow:hidden;position:relative}
button.mqhs-bento__cell{border:0;background:none;padding:0;cursor:pointer;width:100%}
.mqhs-bento__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mqhs-bento__hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);
  color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 22px;line-height:1;opacity:0;transition:opacity .2s;white-space:nowrap}
.mqhs-bento__cell--shop:hover .mqhs-bento__hint{opacity:1}
/* ซ้าย (big) ยืดสูงเท่าคอลัมน์ขวา (2 ภาพ + gap) อัตโนมัติ — ไม่ล็อกสัดส่วน
   รูปเป็น absolute (ด้านบน) เลยไม่ดันความสูง grid · ปรับขนาดรวมได้ที่สัดส่วนภาพขวา/ความกว้าง section */
.mqhs-bento__big>.mqhs-bento__cell{height:100%}
.mqhs-bento__col>.mqhs-bento__cell{aspect-ratio:2/1}

/* ---------- Plain banner ---------- */
.mqhs-banner{display:block;line-height:0}
.mqhs-banner__img{width:100%;height:auto;display:block}

/* ---------- Mix & Match / แต่งตามลุค — cutout look slider ---------- */
.mqhs-look__head{margin-bottom:24px}
.mqhs-look__kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.mqhs-look__title{font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;
  font-size:calc(clamp(28px,4vw,48px) * var(--mqhs-title-scale,1));text-transform:uppercase;letter-spacing:-.01em;margin:6px 0 0}
/* ระยะห่างภาพคุมด้วย --mqhs-look-gap (margin ระหว่างใบ · ติดลบได้ = ซ้อนชิดกัน) */
.mqhs-look__rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;
  cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.mqhs-look__rail::-webkit-scrollbar{display:none}
.mqhs-look__rail.is-drag{cursor:grabbing;scroll-snap-type:none}
/* cutout card: ภาพคนชิดล่าง สูงเท่ากันทุกใบ พื้นโปร่ง (เหมือน slider ต้นฉบับ) */
.mqhs-look__card{flex:0 0 auto;width:clamp(190px,23vw,270px);scroll-snap-align:center;
  position:relative;display:block;line-height:0;border:0;background:none;padding:0;overflow:hidden}
.mqhs-look__card + .mqhs-look__card{margin-left:var(--mqhs-look-gap,24px)}
button.mqhs-look__card{cursor:pointer}
/* ลบขอบ/เงา/outline ชมพูที่หลุดมาจาก Elementor kit (2 คลาส specificity สูงกว่า kit) */
.mqhs-look .mqhs-look__card,
.mqhs-look .mqhs-look__card:hover,
.mqhs-look .mqhs-look__card:focus,
.mqhs-look .mqhs-look__card:focus-visible{border:0;outline:0;box-shadow:none;background:none}
/* cutout ซูมจากด้านล่าง (คนยืนติดพื้น) — hover zoom เอง = ระบบ .mqhs--zoom ด้านล่าง */
.mqhs-look__img{width:100%;height:440px;object-fit:contain;object-position:bottom center;display:block;
  user-select:none;-webkit-user-drag:none;transform-origin:center bottom}
.mqhs-look__dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px}
.mqhs-look__dot{width:9px;height:9px;border:0;background:rgba(0,0,0,.25);cursor:pointer;padding:0;transition:.2s}
.mqhs-look__dot.is-active{width:26px;background:var(--ink)}

/* ---------- Mix & Match lightbox (shared) ---------- */
.mqhs-mm__lb{position:fixed;inset:0;z-index:9999;display:grid;place-items:center}
.mqhs-mm__lb[hidden]{display:none}
.mqhs-mm__back{position:absolute;inset:0;background:rgba(10,10,10,.6)}
.mqhs-mm__box{position:relative;background:#fff;max-width:1040px;width:94%;max-height:88vh;overflow:auto;padding:28px}
.mqhs-mm__close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;background:#f0efec;cursor:pointer;font-size:16px}
.mqhs-mm__ttl{margin:0 0 18px;font-family:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;font-weight:700;text-transform:uppercase}
.mqhs-mm__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .mqhs-bp--left{grid-template-columns:1fr}
  .mqhs-bp--left .mqhs-bp__rail{max-height:none;grid-template-columns:1fr 1fr}
  .mqhs-rail__item{width:60%}
  .mqhs-split{grid-template-columns:1fr;gap:24px}
  .mqhs-split--right .mqhs-split__media{order:0}
  .mqhs-mm__grid{grid-template-columns:repeat(2,1fr)}
  .mqhs-look__img{height:360px}
  .mqhs-look__card{width:66%}
}