/*
Theme Name: Choozs
Theme URI: https://choozs.com/
Description: ธีมสำหรับ choozs.com — เขียนเองทั้งหมด ไม่พึ่ง page builder เพื่อความเร็วและ Core Web Vitals
Author: Day One Solution
Version: 1.15.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: choozs
*/


/* ============================================================
   0. ฟอนต์ — เก็บไว้ในธีม ไม่เรียก Google (เร็วกว่า + ไม่ส่งข้อมูลผู้ใช้ออกนอก)
   Italiana           = หัวเรื่องใหญ่ serif บางเรียว แนวนิตยสารแฟชั่น
   Oooh Baby          = ตัวเขียน "Create Impact." ลายมือ เส้นบาง
   IBM Plex Sans Thai = ตัวเนื้อหาภาษาไทย (และอังกฤษในเนื้อหา)

   ไฟล์ไทยกับละตินแยกกันด้วย unicode-range — เปิดหน้าภาษาไทยจะโหลดเฉพาะไฟล์ไทย
   ประหยัดกว่าฟอนต์รวมก้อนเดียว (4 ไฟล์รวม 42 KB แต่หน้าหนึ่งโหลดจริงไม่ถึงครึ่ง)
   ============================================================ */
@font-face {
  font-family: "Italiana";
  font-style: normal;
  font-weight: 400;                           /* Italiana มีน้ำหนักเดียว */
  font-display: swap;
  src: url("/wp-content/uploads/2026/09/italiana-400.woff2") format("woff2"),
       url("assets/fonts/italiana-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Oooh Baby";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* ไฟล์อยู่ในคลังสื่อชั่วคราว — ตอนรวมธีมเป็น zip ให้ย้ายเข้า assets/fonts/ แล้วเปลี่ยนกลับเป็น path สั้น */
  src: url("/wp-content/uploads/2026/09/ooohbaby-400.woff2") format("woff2"),
       url("assets/fonts/ooohbaby-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

/* ---- Chonburi — ตัวอักษรไทยของหัวเรื่องใหญ่ ----
   Italiana เป็นฟอนต์ชุดละตินล้วน ไม่มีอักษรไทย หัวเรื่องไทยจึงต้องมีคู่หู
   Chonburi เป็นฟอนต์ไทยที่มีเส้นหนา-บางตัดกันแบบเดียวกับ serif ฝรั่ง เข้ากันกว่าฟอนต์ไทยทั่วไป
   โหลดเฉพาะชุดอักษรไทย (7.5 KB) — ตัวละตินกับตัวเลขยังใช้ Italiana ตามเดิม */
@font-face {
  font-family: "Chonburi";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/wp-content/uploads/2026/09/chonburi-thai-400.woff2") format("woff2"),
       url("assets/fonts/chonburi-thai-400.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ---- IBM Plex Sans Thai — ตัวเนื้อหา ----
   หนัก 2 ระดับพอ: 400 อ่านทั่วไป / 700 ตัวหนา
   ฟอนต์นี้ไม่มีน้ำหนัก 800 — หัวเรื่องที่ตั้งไว้ 800 เบราว์เซอร์จะเลือก 700 ให้เอง
   ไม่ปลอมตัวหนา (faux bold) เพราะมีไฟล์ 700 จริงแล้ว */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/wp-content/uploads/2026/09/plexthai-thai-400.woff2") format("woff2"),
       url("assets/fonts/plexthai-thai-400.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/wp-content/uploads/2026/09/plexthai-latin-400.woff2") format("woff2"),
       url("assets/fonts/plexthai-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/wp-content/uploads/2026/09/plexthai-thai-700.woff2") format("woff2"),
       url("assets/fonts/plexthai-thai-700.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/wp-content/uploads/2026/09/plexthai-latin-700.woff2") format("woff2"),
       url("assets/fonts/plexthai-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   1. ตัวแปรดีไซน์ — แก้ที่นี่ที่เดียว มีผลทั้งเว็บ
   ============================================================ */
:root {
  --c-orange:      #fc4a14;
  --c-orange-dark: #d93c0c;
  --c-pink:        #ff1f8e;
  --c-gold:        #ffc94d;   /* ตัวเขียน "Create Impact" */
  --c-ink:         #111111;
  --c-ink-soft:    #444444;
  --c-muted:       #7a7a7a;
  --c-line:        #e6e3df;
  --c-cream:       #faf7f2;
  --c-white:       #ffffff;

  /* หัวเรื่องใหญ่ — Italiana ไม่มีตัวอักษรไทย (เป็นฟอนต์ชุดละตินล้วน)
     หัวเรื่องไทยอย่าง "เงื่อนไขที่ควรรู้" จึงไหลลงมาที่ Chonburi ซึ่งเป็นฟอนต์ไทยแนวเดียวกัน
     ถ้า Chonburi โหลดไม่ทันหรือโหลดไม่ได้ ค่อยตกมาที่ IBM Plex Sans Thai
     (เบราว์เซอร์เลือกให้ทีละตัวอักษร ตัวละตินกับตัวเลขจึงยังเป็น Italiana ตามเดิม) */
  --font-title:   "Italiana", "Chonburi", "Didot", Georgia, "IBM Plex Sans Thai", serif;
  /* เมนู ปุ่ม ป้าย — ละตินใช้ฟอนต์ระบบตามเดิม ส่วนภาษาไทยไหลมาที่ IBM Plex
     (Helvetica/Arial ไม่มีตัวอักษรไทย เบราว์เซอร์จึงข้ามมาตัวถัดไปเองเฉพาะอักษรไทย) */
  --font-display: "Archivo", "Helvetica Neue", Arial, "IBM Plex Sans Thai", sans-serif;
  --font-script:  "Oooh Baby", "Brush Script MT", cursive;                    /* ตัวเขียนสีทอง */
  --font-body:    "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap:      1320px;
  --gutter:    clamp(16px, 4vw, 48px);
  --header-h:  76px;
  --stats-h:   78px;      /* ความสูงแถบตัวเลขใต้ hero */
  --radius:    4px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. รีเซ็ตเท่าที่จำเป็น
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.65;
  color: var(--c-ink); background: var(--c-white);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.15; font-weight: 800; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--c-ink); color: #fff; padding: 12px 20px; }
.skip-link:focus { left: 8px; top: 8px; }
:where(a, button, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* ============================================================
   3. ปุ่ม
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 14px 26px; font-family: var(--font-display);
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--radius); min-height: 48px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background: var(--c-orange); color: #fff; }
.btn--primary:hover { background: var(--c-orange-dark); }
.btn--ghost { background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: #fff; }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: var(--c-orange); }
.btn--onImage { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.75); }
.btn--onImage:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn svg { width: 14px; height: 14px; flex: none; }

/* ตัวลิงก์แบบมีขีดใต้เลื่อน — ใช้กับ EXPLORE COLLECTION */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.5);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover { border-bottom-color: #fff; }
.link-arrow:hover svg { transform: translateX(5px); }

/* ============================================================
   4. Header — โหมดปกติ
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.site-logo { flex: none; display: flex; align-items: center; }
.site-logo img { max-height: 40px; width: auto; }
.site-logo__text { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .04em; }
.site-logo__text small { display: block; font-size: 10px; letter-spacing: .32em; color: var(--c-muted); font-weight: 600; }

.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-soft);
  padding: 8px 0; position: relative;
}
.nav a:hover, .nav .current-menu-item > a { color: var(--c-ink); }
.nav .current-menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-orange); }
.site-tagline {
  flex: none; padding-left: 16px; margin-left: 2px; border-left: 1px solid currentColor;
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; opacity: .78;
}
@media (max-width: 1100px) { .site-tagline { display: none; } }
.header-cta { flex: none; }

.nav-toggle { display: none; flex: none; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--radius); }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 3px auto; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- Header โหมดทับบนรูป hero (โปร่งใส ตัวหนังสือขาว) ---- */
.site-header--overlay {
  position: absolute; inset: 0 0 auto; z-index: 60;
  background: transparent; backdrop-filter: none; border-bottom: 0;
  color: #fff;
}
.site-header--overlay .site-logo__text { color: #fff; }
.site-header--overlay .site-logo__text small { color: rgba(255,255,255,.72); }
.site-header--overlay .nav a { color: rgba(255,255,255,.88); }
.site-header--overlay .nav a:hover, .site-header--overlay .nav .current-menu-item > a { color: #fff; }
.site-header--overlay .nav-toggle { border-color: rgba(255,255,255,.5); color: #fff; }
.site-header--overlay .btn--dark { background: var(--c-orange); }
.site-header--overlay .btn--dark:hover { background: #fff; color: var(--c-ink); }
/* กลับเป็นพื้นขาวเมื่อเมนูมือถือเปิด เพื่อให้อ่านออก */
.site-header--overlay:has(.nav.is-open) { background: rgba(17,17,17,.96); }

/* ============================================================
   4b. Mega menu ของเมนู Collections

   หมายเหตุเรื่องน้ำหนัก CSS (specificity):
   กฎของเมนูอย่าง `.nav a` และ `.nav ul` มีน้ำหนัก (0,1,1)
   ส่วนกฎคลาสเดี่ยวอย่าง `.mega__grid` มีแค่ (0,1,0) จึงถูกทับหมด
   และบนหน้าแรกยังมี `.site-header--overlay .nav a` (0,2,1) ที่บังคับตัวหนังสือเป็นสีขาวอีกชั้น
   กฎในบล็อกนี้จึงเขียนเป็น `.nav .mega ...` ให้ได้ (0,3,0) ขึ้นไป เพื่อทับได้จริงทุกกรณี
   ============================================================ */
.nav li { position: static; }        /* แผงกางเต็มความกว้างจอ ไม่อิงตำแหน่งของ li */

.nav .nav__caret {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  margin-left: 2px; vertical-align: middle; color: inherit; padding: 0;
  transition: transform .25s var(--ease);
}
.nav .nav__caret svg { width: 11px; height: 11px; }
.nav .has-mega:hover .nav__caret,
.nav .has-mega:focus-within .nav__caret,
.nav .has-mega.is-open .nav__caret { transform: rotate(180deg); }
.nav .has-mega:hover > a,
.nav .has-mega:focus-within > a,
.nav .has-mega.is-open > a { color: var(--c-orange); }

.nav .mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--c-line);
  box-shadow: 0 18px 40px rgba(0,0,0,.09);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 80; text-align: left;
}
.nav .has-mega:hover .mega,
.nav .has-mega:focus-within .mega,
.nav .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* ยังไม่ได้ตั้งรูปประกอบ ก็ไม่ต้องจองคอลัมน์ว่างไว้ ให้กริดขยายเต็มแทน */
.nav .mega__inner--nophoto { grid-template-columns: minmax(0, .72fr) minmax(0, 2.6fr) !important; }
.nav .mega__inner {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 2fr) minmax(0, .58fr);
  gap: clamp(24px, 3vw, 54px); align-items: start;
  padding-block: clamp(26px, 3vw, 40px);
}

/* ---- แผงซ้าย ---- */
.nav .mega__title {
  margin: 0 0 12px; font-family: var(--font-display);
  font-size: 19px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.35; color: var(--c-ink);
}
.nav .mega__title::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 12px; background: var(--c-orange); }
.nav .mega__sub  { margin: 0 0 10px; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--c-ink); }
.nav .mega__text { margin: 0 0 18px; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.8; color: var(--c-ink-soft); }
.nav .mega .mega__cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-orange);
}
.nav .mega .mega__cta svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav .mega .mega__cta:hover { color: var(--c-orange-dark); }
.nav .mega .mega__cta:hover svg { transform: translateX(4px); }

/* ---- กริดประเภท ---- */
.nav .mega__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 18px; list-style: none; margin: 0; padding: 0 0 0 clamp(20px, 2.4vw, 40px);
  border-left: 1px solid var(--c-line);
}
.nav .mega__grid > li > a { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 0; color: var(--c-ink); }
.nav .mega__thumb {
  flex: none; width: 52px; height: 52px; border-radius: 3px; overflow: hidden;
  background: var(--c-cream); border: 1px solid transparent;
  display: grid; place-items: center; transition: border-color .2s var(--ease);
}
.nav .mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nav .mega__label { min-width: 0; }
.nav .mega__label strong {
  display: block; font-family: var(--font-display);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.4;
  text-transform: uppercase; color: var(--c-ink);
}
.nav .mega__shop {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.nav .mega__shop svg { width: 11px; height: 11px; }
.nav .mega__grid a.is-active .mega__thumb,
.nav .mega__grid a:hover .mega__thumb { border-color: var(--c-orange); }
.nav .mega__grid a.is-active .mega__label strong,
.nav .mega__grid a:hover .mega__label strong { color: var(--c-orange); }

.nav .mega__all { grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--c-line); }
.nav .mega__grid > li.mega__all > a {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink);
}
.nav .mega__all svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.nav .mega__grid > li.mega__all > a:hover { color: var(--c-orange); }
.nav .mega__grid > li.mega__all > a:hover svg { transform: translateX(4px); }

/* ---- รูปขวา ---- */
.nav .mega__photo { overflow: hidden; border-radius: 3px; }
.nav .mega__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 1240px) {
  .nav .mega__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); }
  .nav .mega__photo { display: none; }
}

/* ---- แท็บเล็ตและมือถือ: แผงกลายเป็นรายการย่อยในเมนูที่กางลงมา ---- */
@media (max-width: 1024px) {
  .nav .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; display: none;
  }
  .nav .has-mega:hover .mega, .nav .has-mega:focus-within .mega { display: none; }
  .nav .has-mega.is-open .mega { display: block; }

  .nav .mega__inner { grid-template-columns: 1fr; gap: 0; padding: 0 0 12px; max-width: none; }
  .nav .mega__feature { display: none; }
  .nav .mega__grid {
    grid-template-columns: 1fr; gap: 0;
    border-left: 1px solid rgba(255,255,255,.16); padding-left: 14px;
  }
  .nav .mega__grid > li > a { padding: 9px 0; border-bottom: 0; }
  .nav .mega__thumb { width: 38px; height: 38px; }
  .nav .mega__label strong { color: rgba(255,255,255,.9); font-size: 12px; }
  .nav .mega__shop { display: none; }
  .nav .mega__all { border-top-color: rgba(255,255,255,.16); }
  .nav .mega__grid > li.mega__all > a { color: rgba(255,255,255,.8); }

  .site-header:not(.site-header--overlay) .nav .mega__label strong,
  .site-header:not(.site-header--overlay) .nav .mega__grid > li.mega__all > a { color: var(--c-ink); }
  .site-header:not(.site-header--overlay) .nav .mega__grid { border-left-color: var(--c-line); }

  .nav .nav__caret { float: right; width: 44px; height: 44px; margin: -8px 0 0; }
  .nav .nav__caret svg { width: 14px; height: 14px; }
}

/* ============================================================
   5. Hero — ภาพเต็มจอ ตัวหนังสือทับด้วย HTML
      (รูปเป็นแค่ภาพถ่าย ไม่มีตัวหนังสือฝังในรูป → Google อ่านได้ครบ)
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  height: clamp(600px, 100svh, 980px);          /* ล็อกความสูง แถบตัวเลขจะอยู่ในจอเสมอ */
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: #2a0a14;                      /* สีรองกันจอว่างระหว่างรูปโหลด */
  color: #fff; overflow: hidden;
}

/* ---- ชั้นรูป ---- */
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; object-position: center 30%; }

/* ---- ชั้นไล่สีให้ตัวหนังสืออ่านออกทุกรูป (แก้ปัญหา contrast) ---- */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,0) 55%),
    linear-gradient(90deg,  rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,0) 68%),
    linear-gradient(0deg,   rgba(0,0,0,.6)  0%, rgba(0,0,0,0)   34%);
}

/* ---- เนื้อหา ---- */
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;   /* กึ่งกลางแนวตั้งตามภาพ */
  padding-top: calc(var(--header-h) + 24px); padding-bottom: 28px;
  padding-left: calc(var(--gutter) + 58px);                          /* เยื้องพ้นราวซ้าย */
  min-height: 0; overflow: hidden;                                   /* กันดันแถบตัวเลขตกจอ */
}
.hero__eyebrow {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 18px;
}
.hero__display {
  position: relative; margin: 0 0 20px;
  font-family: var(--font-title); font-weight: 400;   /* Italiana มีน้ำหนักเดียว */
  font-size: clamp(2.4rem, min(9.4vw, 15vh), 9rem); line-height: .86;   /* คำละบรรทัด เลยอัดบรรทัดชิดได้ */
  letter-spacing: .02em; text-transform: uppercase;
}
/* คำละบรรทัดตามภาพ */
.hero__display .w { display: block; }
/* สองโทน: สองคำแรกขาว สองคำหลังเข้ม */
.hero__display .l1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.28); }
.hero__display .l2 { color: #111; }
.hero__display .script {
  position: absolute; white-space: nowrap;
  font-family: var(--font-script);
  font-size: .42em; font-weight: 400; text-transform: none;
  letter-spacing: .01em; color: var(--c-gold); line-height: .9;
  transform: rotate(-8deg); margin-left: .34em; margin-top: -.1em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.hero__lead {
  font-family: var(--font-display); font-size: clamp(11.5px, 1.2vw, 13px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.9);
  margin: 0 0 20px; line-height: 1.8;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* ---- แถบตัวเลขด้านล่าง ---- */
.hero__stats {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(3px);
}
.hero__stats ul {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.hero__stats li { padding: 14px 18px; border-left: 1px solid rgba(255,255,255,.16); }
.hero__stats li:first-child { border-left: 0; }
.hero__stats dt {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 4px;
}
.hero__stats dd {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: -.01em; line-height: 1.1;
}
.hero__stats dd small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.66); text-transform: uppercase; margin-top: 2px; }

/* ---- ราวซ้าย: SCROLL DOWN + เลขสไลด์ ---- */
.hero__rail {
  position: absolute; left: var(--gutter); top: 0; bottom: var(--stats-h); width: 40px;
  z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-block: calc(var(--header-h) + 20px) 46px;
}
.hero__rail-nums { position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 14px; }
.hero__rail-nums::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(255,255,255,.32);
}
.hero__rail-nums button {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.45); padding: 0;
}
.hero__rail-nums button[aria-current="true"] { color: #fff; }
.hero__scroll {
  position: absolute; left: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
/* เส้นวิ่งลง — ไล่จางบน→ล่างวนไป */
.hero__scroll::before {
  content: ""; width: 1px; height: 46px; margin-top: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0) 100%);
  background-size: 100% 200%;
  animation: choozs-scrollline 2.2s cubic-bezier(.45,.05,.3,1) infinite;
}
@keyframes choozs-scrollline {
  0%   { background-position: 0 -100%; opacity: 0; }
  25%  { opacity: 1; }
  100% { background-position: 0 100%; opacity: 0; }
}

/* ---- ปุ่มเลื่อนซ้าย/ขวา ---- */
.hero__nav { position: absolute; right: var(--gutter); bottom: calc(100% + 16px); z-index: 3; display: flex; gap: 8px; align-items: center; }
.hero__nav button {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(0,0,0,.2); transition: background .2s, border-color .2s;
}
.hero__nav button:hover { background: var(--c-orange); border-color: var(--c-orange); }
.hero__nav svg { width: 13px; height: 13px; }

/* ============================================================
   6. Hero — Tablet
   ============================================================ */
@media (max-width: 1024px) {
  .hero { min-height: clamp(560px, 86svh, 820px); }
  .hero__display { font-size: clamp(2.2rem, min(9.6vw, 13vh), 5.2rem); }
  :root { --stats-h: 128px; }
  .hero__stats ul { grid-template-columns: repeat(3, 1fr); }
  .hero__stats li:nth-child(4) { border-left: 0; }
  .hero__stats li:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.16); }
  .hero__nav { bottom: calc(100% + 10px); }

  .nav { display: none; }
  .nav-toggle { display: block; margin-inline-start: auto; }
  .header-cta { order: 3; }
  .nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(17,17,17,.98); padding: 8px var(--gutter) 22px;
  }
  .nav.is-open ul { flex-direction: column; gap: 0; }
  .nav.is-open a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 14px; color: #fff; }
  .site-header:not(.site-header--overlay) .nav.is-open { background: #fff; }
  .site-header:not(.site-header--overlay) .nav.is-open a { color: var(--c-ink); border-color: var(--c-line); }
}

/* ============================================================
   7. Hero — มือถือ
   ============================================================ */
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .hero { min-height: clamp(560px, 94svh, 780px); }
  .hero__slide img { object-position: center 22%; }   /* ดันเฟรมให้เห็นนางแบบ+กระเป๋า */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 34%),
      linear-gradient(0deg,   rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 46%, rgba(0,0,0,0) 66%);
  }
  .hero__inner { padding-bottom: 30px; }
  .hero__display { font-size: clamp(1.9rem, min(13vw, 11vh), 3.6rem); }
  .hero__display .script { font-size: .46em; margin-left: .28em; }
  .hero__lead { line-height: 1.8; margin-bottom: 20px; }
  .hero__actions { gap: 12px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__stats ul { grid-template-columns: repeat(2, 1fr); }
  .hero__stats li { padding: 10px 12px; }
  .hero__stats dd { font-size: 1.25rem; }
  .hero__rail { width: 26px; padding-bottom: 40px; gap: 16px; }
  .hero__scroll { display: none; }
  .hero__nav { display: none; }                       /* ใช้ปัดนิ้วแทน */
  .site-logo__text { font-size: 18px; }
  .header-cta .btn { padding: 10px 14px; font-size: 11px; min-height: 40px; }
}

/* จอสูงแต่แคบ (มือถือแนวตั้ง) — กัน hero สูงเกินจนต้องเลื่อนหาปุ่ม */
@media (max-width: 640px) and (max-height: 700px) {
  .hero { min-height: 620px; }
}

/* ============================================================
   8. โครงร่วมของ section เนื้อหา (ใช้ซ้ำกับ section ถัด ๆ ไป)
   ============================================================ */
.section {
  position: relative; isolation: isolate;
  padding-block: clamp(56px, 7vw, 104px);
  background: var(--c-cream);
  overflow: hidden;                     /* กันลายน้ำ/ป้ายห้อยดันจอกว้าง */
}
.section + .section { border-top: 1px solid var(--c-line); }

/* ---- ราวซ้าย: เลข section + ชื่อแนวตั้ง (ตกแต่ง) ---- */
.section__rail {
  position: absolute; left: max(10px, calc(var(--gutter) - 30px)); top: clamp(56px, 7vw, 104px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-family: var(--font-display); color: var(--c-muted);
}
.section__num { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.section__label {
  writing-mode: vertical-rl; font-size: 9.5px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase;
}
.section__label::before { content: ""; display: block; width: 1px; height: 34px; margin: 0 auto 14px; background: var(--c-line); }
@media (max-width: 1180px) { .section__rail { display: none; } }

/* ---- หัว section: ชื่อใหญ่ + ตัวเขียน + คำโปรย + ลิงก์วงกลม ---- */
.section__head {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 24px 40px;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.section__head-main { min-width: 0; }
.section__title {
  position: relative; margin: 0 0 14px;
  font-family: var(--font-title); font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: .01em;
  color: var(--c-ink);
}
/* ตัวเขียนสีส้มวางทับหางคำ เอียงเล็กน้อยตามดีไซน์ */
.section__script {
  display: inline-block; vertical-align: baseline;
  font-family: var(--font-script); font-size: .34em; line-height: .9;
  color: var(--c-orange); text-transform: none; letter-spacing: .01em;
  transform: rotate(-7deg); transform-origin: left center;
  margin-left: -.42em; margin-bottom: .34em; white-space: nowrap;
}
.section__lead {
  max-width: 46ch; margin: 0;
  font-size: 15px; line-height: 1.75; color: var(--c-ink-soft);
  text-wrap: balance;
}

/* ---- กันคำโดดตกบรรทัดสุดท้าย ----
   ภาษาไทยไม่มีเว้นวรรคระหว่างคำ เบราว์เซอร์จึงตัดบรรทัดที่ขอบคำ
   บางครั้งเหลือคำเดียวห้อยอยู่บรรทัดล่างอย่าง "...ก็เริ่ม / ได้" ซึ่งอ่านแล้วสะดุด

   balance = เกลี่ยให้ทุกบรรทัดยาวใกล้กัน — ใช้กับข้อความสั้นอย่างหัวเรื่องและคำโปรย
   pretty  = แก้เฉพาะบรรทัดสุดท้ายไม่ให้เหลือคำเดียว — ใช้กับย่อหน้ายาว
   เบราว์เซอร์รุ่นเก่าที่ไม่รู้จักจะข้ามไปเอง ไม่พัง */
.section__title,
.page-head .section__lead,
.why__statement,
.cta-band__title, .cta-band__text,
.why-card__title, .step__title,
.col-card__title, .work-card__title, .idea-card__title {
  text-wrap: balance;
}

.why-card__text, .step__text, .idea-card__text,
.col-card__tag, .site-footer__tag {
  text-wrap: pretty;
}

/* ---- ลิงก์วงกลม VIEW ALL ---- */
.link-circle { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.link-circle__dot {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--c-orange); color: #fff; display: grid; place-items: center;
  transition: transform .25s var(--ease), background .2s var(--ease);
}
.link-circle__dot svg { width: 17px; height: 17px; }
.link-circle__text {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink);
}
.link-circle__text small {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: none; color: var(--c-muted); margin-top: 3px;
  font-family: var(--font-body);
}
.link-circle:hover .link-circle__dot { transform: translateX(4px); background: var(--c-orange-dark); }

/* ---- ป้ายห้อยแบบป้ายราคา (ตกแต่ง) ---- */
.hangtag {
  position: absolute; right: -6px; top: -34px; z-index: -1;
  width: 92px; height: 118px; pointer-events: none;
}
.hangtag::before {                       /* เชือก */
  content: ""; position: absolute; left: 50%; top: -26px; width: 1px; height: 34px;
  background: var(--c-line); transform: rotate(12deg); transform-origin: top;
}
.hangtag__card {
  position: absolute; inset: auto 0 0 0; height: 76px;
  display: grid; place-content: center; text-align: center;
  background: var(--c-orange); color: #fff; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .06em;
  transform: rotate(14deg);
  box-shadow: 0 10px 26px rgba(252, 74, 20, .22);
}
.hangtag__card small { display: block; font-size: 8px; letter-spacing: .3em; opacity: .8; margin-top: 2px; }
.hangtag__card::before {                 /* รูร้อยเชือก */
  content: ""; position: absolute; left: 50%; top: 9px; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: rgba(0,0,0,.25);
}
@media (max-width: 900px) { .hangtag { display: none; } }

/* ---- ลายน้ำตัวอักษรใหญ่ ---- */
.collections__watermark {
  position: absolute; right: -2vw; top: 2px; z-index: -2; pointer-events: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(6rem, 15vw, 15rem); line-height: .8; letter-spacing: -.02em;
  color: rgba(17, 17, 17, .035); user-select: none;
}

/* ============================================================
   9. Collections — กริดการ์ด
      ดีไซน์: 5 คอลัมน์ 2 แถว (ตามที่ตกลงใน LINE)
      ย่อจอแล้วลดคอลัมน์ลงเรื่อย ๆ ไม่ซ่อนการ์ดทิ้ง เพื่อให้ Google เห็นครบ
   ============================================================ */
.col-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px) clamp(10px, 1.2vw, 20px);
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1200px) { .col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.col-card > a { display: block; height: 100%; }
.col-card__media {
  position: relative; overflow: hidden; background: #ebe7e1;
  aspect-ratio: 4 / 5; border-radius: 2px;
}
.col-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.col-card__noimg { display: block; width: 100%; height: 100%; }
.col-card > a:hover .col-card__media img { transform: scale(1.05); }

.col-card__body { padding-top: 12px; }
.col-card__meta {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px;
  font-family: var(--font-display); text-transform: uppercase;
}
.col-card__num { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--c-muted); }
.col-card__en  { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; color: var(--c-ink); }
.col-card__title {
  margin: 0 0 4px; font-family: var(--font-body);
  font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--c-ink);
}
.col-card__tag {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--c-muted);
}
.col-card__arrow {
  width: 15px; height: 15px; flex: none; color: var(--c-ink);
  transition: transform .25s var(--ease), color .2s var(--ease);
}
.col-card > a:hover .col-card__arrow { transform: translateX(4px); color: var(--c-orange); }
.col-card > a:hover .col-card__en { color: var(--c-orange); }

/* หัว section บนจอแคบ — ลิงก์ View All ลงมาอยู่บรรทัดใหม่ */
@media (max-width: 760px) {
  .section__head { grid-template-columns: 1fr; align-items: start; }
  .section__title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .section__script { font-size: .38em; margin-left: -.3em; }
  .section__lead { font-size: 14px; }
  .col-card__title { font-size: 13.5px; }
  .col-card__tag { font-size: 11.5px; }
}

/* ============================================================
   9b. หน้ารวม Our Works — พื้นขาว + แถบกรอง + tag
   ============================================================ */
.works--archive { background: var(--c-white); color: var(--c-ink); }
.works--archive .work-card__media { background: #ebe7e1; }
.works--archive .work-card__title { color: var(--c-ink); }
.works--archive .work-card__link:hover .work-card__title { color: var(--c-orange); }
.works--archive .work-card__meta { color: var(--c-muted); }
.works--archive .work-card__qty { color: var(--c-muted); }

/* ---- แถบกรอง ---- */
.filter { margin-bottom: clamp(24px, 3vw, 38px); }
.filter__label {
  display: block; margin-bottom: 12px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}
.filter ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.filter a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid var(--c-line); border-radius: 999px;
  font-size: 13px; line-height: 1.2; color: var(--c-ink-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filter a small {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  color: var(--c-muted); background: var(--c-cream); border-radius: 999px; padding: 2px 6px;
}
.filter a:hover { border-color: var(--c-ink); color: var(--c-ink); }
.filter a[aria-current="page"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.filter a[aria-current="page"] small { background: rgba(255,255,255,.2); color: #fff; }

.filter__more { margin: clamp(22px, 3vw, 36px) 0 0; }
.filter__empty {
  margin: 0; padding: 46px 0; text-align: center; color: var(--c-muted); font-size: 15px;
}
.filter__empty a { margin-left: 8px; color: var(--c-orange); border-bottom: 1px solid currentColor; }

/* ---- tag บนการ์ด ---- */
.work-card { display: flex; flex-direction: column; }
.work-card__link { flex: 1; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 9px 0 0; padding: 0; }
.work-card__tags a {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; line-height: 1.5;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.72);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.work-card__tags a:hover { background: var(--c-orange); color: #fff; }
.works--archive .work-card__tags a { background: var(--c-cream); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.works--archive .work-card__tags a:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* ---- หน้ารวม /collections/ ---- */
.collections--archive { border-top: 1px solid var(--c-line); }
.collections--archive .section__head { padding-top: 10px; }

/* ============================================================
   10. Our Works — แถบพื้นดำ เลื่อนรูปแนวนอน
       ตามภาพดีไซน์: OUR (ขาว) / WORKS (ส้ม) ซ้อนสองบรรทัด
   ============================================================ */
.section--dark {
  background: #0e0e0e;
  color: #fff;
}
.section--dark + .section,
.section + .section--dark { border-top: 0; }
.section--dark .section__title { color: #fff; }
.section--dark .section__lead  { color: rgba(255,255,255,.66); }
.section--dark .section__rail  { color: rgba(255,255,255,.5); }
.section--dark .section__label::before { background: rgba(255,255,255,.28); }
.section--dark .link-circle__text { color: #fff; }

/* หัวเรื่องสองบรรทัด คำละสี */
.section__title--stack { line-height: .9; }
.section__title--stack .w1,
.section__title--stack .w2 { display: block; text-transform: uppercase; }
.section__title--stack .w2 { color: var(--c-orange); }

.works__controls { display: flex; align-items: center; gap: 22px; flex: none; }
.works__nav { display: flex; gap: 8px; }
.works__nav[hidden] { display: none; }
.works__nav button {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.works__nav button:hover:not(:disabled) { background: var(--c-orange); border-color: var(--c-orange); }
.works__nav button:disabled { opacity: .3; cursor: default; }
.works__nav svg { width: 14px; height: 14px; }

/* ---- แถวเลื่อน ---- */
.works__rail {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 0 0 4px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.works__rail::-webkit-scrollbar { display: none; }
.works__rail .work-card { flex: 0 0 clamp(220px, 21vw, 274px); scroll-snap-align: start; }

/* ผลงานยังไม่ถึง 5 ชิ้น — ยืดการ์ดให้เต็มแถว ไม่ให้เหลือพื้นดำว่างข้างขวา
   พอลูกค้าเพิ่มงานครบ 5 ชิ้นขึ้นไป จะกลับเป็นแถวเลื่อนอัตโนมัติ */
@media (min-width: 761px) {
  .works__rail:not(:has(.work-card:nth-child(5))) { overflow-x: visible; }
  .works__rail:not(:has(.work-card:nth-child(5))) .work-card { flex: 1 1 0; }
}


/* ---- กริดรูปผลงานบนหน้าแรก (2 แถว) ---- */
.works__photos {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px) clamp(10px, 1.2vw, 18px);
  list-style: none; margin: 0; padding: 0;
}
.work-shot > a { display: block; }
.work-shot__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 2px; background: #1c1c1c;
}
.work-shot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-shot > a:hover .work-shot__media img { transform: scale(1.05); }
.work-shot__name {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62);
  transition: color .2s var(--ease);
}
.work-shot > a:hover .work-shot__name { color: var(--c-orange); }

/* ประเภทกระเป๋าใต้ชื่อ — มีเฉพาะหน้ารวม /our-works/ กดแล้วกรองตามประเภทนั้น */
.work-shot__tags { display: flex; flex-wrap: wrap; gap: 2px 10px; list-style: none; margin: 4px 0 0; padding: 0; }
.work-shot__tags a { font-size: 12.5px; line-height: 1.5; color: var(--c-muted); transition: color .2s var(--ease); }
.work-shot__tags a:hover { color: var(--c-orange); }

/* หน้ารวมเป็นพื้นขาว — เปลี่ยนสีชื่อแบรนด์ และพื้นหลังรูประหว่างโหลด */
.works--archive .work-shot__media { background: #ebe7e1; }
.works--archive .work-shot__name { color: var(--c-ink); }

@media (max-width: 900px) { .works__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .works__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* แถวสุดท้ายเหลือรูปเดียวโดด ๆ ดูเหมือนยังไม่เสร็จ — ในกริดตัวอย่าง (หน้าแรก / More Works) ซ่อนใบนั้นไป
   เช่นหน้าแรก 10 ใบบนแท็บเล็ต 3 คอลัมน์ → เหลือ 9 ใบเต็ม 3 แถว
   หน้ารวม /our-works/ ไม่ซ่อน เพราะเป็นหน้าที่คนตั้งใจมาดูรูปครบทุกใบ */
@media (min-width: 601px) and (max-width: 900px) {
  .works:not(.works--archive) .work-shot:last-child:nth-child(3n+1) { display: none; }
}
@media (max-width: 600px) {
  .works:not(.works--archive) .work-shot:last-child:nth-child(2n+1) { display: none; }
}

/* ---- หน้าผลงานเดี่ยว /our-works/<ชื่องาน>/ ---- */
.work-meta {
  display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 4vw, 60px);
  margin: clamp(22px, 2.6vw, 32px) 0 0; padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.work-meta dt {
  margin-bottom: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.work-meta dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.work-meta__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.work-meta__tags a {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-cream);
  font-size: 13px; line-height: 1.4; color: var(--c-ink-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.work-meta__tags a:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.work-head .link-underline { margin-top: 26px; }

/* หัวหน้าพื้นครีม แล้วต่อด้วยรูปบนพื้นขาว — แบบเดียวกับหน้ารวม /our-works/ */
.work-photos { background: var(--c-white); padding-top: clamp(28px, 3.4vw, 48px); }
.work-gallery {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px); list-style: none; margin: 0; padding: 0;
}
.work-gallery li { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: #ebe7e1; }
.work-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-text { padding-top: 0; }
@media (max-width: 700px) { .work-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- กริดในหน้ารวม ---- */
.works__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px) clamp(12px, 1.4vw, 22px);
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1024px) { .works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- การ์ดผลงาน ---- */
.work-card > a { display: block; height: 100%; }
.work-card__media {
  position: relative; overflow: hidden; background: #1c1c1c;
  aspect-ratio: 4 / 5; border-radius: 2px;
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card__noimg { display: block; width: 100%; height: 100%; }
.work-card > a:hover .work-card__media img { transform: scale(1.05); }
.work-card__count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  color: #fff; border-radius: 999px; padding: 4px 10px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em;
}
.work-card__body { padding-top: 12px; }
.work-card__title {
  margin: 0 0 4px; font-family: var(--font-body);
  font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff;
}
.work-card > a:hover .work-card__title { color: var(--c-orange); }
.work-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
  font-size: 12.5px; color: rgba(255,255,255,.55);
}
.work-card__qty {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}

@media (max-width: 760px) {
  .works__controls { width: 100%; justify-content: space-between; gap: 12px; }
  .works__rail .work-card { flex-basis: 62vw; }
  .work-card__title { font-size: 14px; }
  /* บีบให้ปุ่มเลื่อน + ลิงก์อยู่บรรทัดเดียวกันได้บนจอ 390px โดยข้อความไม่โดนตัด */
  .works__nav button { width: 36px; height: 36px; }
  .works__controls .link-circle { gap: 10px; }
  .works__controls .link-circle__dot { width: 42px; height: 42px; }
  .works__controls .link-circle__text { font-size: 10.5px; letter-spacing: .1em; }
}

/* ---- แกลเลอรีในหน้าผลงานเดี่ยว ----
   เขียนเองสั้น ๆ แทนการโหลด CSS ของ Gutenberg ทั้งก้อน (ราว 90 KB)
   หน้าผลงานแบบเต็ม (filter + คลิกดูรูปขยาย) อยู่ในคิว "หน้าที่ 4" */
.wp-block-gallery.has-nested-images {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 0 0 28px; padding: 0;
}
.wp-block-gallery.has-nested-images figure { margin: 0; }
.wp-block-gallery.has-nested-images img {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px;
}
@media (max-width: 700px) {
  .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   11. Why Choose CHOOZS + แถบตัวเลขผลงาน
   ============================================================ */
/* พื้นครีมตามภาพดีไซน์ — ตัดกับแถบ Our Works สีดำที่อยู่ข้างบน */
.why { background: var(--c-cream); }

/* จุดสีดำท้ายคำ CHOOZS. ตามภาพดีไซน์ */
.why .section__title--stack .w2 em { font-style: normal; color: var(--c-ink); }

.why__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 28px clamp(28px, 5vw, 72px); align-items: end;
  margin-bottom: clamp(34px, 4.4vw, 62px);
}
.why__head-main { min-width: 0; }
.why__head-aside {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 6px;
}
.why__photo { width: 100%; margin-bottom: 16px; }
.why__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

.why__statement {
  margin: 0; max-width: 17ch;
  font-family: var(--font-display); font-size: clamp(13px, 1.3vw, 15px); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: var(--c-ink);
}
/* ตัวเขียน — หมุนแล้วปลายขวาจะยกพ้นกรอบ เลยเผื่อระยะขวาไว้ไม่ให้ชนขอบ */
.why__script {
  margin: 0; max-width: 100%; padding-right: 10px;
  font-family: var(--font-script); font-size: clamp(19px, 2vw, 26px);
  line-height: 1.15; color: var(--c-orange);
  transform: rotate(-4deg); transform-origin: right bottom;
}

/* ลิงก์ขีดใต้บนพื้นสว่าง — คู่กับ .link-arrow ที่ใช้บนรูป */
.link-underline {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink);
  padding-bottom: 5px; border-bottom: 1px solid var(--c-ink);
}
.link-underline svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.link-underline:hover { color: var(--c-orange); border-bottom-color: var(--c-orange); }
.link-underline:hover svg { transform: translateX(5px); }

/* ---- จุดเด่น 6 ข้อ ---- */
.why__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--c-line);
}
.why-card {
  display: flex; flex-direction: column;
  padding: 26px clamp(14px, 1.5vw, 22px) 0;
  border-left: 1px solid var(--c-line);
}
.why-card:first-child { border-left: 0; padding-left: 0; }
.why-card__num {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; color: var(--c-orange); margin-bottom: 14px;
}
.why-card__icon { width: 30px; height: 30px; color: var(--c-ink); margin-bottom: 18px; }
.why-card__title {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.5;
  text-transform: uppercase; color: var(--c-ink);
}
.why-card__title::after {
  content: ""; display: block; width: 22px; height: 1px; margin-top: 10px; background: var(--c-orange);
}
.why-card__text { margin: 0 0 22px; font-size: 13.5px; line-height: 1.75; color: var(--c-ink-soft); }
.why-card__photo { margin-top: auto; }
.why-card__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

/* ---- แถบตัวเลขผลงาน ---- */
.numbers {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(28px, 5vw, 70px);
  margin-top: clamp(34px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--c-line);
}
.numbers__label {
  margin: 0; max-width: 19ch; flex: none;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: var(--c-ink);
}
.numbers__list {
  display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 70px);
  margin: 0; flex: 1 1 auto;
}
.numbers__item { display: block; }
/* ตัวเลขใช้ฟอนต์เดียวกับโลโก้ CHOOZS (ตัวหนา sans)
   เคยลองใช้ Italiana ตามหัวเรื่องแล้วอ่านยาก — Italiana มีแต่เลขแบบ old-style
   เลข 1 หน้าตาเหมือน I ตัวใหญ่ เลข 5 ห้อยลงใต้เส้นบรรทัด และไม่มีชุดเลขแบบ lining ให้สลับ
   ตัวเลขบนแถบสถิติใต้ hero ก็ใช้ฟอนต์นี้อยู่แล้ว ทั้งหน้าจึงอ่านเป็นชุดเดียวกัน */
.numbers__list dt {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1;
  letter-spacing: -.015em; color: var(--c-orange);
}
.numbers__list dd {
  margin: 6px 0 0; font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-muted);
}

@media (max-width: 1100px) {
  .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-card { padding: 24px clamp(14px, 2vw, 22px) 26px; border-top: 1px solid var(--c-line); }
  .why-card:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .why__grid { border-top: 0; }
}
@media (max-width: 760px) {
  .why__head { grid-template-columns: 1fr; align-items: start; }
  .why__head-aside { align-items: flex-start; text-align: left; }
  .why__script { transform: rotate(-3deg); transform-origin: left center; }
  .why__statement { max-width: 22ch; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-card { padding: 22px 14px 22px; }
  .why-card:nth-child(3n+1) { border-left: 1px solid var(--c-line); padding-left: 14px; }
  .why-card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .why-card__text { font-size: 13px; margin-bottom: 18px; }
  .numbers { gap: 16px 34px; }
  .numbers__label { max-width: none; flex: 1 1 100%; }
}

/* ============================================================
   12. Our Customer — กริดโลโก้
   ============================================================ */
.customers { background: var(--c-white); }
.customers .section__head { grid-template-columns: 1fr; margin-bottom: clamp(26px, 3vw, 40px); }
.customers .section__lead { max-width: 60ch; }

.logo-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line);
}
/* ช่องต้องสูงเท่ากันเป๊ะ ๆ ทุกช่อง
   โลโก้ 26 อันสัดส่วนไม่เหมือนกันเลย ตั้งแต่แนวยาว (idemitsu) ถึงจตุรัส (BMW)
   จึงวางรูปทับเต็มช่องแบบ absolute แล้วใช้ object-fit: contain ย่อให้พอดี
   (ถ้าใช้ max-height:100% เฉย ๆ เบราว์เซอร์คิดเปอร์เซ็นต์ไม่ออกเพราะช่องไม่มีความสูงตายตัว) */
.logo-grid__item {
  position: relative; aspect-ratio: 16 / 10;
  border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.logo-grid__box { position: absolute; inset: clamp(12px, 1.6vw, 22px); display: block; }
.logo-grid img {
  width: 100%; height: 100%; max-width: none; object-fit: contain;
  /* ขาวดำเป็นค่าปกติ — .72 คือจุดที่ยังอ่านออกบนมือถือที่ไม่มีเมาส์ชี้ */
  filter: grayscale(1); opacity: .72;
  transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.logo-grid__item:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.04); }

@media (max-width: 1024px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  {
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logo-grid__item { aspect-ratio: 3 / 2; }
  .logo-grid__box { inset: 10px; }
  .logo-grid img { opacity: .85; }
}

/* ============================================================
   13. Ideas — บทความล่าสุด
   ============================================================ */
.ideas { background: var(--c-cream); }
.ideas__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
.idea-card > a { display: flex; flex-direction: column; height: 100%; }
.idea-card__media {
  position: relative; overflow: hidden; background: #ebe7e1;
  aspect-ratio: 3 / 2; border-radius: 2px;
}
.idea-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.idea-card > a:hover .idea-card__media img { transform: scale(1.04); }

/* บทความที่ไม่มีรูปปก — ใช้ตัวอักษรแทน ไม่ปล่อยเป็นกรอบเทาเปล่า */
.idea-card--text .idea-card__media {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);
}
.idea-card__mark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .14em;
  color: rgba(255,255,255,.13);
}

.idea-card__body { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.idea-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted);
}
.idea-card__cat { color: var(--c-orange); }
.idea-card__title {
  margin: 0 0 8px; font-family: var(--font-body);
  font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--c-ink);
}
.idea-card > a:hover .idea-card__title { color: var(--c-orange); }
.idea-card__text {
  margin: 0 0 14px; font-size: 13.5px; line-height: 1.75; color: var(--c-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.idea-card__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink);
}
.idea-card__more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.idea-card > a:hover .idea-card__more { color: var(--c-orange); }
.idea-card > a:hover .idea-card__more svg { transform: translateX(4px); }

@media (max-width: 860px) { .ideas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ideas__grid { grid-template-columns: 1fr; } }

/* ============================================================
   14. Contact — แถบปิดท้ายก่อนฟุตเตอร์
   ============================================================ */
.contact__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 32px clamp(30px, 5vw, 80px); align-items: start; margin-bottom: 0;
}
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn--line { background: #06c755; color: #fff; }
.btn--line:hover { background: #05a948; }
.btn--line svg { width: 18px; height: 18px; }
.contact__actions .btn svg { flex: none; }

.contact__list { margin: 0; display: grid; gap: 20px; }
.contact__row { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 14px; align-items: start; }
.contact__list dt {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55);
  padding-top: 2px; line-height: 1.55;
}
.contact__list dd { margin: 0; font-size: 14px; line-height: 1.7; color: #fff; }
.contact__soft { color: rgba(255,255,255,.6); }
.contact__list a { border-bottom: 1px solid rgba(255,255,255,.3); }
.contact__list a:hover { color: var(--c-orange); border-bottom-color: var(--c-orange); }
.contact__map {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 860px) {
  .contact__head { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; gap: 4px; }
  .contact__list dt { padding-top: 0; }
  .contact__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   15. หน้าเนื้อหา — หัวหน้า / ขั้นตอน / เงื่อนไข / คำถามที่พบบ่อย / CTA
   ============================================================ */
.wrap--narrow { max-width: 860px; }

.page-head {
  background: var(--c-cream); border-bottom: 1px solid var(--c-line);
  padding-block: clamp(34px, 4.4vw, 66px) clamp(28px, 3.4vw, 48px);
}
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted);
}
.breadcrumb a:hover { color: var(--c-orange); }
.page-head .section__title { margin-bottom: 14px; }
/* หัวหน้าเป็นคอลัมน์เดียวเต็มความกว้าง ไม่มีรูปมาแย่งที่เหมือนใน section อื่น
   จึงปล่อยให้คำโปรยยาวได้กว่า 46ch เพื่อไม่ให้ประโยคสั้น ๆ ถูกหักเป็นสองบรรทัดโดยไม่จำเป็น */
.page-head .section__lead { max-width: 68ch; }

/* ---- ขั้นตอน ---- */
.steps { background: var(--c-white); }
.steps__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--c-line);
}
.step {
  padding: 28px clamp(16px, 2vw, 30px) 30px;
  border-left: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.step:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.step:nth-child(3n)   { border-right: 0; }
.step__num {
  display: block; font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; color: var(--c-orange); margin-bottom: 14px;
}
.step__icon { width: 30px; height: 30px; color: var(--c-ink); margin-bottom: 18px; }
.step__title { margin: 0 0 9px; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.45; }
.step__text  { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--c-ink-soft); }

.faq__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: clamp(22px, 2.6vw, 34px); }

/* ---- คำถามที่พบบ่อย — ใช้บล็อก Details ของ WordPress ไม่ต้องมี JS ---- */
.faq { background: var(--c-white); }
.faq__body .wp-block-details {
  border-bottom: 1px solid var(--c-line); padding: 0;
}
.faq__body .wp-block-details summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--c-ink);
}
.faq__body .wp-block-details summary::-webkit-details-marker { display: none; }
.faq__body .wp-block-details summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 1.6px solid var(--c-ink); border-bottom: 1.6px solid var(--c-ink);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq__body .wp-block-details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__body .wp-block-details[open] summary { color: var(--c-orange); }
.faq__body .wp-block-details[open] summary::after { border-color: var(--c-orange); }
.faq__body .wp-block-details > :not(summary) {
  margin: 0 0 20px; padding-right: 40px; font-size: 14.5px; line-height: 1.85; color: var(--c-ink-soft);
}

/* ---- แถบ CTA ปิดท้าย ---- */
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px clamp(28px, 4vw, 60px);
}
.cta-band__title {
  margin: 0 0 10px; font-family: var(--font-title); font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.1; color: #fff;
}
.cta-band__text { margin: 0; max-width: 48ch; color: rgba(255,255,255,.66); font-size: 14.5px; line-height: 1.8; }
.cta-band .contact__actions { margin-top: 0; }

@media (max-width: 1000px) {
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3n+1) { border-left: 1px solid var(--c-line); padding-left: clamp(16px, 2vw, 30px); }
  .step:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .steps__list { grid-template-columns: 1fr; }
  .step { border-left: 0 !important; padding-left: 0 !important; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band .contact__actions { width: 100%; }
}

/* ============================================================
   15c. About — เรื่องราวแบรนด์ / บริการ / ที่ตั้ง
   ============================================================ */
.story { background: var(--c-white); }
.story__inner {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
  gap: 34px clamp(30px, 5vw, 80px); align-items: start;
}
/* หัวข้อย่อยในหน้าเนื้อหา เช่น "ที่ตั้งบริษัท" "เราทำอะไร"
   เดิมตั้งไว้ 10.5px + ระยะห่างตัวอักษร .18em ซึ่งเป็นสไตล์ป้ายกำกับภาษาอังกฤษ
   พอเป็นภาษาไทยที่มีสระและวรรณยุกต์ซ้อนบน-ล่าง ตัวเล็กขนาดนั้นอ่านไม่ออก
   และการดึงตัวอักษรห่างยิ่งทำให้คำแตกเป็นเสี่ยง — ขยายขนาดและลดระยะห่างลง */
.story__kicker {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: 17px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c-ink); line-height: 1.5;
}
.story__text p { margin: 0 0 18px; font-size: 15px; line-height: 1.95; color: var(--c-ink-soft); text-wrap: pretty; }
.story__text p:last-child { margin-bottom: 0; }
.story__lead { font-size: 17px !important; color: var(--c-ink) !important; font-weight: 700; }
/* บอกว่าใครเป็นนิติบุคคลเบื้องหลังแบรนด์ — ข้อมูลสำหรับออกเอกสาร ไม่ใช่เนื้อหาหลัก */
.story__entity {
  font-size: 13.5px !important; color: var(--c-muted) !important;
  padding-top: 16px; border-top: 1px solid var(--c-line);
}
.address__note {
  margin: 0 0 8px; font-size: 12.5px; color: var(--c-muted);
}

.story__quote {
  border-left: 2px solid var(--c-orange); padding: 4px 0 4px 26px;
}
.story__quote-th {
  margin: 0 0 10px; font-family: var(--font-title); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.35; color: var(--c-ink); text-wrap: balance;
}
.story__quote-en {
  margin: 0; font-family: var(--font-script); font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2; color: var(--c-orange);
}

.services { background: var(--c-cream); }
.services__grid .why-card { background: transparent; }

.address { background: var(--c-white); }
.address__inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 30px clamp(30px, 5vw, 80px); align-items: start;
}
.address__th { margin: 0 0 10px; font-size: 15px; line-height: 1.9; font-weight: 700; color: var(--c-ink); }
.address__en { margin: 0 0 18px; font-size: 13.5px; line-height: 1.85; color: var(--c-muted); }
.address__meta { display: grid; gap: 16px; margin: 0; }
.address__meta div, .contact-page__list div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; }
.address__meta dt, .contact-page__list dt {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); padding-top: 2px; line-height: 1.55;
}
.address__meta dd, .contact-page__list dd { margin: 0; font-size: 14.5px; line-height: 1.7; }
.address__meta a, .contact-page__list a { border-bottom: 1px solid var(--c-line); }
.address__meta a:hover, .contact-page__list a:hover { color: var(--c-orange); border-bottom-color: var(--c-orange); }

/* ============================================================
   15d. Contact — ช่องทางติดต่อ + ฟอร์ม + แผนที่
   ============================================================ */
.contact-page { background: var(--c-white); }
.contact-page__inner {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px clamp(30px, 5vw, 76px); align-items: start;
}
.contact-page__address { font-style: normal; margin: 0 0 22px; font-size: 15px; line-height: 1.9; color: var(--c-ink-soft); }
.contact-page__address strong { color: var(--c-ink); }
.contact-page__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.contact-page__actions .btn { flex: 1 1 auto; justify-content: center; }
.contact-page__list { display: grid; gap: 16px; margin: 0; }
.contact-page__social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.contact-page__social a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--c-line); color: var(--c-ink-soft); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.contact-page__social a:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.contact-page__social svg { width: 15px; height: 15px; }

/* ---- ฟอร์ม ---- */
.contact-page__form { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: 4px; padding: clamp(22px, 3vw, 36px); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form__field { margin: 0 0 16px; }
.form__field label {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-soft);
}
.form__field label span { color: var(--c-orange); }
.form__field input, .form__field select, .form__field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--c-ink); background: #fff;
  border: 1px solid var(--c-line); border-radius: 3px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus {
  outline: 0; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 0; }
.form__note { font-size: 12.5px; color: var(--c-muted); }

.form-notice {
  margin: 0 0 20px; padding: 13px 16px; border-radius: 3px;
  font-size: 14px; line-height: 1.65; border-left: 3px solid;
}
.form-notice--ok  { background: #eef8f0; border-color: #2f9e4f; color: #1d6b36; }
.form-notice--err { background: #fdeceb; border-color: var(--c-orange); color: #a5310d; }

/* ---- แผนที่ ---- */
.map { background: var(--c-cream); }
.map__frame {
  aspect-ratio: 21 / 9; border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; background: #e8e5e0;
}
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__link { margin: 18px 0 0; }

@media (max-width: 900px) {
  .story__inner, .address__inner, .contact-page__inner { grid-template-columns: 1fr; }
  .story__quote { border-left: 0; border-top: 2px solid var(--c-orange); padding: 22px 0 0; }
  .address__meta div, .contact-page__list div { grid-template-columns: 1fr; gap: 3px; }
  .address__meta dt, .contact-page__list dt { padding-top: 0; }
  .map__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .contact-page__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   15e. Ideas — หน้ารวมบทความ / หน้าอ่านบทความ
   ============================================================ */
.blog { background: var(--c-white); }

/* ---- แบ่งหน้า ---- */
.pagination { margin-top: clamp(30px, 4vw, 48px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
  border: 1px solid var(--c-line); border-radius: 3px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--c-ink-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pagination a.page-numbers:hover { border-color: var(--c-ink); color: var(--c-ink); }
.pagination .page-numbers.current { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.pagination .page-numbers.dots { border: 0; min-width: 20px; }
.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- หัวหน้าบทความ ---- */
.page-head--article { padding-bottom: clamp(22px, 2.6vw, 34px); }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.article__cat { color: var(--c-orange); }
.article__title {
  margin: 0; font-family: var(--font-title); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.2; color: var(--c-ink);
  text-wrap: balance;
}

.article { background: var(--c-white); padding-top: clamp(26px, 3vw, 40px); }
.article__cover { margin: 0 0 clamp(26px, 3vw, 40px); }
.article__cover img { width: 100%; height: auto; border-radius: 3px; }

/* ---- เนื้อหาบทความ ----
   เขียน typography เองเพราะตัด CSS ของ Gutenberg ออกไป (ราว 90 KB) */
.prose { font-size: 16.5px; line-height: 1.95; color: var(--c-ink-soft); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.4em; text-wrap: pretty; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-body); color: var(--c-ink);
  margin: 2em 0 .7em; line-height: 1.45; text-wrap: balance;
}
.prose h2 { font-size: 1.4em; font-weight: 700; }
.prose h3 { font-size: 1.2em; font-weight: 700; }
.prose h4 { font-size: 1.05em; font-weight: 700; }
.prose a { color: var(--c-orange); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--c-orange-dark); }
.prose strong { color: var(--c-ink); font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose img, .prose figure { margin: 1.8em 0; border-radius: 3px; }
.prose figure img { margin: 0; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--c-muted); text-align: center; }
.prose blockquote {
  margin: 1.8em 0; padding: 2px 0 2px 24px; border-left: 2px solid var(--c-orange);
  font-size: 1.08em; color: var(--c-ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.4em 0; }
.prose iframe { max-width: 100%; }

/* ---- ปุ่มแชร์ ---- */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: clamp(30px, 4vw, 46px); padding-top: 26px; border-top: 1px solid var(--c-line);
}
.share__label {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.share ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.share a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--c-line); color: var(--c-ink-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.share a:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.share svg { width: 17px; height: 17px; }

/* ---- บทความก่อนหน้า / ถัดไป ---- */
.post-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: clamp(26px, 3vw, 38px);
}
.post-nav__item {
  display: block; padding: 18px 20px; border: 1px solid var(--c-line); border-radius: 3px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.post-nav__item:hover { border-color: var(--c-ink); background: var(--c-cream); }
.post-nav__item span {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.post-nav__item strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.post-nav__item--next { text-align: right; }
.post-nav__item--next:only-child { grid-column: 2; }

.related { background: var(--c-cream); }

@media (max-width: 620px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__item--next { text-align: left; }
  .post-nav__item--next:only-child { grid-column: 1; }
  .prose { font-size: 16px; }
}

/* ============================================================
   15f. ช่องค้นหา / หน้า 404 / หน้าผลการค้นหา
   ============================================================ */
.page-head__search { margin-top: clamp(20px, 2.4vw, 28px); max-width: 560px; }
.searchform { display: flex; gap: 8px; }
.searchform input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: 13px 16px; font: inherit; font-size: 15px;
  color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); border-radius: 3px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.searchform input[type="search"]:focus {
  outline: 0; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
.searchform button {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 20px; min-height: 48px; border-radius: 3px;
  background: var(--c-ink); color: #fff;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s var(--ease);
}
.searchform button:hover { background: var(--c-orange); }
.searchform button svg { width: 15px; height: 15px; }

/* ---- หน้า 404 ---- */
.page-head--404 { text-align: left; }
.notfound__code {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 6.4rem); line-height: .95; letter-spacing: -.02em;
  color: var(--c-orange);
}
.notfound { background: var(--c-white); }
.notfound__links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  list-style: none; margin: 0 0 clamp(34px, 4vw, 54px); padding: 0;
}
.notfound__links a {
  display: grid; gap: 5px; height: 100%; padding: 20px 22px;
  border: 1px solid var(--c-line); border-radius: 3px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.notfound__links a:hover { border-color: var(--c-ink); background: var(--c-cream); }
.notfound__links strong {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink);
}
.notfound__links span { font-size: 13px; color: var(--c-ink-soft); }
.notfound__links svg { width: 15px; height: 15px; color: var(--c-orange); transition: transform .25s var(--ease); }
.notfound__links a:hover svg { transform: translateX(4px); }
.notfound__picks .story__kicker { margin-bottom: 18px; }
/* หน้านี้โชว์แค่ 4 ใบ — กริดปกติเป็น 5 คอลัมน์ จะเหลือช่องว่างข้างขวา */
.notfound__picks .col-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .notfound__picks .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .notfound__picks .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- รายการผลการค้นหา ---- */
.search-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.search-list > li { border-bottom: 1px solid var(--c-line); }
.search-list a { display: grid; gap: 6px; padding: 22px 0; }
.search-list__type {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-orange);
}
.search-list strong { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.search-list a:hover strong { color: var(--c-orange); }
.search-list__text { font-size: 14px; line-height: 1.8; color: var(--c-ink-soft); }

@media (max-width: 900px) { .notfound__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .notfound__links { grid-template-columns: 1fr; }
  .searchform { flex-wrap: wrap; }
  .searchform button { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   15g. หน้ารายละเอียดประเภทกระเป๋า
   ============================================================ */
.detail-hero {
  background: var(--c-cream); border-bottom: 1px solid var(--c-line);
  padding-block: clamp(28px, 3.4vw, 46px) clamp(34px, 4vw, 56px);
}
.detail-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .42fr);
  gap: clamp(24px, 3vw, 48px); align-items: start;
}
.detail-hero__text { min-width: 0; }
.detail-hero__label {
  margin: 0 0 10px; font-family: var(--font-display); font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-orange);
}
.detail-hero__title {
  margin: 0 0 14px; font-family: var(--font-title); font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; color: var(--c-ink);
  text-wrap: balance;
}
.detail-hero__line {
  margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 800; letter-spacing: .02em; line-height: 1.55; color: var(--c-ink);
  text-wrap: balance;
}
.detail-hero__desc { margin: 0 0 22px; font-size: 14.5px; line-height: 1.9; color: var(--c-ink-soft); text-wrap: pretty; }

.detail-hero__features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--c-line); padding-top: 20px;
}
.detail-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.detail-hero__cta .btn { flex: 0 1 auto; }
@media (max-width: 560px) { .detail-hero__cta .btn { flex: 1 1 100%; justify-content: center; } }
.detail-hero__features li { display: flex; align-items: center; gap: 10px; }
.detail-hero__features svg { width: 24px; height: 24px; flex: none; color: var(--c-ink); }
.detail-hero__features span {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--c-ink-soft);
}

.detail-hero__media { position: relative; min-width: 0; }
.detail-hero__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; }
.detail-hero__script {
  position: absolute; right: -6px; bottom: 10px;
  font-family: var(--font-script); font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.15; color: var(--c-orange); transform: rotate(-5deg); max-width: 8ch; text-align: right;
}

/* ---- แกลเลอรีรูปสินค้า: รูปใหญ่ + thumbnail ด้านล่าง ---- */
.detail-hero__media { --pg-thumb: 68px; }
/* มีแถว thumbnail — ยกคำเขียนมือขึ้นไปอยู่มุมรูปใหญ่เหมือนเดิม ไม่ให้ทับ thumbnail
   แถว thumbnail สูงคงที่ = ขนาดรูป + ขอบบนล่าง 4px + ระยะห่าง 10px */
.detail-hero__media--thumbs .detail-hero__script { bottom: calc(var(--pg-thumb) + 24px); }

.pgallery__stage { position: relative; }
.pgallery__track {
  position: relative; display: flex; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: 3px; background: #fff;
}
.pgallery__track::-webkit-scrollbar { display: none; }
.pgallery__track:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.pgallery__slide { flex: 0 0 100%; scroll-snap-align: start; }
.detail-hero__media .pgallery__slide img { display: block; border-radius: 0; }

.pgallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--c-ink); box-shadow: 0 2px 12px rgba(0,0,0,.14);
  transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.pgallery__arrow[hidden] { display: none; }
.pgallery__arrow--prev { left: 12px; }
.pgallery__arrow--next { right: 12px; }
.pgallery__arrow svg { width: 16px; height: 16px; }
.pgallery__arrow:hover:not(:disabled) { background: var(--c-orange); color: #fff; }
.pgallery__arrow:disabled { opacity: 0; pointer-events: none; }
/* เมาส์: โชว์ลูกศรตอนชี้รูป ให้รูปดูโล่ง / จอสัมผัส: โชว์ตลอด */
@media (hover: hover) {
  .pgallery__arrow { opacity: 0; }
  .pgallery__stage:hover .pgallery__arrow:not(:disabled),
  .pgallery__arrow:focus-visible:not(:disabled) { opacity: 1; }
}
.pgallery__count {
  position: absolute; left: 12px; bottom: 12px; pointer-events: none;
  padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
}

.pgallery__thumbs {
  position: relative; display: flex; gap: 8px; list-style: none;
  margin: 10px 0 0; padding: 2px; overflow-x: auto; scrollbar-width: none;
}
.pgallery__thumbs::-webkit-scrollbar { display: none; }
.pgallery__thumbs li { flex: 0 0 var(--pg-thumb); }
.pgallery__thumb {
  display: block; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--c-line); border-radius: 3px; background: #fff; opacity: .55;
  transition: opacity .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pgallery__thumb:hover, .pgallery__thumb:focus-visible { opacity: 1; }
.pgallery__thumb[aria-current="true"] { opacity: 1; border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink); }
.detail-hero__media .pgallery__thumb img { display: block; border-radius: 0; }

@media (max-width: 760px) {
  .detail-hero__media { --pg-thumb: 56px; }
  .pgallery__arrow { width: 34px; height: 34px; }
}

.detail-hero__custom {
  border-left: 1px solid var(--c-line); padding-left: clamp(16px, 1.8vw, 26px);
}
.detail-hero__custom h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink);
}
.detail-hero__custom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.detail-hero__custom li {
  position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.6; color: var(--c-ink-soft);
}
.detail-hero__custom li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-orange);
}

/* ---- กล่องสเปกใช้ซ้ำทุกส่วน ---- */
.spec__head { margin-bottom: clamp(16px, 2vw, 24px); }
.spec__title {
  margin: 0 0 4px; font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink);
}
.spec__sub { margin: 0; font-size: 13px; color: var(--c-muted); }

.spec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; list-style: none; margin: 0; padding: 0; }
/* Type of Bags — 5 ช่องต่อประเภท กล่องใหญ่ขึ้น ชื่ออ่านง่ายขึ้น */
.spec__grid--shapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px clamp(12px, 1.6vw, 22px); }
.spec__grid--shapes .spec__name { font-size: 12px; }
.spec__grid--shapes .spec__note { font-size: 12.5px; }
.spec__grid > li { display: grid; gap: 7px; justify-items: center; text-align: center; }
.spec__thumb {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
  background: #fff; border: 1px solid var(--c-line); border-radius: 3px; overflow: hidden;
}
.spec__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
/* ยังไม่ได้อัปรูปจริง — ใช้ไอคอนเส้นแทน ไม่ปล่อยเป็นกรอบเปล่า */
.spec__thumb--icon { background: var(--c-cream); }
.spec__icon { width: 54%; height: 54%; color: var(--c-ink-soft); }
.spec__grid > li:hover .spec__icon { color: var(--c-orange); }
.spec__name {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; line-height: 1.45; color: var(--c-ink);
}
.spec__note { font-size: 11.5px; line-height: 1.5; color: var(--c-muted); }

.detail-shapes { background: var(--c-white); }
.detail-specs { background: var(--c-cream); }
.detail-specs__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
.spec-box { background: #fff; border: 1px solid var(--c-line); border-radius: 4px; padding: clamp(18px, 2vw, 26px); }
.detail-works .section__lead { color: rgba(255,255,255,.66); }

@media (max-width: 1100px) {
  .detail-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail-hero__custom { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--c-line); padding: 20px 0 0; }
  .detail-hero__custom ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec__grid--shapes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .detail-specs__inner { grid-template-columns: 1fr; }
  .detail-specs .spec__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .detail-hero__inner { grid-template-columns: 1fr; }
  .detail-hero__custom ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero__script { position: static; display: block; margin-top: 10px; transform: rotate(-3deg); max-width: none; text-align: left; }
  .spec__grid--shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-specs .spec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-hero__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .spec__grid--shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- โหมดเปิดเฉพาะหน้าแรก (ชั่วคราว) ---- */
/* ความสูงต้องตายตัว เพราะหัวเว็บแบบลอยทับรูปต้องเลื่อนลงมาเท่านี้พอดี */
:root { --preview-h: 38px; }
.preview-bar {
  margin: 0; padding: 0 16px; height: var(--preview-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: rgba(255,255,255,.82);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; line-height: 1.3; text-align: center;
  position: relative; z-index: 120;
}
/* เลื่อนหัวเว็บลงมาไม่ให้ถูกแถบทับ (มีผลเฉพาะหน้าแรกที่หัวเว็บลอยทับรูป) */
.has-preview-bar .site-header--overlay { top: var(--preview-h); }
@media (max-width: 480px) {
  :root { --preview-h: 46px; }
  .preview-bar { font-size: 10.5px; letter-spacing: 0; }
}
.nav li.is-locked > span {
  display: inline-block; padding: 8px 0;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-muted); cursor: default;
}
.site-header--overlay .nav li.is-locked > span { color: rgba(255,255,255,.4); }

.page-head--soon { text-align: left; }
.soon__tag {
  margin: 0 0 12px; display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--c-orange); color: #fff;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}
.soon__back { margin: clamp(22px, 2.6vw, 32px) 0 0; }

/* ============================================================
   15b. Section ที่ยังไม่ทำ
   ============================================================ */
.section-placeholder { min-height: 220px; display: grid; place-items: center; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }

/* ============================================================
   16. Footer
   ============================================================ */
.site-footer {
  background: #0e0e0e; color: rgba(255,255,255,.62); font-size: 13.5px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.site-footer__inner {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr);
  gap: 34px clamp(28px, 5vw, 72px);
  padding-block: clamp(40px, 5vw, 66px);
}
.site-footer h2 {
  margin: 0 0 16px; font-family: var(--font-display);
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
}
.site-footer a:hover { color: var(--c-orange); }

.site-footer__brand .site-logo__text { color: #fff; font-size: 22px; }
.site-footer__brand .site-logo__text small { color: rgba(255,255,255,.45); }
.site-footer__tag { margin: 14px 0 0; line-height: 1.85; }

.site-footer__social { display: flex; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.site-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.8);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.site-footer__social a:hover { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.site-footer__social svg { width: 17px; height: 17px; }

.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.site-footer__nav a { font-size: 13.5px; }

.site-footer address { font-style: normal; line-height: 1.9; }
.site-footer address strong { color: #fff; font-weight: 700; }
.site-footer address a { border-bottom: 1px solid rgba(255,255,255,.24); }
.site-footer__hours { display: inline-block; margin-top: 6px; color: rgba(255,255,255,.45); }

.site-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; padding-block: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12px; color: rgba(255,255,255,.42);
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a { border-bottom: 1px solid rgba(255,255,255,.2); }

/* เผื่อที่ให้ปุ่ม LINE ลอย ไม่ให้ทับข้อความท้ายเว็บ */
@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 30px; }
  .site-footer__bar { padding-bottom: 74px; }
}

/* ============================================================
   17. ปุ่ม LINE ลอย
   ============================================================ */
.line-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #06c755; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: transform .2s var(--ease);
}
.line-fab:hover { transform: translateY(-2px); }
.line-fab svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 640px) { .line-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* ============================================================
   18. แบนเนอร์คุกกี้ (PDPA)
   ============================================================ */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--c-ink); color: #eee; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.cookie-bar[hidden] { display: none !important; }
.cookie-bar p { margin: 0; flex: 1 1 260px; }
.cookie-bar a { text-decoration: underline; }
.cookie-bar .btn { padding: 10px 18px; min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}