/* ════════════════════════════════════════════════════════════
   1) BRAND INPUT — เปลี่ยนแบรนด์ให้แก้เฉพาะบล็อกนี้
   ════════════════════════════════════════════════════════════ */
:root{
  /* --font-display = Cinzel ใช้เฉพาะ "ชื่อร้าน" กับ "ชื่อเมนูสปา" เท่านั้น (คลาส .brand-type)
     --font-body = Prompt ฟอนต์ไทยไม่มีหัว มีตัวละตินในตัว ใช้กับข้อความอื่นทั้งหมด */
  --font-display:'Cinzel',Georgia,serif;
  --font-body:'Prompt','Noto Sans Thai','Leelawadee UI',system-ui,-apple-system,sans-serif;

  --radius-base:6px;      /* 0 = คม, 6 = ลบมุม, 14 = นุ่มมาก · การ์ดใช้ค่านี้คูณสอง */
  --shadow-on:0;          /* 0 = ใช้เส้นขอบแทนเงา */
  --logo-h:42px;          /* ความสูงโลโก้บนมือถือ */
  --logo-h-lg:52px;       /* ความสูงโลโก้บนจอใหญ่ */
  --logo-nudge:10px;      /* ขยับโลโก้เข้าด้านขวา — เพิ่มค่านี้ถ้าอยากให้ชิดขวามากขึ้นอีก */

  --brand-cream:#FAF4EC;  /* พื้นหลังหลัก */
  --brand-sand:#EFE5D8;   /* พื้นส่วนสลับ */
  --brand-ink:#2A1D14;    /* ตัวอักษรหลัก */
  --brand-ink-2:#5E4A3B;  /* ตัวอักษรรอง */
  --brand-copper:#8A5424; /* สีเน้น */
  --brand-line:#D8C8B6;   /* เส้นขอบ */
  --brand-dark:#241811;   /* ส่วนกลับด้าน */
  --brand-bar:#533C2D;    /* สีแถบเมนูตอนเลื่อนลง */
  --brand-gold:#D6A94A;   /* สีทองจากโลโก้ ใช้บนพื้นเข้มเท่านั้น */

  --slide-ms:5000;        /* สไลด์เปลี่ยนภาพทุกกี่มิลลิวินาที (5 วินาที) */
  --cover-h:clamp(190px,32svh,320px);  /* ความสูงภาพ cover ที่ "มองเห็น" ใต้แถบเมนู */
  --band-veil:.7;             /* ความเข้มเงาทับภาพพื้นหลังแถบยาว (70%) */
  --band-veil-color:83,60,45; /* สีเงา #533C2D (ใส่เป็นค่า R,G,B) */
}

/* ════════════════════════════════════════════════════════════
   2) TOKEN
   ════════════════════════════════════════════════════════════ */
:root{
  --c-bg:var(--brand-cream); --c-bg-alt:var(--brand-sand);
  --c-ink:var(--brand-ink); --c-ink-2:var(--brand-ink-2);
  --c-accent:var(--brand-copper); --c-line:var(--brand-line);
  --c-bar-bg:var(--brand-bar); --c-bar-ink:#F7EFE6; --c-bar-line:#6B5241;

  --fs-h1:clamp(1.75rem,1.15rem + 2.7vw,3rem);
  --fs-h2:clamp(1.375rem,1.05rem + 1.5vw,2.125rem);
  --fs-h3:clamp(1.0625rem,.96rem + .5vw,1.25rem);
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.32;  /* หัวเรื่อง — ภาษาไทยต้องการมากกว่า 1.3 */
  --lh-body:1.8;
  --lh-ui:1.45;
  --ls-eyebrow:.16em;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  --r-sm:var(--radius-base);
  --r-md:calc(var(--radius-base) * 2);
  --r-pill:999px;
  --btn-radius:var(--r-sm);    /* ปุ่ม 6px */
  --card-radius:var(--r-md);   /* การ์ด แผนที่ 12px */
  --media-radius:var(--r-md);  /* กรอบภาพในแกลเลอรี 12px */

  --z-base:0; --z-sticky:20; --z-drawer:40; --z-bar:50; --z-dialog:60; --z-toast:70;
  --dur-fast:120ms; --dur:180ms; --dur-slow:280ms;
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur-slide:700ms;

  --pad:20px; --maxw:1200px; --maxw-wide:1720px; --maxw-text:68ch; --gutter:var(--s-5);
  --navh:54px;          /* ความสูงแถบเมนู — ปรับค่านี้ถ้าอยากให้บาง/หนากว่านี้
                           ต่ำกว่า 48px ไม่ได้ เพราะพื้นที่กดลิงก์ต้องไม่น้อยกว่า 44px */

  /* คู่ระยะห่างที่ใช้แยกบล็อก — ต้องรักษาอัตราส่วนอย่างน้อย 2:1 เสมอ */
  --gap-within:var(--s-4);    /* ภายในบล็อกเดียวกัน เช่น หัวข้อ → การ์ด */
  --gap-between:var(--s-7);   /* ระหว่างคนละบล็อก เช่น ภาพสไลด์ → บล็อกแพ็กเกจ */
}
@media (min-width:768px){ :root{ --pad:32px; --gutter:var(--s-6); --navh:66px;
  --gap-within:var(--s-5); --gap-between:var(--s-8); } }
@media (min-width:1280px){ :root{ --pad:48px; } }

/* ════════════════════════════════════════════════════════════
   3) RESET + ฐาน
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:300;
  line-height:var(--lh-body);overflow-wrap:break-word}
img{max-width:100%;display:block}
h1,h2{font-family:var(--font-body);font-weight:500;line-height:var(--lh-tight);
  margin:0;text-transform:uppercase}
h3{font-family:var(--font-body);font-weight:500;line-height:var(--lh-tight);margin:0}
/* Cinzel ใช้แค่สองที่: ชื่อร้าน และชื่อเมนูสปาในการ์ด */
.brand-type{font-family:var(--font-display)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}
.on-dark :where(a,button,[tabindex]):focus-visible{outline-color:var(--brand-gold)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.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}

/* ════════════════════════════════════════════════════════════
   4) LAYOUT
   ════════════════════════════════════════════════════════════ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
/* กว้างเกือบเต็มจอ ใช้กับบล็อกที่เป็นภาพล้วนอย่างแกลเลอรี */
.container--wide{max-width:var(--maxw-wide)}
.section{padding-block:var(--s-8);scroll-margin-top:calc(var(--navh) + 8px)}
@media (min-width:1024px){ .section{padding-block:var(--s-10)} }
.section--alt{background:var(--c-bg-alt)}
.eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--c-accent);line-height:var(--lh-ui);margin:0;font-weight:400}
/* หัวข้อต้องอยู่ใกล้เนื้อหาของตัวเองมากกว่าใกล้ส่วนก่อนหน้า (law of proximity)
   ระยะเหนือหัวข้อ = --gap-between (ระหว่างบล็อก) · ระยะใต้หัวข้อ = --gap-within (ภายในบล็อก)
   กฎที่ใช้ทั้งไฟล์: --gap-between ต้องมากกว่า --gap-within อย่างน้อย 2 เท่า */
.sec-head{display:grid;gap:var(--s-2);margin-bottom:var(--gap-within)}
.sec-title{font-size:var(--fs-h1);letter-spacing:.06em;font-weight:500;text-transform:uppercase}

/* ════════════════════════════════════════════════════════════
   5) COMPONENT
   ════════════════════════════════════════════════════════════ */

/* 5.1 Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding-inline:var(--s-6);border-radius:var(--btn-radius);
  border:1px solid transparent;font-family:var(--font-body);font-size:var(--fs-sm);
  font-weight:400;letter-spacing:.03em;line-height:var(--lh-ui);text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}
.btn--primary{background:var(--c-accent);color:#FFF7EC;border-color:var(--c-accent)}
.btn--secondary{background:transparent;color:var(--c-ink);border-color:var(--c-ink)}
.btn--block{width:100%}
/* บนพื้นเข้ม ปุ่มโครงต้องเปลี่ยนเป็นเส้น/ตัวอักษรสีครีม ไม่งั้นจมหายไปกับพื้น */
.on-dark .btn--secondary{color:var(--c-bar-ink);border-color:#B49C88}
@media (hover:hover) and (pointer:fine){
  .on-dark .btn--secondary:hover{background:var(--c-bar-ink);color:var(--brand-ink);
    border-color:var(--c-bar-ink)}
}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:#6F4119;border-color:#6F4119}
  .btn--secondary:hover{background:var(--c-ink);color:var(--c-bg)}
}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* 5.2 Link */
.link{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){ .link:hover{color:#6F4119} }

/* 5.3 Card */
.card{border:1px solid var(--c-line);border-radius:var(--card-radius);background:var(--c-bg);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--c-bg-alt)}
.card__media>img{width:100%;height:100%;object-fit:cover}
.card__body{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5);flex:1 1 auto}
.card__title{font-family:var(--font-display);font-size:var(--fs-h3);letter-spacing:.04em}
/* ชื่อไทยของคอร์ส — ใหญ่กว่าคำอธิบาย แต่ยังเบากว่าชื่ออังกฤษด้วยสีที่อ่อนกว่า */
.card__th{font-size:clamp(1rem,.94rem + .3vw,1.125rem);color:var(--c-ink-2);
  font-weight:400;line-height:1.4}
.card__rule{border:0;border-top:1px solid var(--c-line);margin:var(--s-3) 0 var(--s-1)}
/* คำอธิบายไทยและอังกฤษต่อกันเป็นบล็อกเดียว ไม่มีบรรทัดว่างคั่น
   ระยะบรรทัดบีบกว่าเนื้อความทั่วไป เพราะเป็นข้อความสั้นในกล่องแคบ */
.card__desc{font-size:var(--fs-sm);color:var(--c-ink);max-width:var(--maxw-text);
  line-height:1.62}
.card__desc p{margin:0}
.card__desc .en{color:var(--c-ink-2);font-size:var(--fs-xs);line-height:1.62}

/* 5.3 Media box */
.media{overflow:hidden;border-radius:var(--media-radius);background:var(--c-bg-alt)}
.media>img{width:100%;height:100%;object-fit:cover}

/* 5.4 Navbar — โลโก้ซ้าย เมนูขวา · โปร่งใสตอนอยู่บนสุด เทสีเมื่อเลื่อนลง */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-sticky);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease)}
.nav.is-solid{background:var(--c-bar-bg);border-bottom-color:var(--c-bar-line)}
/* เงาไล่สีตอนแถบโปร่งใส — ต้องเข้มพอตลอดความสูงแถบ ไม่ใช่จางลงกลางทาง
   ไม่งั้นเมนูจะอ่านไม่ออกเวลาทับส่วนสว่างของภาพ (วัดแล้วต้องการอย่างน้อย 61%)
   ครึ่งบนของ gradient คือส่วนที่ทับแถบเมนู ครึ่งล่างคือส่วนที่ไล่จางลงไปในภาพ */
.nav::before{content:"";position:absolute;inset:0 0 auto 0;height:200%;pointer-events:none;
  background:linear-gradient(180deg,rgba(36,24,17,.74) 0%,rgba(36,24,17,.66) 50%,
             rgba(36,24,17,.30) 76%,rgba(36,24,17,0) 100%);
  transition:opacity var(--dur-slow) var(--ease)}
.nav.is-solid::before{opacity:0}
.nav__in{position:relative;display:flex;align-items:center;gap:var(--s-4);min-height:var(--navh)}
.nav__links{display:flex;align-items:center;gap:4px;min-width:0;margin-inline-start:auto}
@media (min-width:480px){ .nav__links{gap:var(--s-2)} }
@media (min-width:768px){ .nav__links{gap:var(--s-5)} }
.nav__link{display:inline-flex;align-items:center;min-height:44px;padding-inline:3px;
  font-size:.8125rem;font-weight:300;letter-spacing:.04em;text-decoration:none;
  color:var(--c-bar-ink);line-height:var(--lh-ui);border-bottom:1px solid transparent;
  white-space:nowrap}
@media (min-width:480px){ .nav__link{padding-inline:var(--s-2);font-size:var(--fs-sm);
  letter-spacing:.06em} }
@media (min-width:768px){ .nav__link{padding-inline:0} }
.nav__link[aria-current="page"]{color:var(--brand-gold);border-bottom-color:var(--brand-gold)}
@media (hover:hover) and (pointer:fine){
  .nav__link:hover{color:var(--brand-gold)}
}
/* --logo-nudge = ขยับโลโก้เข้าด้านขวา ให้ขอบตัวอักษรเกาะแกนซ้ายเดียวกับเนื้อหาในหน้า */
.nav__logo{flex:none;display:inline-flex;align-items:center;min-height:44px;
  margin-inline-start:var(--logo-nudge)}
.nav__logo img{height:var(--logo-h);width:auto}
@media (min-width:768px){ .nav__logo img{height:var(--logo-h-lg)} }

/* 5.4b เมนู hamburger — ใช้เฉพาะจอมือถือ (ต่ำกว่า 768px)
   ต่ำกว่านี้ลิงก์ 4 ตัวเบียดกันจนกดยาก จึงยุบเป็นปุ่มเดียวแล้วเปิดลิ้นชักจากขวา */
@media (max-width:767px){ .nav__links{display:none} }
.burger{display:none}
@media (max-width:767px){
  .burger{display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;margin-inline-start:auto;margin-inline-end:-12px;
    background:transparent;border:0;color:var(--c-bar-ink);cursor:pointer}
}
.burger__box{display:block;width:22px;height:14px;position:relative}
.burger__box i{position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
  border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.burger__box i:nth-child(1){top:0}
.burger__box i:nth-child(2){top:6px}
.burger__box i:nth-child(3){top:12px}
.burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__box i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ฉากหลังมืด — กดที่ไหนก็ปิดลิ้นชัก */
.scrim{position:fixed;inset:0;background:rgba(36,24,17,.55);z-index:var(--z-drawer);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow)}
.scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--dur-slow) var(--ease)}

/* ลิ้นชักเมนู — สีเดียวกับแถบเมนูตอนทึบ ให้รู้สึกว่าเป็นแถบเดียวกันที่คลี่ออกมา
   ตอนปิดใช้ visibility:hidden ด้วย ลิงก์ข้างในจึงไม่ถูก Tab ไปโดน */
.drawer{position:fixed;inset:0 0 0 auto;width:min(78%,300px);
  background:var(--c-bar-bg);color:var(--c-bar-ink);
  z-index:calc(var(--z-drawer) + 1);
  padding:var(--s-2) var(--pad) var(--s-7);
  display:flex;flex-direction:column;overflow-y:auto;
  border-inline-start:1px solid var(--c-bar-line);
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow)}
.drawer.is-open{transform:translateX(0);visibility:visible;
  transition:transform var(--dur-slow) var(--ease)}
@media (min-width:768px){ .burger,.scrim,.drawer{display:none} }
.drawer__top{display:flex;justify-content:flex-end;min-height:var(--navh);
  align-items:center;margin-inline-end:-12px}
.drawer__close{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:transparent;border:0;color:currentColor;cursor:pointer}
.drawer__nav{display:flex;flex-direction:column;margin-top:var(--s-2)}
.drawer__link{display:flex;align-items:center;min-height:52px;text-decoration:none;
  color:var(--c-bar-ink);font-size:1rem;font-weight:300;letter-spacing:.06em;
  line-height:var(--lh-ui);border-bottom:1px solid var(--c-bar-line)}
.drawer__link[aria-current="page"]{color:var(--brand-gold)}
/* ปุ่มติดต่อเป็นคนละบล็อกกับรายการเมนู ระยะห่างจึงใช้ --gap-between (กฎ proximity 2:1) */
.drawer__foot{margin-top:var(--gap-between);display:grid;gap:var(--s-3)}
.drawer__hours{font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:#D9CBBC;line-height:var(--lh-ui)}
/* ล็อกการเลื่อนหน้าหลังตอนลิ้นชักเปิด */
html.lock,body.lock{overflow:hidden}

/* 5.5 Slider — จังหวะ (1) ภาพเต็มความกว้าง สูงครึ่งหน้าจอ */
.slider{position:relative;background:var(--c-bar-bg);overflow:hidden}
.slider__track{display:flex;height:clamp(400px,54svh,600px);
  transition:transform var(--dur-slide) var(--ease)}
.slide{flex:0 0 100%;min-width:0;position:relative}
.slide img{width:100%;height:100%;object-fit:cover}
.slider__dots{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;
  gap:var(--s-2);padding:var(--s-3) var(--pad) calc(var(--s-4) + env(safe-area-inset-bottom))}
.dot{width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;
  display:grid;place-items:center}
.dot::before{content:"";width:28px;height:2px;background:rgba(255,247,236,.45);
  transition:background var(--dur) var(--ease)}
.dot[aria-current="true"]::before{background:var(--brand-gold)}
@media (hover:hover) and (pointer:fine){ .dot:hover::before{background:#FFF7EC} }
.slider__veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(36,24,17,0) 42%,rgba(36,24,17,.62) 100%),
    linear-gradient(90deg,rgba(36,24,17,.60) 0%,rgba(36,24,17,.28) 46%,rgba(36,24,17,0) 74%)}

/* ข้อความทับบนภาพสไลด์ — ชิดซ้ายเกาะแกนเดียวกับเนื้อหาในหน้า */
/* วางจากขอบล่าง — ใช้ bottom เป็น % เพราะ % ของ padding อ้างอิงความกว้าง ไม่ใช่ความสูง */
.slider__copy{position:absolute;inset:auto 0 20% 0;pointer-events:none}
.slider__copy .container{pointer-events:auto}
.hero-copy{display:grid;gap:var(--s-3);justify-items:start;
  max-width:min(100%,34rem);color:#FFF7EC}
.hero-copy h1{font-size:var(--fs-h1);letter-spacing:.06em;text-transform:uppercase}
.hero-copy p{font-family:var(--font-body);font-size:var(--fs-h3);font-weight:300;
  line-height:1.55;letter-spacing:.01em;color:#F4E7D6;max-width:38ch}
@media (min-width:1024px){ .hero-copy{max-width:min(100%,46rem)} }

/* 5.6 กริดการ์ด 3 ใบ */
.cards{display:grid;gap:var(--gutter);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* หัวข้อ + การ์ด + ปุ่ม View All = บล็อกเดียวกัน จึงใช้ระยะภายในบล็อกทั้งหมด
   ส่วนระยะเหนือหัวข้อใช้ --gap-between เพื่อตัดขาดจากภาพสไลด์ */
.section--tight{padding-top:var(--gap-between);padding-bottom:var(--gap-between)}
/* ต่อจากแถบภาพเต็มความกว้าง — พื้นหลังเปลี่ยนสีอยู่แล้วจึงแยกบล็อกได้โดยไม่ต้องเว้นระยะเยอะ */
.section--attached{padding-top:var(--gap-within)}
.cards__foot{display:flex;justify-content:center;margin-top:var(--gap-within)}
.cards__foot .btn{min-width:min(100%,240px)}

/* 5.7 Band — แถบภาพแนวยาว ข้อความซ้าย โลโก้ขาวขวา (คนละบล็อกกับแพ็กเกจ) */
.band{position:relative;overflow:hidden;background:var(--brand-dark);isolation:isolate}
.band__bg{position:absolute;inset:0;z-index:-1}
.band__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* --band-veil = ความเข้มของเงาทับภาพพื้นหลังแถบนี้ (0 = ไม่มีเงา, 1 = ทึบ) */
.band__veil{position:absolute;inset:0;z-index:-1;
  background:rgba(var(--band-veil-color),var(--band-veil))}
.band__in{display:grid;gap:var(--gap-within);padding-block:var(--s-8);align-items:center}
@media (min-width:1024px){
  .band__in{grid-template-columns:7fr 5fr;gap:var(--s-8);padding-block:var(--s-9);
    min-height:clamp(320px,34svh,440px)}
}
.band__text{color:#F2E6D6;font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);
  max-width:56ch;min-width:0}
/* มือถือและแท็บเล็ต: โลโก้ขึ้นก่อนข้อความ · จอ 1024 ขึ้นไป: ข้อความซ้าย โลโก้ขวา */
.band__logo{min-width:0;justify-self:start;order:-1}
@media (min-width:1024px){ .band__logo{justify-self:center;order:0} }
.band__logo img{width:min(100%,280px);height:auto}
@media (min-width:768px){ .band__logo img{width:min(100%,340px)} }
@media (min-width:1024px){ .band__logo img{width:min(100%,400px)} }

/* 5.8 Gallery — เรียงตาม Layout ตัวอย่าง
   มือถือ  : ภาพแนวนอนเต็มความกว้าง 2 ใบ แล้วภาพแนวตั้งคู่กัน
   768 ขึ้นไป: 3 คอลัมน์ · ซ้ายซ้อน 2 ใบ (01 บน / 02 ล่าง) · กลาง 03 · ขวา 04 สูงเต็มสองแถว */
.gal{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"a a" "b b" "c d"}
@media (min-width:768px){
  .gal{gap:var(--s-4);grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:"a c d" "b c d"}
}
/* แกลเลอรีเป็นสี่เหลี่ยมมุมคม ไม่ลบมุม ต่างจากการ์ดที่ลบมุม 12px */
.gal>*{min-width:0;border-radius:0}
.gal__a{grid-area:a} .gal__b{grid-area:b} .gal__c{grid-area:c} .gal__d{grid-area:d}
.gal__a,.gal__b{aspect-ratio:3/2}
.gal__c,.gal__d{aspect-ratio:2/3}
@media (min-width:768px){
  /* ภาพแนวตั้งต้องสูงเท่ากับภาพแนวนอนสองใบซ้อนพอดี จึงถอดภาพออกจากการคิดความสูงแถว
     (ไม่งั้นภาพแนวตั้งจะดันแถวให้สูงขึ้น แล้วคอลัมน์ซ้ายจะสั้นกว่า) */
  .gal__c,.gal__d{aspect-ratio:auto;position:relative;min-height:0}
  .gal__c>img,.gal__d>img{position:absolute;inset:0}
}

/* 5.9 Cover band — ภาพเต็มความกว้างจอด้านบนของหน้า Treatment / Location / About
   ความสูงบวกความสูงแถบเมนูเข้าไปด้วย เพราะแถบเมนูโปร่งใสทับอยู่ ส่วนที่มองเห็นจริงจึงเท่า --cover-h */
.coverband{width:100%;height:calc(var(--cover-h) + var(--navh));overflow:hidden;
  background:var(--brand-dark)}
.coverband img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

/* 5.10 Location — แผนที่ฝังซ้าย ข้อมูลร้านขวา (จอ 1024 ขึ้นไป)
   มือถือ/แท็บเล็ต: ข้อมูลขึ้นก่อน แล้วตามด้วยแผนที่ */
.loc{display:grid;gap:var(--gap-within)}
@media (min-width:1024px){
  .loc{grid-template-columns:6fr 5fr;gap:var(--s-8);align-items:start}
  .loc__map{order:-1}
}
.loc__map{border:1px solid var(--c-line);border-radius:var(--card-radius);overflow:hidden;
  background:var(--c-bg);aspect-ratio:4/3;min-width:0}
@media (min-width:1024px){ .loc__map{aspect-ratio:16/12} }
.loc__map iframe{width:100%;height:100%;border:0;display:block}
.loc__info{display:grid;gap:var(--s-4);min-width:0;align-content:start}
/* ที่อยู่ เวลาทำการ และเบอร์โทร ใช้ขนาดเดียวกันทั้งหมด อ่านเป็นบล็อกเดียวต่อเนื่อง */
.loc__addr{display:grid;gap:0;font-size:var(--fs-h3);font-weight:400;line-height:1.5;
  max-width:34ch;font-variant-numeric:tabular-nums}
.loc__addr p{margin:0}
.loc__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}
.social{display:flex;gap:var(--s-3);margin-top:var(--s-2)}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid var(--c-line);color:var(--c-accent);text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .social a:hover{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent)}
}


/* 5.11 Footer — ใช้เหมือนกันทุกหน้า */
.foot{background:var(--brand-dark);color:var(--c-inv-ink,#F3E9DC);
  padding-block:var(--s-8) var(--s-5);border-top:1px solid #4A3527}
.foot__in{display:grid;gap:var(--s-7)}
@media (min-width:1024px){ .foot__in{grid-template-columns:5fr 7fr;gap:var(--s-9)} }
.foot__block + .foot__block{margin-top:var(--s-5)}
.foot__name{font-family:var(--font-display);font-size:var(--fs-h2);letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;color:#F7EFE6}
.foot__head{font-size:var(--fs-h3);font-weight:500;color:#F7EFE6;line-height:1.3}
.foot__rule{border:0;border-top:1px solid #4A3527;margin:var(--s-2) 0 var(--s-3)}
.foot__tag{font-size:var(--fs-sm);color:#C4B09B;line-height:1.62;max-width:46ch}
.foot__list{display:grid;gap:2px}
.foot__list a,.foot__group a{display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:44px;color:#E6D6C2;text-decoration:none;font-size:var(--fs-sm);
  line-height:var(--lh-ui)}
.foot__list svg{flex:none;color:#C4B09B}
@media (hover:hover) and (pointer:fine){
  .foot__list a:hover,.foot__group a:hover,.foot__sub a:hover{color:var(--brand-gold)}
}
/* เมนูเรียงลงมาเป็นแนวตั้ง ไม่แตกคอลัมน์ */
.foot__cols{display:grid;gap:var(--s-2)}
.foot__group a{font-size:var(--fs-body);font-weight:400;color:#F7EFE6}
.foot__sub{display:grid;gap:0;margin-top:var(--s-1)}
.foot__sub a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-sm);color:#C4B09B;text-decoration:none;line-height:var(--lh-ui);
  padding-inline-start:var(--s-4);position:relative}
.foot__sub a::before{content:"";position:absolute;inset-inline-start:0;top:50%;
  width:6px;height:1px;background:currentColor;transform:translateY(-50%)}
.foot__base{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid #4A3527;
  font-size:var(--fs-xs);color:#9C8973;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}

/* ════════════════════════════════════════════════════════════
   6) UTILITY
   ════════════════════════════════════════════════════════════ */
[hidden]{display:none!important}
.nowrap{white-space:nowrap}