/* ============================================================
   Hall of Frame — Classic Museum theme
   ============================================================ */

/* ---- CUSTOM FONTS ----------------------------------------------------------
   วางไฟล์ฟอนต์ใน web/fonts/ แล้วเปิด @font-face ด้านล่าง (ลบ comment)
   - "HOF Display" = ฟอนต์หัวข้อ headline (อังกฤษ)
   - "HOF Body"    = ฟอนต์เนื้อหาอังกฤษ
   - "HOF Thai"    = ฟอนต์ไทย (เนื้อหา)
   ตราบใดที่ยังไม่ใส่ไฟล์ ระบบจะ fall back ไป Cormorant/EB Garamond/Noto Serif Thai เอง

@font-face { font-family: "HOF Display"; src: url("fonts/display.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "HOF Body";    src: url("fonts/body.woff2")    format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "HOF Thai";    src: url("fonts/thai.woff2")    format("woff2"); font-weight: 400 600; font-display: swap; }
---------------------------------------------------------------------------- */

:root {
  /* palette — DARK gallery walls + warm gilt (luxury auction-house) */
  --bg:        #211F1A;   /* deep warm charcoal-espresso wall (auction-house) */
  --bg-2:      #1A1814;   /* darker panel */
  --bg-card:   #2A2722;   /* raised surface */
  --ink:       #E2DCDC;   /* all neutral text — one uniform soft grey */
  --ink-soft:  #E2DCDC;   /* (was muted; flattened to one text colour) */
  --ink-faint: #E2DCDC;   /* (was faint; flattened to one text colour) */
  --gold:      #C7AC6E;   /* gilt hairlines */
  --gold-deep: #D8BD7E;   /* brighter gilt on dark */
  --gold-bright: #E6CE92;
  --accent:    #D8BD7E;   /* gilt — links / CTAs on dark */
  --green:     #2C3727;   /* deep museum green */
  --burgundy:  #6E3328;
  --line:      #56503D;   /* subtle line on dark */
  --line-soft: #4A4533;
  --cream:     #E2DCDC;   /* text on photos/overlays — same uniform text colour */

  --maxw: 1180px;
  --gap: clamp(16px, 3vw, 40px);

  /* Roboto Serif for Latin; Thai falls through to Sarabun (loaded from
     thaiwebfonts / jsDelivr) since Roboto Serif has no Thai glyphs. */
  --serif-en: "Roboto Serif", Georgia, serif;
  --body-en:  "Roboto Serif", Georgia, serif;
  --thai:     "Sarabun", sans-serif;
  --font: var(--body-en), var(--thai);
  --display: var(--serif-en), var(--thai);
}
/* Thai mode: English text keeps the serif (Roboto Serif); only the Thai glyphs
   fall through to Prompt. Roboto Serif is listed first so Latin uses it, Prompt
   right after, and NO generic "serif" in between (a bare "serif" has Thai glyphs
   and would trap Thai before it reaches Prompt). Must override every font var —
   --font/--body-en drive body copy (e.g. the hero paragraph), not just --display. */
html[lang="th"] {
  /* All Thai text (headings + body) = Sarabun. Roboto Serif stays first so Latin
     words keep the serif; NO generic "serif" before Sarabun or it traps Thai. */
  --serif-en: "Roboto Serif", "Sarabun", sans-serif;   /* wordmark (Latin) */
  --display:  "Roboto Serif", "Sarabun", sans-serif;   /* headings, captions, pull-quote */
  --body-en:  "Roboto Serif", "Sarabun", sans-serif;   /* body copy */
  --font:     "Roboto Serif", "Sarabun", sans-serif;   /* body copy */
  /* colours: Thai uses the exact same palette as English (no colour overrides) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }   /* guard against any element bleeding past the viewport */
section[id] { scroll-margin-top: 84px; }   /* anchor links clear the fixed header */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 300;             /* English body = Roboto Serif Light */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: 73px;            /* clear the fixed .site-header (73px tall) */
}
/* Thai body keeps its normal weight (Sarabun 300 is too thin for Thai UI) */
html[lang="th"] body { font-weight: 400; }
/* keep interactive chrome crisp — don't let the light body weight thin it out */
.nav a, .btn, .btn-line-cta, .lang-toggle { font-weight: 400; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap); }

/* small-caps editorial label */
.eyebrow {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
}

.rule { height: 1px; background: var(--gold); opacity: 0.6; border: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 15px; letter-spacing: 0.04em;
  padding: 13px 26px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  border-radius: 0;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); }
.btn--line { border-color: var(--green); color: var(--green); }
.btn--line:hover { background: var(--green); color: var(--bg); border-color: var(--green); }
.btn--gold { border-color: var(--gold); color: var(--gold-deep); }
.btn--gold:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn .line-logo { vertical-align: middle; }
.btn--line-solid { background: var(--green); color: var(--bg); border-color: var(--green); }
.btn--line-solid:hover { background: #2f3b2e; border-color: #2f3b2e; color: var(--bg); }
.btn--messenger { background: #0084FF; border-color: #0084FF; color: #fff; }
.btn--messenger:hover { background: #0068c9; border-color: #0068c9; color: #fff; }
.btn--ghost { border-color: var(--line); }
.line-logo { display: inline-block; vertical-align: -4px; }
.btn .line-logo { margin-right: 2px; }

/* Order button — image-only CTA (icon + text baked in as one PNG) */
/* Luxury LINE CTA — warm gilt pill, dark text, on the dark modal */
.btn-line-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  padding: 18px 28px;
  font-family: var(--font);
  font-size: 16px; letter-spacing: 0.04em;
  color: #2A2618;
  white-space: nowrap;
  background: linear-gradient(180deg, #E6CE92 0%, #CDAE69 100%);
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-line-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.4);
  filter: brightness(1.04);
}
.btn-line-cta .line-logo { vertical-align: -4px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  /* Fixed so the navbar stays pinned to the top on scroll. (position:sticky
     was breaking because html/body have overflow-x:hidden.) Body gets a
     matching padding-top so content still starts below the bar. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgba(10,9,8,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.wordmark {
  font-family: var(--serif-en); font-size: 16px; letter-spacing: 0.06em;
  font-weight: 500; text-transform: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 11px;
}
/* gilt gold: black engraving -> gold so it reads on the dark header */
.brand-mark { height: 42px; width: auto; display: block; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav a {
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft); transition: color .2s; position: relative;
}
.nav a:hover { color: var(--ink); }
.nav .nav-line { font-size: 19px; color: var(--green); }
.nav .nav-line:hover { color: #2f3b2e; }
.nav-toggle { display: none; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--ink); }
/* Language switch (TH / EN) — small gilt pill in the nav */
.lang-toggle {
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--gold-deep); background: transparent;
  border: 1px solid var(--gold); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; line-height: 1;
  transition: background .2s, color .2s;
}
.lang-toggle:hover { background: var(--gold); color: var(--bg); }

/* ============================================================
   Hero
   ============================================================ */
/* ===== Full-bleed hero with random rotating bg + Ken-Burns zoom ===== */
.hero-fullbleed {
  position: relative;
  height: 92vh;
  min-height: 600px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  /* Warm museum-wall background while the hero image loads — feels alive, not "dead screen" */
  background:
    radial-gradient(ellipse at center, #3a2d22 0%, #1c1410 70%, #100d0a 100%);
}
.hero-bg-stack { position: absolute; inset: 0; will-change: transform, opacity; }
.hero-bg {
  position: absolute; inset: -3%;
  background-size: cover;
  background-position: center;
  transform-origin: 50% 50%;
  transform: translateZ(0);   /* promote to its own GPU layer — Ken Burns + dissolve stay smooth */
  /* Long, smooth dissolve between images */
  transition: opacity 2.5s ease-in-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* Lift exposure of inherently dark masterpieces so they don't read as "blank dark" */
  filter: brightness(1.08) contrast(1.04) saturate(1.06);
}
/* First image: fade in quickly (0.6s) so initial paint doesn't feel like a 2.5s dark screen */
.hero-bg.first-show { transition: opacity 0.6s ease-out; }
/* Default hero image painted by CSS — shows the moment the preloaded image decodes,
   so mobile users see art instantly instead of waiting for JS to fetch + decode. */
/* No products yet — hero shows the warm radial gradient fallback. Re-enable
   once you have at least one published product with an LS image. */
@keyframes heroKenBurns {
  /* Gentler zoom range — smoother on slower GPUs, still visible */
  from { transform: scale(1.02) translateZ(0); }
  to   { transform: scale(1.10) translateZ(0); }
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.20) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gap);
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hero-card {
  background: transparent;
  padding: 0;
  max-width: 720px;
  width: 100%;
  text-align: center;
  box-shadow: none;
  border: none;
  color: var(--cream);
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.hero-card .hero-cta { justify-content: center; }
.hero-card .eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--cream);
  opacity: 0.9;
}
.hero-card h1 {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 94px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--cream);
  margin-bottom: 22px;
}
/* Thai has tone marks above + sara below — needs looser leading than the tight EN 1.02 */
html[lang="th"] .hero-card h1 { line-height: 1.45; }
.hero-fullbleed .hero-card p {
  font-family: var(--display);          /* Thai → Prompt (EN keeps Roboto Serif) */
  font-size: clamp(26px, 2.2vw, 34px);  /* larger */
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.92;
  margin: 0 auto;
  max-width: 92vw;
}
/* CTAs on photo background — invert btn styles to white */
.hero-card .btn--solid {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  text-shadow: none;
}
.hero-card .btn--solid:hover {
  background: transparent;
  color: var(--bg);
  border-color: var(--bg);
}
.hero-card .btn--line {
  background: transparent;
  color: var(--bg);
  border-color: var(--bg);
  text-shadow: none;
}
.hero-card .btn--line:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
/* Caption aligned to the same column as the logo (uses .wrap geometry) */
.hero-caption {
  position: absolute;
  top: clamp(28px, 6vw, 80px);
  left: 0; right: 0;
  margin: 0 auto;
  z-index: 3;
  max-width: var(--maxw);
  padding: 0 var(--gap);
  text-align: left;
  color: var(--bg);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  pointer-events: none;
  opacity: 0; animation: heroCaptionIn 1.2s ease-out 0.4s forwards;
}
.hero-caption h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 4px;
}
.hero-fullbleed .hero-caption p {
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.4;
  color: var(--bg);
  margin: 0;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
@keyframes heroCaptionIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Legacy .hero (kept as fallback for sections that may still use it) */
.hero { padding: clamp(48px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); text-align: center; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 86px);
  line-height: 1.04; font-weight: 700; letter-spacing: 0.005em;
  margin: 0 auto 26px;
}
.hero p {
  font-size: clamp(17px, 2vw, 21px); color: var(--ink-soft);
  max-width: 52ch; margin: 0 auto 36px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* hero gallery wall */
.hero-gallery {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  margin: clamp(44px, 7vw, 88px) auto 0;
}
.hero-gallery .ga { margin: 0; cursor: pointer; transition: transform .3s ease; }
.hero-gallery .ga:hover { transform: translateY(-5px); }
.hero-gallery .frame, .hero-gallery .hero-img { box-shadow: 0 22px 48px rgba(42,39,34,0.18); }
.hero-gallery img { display: block; height: auto; }
.ga--center img { width: clamp(220px, 28vw, 340px); }
.ga--side img   { width: clamp(130px, 17vw, 210px); }
.ga--up   { margin-top: clamp(-30px, -4vw, -56px) !important; }
.ga--down { margin-top: clamp(40px, 6vw, 80px) !important; }
.placard {
  text-align: center; margin-top: 20px;
}
.placard b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: 17px; letter-spacing: 0.02em; color: var(--ink);
}
.placard span {
  display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* framed artwork presentation (the "gallery frame") */
.frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: clamp(14px, 2vw, 26px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.frame-inner {
  border: 1px solid var(--line);
  padding: clamp(10px, 1.6vw, 20px);
  background: var(--bg-2);
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.trust .wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 56px);
  padding: 20px 0;
}
.trust span {
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 9px;
}
.trust .ti { color: var(--gold-deep); font-size: 17px; }

/* ============================================================
   Section heading
   ============================================================ */
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section-head { text-align: center; margin-bottom: clamp(8px, 1.2vw, 14px); }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 5.5vw, 64px); line-height: 1.06;
  letter-spacing: 0.01em;
}
.section-head p { font-family: var(--display); color: var(--ink-soft); margin-top: 14px; max-width: 56ch; margin-inline: auto; }
/* collection subtitle — centered, larger; Thai (short) on one line, EN wraps */
#collection .section-head p { font-size: clamp(17px, 2.2vw, 22px); }
html[lang="th"] #collection .section-head p { max-width: none; white-space: nowrap; }
@media (max-width: 640px) { html[lang="th"] #collection .section-head p { white-space: normal; } }
/* Gilded double-hairline divider — a touch of luxury under each section title */
.section-head::after {
  content: ""; display: block; width: 60px; height: 0;
  border-top: 1px solid var(--gold);
  box-shadow: 0 3px 0 -2px var(--gold);
  opacity: 0.8; margin: 20px auto 0;
}

/* ============================================================
   Filter bar
   ============================================================ */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.chip {
  font-family: var(--font); font-size: 14px; letter-spacing: 0.04em;
  padding: 8px 18px; border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); cursor: pointer; transition: all .2s; border-radius: 999px;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter-group { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter-label {
  width: 100%; text-align: center; font-size: 13px;
  color: var(--ink-faint); margin: 6px 0 2px;
}

/* ============================================================
   Gallery grid
   ============================================================ */
/* Catalog grid — dense, scannable at 50-100 pieces. 4 / 3 / 2 columns. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(36px, 4vw, 64px) clamp(22px, 2.5vw, 40px);
  align-items: start;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

.card {
  cursor: pointer;
  text-align: center;   /* caption centred under the centred frame */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.card.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; transition: none; }
}

.card-image {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: visible; position: relative;   /* allow drop-shadow to escape */
  margin-bottom: 10px;
}
.card-image img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.05);
  -webkit-user-drag: none; user-select: none;   /* can't drag/move the grid image */
  /* The scaled frame overflows its box (overflow:visible for the shadow); make it
     transparent to taps so the overflow can't intercept clicks meant for the
     pagination below. Card taps still work — they land on .card. */
  pointer-events: none;
  /* NO CSS shadow — the NoBg.webp file already has a soft drop shadow baked in.
     Adding one here double-stacked it and left a clipped "รอย" on the dark wall. */
}

/* Movement eyebrow hidden on grid cards — show only title + artist + year */
.card-eyebrow { display: none; }
.card-title {
  font-family: var(--display);
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 5px;
}
.card-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-style: italic;
}

/* Sold-out overlay on grid card */
.card--sold .card-image img { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.20)) drop-shadow(0 14px 26px rgba(0,0,0,0.22)) grayscale(0.55); opacity: 0.78; }
.card--sold .card-title, .card--sold .card-subtitle { color: var(--ink-faint); }
.sold-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.sold-stamp {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--burgundy);
  background: rgba(244,239,230,0.92);
  border: 2px solid var(--burgundy);
  padding: 6px 18px 4px;
  transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.modal-price.is-sold { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.modal-price .sold-tag {
  display: inline-block;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  padding: 3px 10px;
  margin-left: 12px;
  vertical-align: middle;
  text-decoration: none;
}

.card-ph {
  width: 60%; aspect-ratio: 3/4;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.card-ph .mono {
  font-family: var(--display); font-size: 60px; color: var(--gold-deep);
  letter-spacing: 0.06em; line-height: 1;
}

.empty { text-align: center; color: var(--ink-faint); padding: 60px 0; font-style: italic; }

/* Header search (lives inside .site-header) */
.header-search {
  display: flex; align-items: center; gap: 10px;
  flex: 1; max-width: 360px;
  margin: 0 24px;
}
.header-search input {
  flex: 1;
  font-family: var(--font); font-size: 14px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color .2s;
}
.header-search input:focus { border-color: var(--gold-deep); }
.header-search input::placeholder { color: var(--ink-faint); }
.search-count {
  font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.04em; white-space: nowrap;
}
/* Search lives in the navbar (header), between the wordmark and the nav links. */
.header-search { display: flex; }

/* Gallery toolbar — holds the search, at the top of the gallery section */
.gallery-toolbar {
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.gallery-toolbar .header-search--inline { margin: 0; width: 100%; max-width: 460px; flex: 0 1 460px; }

/* Gallery section order (all viewports):
   heading → Search → Grid → (pagination) → Collection chips (moved to bottom). */
#collection .wrap { display: flex; flex-direction: column; }
#collection .section-head    { order: 0; }
#collection .gallery-toolbar { order: 1; }
#collection .grid            { order: 2; margin-top: clamp(24px, 3.5vw, 48px); }
#collection .pagination      { order: 3; }
#collection .filters         { order: 4; margin: clamp(16px, 4vw, 28px) 0 0; }

/* Pagination */
.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; margin-top: 56px; flex-wrap: wrap;
  /* Sit above the grid: a scaled last-card image (z-index:1, overflow:visible)
     bleeds down into this bar; without this the page buttons were behind it and
     taps opened that image's modal instead of changing page. */
  position: relative; z-index: 5;
}
.page-btn {
  font-family: var(--font); font-size: 14px;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.page-btn:hover:not(:disabled) {
  background: var(--bg-card);
  border-color: var(--gold-deep);
}
.page-btn.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.page-btn.nav { font-size: 20px; line-height: 1; }
.page-ellipsis {
  color: var(--ink-faint);
  padding: 0 6px;
  user-select: none;
}

/* ============================================================
   Editorial split (Why / vs IKEA)
   ============================================================ */
.split { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; padding: clamp(56px,8vw,96px) var(--gap); }
.split h2 { font-family: var(--display); font-weight: 500; font-size: clamp(28px,4vw,46px); line-height: 1.12; margin-bottom: 20px; }
.split p { color: var(--ink-soft); margin-bottom: 16px; }
.split .lead-para { font-size: 1.05em; line-height: 1.7; color: var(--ink); }
.split p em { font-style: italic; color: var(--accent); font-family: var(--display); }
.compare { list-style: none; margin-top: 24px; }
.compare li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.compare li .ti { color: var(--green); font-size: 20px; margin-top: 2px; }
.compare li b { font-weight: 500; }
.split-figure .frame-inner { aspect-ratio: 4/5; display:flex; align-items:center; justify-content:center; }

/* ============================================================
   Dual entry (Gift / Business)
   ============================================================ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,3vw,28px); }
.duo-card { background: var(--bg-card); border: 1px solid var(--line); padding: clamp(28px,4vw,48px); text-align: center; transition: border-color .3s, box-shadow .3s, transform .3s; }
.duo-card:hover { border-color: var(--gold); box-shadow: 0 16px 36px rgba(42,39,34,0.10); transform: translateY(-4px); }
.duo-card .ti { font-size: 34px; color: var(--gold-deep); }
.duo-card h3 { font-family: var(--display); font-weight: 500; font-size: 26px; margin: 16px 0 8px; }
.duo-card p { color: var(--ink-soft); font-size: 16px; margin-bottom: 20px; }

/* ============================================================
   Wall Art Collection band
   ============================================================ */
.wall-art-band {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 8vw, 96px) 0;
}
.wall-art-band .wrap { display: block; }
.wall-art-band .wa-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.wall-art-band h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  margin: 14px 0 14px;
}
.wall-art-band .wa-head p {
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 56ch;
}
.wall-art-band .wa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.wall-art-band .wa-shot {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  background: var(--bg-card);
}
.wall-art-band .wa-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.wall-art-band .wa-shot:hover img { transform: scale(1.05); }
.wall-art-band .wa-detail {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.wall-art-band .wa-lead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.wall-art-band .wa-lead b { color: var(--ink); font-weight: 500; }
.wall-art-band .wa-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px clamp(24px, 4vw, 48px);
  text-align: left;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.wall-art-band .wa-features li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.wall-art-band .wa-features li i {
  color: var(--gold-deep);
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.wall-art-band .wa-features li b {
  color: var(--ink);
  font-weight: 500;
}
.wall-art-band .wa-cta {
  display: flex;
  justify-content: center;
}
@media (max-width: 820px) {
  .wall-art-band .wa-grid { grid-template-columns: repeat(2, 1fr); }
  .wall-art-band .wa-features { grid-template-columns: 1fr; }
}

/* ============================================================
   Venues (In the Wild — café · restaurant · hotel)
   ============================================================ */
.venues { padding: clamp(56px, 8vw, 100px) 0; }
.venues .section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.venue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 36px);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.venue {
  margin: 0;
  display: flex; flex-direction: column;
}
.venue a {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-card);
}
.venue a img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.venue:hover a img { transform: scale(1.04); }
.venue figcaption {
  padding-top: 20px;
}
.venue-tag {
  display: inline-block;
  font-size: 14px;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.venue h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 8px;
}
.venue figcaption p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.venues-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
@media (max-width: 820px) {
  .venue-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   LINE band
   ============================================================ */
/* ---------- How to Order ---------- */
.how-to-order { text-align: center; }
.how-to-order > .wrap { max-width: 1040px; }
/* 2-column body: steps (left) · payment + guarantee + CTA (right). */
.hto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  text-align: left;
  margin-top: clamp(28px, 4vw, 48px);
}
.hto-col--steps { align-self: center; }
.how-to-order h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(28px, 4vw, 44px); margin: 8px 0 4px;
}
.hto-lead { color: var(--ink-soft); font-style: italic; margin-bottom: clamp(28px, 4vw, 44px); }
.hto-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 30px); text-align: left;
}
.hto-steps li { display: flex; gap: 18px; align-items: flex-start; }
.hto-no {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--gold-deep);
  font-family: var(--display); font-size: 18px; line-height: 1;
}
.hto-steps li div { line-height: 1.55; color: var(--ink); }
.hto-steps strong { color: var(--ink); font-weight: 600; }
.hto-th { display: block; color: var(--ink-soft); font-size: 0.92em; margin-top: 3px; }
.hto-bank {
  border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(20px, 3vw, 28px); margin: 0 0 clamp(20px, 3vw, 28px);
  max-width: none; text-align: center;
}
.hto-bank .eyebrow { display: block; margin-bottom: 16px; }
.bank-line { margin: 14px 0; color: var(--ink-soft); line-height: 1.5; }
.hto-bank strong { color: var(--ink); }
.hto-guarantee {
  color: var(--ink-soft); font-size: 0.95em; line-height: 1.6;
  max-width: none; margin: 0 0 clamp(20px, 3vw, 28px);
}
.hto-guarantee .ti { color: var(--gold-deep); margin-right: 4px; }
.hto-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hto-cta .btn[data-line] { border-color: var(--gold); color: var(--gold-deep); }
.hto-cta .btn[data-line]:hover { background: var(--gold); color: var(--bg); }

/* ---------- Our Craft (process columns) — light band ---------- */
.craft {
  background: var(--bg);              /* match the site's dark theme */
  padding: clamp(48px, 7vw, 96px) 0;
}
.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 5vw, 64px);
}
.craft-col { text-align: left; }
.craft-col > .ti {
  font-size: 34px; color: var(--gold-deep);   /* gilt icons on dark */
  display: block; margin-bottom: 18px; line-height: 1;
  text-align: center;                          /* icon centred above left-aligned text */
}
.craft-col h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25;
  margin-bottom: 14px; color: var(--ink);
}
html[lang="th"] .craft-col h3 { line-height: 1.5; }
.craft-col p { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
@media (max-width: 760px) {
  .craft-grid { grid-template-columns: 1fr; gap: 34px; }
  .craft-col { text-align: center; }   /* centre the whole column on mobile */
}

.line-band { background: var(--green); color: #F4EFE6; text-align: center; padding: clamp(48px,7vw,84px) 0; }
.line-band h2 { font-family: var(--display); font-weight: 500; font-size: clamp(28px,4vw,44px); margin-bottom: 12px; }
.line-band p { opacity: 0.85; margin-bottom: 26px; max-width: 50ch; margin-inline: auto; }
.line-band .btn { border-color: #F4EFE6; color: #F4EFE6; }
.line-band .btn:hover { background: #F4EFE6; color: var(--green); }
.line-trust {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 4vw, 56px);
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(244,239,230,0.18);
}
.line-trust li {
  font-size: 14px;
  color: rgba(244,239,230,0.85);
  display: inline-flex; align-items: center; gap: 9px;
}
.line-trust li i {
  color: var(--gold);
  font-size: 18px;
  opacity: 0.9;
}
/* hospitality/project reference images */
.band-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(32px, 4.5vw, 52px);
}
.band-gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
@media (max-width: 820px) { .band-gallery { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(48px,6vw,72px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { font-family: var(--display); font-size: 20px; font-weight: 500; margin-bottom: 14px; }
.footer-grid .col-brand p { color: var(--ink-soft); font-size: 15px; max-width: 34ch; }
.footer-grid .eyebrow { display:block; margin-bottom: 14px; }
.footer-grid ul { list-style: none; }
.footer-grid li { padding: 5px 0; }
.footer-grid a { color: var(--ink-soft); font-size: 15px; }
.footer-grid a:hover { color: var(--ink); }
.footer-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-legal .eyebrow { display: block; margin-bottom: 10px; }
.footer-legal p { font-size: 12.5px; line-height: 1.75; color: var(--ink-faint); }
.footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink-faint); }

/* ============================================================
   Product modal
   ============================================================ */
/* Zoom lightbox (above product modal) */
.zoom-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,12,10,0.92);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.zoom-img {
  max-width: 95vw; max-height: 95dvh;
  width: auto; height: auto;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform .12s ease-out;
  cursor: grab;
  will-change: transform;
}
.zoom-close {
  position: absolute; top: 16px; right: 20px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border: 0;
  color: #fff;
  font-size: 30px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.zoom-close:hover { background: rgba(255,255,255,0.18); }
.zoom-hint {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.modal-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(18,15,10,0.86);
  display: none; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(6px);
}
.modal-back.open { display: flex; }
.modal {
  max-width: 980px; width: 100%; max-height: 92dvh; overflow-y: auto;
  border: 1px solid var(--gold-deep); display: grid; grid-template-columns: 1fr 1fr;
  /* Same dark charcoal wall as the catalog cards — frame floats on the same
     background in both the grid and the modal, reading with just its shadow. */
  background: var(--bg);
}
.modal-art {
  background: transparent;
  padding: clamp(6px,1.2vw,16px);
  display:flex; align-items:center; justify-content:center;
  min-height: 60dvh; position: relative; overflow: hidden;
  touch-action: pan-x;            /* lock the whole image panel to horizontal swipe only */
}
/* Spotlight glow removed — clean solid wall, the frame reads with just its shadow */
.modal-art::before { content: none; }
.modal-art .carousel { position: relative; z-index: 1; }
/* Only the first slide (framed) floats with a soft directional shadow —
   light from upper-left, shadow pooling down & right (matches the reference).
   The artwork & detail slides (flat paintings) get no shadow. */
.modal-art .carousel-slide[data-i="0"] img {
  /* NO CSS shadow — NoBg.webp already has its shadow baked in (a CSS one
     double-stacked and got clipped by the carousel, leaving a "รอย"). */
  filter: none;
}
.modal-art .carousel-slide:not([data-i="0"]) img {
  filter: none;
}
.modal-art.is-framed { background: transparent; }
.modal-framed { width: 100%; display: flex; align-items: center; justify-content: center; }
.modal-framed img { max-width: 100%; max-height: 74dvh; width: auto; height: auto; object-fit: contain; }

/* Carousel inside modal */
.carousel {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column;
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;             /* no vertical scroll/drag ever — even if a slide image is taller than the slide */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;            /* only left-right swipe; no pinch-zoom / vertical drag */
  overscroll-behavior: contain;
}
/* keep every slide image within the slide so nothing is clipped by overflow:hidden */
.carousel-slide img { max-height: 100%; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 4px 4px 0;
  position: relative;
  touch-action: pan-x;            /* image region: only left-right swipe, never vertical drag */
}
.carousel-slide img {
  max-width: 100%;
  max-height: 80dvh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none; user-select: none;  /* image can't be dragged/selected */
  pointer-events: none;                          /* touches pass to the track → swipe only */
}
/* Flat-painting slides (Artwork + Detail) fill the slide width even when the
   source file is small (e.g. a low-res Detail crop) — width:auto left them
   pinned to their natural size with empty margins ("รูปเล็ก"). */
.carousel-slide--zoomable img {
  width: 100%;
  height: auto;
}
/* Detail slide — crop into the centre of the high-res artwork to reveal brushwork */
.carousel-slide--zoom {
  overflow: hidden;
}
.carousel-slide--zoom img {
  width: 100%;
  max-width: 100%;
  height: 80dvh;
  object-fit: cover;
  object-position: center;
  transform: scale(2.6);
  transform-origin: center;
}
/* Folder-product Detail slide (3rd image, data-i="2"). Detail.webp is now a crisp
   CENTRE crop taken straight from the hi-res source (make-detail-hires.py), so it
   just fills the frame centred — no extra CSS zoom needed. */
.modal-art .carousel-slide--zoomable[data-i="2"] {
  overflow: hidden;
}
.modal-art .carousel-slide--zoomable[data-i="2"] img {
  width: 100%;
  max-width: 100%;
  height: 80dvh;
  object-fit: cover;
  object-position: center;
}
/* Artwork (data-i="1") & In-a-Room slides fill the frame at the same box size as
   the Detail slide — 80vh tall, full width, cover-cropped (no empty margins) so
   every slide reads the same size. Cover preserves aspect (no distortion); the
   room scene is centred so only its edges are trimmed. */
.modal-art .carousel-slide[data-i="1"] img,
.modal-art .carousel-slide--room img {
  width: 100%;
  max-width: 100%;
  height: 80dvh;
  object-fit: cover;
  object-position: center;
}
/* Aged craquelure veil — multiply blend darkens only the painting, leaving the
   dark modal margins and gold frame untouched. */
.carousel-slide--zoomable::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -10 1'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  mix-blend-mode: multiply;
  opacity: 0.4;
}
.zoom-badge {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: var(--font); font-size: 12px; letter-spacing: 0.04em;
  color: var(--cream); background: rgba(20,16,10,0.55);
  border: 1px solid rgba(244,238,226,0.25); border-radius: 999px;
  padding: 5px 14px; backdrop-filter: blur(4px); white-space: nowrap;
}
/* Slide captions (Framed / Artwork / Detail) hidden — label kept in img alt only */
.carousel-cap { display: none; }
/* Prev/next arrows hidden — swipe or tap the dots to change slide */
.carousel-btn { display: none; }
.carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.carousel-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--gold-deep);
  background: transparent;
  cursor: pointer; padding: 0;
  transition: background .2s, transform .2s;
}
.carousel-dots .dot.active {
  background: var(--gold-deep);
  transform: scale(1.2);
}
.modal-body { padding: clamp(26px,3.5vw,48px); position: relative; }
.modal-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: 28px; cursor: pointer; color: var(--ink-soft); line-height: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.modal-close:hover { color: var(--ink); }
.modal-body .eyebrow { display:block; margin-bottom: 12px; letter-spacing: 0; text-transform: none; }
.modal-body h2 { font-family: var(--display); font-weight: 500; font-size: clamp(24px,2.8vw,35px); line-height: 1.08; letter-spacing: 0.01em; }
.modal-artist { font-style: italic; color: var(--ink-soft); margin: 8px 0 18px; font-size: 17px; }
.modal-price { font-family: "Roboto Serif", var(--thai), Georgia, serif; font-weight: 500; font-size: 34px; margin: 4px 0 18px; letter-spacing: 0.01em; color: var(--gold-deep); }
.modal-story { color: var(--ink-soft); margin-bottom: 22px; }
.spec { list-style: none; border-top: 1px solid var(--line); margin-bottom: 24px; }
.spec li { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec li span:first-child { color: var(--ink-faint); letter-spacing: 0.04em; flex: 0 0 auto; white-space: nowrap; }
.spec li span:last-child { text-align: right; }
.modal-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.modal-note { margin-top: 16px; font-size: 13px; color: var(--ink-faint); display:flex; gap: 8px; align-items:center; }
/* Contact buttons (modal + How-to-Order): equal-size LINE/Messenger icons */
.modal-cta .line-logo, .hto-cta .line-logo { width: 20px; height: 20px; }
.modal-cta .ti, .hto-cta .ti { font-size: 20px; line-height: 1; }
/* On phones, the two contact buttons share the row equally */
@media (max-width: 560px) {
  .modal-cta, .hto-cta { flex-wrap: nowrap; gap: 10px; }
  .modal-cta .btn, .hto-cta .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
  /* hide the 3-column craft/process band on mobile */
  .craft { display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 18px var(--gap);
    gap: 16px; align-items: flex-start;
    box-shadow: 0 8px 24px rgba(42,39,34,0.10);
    z-index: 39;
  }
  .nav.open a { font-size: 16px; padding: 4px 0; }
  .nav-toggle { display: block; }
  /* Search stays in the bar between the wordmark and the hamburger — let it
     shrink to share the leftover space so the header never overflows. */
  .header-search { margin: 0 10px; max-width: none; min-width: 0; flex: 1 1 0; }
  .header-search input { min-width: 0; }
  /* How-to-Order collapses to a single column. */
  .hto-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
  .split .wrap { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
  .duo { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid .col-brand { grid-column: 1 / -1; }
  .modal { grid-template-columns: 1fr; }
  .modal-art { min-height: 0; padding: clamp(16px,4vw,28px); }
  .modal-art .carousel-slide img { max-height: 50dvh; }
}
@media (max-width: 540px) {
  .ga--side { display: none; }
  .ga--center img { width: clamp(220px, 64vw, 300px); }
}
@media (max-width: 560px) {
  /* 2 columns on mobile — catalog density for a large gallery.
     Frames are height-fit (bounded to the square card box), no overflow to absorb. */
  .grid { grid-template-columns: 1fr; gap: clamp(44px, 11vw, 68px); align-items: start; }
  .card, .card-title, .card-subtitle, .card-eyebrow { text-align: center; }
  .card-eyebrow { font-size: 10px; letter-spacing: 0.16em; margin-top: 8px; }
  .card-image { margin-bottom: 12px; }   /* uniform gap under the (now aspect-tight) frame */
  .card-title { font-size: 14px; font-weight: 400; margin-bottom: 3px; line-height: 1.3; }
  .card-subtitle { display: block; font-size: 13px; }   /* mobile: show artist (year) */
  /* mobile: left-align the collection filter chips (was centred) */
  .filters, .filter-group { justify-content: flex-start; }
  .filter-label { text-align: left; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { justify-content: center; }
}

/* ================= Info modal (Shipping) ================= */
[data-en],[data-th]{ }               /* spans used by the info modal */
html[lang="th"] .info-modal [data-en]{ display:none; }
.info-modal [data-th]{ display:none; }
html[lang="th"] .info-modal [data-th]{ display:revert; }
.info-modal-back{ position:fixed; inset:0; z-index:120; background:rgba(18,15,10,0.86); display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(6px); }
.info-modal-back.open{ display:flex; }
.info-modal{ position:relative; max-width:660px; width:100%; max-height:88dvh; overflow-y:auto; background:var(--bg); border:1px solid var(--gold-deep); padding:clamp(30px,4.5vw,54px); }
.info-modal .im-eyebrow{ display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:14px; }
.info-modal h2{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,34px); line-height:1.15; color:var(--cream); margin:0 0 14px; }
.info-modal h3{ font-family:var(--display); font-weight:600; font-size:clamp(16px,2vw,19px); color:var(--gold-bright); margin:24px 0 8px; }
.info-modal p{ color:var(--ink-soft); font-size:clamp(14.5px,1.6vw,16px); line-height:1.72; margin:0 0 12px; }
html[lang="th"] .info-modal p{ line-height:1.95; font-weight:300; }
.info-modal ul{ margin:0 0 12px; padding:0; list-style:none; }
.info-modal li{ color:var(--ink-soft); font-size:clamp(14.5px,1.6vw,16px); line-height:1.7; padding-left:18px; position:relative; margin-bottom:5px; }
html[lang="th"] .info-modal li{ font-weight:300; }
.info-modal li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); position:absolute; left:2px; top:.6em; }
.info-modal .im-note{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); color:var(--gold-bright); font-size:clamp(14px,1.6vw,15.5px); }
html[lang="th"] .info-modal .im-note{ font-weight:400; }
.info-modal .im-cta{ margin-top:22px; }
.info-modal .im-cta a{ display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border:1px solid var(--gold); color:var(--gold-bright); font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.03em; transition:color .2s,border-color .2s,background .2s; }
.info-modal .im-cta a:hover{ background:var(--gold-deep); color:#1c1a15; border-color:var(--gold-deep); }
.info-modal-close{ position:absolute; top:10px; right:16px; background:none; border:0; color:var(--ink-soft); font-size:30px; line-height:1; cursor:pointer; transition:color .2s; }
.info-modal-close:hover{ color:var(--gold-bright); }
/* info-modal table (size guide) */
.info-modal table{ width:100%; border-collapse:collapse; margin:8px 0 14px; }
.info-modal thead th{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--gold-deep); color:var(--gold-bright); font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
.info-modal tbody td{ text-align:left; padding:10px; border-bottom:1px solid var(--line); font-size:clamp(13.5px,1.5vw,15px); color:var(--ink-soft); line-height:1.55; vertical-align:top; }
.info-modal tbody td:first-child{ color:var(--ink); width:46%; padding-left:10px; }
.info-modal tbody td:first-child::before{ content:none; }
html[lang="th"] .info-modal tbody td{ font-weight:300; }