/* =========================================================
   Zilk FUNBOX 2026 — layered responsive key visual
   ใช้กับ index_new_2026.html เท่านั้น (หน้าเก่ายังใช้ style_cats.css)

   หลักการ
   1) .zilk-stage คือ "ผืนผ้าใบ" ที่ล็อกอัตราส่วนเท่ากับไฟล์ design
      (desktop 2880x1800, mobile 1080x1900) แล้ว fit ให้เห็นเต็มภาพเสมอ
      + จัดกึ่งกลาง -> ไม่มีทางที่หัวข้อ/ไอคอนจะโดนตัดหาย
   2) layer ทุกชั้นวางด้วย % ของ stage -> ตำแหน่งตรงกับ design ทุกขนาดจอ
   3) ขอบว่างที่เหลือ (letterbox/pillarbox) ถูกเติมด้วยการ "ยืดขอบภาพ"
      ของ bg ออกไป จึงต่อเนื่องเป็นเนื้อเดียวกับ design
   ========================================================= */

* {
  margin: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #4d6b32;
}

.container-fluid {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

/* ---------- backdrop: ยืดขอบภาพ bg เติมพื้นที่ว่าง ---------- */
.container-fluid::before,
.container-fluid::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-image: url("../img/img_cat_2026/desktop/bg.png");
}

/* ---------- stage ---------- */
.zilk-stage {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.zilk-stage .layer {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.zilk-stage .layer-bg {
  position: relative; /* ตัวกำหนดขนาดจริงของ stage */
  width: 100%;
  z-index: 1;
}

/* =========================================================
   DESKTOP  (canvas 2880 x 1800)
   ========================================================= */
.zilk-stage--desktop {
  aspect-ratio: 2880 / 1800;
}

/* จอกว้างกว่าสัดส่วน design -> ยึดความสูง, ขอบว่างอยู่ ซ้าย/ขวา */
@media (min-aspect-ratio: 2880/1800) {
  .zilk-stage--desktop {
    height: 100svh;
    width: auto;
  }
  .container-fluid::before {
    inset: 0 50% 0 0;
    background-position: left center;
    background-size: 30000px 100%;
  }
  .container-fluid::after {
    inset: 0 0 0 50%;
    background-position: right center;
    background-size: 30000px 100%;
  }
}

/* จอสูงกว่าสัดส่วน design -> ยึดความกว้าง, ขอบว่างอยู่ บน/ล่าง */
@media (max-aspect-ratio: 2880/1800) {
  .zilk-stage--desktop {
    width: 100vw;
    height: auto;
  }
  .container-fluid::before {
    inset: 0 0 50% 0;
    background-position: center top;
    background-size: 100% 30000px;
  }
  .container-fluid::after {
    inset: 50% 0 0 0;
    background-position: center bottom;
    background-size: 100% 30000px;
  }
}

/* ลำดับชั้นตาม artwork จริง: bg(1) -> header(30) -> cat(35) -> icon(40) -> word(50)
   ตัว cat.png คือแมว+กล่องที่ตัดพื้นหลังออก วางทับแมวใน bg พอดี
   จึงบัง header ได้เหมือน artwork (หูแมวอยู่หน้าตัว N/B)
   ทุกค่าด้านล่างวัดจาก banner ต้นฉบับด้วย template matching -> ตรง 1:1 */
.zilk-stage--desktop .layer-header {
  left: 6.111%;
  top: 4.333%;
  width: 75.521%;
  z-index: 30;
}
.zilk-stage--desktop .layer-cat {
  left: 13.194%;
  top: 26.556%;
  width: 71.458%;
  z-index: 35;
}
.zilk-stage--desktop .layer-icon-test {
  left: 5.347%;
  top: 30.667%;
  width: 14.306%;
  z-index: 40;
}
.zilk-stage--desktop .layer-icon-3layer {
  left: 80.347%;
  top: 29.944%;
  width: 14.306%;
  z-index: 40;
}
.zilk-stage--desktop .layer-word {
  left: 76.37%;
  top: 78.06%;
  width: 16.28%;
  z-index: 50;
}

/* =========================================================
   MOBILE / TABLET PORTRAIT  (canvas 1080 x 1900)
   ========================================================= */
.zilk-stage--mobile {
  display: none;
  aspect-ratio: 1080 / 1900;
  /* ปลด overflow:hidden ของ .zilk-stage เพื่อให้ .zilk-bottom
     ยื่นลงไปนอกขอบล่างของ artwork ได้ (ไม่มี layer อื่นล้นออกมา) */
  overflow: visible;
}

.zilk-stage--mobile .layer-header {
  /* ค่าจริงจาก artwork (วัดด้วย template matching เทียบ banner ต้นฉบับ, scale 1.0)
     ขนาดนี้ header จะซ้อนหัวแมว -> layer-cat ทำหน้าที่บังให้ถูกตาม artwork
     ถ้าจะย่อ: แก้ width แล้วคิด left = 43.240 - width/2 (คงจุดกึ่งกลางเดิม)
     แต่ย่อมากจะไม่ซ้อนหัวแมว เอฟเฟกต์ layer-cat ก็หายไป */
  left: 1.296%;
  top: 2.632%;
  width: 83.889%;
  z-index: 30;
}

.zilk-stage--mobile .layer-cat {
  left: 1.389%;
  top: 41.263%;
  width: 96.944%;
  z-index: 35;
}

/* ---- แถวล่าง: ปุ่มร้านค้า + ไอคอน 2 อัน + คำว่า "งุ้ยย! น่ารัก" ----
   ครอบเป็นกลุ่มเดียว ขยับทั้งแถวได้จาก .zilk-bottom ที่เดียว
   (bottom = ระยะจากขอบล่างของ design, left/width = กรอบรวมของแถว) */
.zilk-stage--mobile .zilk-bottom {
  position: absolute;
  left: 3.241%;
  width: 89.815%;
  /* ปุ่มหมุนหลักของแถวล่างทั้งกลุ่ม (ไอคอน + คำ + ปุ่ม)
     เลขมาก = ขึ้น, เลขน้อย = ลง  (ค่าตาม artwork เดิมคือ 2.895%)
     ติดลบได้เพราะ .zilk-stage--mobile ปลด overflow เป็น visible แล้ว */
  bottom: 6%;
  z-index: 250;
}

/* กรอบของไอคอน+คำ ล็อกสัดส่วนไว้ ตำแหน่งลูกจึงตรงกับ design เป๊ะ
   (กรอบรวมจริง = 970 x 274 px บน canvas 1080x1900) */
.zilk-stage--mobile .zilk-badge-row {
  position: relative;
  width: 100%;
  aspect-ratio: 970 / 274;
}

.zilk-stage--mobile .zilk-badge-row .layer-icon-test {
  left: 0;
  top: 27.737%;
  width: 20.412%;
  z-index: 40;
}
.zilk-stage--mobile .zilk-badge-row .layer-icon-3layer {
  left: 24.433%;
  top: 25.182%;
  width: 20.412%;
  z-index: 40;
}
.zilk-stage--mobile .zilk-badge-row .layer-word {
  left: 58.969%;
  top: 0;
  width: 41.031%;
  z-index: 50;
}

/* สลับชุด asset: tablet แนวตั้ง และจอเล็กทุกแนว -> ใช้ชุด Mobile */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 820px) {
  .zilk-stage--desktop {
    display: none;
  }
  .zilk-stage--mobile {
    display: block;
  }
  .container-fluid::before,
  .container-fluid::after {
    background-image: url("../img/img_cat_2026/mobile/bg.png");
  }

  @media (min-aspect-ratio: 1080/1900) {
    .zilk-stage--mobile {
      height: 100svh;
      width: auto;
    }

    /* tablet แนวตั้ง (pillarbox): artwork เต็มความสูงจอ ไม่มีแถบ letterbox
       ให้ยืม -> ใช้ค่า bottom ตาม artwork แท้ๆ กลุ่มล่างจะไม่ขึ้นไปคาบกล่อง */
    .zilk-stage--mobile .zilk-bottom {
      bottom: 2.895%;
    }
    .container-fluid::before {
      inset: 0 50% 0 0;
      background-position: left center;
      background-size: 30000px 100%;
    }
    .container-fluid::after {
      inset: 0 0 0 50%;
      background-position: right center;
      background-size: 30000px 100%;
    }
  }

  @media (max-aspect-ratio: 1080/1900) {
    .zilk-stage--mobile {
      width: 100vw;
      height: auto;
    }

    /* จอสูงกว่าสัดส่วน artwork -> เหลือแถบว่างบน/ล่างข้างละ (50svh - 87.963vw)
       (87.963vw = ครึ่งความสูงของ stage เพราะ stage สูง 100vw * 1900/1080)
       ดันเฉพาะกลุ่มล่างลงไปกินแถบนั้น artwork ยังอยู่กึ่งกลางเหมือนเดิม
       จอที่ไม่มีแถบว่าง (เช่น tablet แนวตั้ง) ค่าจะติดลบ -> max() ตัดเป็น 0 เอง */
    .zilk-stage--mobile .zilk-bottom {
      --letterbox: max(0px, 50svh - 87.963vw);
      --safe: max(2.5vh, env(safe-area-inset-bottom, 0px));
      transform: translateY(max(0px, calc(var(--letterbox) - var(--safe))));
    }
    .container-fluid::before {
      inset: 0 0 50% 0;
      background-position: center top;
      background-size: 100% 30000px;
    }
    .container-fluid::after {
      inset: 50% 0 0 0;
      background-position: center bottom;
      background-size: 100% 30000px;
    }
  }
}

/* =========================================================
   E-commerce buttons

   วางไว้ "ข้างใน" stage ทั้งสองชุด -> ตำแหน่งอิงกับตัว design เสมอ
   ไม่ว่าจอจะสัดส่วนไหน (letterbox/pillarbox) ปุ่มก็อยู่จุดเดิมบนภาพ
   ========================================================= */
.ecommerce-logo__container {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 250;
}

.ecommerce-logo__container a {
  line-height: 0;
}

.ecommerce-logo__container img {
  display: block;
  width: 100%;
}

/* ---- desktop: วางที่พื้นใต้กล่องทิชชู ไม่บังหน้าแมว ---- */
.zilk-stage--desktop .ecommerce-logo__container {
  right: 28%;
  bottom: 2%;
  width: 41%;
  gap: 1.5%;
  justify-content: flex-end;
}

.zilk-stage--desktop .ecommerce-logo__container a {
  flex: 0 1 32%;
}

/* ---- mobile/tablet portrait: อยู่ใน .zilk-bottom ใต้แถวไอคอน ---- */
.zilk-stage--mobile .ecommerce-logo__container {
  position: static;
  gap: 2%;
  justify-content: center;
  margin-top: 3%;
}

.zilk-stage--mobile .ecommerce-logo__container a {
  flex: 0 1 30%;
}

/* =========================================================
   Popup modal
   ========================================================= */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  background: #fff;
  max-width: 80vw;
  padding: 10px;
  border-radius: 8px;
}

.modal-content img {
  width: 100%;
}

.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 20px;
  cursor: pointer;
}