/* House showcase design system — lean white SaaS component layer
 * โทนขาวล้วน · hairline · ไม่ถมดำ · flat SaaS ที่ "เนียน"
 * ฟอนต์: Bai Jamjuree (display) + Anuphan (body) — รองรับไทยเต็ม
 * สีเป็น channel "R G B" เพื่อให้ Tailwind/CSS alpha ทำงาน
 * accent เปลี่ยนได้ทั้งระบบผ่าน --c-accent (theme.js เป็นคนกำหนดตอนโหลด)
 * ค่า :root ด้านล่างเป็น fallback เท่านั้น — theme.js override เสมอ
 */
:root {
  --c-ink: 30 45 42;        /* Charleston Green #1E2D2A */
  --c-muted: 95 107 99;     /* secondary text */
  --c-faint: 148 158 150;   /* tertiary */
  --c-line: 30 45 42;       /* hairline base (ใช้กับ alpha ต่ำ) */
  --c-surface: 247 247 247; /* Lynx White #F7F7F7 */
  --c-card: 255 255 255;    /* card bg */
  --c-accent: 58 81 62;     /* Rifle Green #3A513E */
  --c-gold: 220 182 150;    /* Tan #DCB696 */
  --c-cream: 237 211 184;   /* Creamery #EDD3B8 */
  --c-brown: 158 121 108;   /* Burnished Brown #9E796C */
  --c-xanadu: 116 140 115;  /* Xanadu Green #748C73 */
  --shadow-sm: 0 1px 2px rgb(30 45 42 / 0.04), 0 1px 1px rgb(30 45 42 / 0.03);
  --shadow-md: 0 4px 14px -4px rgb(30 45 42 / 0.09), 0 2px 6px -2px rgb(30 45 42 / 0.06);
}
html { scroll-behavior: smooth; }
body {
  font-family: "Avenir Next", "Avenir", "Jost", "Mitr", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  background-color: rgb(var(--c-surface));
  background-image:
    radial-gradient(1200px 480px at 88% -8%, rgb(var(--c-accent) / 0.05), transparent 60%),
    radial-gradient(900px 420px at -6% 4%, rgb(var(--c-ink) / 0.035), transparent 55%);
  background-attachment: fixed;
}
.font-display { font-family: "Avenir Next", "Avenir", "Jost", "Mitr", system-ui, sans-serif; font-weight: 500; letter-spacing: 0; }
.font-en { font-family: "Italiana", "Mitr", Georgia, serif; font-weight: 400; letter-spacing: .02em; }
.font-num { font-family: "Avenir Next", "Avenir", "Jost", "Mitr", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
input[type="color"] { -webkit-appearance: none; appearance: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* hairline helper */
.hair { border: 1px solid rgb(var(--c-line) / 0.10); }
.hair-t { border-top: 1px solid rgb(var(--c-line) / 0.10); }
.hair-b { border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.hair-r { border-right: 1px solid rgb(var(--c-line) / 0.10); }

/* card */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, transform .2s; }
a.cf-card:hover, .cf-card-hover:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--c-line) / 0.18); }

/* stat card */
.cf-stat { position: relative; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
a.cf-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: rgb(var(--c-line) / 0.18); }
.cf-stat-top { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgb(var(--c-muted)); }
.cf-stat-num { font-family: "Avenir Next", "Avenir", "Jost", "Mitr"; font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; margin-top: 0.35rem; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.cf-stat-num small { font-size: 0.9rem; font-weight: 500; color: rgb(var(--c-faint)); }
.cf-stat-foot { font-size: 0.72rem; margin-top: 0.3rem; }
.cf-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: transparent; }
.cf-stat-safe::before { background: rgb(22 128 92 / 0.85); }
.cf-stat-warn::before { background: rgb(202 138 4 / 0.85); }
.cf-stat-bad::before  { background: rgb(220 70 60 / 0.85); }
.cf-stat-ink::before  { background: rgb(var(--c-ink) / 0.55); }

/* logo / icon box — outline ไม่ถม */
.cf-mark { border: 1.5px solid rgb(var(--c-ink)); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }
.cf-iconbox { border: 1px solid rgb(var(--c-line) / 0.16); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }

/* eyebrow */
.cf-eyebrow { font-family: "Avenir Next", "Avenir", "Jost", "Mitr"; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-accent)); font-weight: 600; }

/* chips */
.cf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.24rem 0.62rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.14); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); }
.cf-chip-ink { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.32); }

/* buttons — CTA หลักได้หน้าละ 1 ปุ่ม (cf-btn-primary) */
.cf-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.52rem 1rem; border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); transition: .15s; box-shadow: var(--shadow-sm); }
.cf-btn:hover { border-color: rgb(var(--c-ink) / 0.32); box-shadow: var(--shadow-md); }
.cf-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }
.cf-btn-primary:hover { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
.cf-btn-danger { background: #b1453a; color: #fff; border-color: #b1453a; }
.cf-btn-danger:hover { background: #8f3229; border-color: #8f3229; }
/* 📱 มือถือ: ปุ่ม/ช่องกด ≥44px และ checkbox ใหญ่พอกดโดน (QC 10+15ก.ย. วัดได้ 39-40px · checkbox 13px) */
@media (max-width: 640px) {
  .cf-btn, .et-btn-gold, .et-btn-ghost, button:not(.cf-chip), select.cf-input, input.cf-input, .et-field input, .et-field select { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  /* iPhone ซูมหน้าจอเองเมื่อแตะช่องที่ตัวอักษร < 16px (UAT-05 25 ก.ย.: .cf-input 14px · select text-xs 12px) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px !important; }
}

/* step list (ใช้กับหน้า journey) */
.cf-step { position: relative; padding-left: 3.2rem; }
.cf-step::before { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: -1.1rem; width: 1.5px; background: rgb(var(--c-line) / 0.12); }
.cf-step:last-child::before { display: none; }
.cf-step-num { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; display: grid; place-items: center; font-family: "Avenir Next", "Avenir", "Jost", "Mitr"; font-weight: 600; font-size: 0.85rem; color: rgb(var(--c-accent)); border: 1.5px solid rgb(var(--c-accent) / 0.4); background: rgb(var(--c-accent) / 0.05); }

/* callouts */
.cf-good, .cf-warn, .cf-bad, .cf-info { border-radius: 0.8rem; padding: 0.8rem 1rem; font-size: 0.875rem; display: flex; gap: 0.6rem; border: 1px solid; align-items: flex-start; }
.cf-good { background: rgb(16 185 129 / 0.05); border-color: rgb(16 185 129 / 0.26); color: #0f766e; }
.cf-warn { background: rgb(234 179 8 / 0.06);  border-color: rgb(234 179 8 / 0.32); color: #92660b; }
.cf-bad  { background: rgb(239 68 68 / 0.045); border-color: rgb(239 68 68 / 0.26); color: #b1453a; }
.cf-info { background: rgb(var(--c-ink) / 0.025);  border-color: rgb(var(--c-ink) / 0.12); color: rgb(var(--c-ink)); }

/* screen mock */
.cf-screen { border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 1rem; overflow: hidden; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); }
.cf-screen-bar { height: 2.2rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); background: rgb(var(--c-surface)); }
.cf-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.22); }

/* phone frame (LIFF / mobile mock) */
.cf-phone { width: 100%; max-width: 320px; border: 1px solid rgb(var(--c-line) / 0.14); border-radius: 1.9rem; padding: 0.55rem; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); }
.cf-phone-screen { border-radius: 1.4rem; overflow: hidden; border: 1px solid rgb(var(--c-line) / 0.08); background: rgb(var(--c-surface)); }

/* zone / status pills */
.cf-zone { font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 9999px; border: 1px solid; display: inline-flex; align-items: center; gap: 0.3rem; }
.cf-zone-danger  { color: #b1453a; border-color: rgb(239 68 68 / 0.38);  background: rgb(239 68 68 / 0.05); }
.cf-zone-caution { color: #92660b; border-color: rgb(234 179 8 / 0.42); background: rgb(234 179 8 / 0.06); }
.cf-zone-safe    { color: #0f766e; border-color: rgb(16 185 129 / 0.38); background: rgb(16 185 129 / 0.05); }
.cf-zone-free    { color: #1d4ed8; border-color: rgb(59 130 246 / 0.38); background: rgb(59 130 246 / 0.05); }
.cf-zone-mute    { color: rgb(var(--c-muted)); border-color: rgb(var(--c-line) / 0.18); background: rgb(var(--c-line) / 0.03); }

/* traffic light dot */
.cf-light { width: 0.7rem; height: 0.7rem; border-radius: 9999px; display: inline-block; }
.cf-light-green  { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / 0.14); }
.cf-light-yellow { background: #eab308; box-shadow: 0 0 0 3px rgb(234 179 8 / 0.14); }
.cf-light-red    { background: #ef4444; box-shadow: 0 0 0 3px rgb(239 68 68 / 0.14); }

/* progress bar */
.cf-bar { height: 0.5rem; border-radius: 9999px; background: rgb(var(--c-line) / 0.08); overflow: hidden; }
.cf-bar > span { display: block; height: 100%; border-radius: 9999px; background: rgb(var(--c-accent)); }
.cf-bar-safe > span { background: #10b981; }
.cf-bar-warn > span { background: #eab308; }
.cf-bar-bad > span  { background: #ef4444; }

/* form inputs */
.cf-label { display:block; font-size:0.75rem; color:rgb(var(--c-muted)); margin-bottom:0.3rem; }
.cf-input { width:100%; border:1px solid rgb(var(--c-line) / 0.16); border-radius:0.7rem; padding:0.55rem 0.75rem; font-size:0.875rem; background:#fff; color:rgb(var(--c-ink)); transition:.15s; font-family:inherit; }
.cf-input::placeholder { color:rgb(var(--c-faint)); }
.cf-input:focus { outline:none; border-color:rgb(var(--c-accent)); box-shadow:0 0 0 3px rgb(var(--c-accent) / 0.12); }
select.cf-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6676' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.6rem center; padding-right:1.8rem; cursor:pointer; }
.cf-input-affix { position:relative; }
.cf-input-affix > .suffix { position:absolute; right:0.7rem; top:50%; transform:translateY(-50%); font-size:0.8rem; color:rgb(var(--c-faint)); pointer-events:none; }

/* code chip */
.cf-code { font-family:"Avenir Next","Avenir","Jost","Mitr"; font-weight:700; letter-spacing:0.26em; font-size:1.5rem; color:rgb(var(--c-ink)); }

/* toast (theme.js เด้งให้เมื่อกดปุ่ม data-toast) */
.cf-toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); background:rgb(var(--c-ink)); color:#fff; font-size:0.85rem; padding:0.7rem 1.15rem; border-radius:0.8rem; display:flex; align-items:center; gap:0.5rem; opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 10px 30px rgb(15 23 42 / 0.22); }
.cf-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* data table */
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.cf-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-table th.text-right { text-align: right; }
.cf-table th.text-center { text-align: center; }
.cf-table td { padding: 0.7rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.07); color: rgb(var(--c-ink)); }
.cf-table tbody tr { transition: background .12s; }
.cf-table tbody tr:hover { background: rgb(var(--c-accent) / 0.025); }
.cf-table tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* avatar */
.cf-ava { width:2.25rem; height:2.25rem; border-radius:9999px; display:grid; place-items:center; font-family:"Avenir Next","Avenir","Jost","Mitr"; font-weight:600; font-size:0.8rem; background:rgb(var(--c-accent) / 0.08); border:1px solid rgb(var(--c-accent) / 0.16); color:rgb(var(--c-accent)); }

/* divider list */
.cf-divide > * + * { border-top: 1px solid rgb(var(--c-line) / 0.08); }

/* page-load reveal */
@keyframes camp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* fill-mode backwards (ไม่ใช่ both): จบแล้วต้องไม่มี transform ค้าง — transform ค้าง = position:fixed ของลูก (แผงตัวกรองมือถือ) ยึดกับ section แทน viewport (21 ก.ย.) */
  main > * { animation: camp-rise .55s cubic-bezier(.22,.61,.36,1) backwards; }
  main > *:nth-child(1){ animation-delay:.02s } main > *:nth-child(2){ animation-delay:.08s }
  main > *:nth-child(3){ animation-delay:.14s } main > *:nth-child(4){ animation-delay:.20s }
  main > *:nth-child(5){ animation-delay:.26s } main > *:nth-child(6){ animation-delay:.32s }
  main > *:nth-child(7){ animation-delay:.38s } main > *:nth-child(n+8){ animation-delay:.42s }
}

/* ══════════════════════════════════════════════════════════════════════
 * EliteTime — ชั้นแบรนด์ (CI: Rifle Green · Charleston Green · Tan)
 * ใช้ได้ทั้งหน้าเว็บร้าน (shop-*.html) และจุดเน้นในหลังบ้าน
 * ══════════════════════════════════════════════════════════════════════ */

/* พื้นเข้มตามแบนเนอร์แบรนด์ */
.et-dark { background: linear-gradient(150deg, #3A513E 0%, #1E2D2A 72%); color: #fff; }
.et-dark-flat { background: #1E2D2A; color: #fff; }
.et-gold { color: rgb(var(--c-gold)); }
.et-cream { color: rgb(var(--c-cream)); }
.et-rule { height: 1px; background: rgb(var(--c-gold) / 0.55); }
.et-hairgold { border: 1px solid rgb(var(--c-gold) / 0.32); }

/* eyebrow บนพื้นเข้ม */
.et-eyebrow { font-family: "Avenir Next", "Avenir", "Jost", "Mitr"; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--c-gold)); font-weight: 500; }

/* โลโก้จริงจากไฟล์ CI — ห้ามวาดใหม่ */
.et-logo { display: block; height: 34px; width: auto; }
.et-logo-sm { height: 26px; }
.et-logo-lg { height: 74px; }

/* ปุ่มทอง (ใช้เฉพาะหน้าเว็บร้าน) */
.et-btn-gold { display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:400;
  padding:.62rem 1.25rem; border-radius:.6rem; background: rgb(var(--c-gold)); color:#1E2D2A;
  border:1px solid rgb(var(--c-gold)); transition:.15s; }
.et-btn-gold:hover { background: rgb(var(--c-cream)); border-color: rgb(var(--c-cream)); }
.et-btn-ghost { display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; padding:.62rem 1.25rem;
  border-radius:.6rem; border:1px solid rgb(255 255 255 / .28); color:#fff; transition:.15s; }
.et-btn-ghost:hover { border-color: rgb(var(--c-gold)); color: rgb(var(--c-gold)); }

/* การ์ดสินค้าในเว็บร้าน */
.et-prod { background:#fff; border:1px solid rgb(var(--c-line)/.10); border-radius:.9rem; overflow:hidden;
  transition:.2s; display:block; }
.et-prod:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--c-gold)/.55); transform: translateY(-2px); }
.et-prod-img { aspect-ratio: 4/3; width:100%; object-fit:cover; background: rgb(var(--c-line)/.05); }
.et-price { font-family:"Avenir Next","Avenir","Jost","Mitr"; font-weight:600; font-variant-numeric: tabular-nums; color: rgb(var(--c-ink)); }
.et-tag { position:absolute; left:.6rem; top:.6rem; font-size:.68rem; letter-spacing:.06em; padding:.16rem .55rem;
  border-radius:9999px; background: rgb(30 45 42 / .78); color:#fff; backdrop-filter: blur(4px); }

/* การ์ดเรือนที่ขายแล้ว / ติดจอง — ยังโชว์บนเว็บ แต่ซีดและกดไม่ได้ */
.et-prod-off { pointer-events: none; position: relative; }
.et-prod-off:hover { box-shadow: none; border-color: rgb(var(--c-line)/.10); transform: none; }
.et-prod-off .et-prod-img { filter: grayscale(1) contrast(.92); opacity: .55; }
.et-prod-off .et-price { color: rgb(var(--c-muted)); }
.et-prod-off.is-sold .et-price { text-decoration: line-through; text-decoration-thickness: 1px; }
.et-prod-off .p-4 > :not(.et-stamp-foot) { opacity: .75; }
.et-stamp { position: absolute; left: 50%; top: 28%; transform: translate(-50%,-50%) rotate(-6deg);
  font-family: "Italiana", serif; font-size: 1.6rem; letter-spacing: .18em; white-space: nowrap;
  padding: .3rem 1.1rem; border: 2px solid #fff; border-radius: .4rem; color: #fff;
  background: rgb(178 38 30 / .86); box-shadow: 0 2px 10px rgb(30 45 42 / .25); backdrop-filter: blur(2px); }
.et-stamp-hold { background: rgb(158 121 108 / .82); }
.et-stamp-th { font-family: "Avenir Next","Avenir","Jost","Mitr"; font-size: 1rem; font-weight: 500; letter-spacing: .02em; padding: .35rem 1rem; }
.et-stamp-foot { font-size: .72rem; color: rgb(var(--c-muted)); }

/* ไอคอนแพลตฟอร์มจริง (LINE · Instagram · Facebook) */
.et-social { width: 1rem; height: 1rem; display: inline-block; vertical-align: -.18em; flex-shrink: 0; }
.et-social-lg { width: 1.15rem; height: 1.15rem; }

/* แถบเมนูเว็บร้าน */
.et-shopnav { position:sticky; top:0; z-index:40; background: rgb(30 45 42 / .96); backdrop-filter: blur(8px);
  border-bottom:1px solid rgb(var(--c-gold)/.22); }
.et-shopnav a { color: #E6EAE5; font-size:.9rem; transition:.15s; }
.et-shopnav a:hover, .et-shopnav a.on { color: rgb(var(--c-gold)); }

/* FAQ บนหน้าแรก (พื้นเข้ม) — การ์ดพับ/กาง (21 ก.ย.) */
.et-faq { background: rgb(255 255 255 / .06); border: 1px solid rgb(var(--c-gold) / .22); border-radius: 1rem; color: #fff; }
.et-faq[open] { background: rgb(255 255 255 / .09); }
.et-faq summary::-webkit-details-marker { display: none; }

/* ตัวคั่นแบบ CI (เส้น—คำ—เส้น) */
.et-heading { display:flex; align-items:center; gap:1rem; justify-content:center; }
.et-heading::before, .et-heading::after { content:""; flex:1; height:1px; background: currentColor; opacity:.28; }

/* ตารางในหลังบ้าน: หัวตารางเข้มตามแบรนด์ */
.cf-table th { color: rgb(var(--c-accent)); }

/* ── ช่องกรอกมาตรฐาน ────────────────────────────────────────────────── */
.et-field label { display:block; font-size:.875rem; margin-bottom:.375rem; }
.et-field input { width:100%; border-radius:.75rem; border:1px solid rgb(var(--c-line)/.18);
  padding:.65rem .75rem; font-size:.9rem; background:rgb(var(--c-card)); }
.et-field input:focus { outline:none; border-color:rgb(var(--c-accent)); }
.et-hint { font-size:.72rem; color:rgb(var(--c-faint)); margin-top:.3rem; display:block; }

/* ── ช่องรหัสผ่าน + ปุ่มเปิดตา (มาตรฐานบ้าน /password-gate) ──────────────
 * 🚨 ต้องอยู่ในไฟล์ที่ "ทุกหน้า" โหลด — เคยเขียนไว้ใน login.css แล้วพอเพิ่มหน้า
 *    "รหัสผ่านของฉัน" ปุ่มโผล่แต่ไม่มีสไตล์ ไปกองอยู่ใต้ช่องกรอก
 * 🚨 บล็อกนี้ต้องอยู่ "หลัง" .et-field input และเจาะจงกว่า —
 *    specificity เท่ากันเมื่อไหร่ padding-right หายทันที ปุ่มจะทับตัวอักษรที่พิมพ์ */
.pw-wrap { position: relative; display: block; }
.pw-wrap input,
.et-field .pw-wrap input { padding-right: 4.4rem; }
.pw-eye {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: 0 .6rem; border-radius: .45rem;
  border: 1px solid rgb(var(--c-line) / .18); background: rgb(var(--c-surface));
  color: rgb(var(--c-muted)); font: inherit; font-size: .76rem; cursor: pointer;
}
.pw-eye:hover { color: rgb(var(--c-ink)); border-color: rgb(var(--c-line) / .35); }
.pw-eye:focus-visible { outline: 2px solid rgb(var(--c-accent) / .5); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .45); }

/* ── เรือนที่ขายแล้ว/ติดจองบนเว็บร้าน ─────────────────────────────────
 * ลูกค้าเคาะว่า "ไม่ต้องซ่อน" — โชว์ต่อ ขึ้นป้ายใหญ่ ทำเทากดไม่ได้
 * (ร้านนาฬิกามือสองใช้ SOLD เป็นผลงานร้าน) */
.et-prod-off { filter: grayscale(1) opacity(.62); }
.et-stamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  padding: .3rem 1.1rem; border-radius: .4rem; color: #fff; letter-spacing: .16em;
  font-family: "Italiana", "Mitr", Georgia, serif; font-size: 1.5rem; line-height: 1;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / .5); white-space: nowrap;
}
.et-stamp-sold { background: rgb(178 38 30 / .86); }
/* ป้ายไทยใช้ฟอนต์เนื้อความ — Italiana ไม่มีสระไทย ถ้าใช้จะกลายเป็นสี่เหลี่ยม */
.et-stamp-hold { background: rgb(158 121 108 / .9); font-family: "Mitr", system-ui, sans-serif; font-size: 1.05rem; letter-spacing: .04em; }

/* ── เอกสารพิมพ์ A4 ────────────────────────────────────────────────────
 * 🖨️ ทุกเอกสารที่ออกให้ลูกค้าต้องพิมพ์ลง A4 ได้จริง ด้วยข้อมูลสด
 *    ❌ ไม่ใช่ทำภาพหน้าจอแล้วบอกให้ screenshot
 * ⭐ ใช้ @media print ล้วน ❌ ไม่ใช้ window.open + document.write
 *    (นั่นคือทาง XSS และบางเบราว์เซอร์บล็อกจน "กดพิมพ์แล้วไม่มีอะไรเกิดขึ้น") */
.a4 {
  width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 15mm;
  background: #fff; color: #1E2D2A; box-shadow: var(--shadow-md);
}
.a4 table { width: 100%; border-collapse: collapse; }
.a4 th, .a4 td { padding: 6px 4px; }
.a4 thead th { border-bottom: 1.5px solid rgb(30 45 42 / .5); text-align: left; font-weight: 600; }
.a4 tbody td { border-bottom: 1px solid rgb(30 45 42 / .12); vertical-align: top; }
.a4 .num { text-align: right; font-variant-numeric: tabular-nums; }

@media print {
  /* ซ่อนทุกอย่างที่ไม่ใช่ตัวเอกสาร — เมนู ปุ่ม แถบบน */
  body > *:not(#printroot) { display: none !important; }
  #printroot, #printroot * { visibility: visible; }
  #printroot { position: absolute; inset: 0; }
  .no-print { display: none !important; }
  .a4 { width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none; }
  @page { size: A4; margin: 14mm 15mm; }
  a { text-decoration: none; color: inherit; }
  /* กันตารางถูกตัดกลางแถว */
  tr, .avoid-break { break-inside: avoid; page-break-inside: avoid; }
}

/* เว็บหน้าร้าน: ช่องทางติดต่อที่ร้านยังไม่ตั้งค่า ซ่อนด้วย attribute hidden
 * 🚨 คลาส inline-flex/flex ของ Tailwind ชนะ [hidden] ของเบราว์เซอร์ → ต้องบังคับเอง ไม่งั้นไอคอนเปล่าโผล่ */
.et-shopnav [hidden], .et-dark-flat [hidden], #view [hidden] { display: none !important; }

/* แบนเนอร์หน้าแรก = เต็มหน้าจอ (พี่ปุ้ยสั่ง full page) — หัก 4rem ของแถบเมนู · ในพรีวิว (iframe ไม่มีเมนู) ใช้เต็ม viewport ของ iframe */
.et-hero { min-height: calc(100svh - 4rem); display: flex; align-items: center; }
body.is-hero-preview .et-hero { min-height: 100svh; }
/* ขนาดแบนเนอร์ที่ร้านเลือกได้ (0017): สูง 2/3 จอ · กะทัดรัดพอดีข้อความ */
.et-hero.et-hero-tall { min-height: calc(66svh - 4rem); }
body.is-hero-preview .et-hero.et-hero-tall { min-height: 66svh; }
.et-hero.et-hero-compact, body.is-hero-preview .et-hero.et-hero-compact { min-height: 0; }
/* สไลด์โชว์หน้าแรก (shop-hero.js) — ซ้อนทุกสไลด์ในช่องเดียว (grid) สูงเท่าสไลด์ที่สูงสุด → เปลี่ยนสไลด์แล้วหน้าไม่กระตุก */
.et-carousel > .grid > .et-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.et-carousel > .grid > .et-slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; z-index: 1; }
/* ลูกศรอยู่มุมขวาล่าง แถวเดียวกับจุด — ข้อความแบนเนอร์ชิดซ้าย ถ้าไว้กลางซ้ายจะทับตัวหนังสือ */
.et-slide-nav { position: absolute; bottom: .6rem; z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: grid; place-items: center; color: #fff; background: rgba(30,45,42,.35); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); transition: background .2s; }
.et-slide-nav:hover { background: rgba(30,45,42,.6); }
@media (max-width: 640px) { .et-slide-nav { display: none; } }   /* มือถือใช้ปัด + จุด */
.et-slide-dots { position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 2; display: flex; justify-content: center; gap: .5rem; pointer-events: none; }   /* แถบเต็มแถว ห้ามบังลูกศรมุมขวา */
.et-slide-dots button { pointer-events: auto; }
.et-slide-dots button { width: .6rem; height: .6rem; padding: 0; border-radius: 9999px; background: rgba(255,255,255,.45); border: 0; transition: width .3s, background .3s; }
.et-slide-dots button[aria-current="true"] { width: 1.75rem; background: #DCB696; }
.et-slide-dots button::after { content: ""; position: absolute; inset: -10px; }   /* พื้นที่กดใหญ่ขึ้นบนมือถือ */
.et-slide-dots button { position: relative; min-height: 0 !important; min-width: 0 !important; }   /* กฎกลางปุ่มมือถือ 44px ทำให้จุดกลายเป็นแท่ง — พื้นที่กดขยายด้วย ::after แทน */
@media (prefers-reduced-motion: reduce) { .et-carousel > .grid > .et-slide { transition: none; } }

/* ── รีวิวลูกค้า (shop-reviews.js · 19 ก.ย.) ── */
.et-spot { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.et-spot.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.et-spot-dot { width: .6rem; height: .6rem; min-height: 0 !important; min-width: 0 !important; padding: 0; border-radius: 9999px; background: rgb(var(--c-line) / .25); border: 0; position: relative; transition: width .3s, background .3s; }
.et-spot-dot::after { content: ""; position: absolute; inset: -10px; }
.et-spot-dot[aria-current="true"] { width: 1.75rem; background: #3A513E; }
.et-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.et-marquee-track { display: flex; gap: 1rem; width: max-content; animation: et-marq 60s linear infinite; }
.et-marquee-rev .et-marquee-track { animation-direction: reverse; animation-duration: 70s; }
.et-marquee:hover .et-marquee-track { animation-play-state: paused; }
@keyframes et-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.et-pill { display: flex; align-items: center; gap: .75rem; max-width: 30rem; padding: .85rem 1.25rem; border-radius: 9999px; border: 1px solid rgb(var(--c-gold) / .28); background: rgba(255,255,255,.04); color: #fff; }
.et-pill blockquote { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (prefers-reduced-motion: reduce) { .et-marquee { overflow-x: auto; } .et-marquee-track { animation: none; } }
.et-wall-card { break-inside: avoid; margin-bottom: 1.25rem; padding: 1.5rem; border-radius: 1rem; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / .10); box-shadow: var(--shadow-sm); }
.et-wall-card[hidden] { display: none; }
.et-chip { font-size: .8rem; padding: .35rem .9rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / .18); background: rgb(var(--c-card)); transition: .15s; }
.et-chip .num { opacity: .55; margin-left: .15rem; }
.et-chip.is-on { background: #3A513E; border-color: #3A513E; color: #fff; }

/* เมนูหน้าร้านบนมือถือ = ปุ่ม ☰ เปิดลิ้นชักจากซ้าย (ลูกค้าขอ 21 ก.ย. ให้เหมือนเว็บนาฬิกาเจ้าอื่น: ค้นหา · เมนู · ช่องทางติดต่อ)
   ❌ ของเดิมเป็นแถวเลื่อนแนวนอน (.et-navscroll) — เอาออกแล้ว */
.et-drawer { position: fixed; inset: 0; z-index: 70; display: none; }
.et-drawer.is-open { display: block; }
.et-drawer-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.et-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); background: #fff; color: rgb(var(--c-ink));
  display: flex; flex-direction: column; box-shadow: 0 10px 40px rgb(0 0 0 / .25); transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto; }
.et-drawer.is-open .et-drawer-panel { transform: none; }
.et-drawer-nav a { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; min-height: 48px; font-size: .95rem; border-bottom: 1px solid rgb(var(--c-line) / .08); color: rgb(var(--c-ink)); }
.et-drawer-nav a.on { color: rgb(var(--c-brown)); font-weight: 500; }
.et-drawer-contact a { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; min-height: 44px; font-size: .9rem; color: rgb(var(--c-ink)); }
.et-drawer-contact a[hidden] { display: none !important; }
/* แถบติดต่อบนสุดของหัวเว็บมือถือ — เบอร์โทร (กดโทร) · ทักไลน์ (ลูกค้า 23 ก.ย.) · จอคอมใช้เบอร์/ปุ่มในแถวเมนูแทน */
.et-mobcontact { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:0 1rem; height:40px;
  border-bottom:1px solid rgb(255 255 255 / .08); font-size:.85rem; }
.et-mobcontact a { display:inline-flex; align-items:center; gap:.4rem; min-height:40px; color:#E6EAE5; font-size:.85rem; }
.et-mobcontact a[data-line] { color: rgb(var(--c-gold)); font-weight:500; }
@media (min-width:768px) { .et-mobcontact { display:none !important; } }
/* ตัวเลขเบอร์บนหัวเว็บต้องเด่น — เดิมสีเทาจางบนพื้นเขียวเข้ม ลูกค้ามองว่า "เบอร์หาย" (23 ก.ย.) */
.et-shopnav a[data-phone] .num { color:#FFFFFF; font-weight:500; letter-spacing:.02em; }
.et-shopnav a[data-phone]:hover .num { color: rgb(var(--c-gold)); }
body.et-noscroll { overflow: hidden; }
.et-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: .6rem; color: #E6EAE5; }

/* ตัวกรองบนมือถือ = แผงเลื่อนขึ้นเต็มจอ (ปุ่ม "ตัวกรอง" เปิด · ปุ่มล่าง "ดู N เรือน" ปิด) · จอคอมยังเป็นแผงข้างเหมือนเดิม */
@media (max-width: 1023.98px) {
  #fwrap.et-fsheet { display: block; position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .45); }
  #fwrap.et-fsheet > aside { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 1.25rem 1.25rem 0 0; display: flex; flex-direction: column; overflow: hidden; }
  #fwrap.et-fsheet .et-fbody { overflow-y: auto; flex: 1; }
  #fwrap.et-fsheet .et-ffoot { display: flex; }
}
.et-ffoot { display: none; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--c-line) / .1); background: #fff; }

/* รีวิว: แบบเซลเพจ + หน้าตัวอย่างของทีมงาน (19 ก.ย.) */
.et-sample { display: inline-block; vertical-align: middle; font-size: .65rem; line-height: 1; padding: .2rem .45rem; border-radius: 9999px; background: #DCB696; color: #1E2D2A; font-weight: 500; letter-spacing: .02em; }
.et-layout-tag { max-width: 72rem; margin: 1.5rem auto .5rem; padding: .55rem .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; border: 1px dashed rgb(var(--c-brown) / .55); border-radius: .75rem; background: rgb(var(--c-gold) / .12); color: rgb(var(--c-ink)); }
.et-layout-tag span:last-child { color: rgb(var(--c-muted)); }
.et-layout-no { font-size: .7rem; padding: .15rem .5rem; border-radius: 9999px; background: #3A513E; color: #fff; }
@media (max-width: 1200px) { .et-layout-tag { margin-left: 1rem; margin-right: 1rem; } }
.et-chat { border-radius: 1.25rem; overflow: hidden; background: #E9EEF4; border: 1px solid rgb(var(--c-line) / .10); }
.et-chat-bar { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 1rem; color: #fff; font-size: .75rem; font-weight: 500; }
.et-bubble { position: relative; background: #fff; border-radius: 1.1rem; border-bottom-left-radius: .3rem; padding: .7rem .95rem; font-size: .95rem; line-height: 1.55; box-shadow: 0 1px 1px rgba(0,0,0,.05); max-width: 100%; overflow-wrap: anywhere; }

/* แกลเลอรีรีวิว (masonry) + ดูรูปใหญ่ */
.et-gal { break-inside: avoid; margin-bottom: .75rem; }
@media (min-width: 640px) { .et-gal { margin-bottom: 1rem; } }
.et-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20, 30, 28, .92); overflow-y: auto; padding: 3.5rem 1rem 2rem; }
.et-lightbox-in { max-width: 64rem; margin: 0 auto; }
.et-lightbox-x { position: fixed; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border-radius: 9999px; color: #fff; background: rgba(255,255,255,.12); font-size: 1.1rem; }
.et-layout-tag.is-off { border-style: solid; background: rgb(var(--c-line) / .06); opacity: .85; }
/* สวิตช์เปิด/ปิด (หน้าจัดการรีวิว) — แตะง่ายบนมือถือ 44px */
.et-switch { position: relative; display: inline-flex; align-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; cursor: pointer; }
.et-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.et-switch span { pointer-events: none; width: 2.6rem; height: 1.5rem; border-radius: 9999px; background: rgb(var(--c-line) / .25); position: relative; transition: background .2s; }
.et-switch span::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.et-switch input:checked + span { background: #3A513E; }
.et-switch input:checked + span::after { transform: translateX(1.1rem); }
.et-switch input:focus-visible + span { outline: 2px solid #DCB696; outline-offset: 2px; }
.et-switch input:disabled + span { opacity: .5; }