/* Printpao — storefront.css · หน้าร้านธีมใหม่ (EPIC-025 · มติเจ้าของ 2026-10-01)
 *
 * ★ โหลดเฉพาะ layouts/app (หน้าร้าน) ต่อจาก theme.css — ทับสี + หน้าตาใหม่
 *   theme.css ไม่แตะ เพราะหน้า login / หลังบ้านเดิมใช้ร่วม (หลังบ้านคงม่วง #652F80)
 * ★ ทับตัวแปรสีเดิม (--purple / --yellow ฯลฯ) ด้วยชุดสีใหม่ → หน้าสินค้า/ชำระเงินได้สีใหม่ตามไปเอง
 * ★ คลาสใหม่ขึ้นต้น sf- ทั้งหมด กันชนของเดิมใน theme.css / product.css
 */

/* ฟอนต์ Anuphan (SIL OFL) self-host — ไฟล์อยู่ public/fonts/ (theme.css ปิดไว้เพราะชี้ path ผิด) */
@font-face {
  font-family: "Anuphan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/anuphan-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Anuphan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/anuphan-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anuphan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/anuphan-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ชุดสีจากแบบ */
  --sf-lime:      #D4FF1A;
  --sf-lime-dk:   #B5DE00;
  --sf-pink:      #FF2E93;
  --sf-pink-dk:   #E0127A;   /* ตัวหนังสือ/ปุ่มบนพื้นขาว — เข้มพอให้อ่านง่าย (contrast ≥ 4.5) */
  --sf-violet:    #5B18F2;
  --sf-violet-dk: #4310C4;
  --sf-ink:       #14101F;
  --sf-mist:      #EEF2F7;   /* พื้นแถบ FAQ */

  /* ทับตัวแปรของ theme.css → ทุกหน้าในหน้าร้านเปลี่ยนสีตาม */
  --purple:    var(--sf-violet);
  --purple-dk: var(--sf-violet-dk);
  --purple-lt: #F1ECFF;
  --purple-br: #DCD0FF;
  /* โทนพื้นของหัวข้อแนะนำ (Topic::TONES) — การ์ดหน้าแรก (home.css) และตัวเลือก quiz (quiz.css) ใช้ชุดเดียวกัน */
  --tone-violet: var(--purple-lt);
  --tone-lime:   #F3FFC9;
  --tone-pink:   #FFE4F1;
  --tone-sky:    #E2EEFF;
  --yellow:    var(--sf-lime);
  --yellow-dk: var(--sf-lime-dk);
  --ink:       var(--sf-ink);
  /* ★ 2026-10-03 (เจ้าของ: "สีให้ตรงธีมเว็บปัจจุบัน ไม่อ้างอิงเว็บเดิม") — เทา/เส้น/เงา เดิมยังมาจาก theme.css
     (เทาอมม่วงพลัมของธีมเก่า #5C5266 · #8A8092 · เงา rgba(36,27,43)) → ไล่จาก --sf-ink (#14101F) ของธีมใหม่แทน */
  --ink-soft:  #4A4658;
  --ink-mute:  #7C7889;
  --line:      #E4E2EB;
  --surface-2: #F7F6FA;
  --shadow:    0 1px 2px rgba(20,16,31,.06), 0 8px 24px rgba(20,16,31,.06);
  --shadow-lg: 0 2px 4px rgba(20,16,31,.08), 0 16px 40px rgba(20,16,31,.12);

  --sf-head-h: 72px;   /* 2026-10-27 (มติเจ้าของ แบบ ข) — PC 72 ให้โลโก้ 56 ชัดขึ้น ยังเว้นบนล่าง 8px · มือถือคง 64 (ด้านล่าง) · เดิม 64 (2026-10-10) / 84 */
}
@media (max-width: 640px) { :root { --sf-head-h: 64px; } }

body { background: #fff; }

/* ═══════════ แถบประกาศบนสุด (โหมดทดสอบ · อนาคต = โปรโมชั่น) — 2026-10-26 เจ้าของ ═══════════
   ทับ .testbar เดิมใน theme.css (เหลืองซีด) · ข้อความวิ่งขวา→ซ้าย วนไม่สะดุด (track = ชุดข้อความซ้ำ 6 รอบ เลื่อนครึ่งหนึ่ง)
   ข้อความแต่ละรายการ = <p> แยกกัน คั่นด้วยประกายดาว (::after) — รายการมาจาก $barMessages ใน layouts/app
   ชี้/โฟกัส = หยุด (WCAG 2.2.2 ของที่ขยับเกิน 5 วิต้องหยุดได้) · ลดการเคลื่อนไหว = ข้อความนิ่งชุดเดียวตรงกลาง */
.testbar {
  display: flex; align-items: center; gap: 12px; padding: 4px 16px; overflow: hidden;   /* บาง ~30px (เจ้าของ 2026-10-26) */
  background: var(--sf-lime); color: var(--sf-ink); border: 0; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left;
}
.testbar-run {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);   /* ขอบซ้าย-ขวาจาง ข้อความไม่โผล่/หายแบบตัดแข็ง */
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.testbar-track { display: flex; width: max-content; animation: sf-testbar-run 60s linear infinite; }   /* 60s = ค่าสำรองตอน JS ยังไม่โหลด · storefront.js คิดใหม่จากความเร็วที่ตั้ง */
.testbar-set { display: flex; flex: none; }
.testbar-msg { display: flex; align-items: center; flex: none; margin: 0; white-space: nowrap; }
.testbar-msg::after {   /* ตัวคั่นระหว่างข้อความ = ประกายดาว 4 แฉก สีหมึก */
  content: ""; flex: none; width: 10px; height: 10px; margin-inline: var(--bar-gap, 28px);   /* ระยะห่าง = ค่าจากหลังบ้าน */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.testbar:hover .testbar-track, .testbar:focus-within .testbar-track { animation-play-state: paused; }
@keyframes sf-testbar-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* ขวา → ซ้าย (หัวประโยคโผล่ก่อน อ่านตามได้ — เจ้าของเลือก 2026-10-26) */
@media (prefers-reduced-motion: reduce) {
  .testbar { justify-content: center; }
  .testbar-run { flex: 0 1 auto; -webkit-mask-image: none; mask-image: none; }
  .testbar-track { animation: none; width: auto; }
  .testbar-set { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  .testbar-set + .testbar-set { display: none; }
  .testbar-msg { white-space: normal; }
  .testbar-msg:last-child::after { display: none; }
}
@media (max-width: 640px) { .testbar { gap: 8px; padding-inline: 12px; font-size: 12.5px; } }

/* ★ 2026-10-03 (มติเจ้าของ) — ปุ่มชมพูของธีม (ปุ่ม "เตรียมไฟล์เลย" หน้าสินค้า) · พื้น --sf-pink-dk ไม่ใช่ --sf-pink
   เพราะตัวหนังสือขาวบนชมพูสว่างอ่านยาก (contrast ต่ำ) — เข้มพอแล้วตามที่ระบุไว้ใน :root */
.btn-pink { background: var(--sf-pink-dk); color: #fff; }
.btn-pink:hover { background: #C20E69; }

/* หัวข้อตัวหนาเอียงแบบในแบบ (Anuphan ไม่มีตัวเอียงจริง เบราว์เซอร์เอียงให้) */
.sf-display { font-weight: 700; font-style: italic; letter-spacing: -.01em; line-height: 1.15; }

/* ให้ bot / โปรแกรมอ่านหน้าจออ่านได้ แต่ไม่โชว์บนจอ */
.sf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* โลโก้ (รูป) — ★ 2026-10-27 ใช้ logo.svg (ไฟล์จากคนออกแบบ · ครอป viewBox ชิดตัวโลโก้ · ห้ามแก้แบบ)
   ความสูงที่ตั้ง = ขนาดโลโก้ที่เห็นจริง (ไม่มีขอบใส) · ใช้ขนาดเดียวกันในแถบขั้นตอน (.osteps-logo ใน product.css) */
.sf-logo { display: inline-flex; flex: none; line-height: 0; }
.sf-logo img { height: 56px; width: auto; }   /* หัวเว็บ PC สูง 72 → เว้นบนล่างข้างละ 8px (เจ้าของขอให้ไม่ชิดขอบ 2026-10-10) · 2026-10-27 จาก 48 — จอ PC ตัวอักษรเล็กไม่ชัด */
@media (max-width: 640px) { .sf-logo img { height: 40px; } }

/* ═══════════ Header ═══════════ */
.sf-head { position: sticky; top: 0; z-index: 800; background: #fff; box-shadow: 0 1px 0 rgba(20,16,31,.07); }
.sf-head .wrap { display: flex; align-items: center; gap: 20px; min-height: var(--sf-head-h); }
.sf-nav { display: flex; align-items: center; gap: 6px; margin-inline: auto; }
.sf-nav > a, .sf-nav-drop > button, .sf-nav > span {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 600; color: var(--sf-ink);
  text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.sf-nav > a::after, .sf-nav-drop > button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 3px;
  background: var(--sf-pink); transform: scaleX(0); transition: transform .2s ease;
}
.sf-nav > a:hover::after, .sf-nav > a.on::after, .sf-nav-drop:hover > button::after, .sf-nav-drop.open > button::after { transform: scaleX(1); }
.sf-nav > a.on { color: var(--sf-pink-dk); }
.sf-nav > span { color: #9A94A6; cursor: default; }
/* ป้าย "เร็วๆ นี้" — ใช้ทุกที่ที่ฟีเจอร์ยังไม่เปิด (เมนูบทความ · โค้ดส่วนลด · Google Login · ตะกร้าหลายรายการ) ต้องใช้คลาสนี้ตัวเดียว ห้ามทำป้ายใหม่
   inline-block + line-height คงที่ = ความสูงเท่ากันทุกที่ ไม่ขึ้นกับ line-height ของที่ที่วาง */
.sf-soon { display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 17px; vertical-align: middle; color: var(--sf-ink); background: var(--sf-lime); border-radius: 999px; padding: 1px 7px; }
.sf-caret { width: 14px; height: 14px; transition: transform .2s; }
.sf-nav-drop { position: relative; }
.sf-nav-drop.open .sf-caret, .sf-nav-drop:hover .sf-caret { transform: rotate(180deg); }

/* dropdown หมวดหมู่ — ชี้ (เดสก์ท็อป) หรือกด (มือถือ) */
.sf-drop-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 520px;
  display: none; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; padding: 18px 20px;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(20,16,31,.28);
}
.sf-nav-drop:hover .sf-drop-panel, .sf-nav-drop.open .sf-drop-panel, .sf-nav-drop:focus-within .sf-drop-panel { display: grid; }
.sf-drop-panel h6 { margin: 6px 0 2px; font-size: 12.5px; color: var(--sf-violet); letter-spacing: .02em; }
.sf-drop-panel h6 a { display: inline; padding: 0; color: inherit; }
.sf-drop-panel a { display: block; padding: 4px 0; color: var(--sf-ink); text-decoration: none; font-size: 14.5px; }
.sf-drop-panel a:hover { color: var(--sf-pink-dk); }

.sf-head-tools { display: flex; align-items: center; gap: 6px; }
.sf-icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: var(--sf-ink); cursor: pointer; }
.sf-icon-btn:hover { background: var(--purple-lt); }
.sf-icon-btn svg { width: 22px; height: 22px; }
.sf-burger { display: none; }

/* ค้นหาสินค้า (กรองรายชื่อสินค้าในเครื่อง — หน้าผลค้นหาจริงมาใน TASK-194) */
.sf-search { position: relative; }
.sf-search-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, 90vw); padding: 12px;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(20,16,31,.28);
}
.sf-search-pop input { width: 100%; padding: 11px 14px; font: inherit; border: 2px solid var(--purple-br); border-radius: 999px; outline: none; }
.sf-search-pop input:focus { border-color: var(--sf-violet); }
.sf-search-pop ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 300px; overflow: auto; }
.sf-search-pop li a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--sf-ink); text-decoration: none; }
.sf-search-pop li a:hover { background: var(--purple-lt); }
.sf-search-pop li small { color: var(--ink-mute); margin-left: 6px; }
.sf-search-empty { padding: 8px 12px; color: var(--ink-mute); font-size: 14px; }

/* แผงที่เด้งจากหัวเว็บบนมือถือ (ค้นหา · เมนูบัญชี auth.css) — 2026-10-24 เจ้าของ: "dropdown ในโทรศัพท์บัค"
   ★ ต้นเหตุ: แผงยึดขอบขวาของปุ่มตัวเอง (right:0) แต่ปุ่มไม่ได้อยู่ชิดขวาจอ (ยังมีตะกร้า/เมนูต่อ) → แผงล้นจอทางซ้าย
   ★ จอแคบ: ยึดกับหัวเว็บทั้งแถบแทน กางเต็มความกว้างเว้นข้างละ 12px · selector มี .sf-head เพื่อชนะกฎของ auth.css ที่โหลดทีหลัง */
@media (max-width: 640px) {
  .sf-head .wrap { position: relative; }
  .sf-head .sf-search, .sf-head .sf-account { position: static; }
  .sf-head .sf-search-pop, .sf-head .sf-account-pop {
    top: calc(100% - 4px); left: 12px; right: 12px; width: auto; min-width: 0; max-width: none;
  }
  .sf-search-pop ul { max-height: min(300px, 50dvh); }
}

@media (max-width: 1080px) {
  .sf-burger { display: inline-grid; }
  .sf-nav {
    position: fixed; inset: var(--sf-head-h) 0 auto 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 20px; background: #fff; box-shadow: 0 18px 30px -18px rgba(20,16,31,.35);
    max-height: calc(100dvh - var(--sf-head-h)); overflow: auto; display: none;
  }
  body.nav-open .sf-nav { display: flex; }
  .sf-nav > a, .sf-nav-drop > button, .sf-nav > span { width: 100%; padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .sf-nav > a::after, .sf-nav-drop > button::after { display: none; }
  .sf-nav-drop:hover .sf-drop-panel { display: none; }
  .sf-nav-drop.open .sf-drop-panel { display: grid; }
  .sf-drop-panel { position: static; transform: none; min-width: 0; grid-template-columns: 1fr; box-shadow: none; padding: 4px 8px 10px; }
  .sf-head-tools { margin-left: auto; }
}

/* แบนเนอร์ใหญ่ + section ของหน้าแรก (จอแรก · แถบ 4 ขั้นตอน · แบนเนอร์ชวนเริ่ม) ย้ายไป home.css — 2026-10-24 */

/* ═══════════ หัวข้อ section ═══════════ */
/* theme.css ใส่ padding 56px ให้ทุก <section> — section ของหน้าร้านใหม่คุมระยะเอง */
.sf-slider, .sf-cat-banner, .sf-cat-circles, .sf-listing { padding-block: 0; }
.sf-sec { padding-block: 64px; }
.sf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.sf-sec-head h2 { margin: 0; font-size: clamp(30px, 4.6vw, 52px); }
.sf-sec-head h2 span { display: block; color: var(--sf-pink); }
/* ป้ายหัว section (เช่น "สินค้าแนะนำ") — 2026-10-26 แบบจากเจ้าของ: แถบปากกาเขียวมะนาวขอบหยักแบบปัดแปรง + ชั้นเขียวเข้มยื่นขวาล่างเป็นเงา
   ตัวหนังสือ = HTML (ฟอนต์เดิม) · พื้น = SVG ในตัว ยืดตามความยาวข้อความ (preserveAspectRatio none) ไม่โหลดไฟล์ */
.sf-sticker {
  display: inline-block; margin-bottom: 14px; padding: 9px 30px 13px 24px; transform: rotate(-3deg);
  color: var(--sf-ink); font-weight: 700; font-size: 17px; line-height: 1.2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 48' preserveAspectRatio='none'%3E%3Cpath fill='%2396C200' d='M9 26 13 18 19 20 25 15 64 13 108 9 117 10 118 40 108 43 64 44 27 46 17 47 14 43 9 45 12 38 7 35Z'/%3E%3Cpath fill='%23D4FF1A' d='M3 21 8 12 14 14 20 9 60 7 104 3 112 4 113 34 104 37 60 39 22 41 12 43 9 38 4 40 7 32 2 29Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.sf-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  background: var(--sf-violet); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; border: 0; cursor: pointer;
}
.sf-pill:hover { background: var(--sf-violet-dk); }
.sf-pill svg { width: 18px; height: 18px; }
.sf-pill-pink { background: var(--sf-pink-dk); }
.sf-pill-pink:hover { background: #C20067; }
.sf-pill-lime { background: var(--sf-lime); color: var(--sf-ink); }
.sf-pill-lime:hover { background: var(--sf-lime-dk); }

/* ═══════════ แถวเลื่อนแนวนอน (สินค้าแนะนำ / วิดีโอ) — CSS scroll-snap ล้วน ไม่ใช้ library ═══════════ */
/* ลูกศรอยู่นอกการ์ดเสมอ (เจ้าของ 2026-10-03: "อย่าให้ปุ่มทับสินค้า") — แถวเว้นที่ซ้าย-ขวาให้ปุ่ม · จอสัมผัสไม่มีปุ่ม ไม่ต้องเว้น */
.sf-rail-wrap { position: relative; padding-inline: 58px; }
.sf-rail {
  display: grid; grid-auto-flow: column; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 2px 34px;   /* overflow-x:auto ตัดแนวตั้งด้วย — เผื่อที่ให้เงาตอนชี้การ์ด (ทอดลงล่างราว 30px) ไม่ให้ขาด */
}
.sf-rail::-webkit-scrollbar { display: none; }
.sf-rail > * { scroll-snap-align: start; }
.sf-rail-btn {
  position: absolute; top: 45%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: #fff; color: var(--sf-ink); box-shadow: 0 6px 18px rgba(20,16,31,.22); cursor: pointer;
}
.sf-rail-btn:hover { background: var(--sf-lime); }
.sf-rail-btn[disabled] { opacity: 0; pointer-events: none; }
.sf-rail-btn svg { width: 22px; height: 22px; }
.sf-rail-prev { left: 0; }
.sf-rail-next { right: 0; }
@media (hover: none) { .sf-rail-btn { display: none; } .sf-rail-wrap { padding-inline: 0; } }

/* การ์ดสินค้าแนะนำ — ตามแบบ (มติเจ้าของ 2026-10-02): รูป 1:1 ด้านบน + กล่องชื่อขาวด้านล่าง "ไม่ทับรูป"
   พื้นการ์ด --card-bg = สีขอบล่างของรูป (ดูดอัตโนมัติ · products.card_bg_color) → รูปกับพื้นการ์ดกลืนเป็นชิ้นเดียว
   ขอบการ์ด = สีเดียวกันแต่อ่อนลง (กรอบสีพาสเทลแบบในแบบ) */
/* หน้าแรก: ตารางเลื่อนลง แทนแถวเลื่อนข้าง (2026-10-24 เจ้าของ: "สินค้ายังน้อย") · ช่องไฟมือถือเท่า .sf-grid หน้าสินค้าทั้งหมด */
.sf-pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 14px; }
@media (max-width: 1080px) { .sf-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sf-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
/* การ์ดสินค้าในตาราง 2 คอลัมน์บนมือถือ (หน้าแรก + หน้าสินค้าทั้งหมด) — กล่องชื่อเหลือ ~110px ที่จอ 320
   ลูกศรวงกลมกินที่จนชื่อหักทีละคำ ("สติ๊ก/เกอร์/สูญ/ญา/กาศ") → ซ่อนลูกศร (ทั้งการ์ดกดได้อยู่แล้ว) + กล่องชื่อแคบลง (2026-10-24) */
@media (max-width: 640px) {
  .sf-pcard-label { margin: auto 6px 0; min-height: 0; padding: 8px 10px; }
  .sf-pcard-label h3 { font-size: 14px; }
  .sf-pcard-label .sf-arrow { display: none; }
}
.sf-pcard {
  --card-bg: #F1EEF6;
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 0 0 10px; border-radius: 18px; overflow: hidden;
  background: var(--card-bg); border: 3px solid color-mix(in oklab, var(--card-bg) 55%, #fff);
  color: var(--sf-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 1px rgba(20,16,31,.06);   /* รูปพื้นขาว → การ์ดสีขาว ยังเห็นขอบการ์ด */
}
.sf-pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(20,16,31,.35); }
.sf-pcard-img { display: block; position: relative; aspect-ratio: 1; }   /* relative = วิดีโอ hover ซ้อนทับรูปได้ */
/* ★ ขอบล่างรูปจางกลืนเป็นสีพื้นการ์ด (มติเจ้าของ 2026-10-03 · Gradient Mask) — เดิมรูปต่อกับพื้นการ์ดเป็นเส้นตัดแข็ง
   เพราะสีพื้นที่ดูดมาเป็นค่าเฉลี่ยขอบล่าง ไม่ตรงทุกพิกเซล · mask ครอบทั้งรูปนิ่งและวิดีโอตอนชี้
   ★ จางแค่ 16px ล่างสุด — เคยใส่ 25% แล้วข้อความในรูปช่วงล่างหายไปด้วย (เจ้าของ: "รูปถูกแดกเข้าไป") */
.sf-pcard-img {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.sf-pcard-img img, .sf-pcard-img video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* วิดีโอแบบชี้แล้วเล่น (x-sf-video hover · TASK-203) — ซ้อนทับรูปนิ่ง จางไว้ก่อน · .is-playing = fade ขึ้นมา
   ★ ความเร็ว .35s ต้องเท่ากับ FADE_MS ใน public/js/sf-video.js (หยุดวิดีโอหลัง fade จบ) */
.sf-hover-video { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.sf-hover-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sf-hover-video { display: none; } }
.sf-picture, .sf-picture picture, .sf-picture img { display: block; width: 100%; height: auto; }
.sf-pcard-label {
  margin: auto 10px 0; min-height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px;
  background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(20,16,31,.08);
}
.sf-pcard-label h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sf-pcard-label small { display: block; color: var(--ink-mute); font-size: 12px; font-weight: 500; }
.sf-pcard-label small b { color: var(--sf-pink); font-size: 14px; font-weight: 700; }   /* ตัวเลขราคาชมพู — แก้ที่นี่ที่เดียว */
/* ราคา 2 แถวบนการ์ด (components/sf-card-price) — ใช้ร่วมกันทั้งหน้าแรกและหน้ารายการ */
.sf-cprice-main, .sf-cprice-sub { display: block; }
.sf-cprice-main em { font-style: normal; font-size: 12px; color: var(--ink-mute); }
.sf-cprice-sub { margin-top: 2px; font-size: 12px; color: var(--ink-mute); }
.sf-arrow { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sf-pink); color: #fff; }
.sf-arrow svg { width: 18px; height: 18px; }

/* ═══════════ วิดีโอ (การ์ดแนวตั้ง 9:16) ═══════════ */
.sf-rail-videos { grid-auto-columns: calc((100% - 14px * 4) / 4.4); }
@media (max-width: 1080px) { .sf-rail-videos { grid-auto-columns: 40%; } }
@media (max-width: 640px)  { .sf-rail-videos { grid-auto-columns: 64%; } }
.sf-vcard {
  position: relative; display: block; aspect-ratio: 9 / 14; border-radius: 18px; overflow: hidden; border: 0; padding: 0;
  background: linear-gradient(160deg, var(--sf-violet), var(--sf-pink)); color: #fff; cursor: pointer; text-align: left; font: inherit;
}
.sf-vcard:nth-child(3n+2) { background: linear-gradient(160deg, var(--sf-pink), #FFB000); }
.sf-vcard:nth-child(3n)   { background: linear-gradient(160deg, #1BB37A, var(--sf-lime)); }
.sf-vcard img, .sf-vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-vcard-play { position: absolute; inset: 0; display: grid; place-items: center; }
.sf-vcard-play svg { width: 58px; height: 58px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.sf-vcard-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; font-weight: 700; font-size: 15px; background: linear-gradient(transparent, rgba(0,0,0,.6)); }

/* ═══════════ FAQ ═══════════ */
.sf-faq { position: relative; background: var(--sf-mist); padding-block: 70px 60px; margin-top: 40px; }
.sf-faq::before {   /* ขอบบนเป็นคลื่น */
  content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 30px; background: var(--sf-mist);
  -webkit-mask: radial-gradient(40px 30px at 40px 30px, #000 99%, transparent) 0 0 / 80px 30px repeat-x;
          mask: radial-gradient(40px 30px at 40px 30px, #000 99%, transparent) 0 0 / 80px 30px repeat-x;
}
.sf-faq .wrap { display: grid; grid-template-columns: 250px 1fr 200px; gap: 28px; align-items: center; }
.sf-faq h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); color: var(--sf-pink-dk); transform: rotate(-6deg); }
.sf-faq h2 { white-space: nowrap; }
.sf-faq h2 span { display: block; color: var(--sf-violet); }
.sf-faq-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; align-items: start; }
.sf-faq details { background: #fff; border-radius: 999px; box-shadow: 0 2px 6px rgba(20,16,31,.06); transition: border-radius .2s; }
.sf-faq details[open] { border-radius: 18px; }
.sf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--sf-ink); transition: transform .2s; }
.sf-faq details[open] summary::after { transform: rotate(45deg); }
.sf-faq details p { margin: 0; padding: 0 18px 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.sf-faq-ask {
  display: grid; place-items: center; gap: 10px; aspect-ratio: 1.3; padding: 18px; text-align: center; color: #fff; text-decoration: none;
  background: var(--sf-violet); border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; transform: rotate(-6deg);
  box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--sf-violet);
}
.sf-faq-ask b { font-size: 17px; font-style: italic; }
.sf-faq-ask span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--sf-ink); font-size: 13px; font-weight: 700; }
.sf-faq-ask svg { width: 14px; height: 14px; }
@media (max-width: 980px) {
  .sf-faq .wrap { grid-template-columns: 1fr; }
  .sf-faq h2 { transform: none; text-align: center; }
  .sf-faq-ask { max-width: 220px; margin-inline: auto; }
}
@media (max-width: 640px) { .sf-faq-list { grid-template-columns: 1fr; } }

/* ═══════════ Footer ═══════════ */
.sf-foot { background: #0B0A10; color: rgba(255,255,255,.82); padding-block: 48px 22px; font-size: 14.5px; }
.sf-foot a { color: rgba(255,255,255,.82); text-decoration: none; }
.sf-foot a:hover { color: var(--sf-lime); }
.sf-foot-top { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 40px; }
.sf-foot-logo img { height: 88px; }
.sf-foot h5 { margin: 0 0 12px; font-size: 16px; color: #fff; }
.sf-foot p { margin: 0 0 10px; line-height: 1.75; }
.sf-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-foot li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.sf-foot li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: currentColor; opacity: .75; }
.sf-iso { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 13px; font-weight: 600; }
.sf-iso img { width: 20px; height: 20px; }
.sf-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sf-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); }
.sf-social a:hover { background: var(--sf-lime); color: var(--sf-ink); }
.sf-social svg { width: 19px; height: 19px; }
.sf-foot-btm { margin-top: 32px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; font-size: 13px; color: rgba(255,255,255,.6); }
.sf-foot-btm p { margin: 0; padding-top: 4px; }
/* ลิงก์นโยบาย/เงื่อนไข — แถวของตัวเอง เหนือ Copyright · พื้นที่กดสูง ≥ 44px บนมือถือ · ขีดเส้นใต้ตอน hover/โฟกัสเพื่อให้รู้ว่ากดได้ */
.sf-foot-legal { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 28px; }
.sf-foot-legal a { display: inline-flex; align-items: center; min-height: 44px; font: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.sf-foot-legal a:hover, .sf-foot-legal a:focus-visible { text-decoration-color: currentColor; }
@media (max-width: 860px) { .sf-foot-top { grid-template-columns: 1fr; gap: 26px; } }

/* ═══════════ ปุ่มลอย "สอบถามเพิ่มเติม" (LINE) ═══════════ */
.sf-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 8px;
  /* 2026-10-02 (เจ้าของ) — ชมพู → เขียวมะนาวตามธีม · พื้นสว่าง = ตัวหนังสือดำ
     2026-10-06 (เจ้าของ) — เหลือแค่ไอคอน → วงกลมจริง (กว้าง = สูง) */
  justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sf-lime); color: var(--sf-ink);
  text-decoration: none; box-shadow: 0 10px 24px -6px rgba(20,16,31,.35); transition: transform .15s ease;
}
.sf-fab:hover { transform: translateY(-2px); background: var(--sf-lime-dk); }
.sf-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* ═══════════ ตัวโหลดกลางจอ (2026-10-05 · มติเจ้าของ) — JS: public/js/loading.js · markup: layouts/app.blade.php ═══════════
   บังทั้งจอ (กันกดซ้ำ/กดอย่างอื่นระหว่างรอ) · z-index สูงกว่า header(800) · ปุ่ม LINE(900) · แผ่นกรอง(950) · ป๊อปอัป(1000)
   ช่องสื่อ .pp-loading-media = รูปโลโก้ตอนนี้ → เปลี่ยนเป็น <video> ได้โดยใช้คลาสเดิม */
.pp-loading { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: pp-loading-in .2s ease-out; }
.pp-loading[hidden], .pp-loading [hidden] { display: none; }
html.pp-loading-on { overflow: hidden; }
.pp-loading-box { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 340px; }
.pp-loading-media { display: block; width: 122px; height: 88px; object-fit: contain;   /* logo.svg ครอปชิด — ขนาดที่เห็นเท่าไฟล์จัตุรัสเดิม 140px */ transform-origin: 50% 100%;
  animation: pp-loading-bounce 1.1s cubic-bezier(.34,1.56,.64,1) infinite; }
/* ข้อความไม่โชว์ (มติเจ้าของ 2026-10-05 — เอาแค่โลโก้) แต่คงไว้ให้โปรแกรมอ่านหน้าจอ (role=status ใน markup) */
.pp-loading-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-loading-bar { width: 220px; height: 8px; border-radius: 999px; background: rgba(20,16,31,.1); overflow: hidden; }
.pp-loading-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sf-pink-dk); transition: width .2s ease; }
.pp-loading-slow { margin: 0; font-size: 14px; color: var(--sf-ink-soft, #5b5266); line-height: 1.6; }
/* ปุ่มปิด = กากบาทเทามุมขวาบนของจอ (อยู่ใน .pp-loading-slow เลยโผล่พร้อมข้อความ "ใช้เวลานานกว่าปกติ" · .pp-loading เป็น fixed จึงเป็นกรอบอ้างอิงของ absolute) */
.pp-loading-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: #9b95a6; cursor: pointer; transition: background .15s, color .15s; }
.pp-loading-x:hover { background: rgba(20,16,31,.07); color: #5b5266; }
.pp-loading-x svg { width: 20px; height: 20px; }
@keyframes pp-loading-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-loading-bounce {
  0%, 100% { transform: translateY(0) scale(1.04, .94); }
  45% { transform: translateY(-18px) scale(.97, 1.04); }
  70% { transform: translateY(0) scale(1.03, .96); }
}
@media (prefers-reduced-motion: reduce) { .pp-loading, .pp-loading-media { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .sf-pcard, .sf-fab, .sf-nav > a::after { transition: none; }
  .sf-rail { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   หน้าสินค้าทั้งหมด /products — TASK-194a (บนแบบ eBay · ตัวกรองแบบ Nike)
   ═══════════════════════════════════════════════════════════════════════ */

/* แบนเนอร์สไลด์ (components/sf-slider — หน้าแรก + หน้าสินค้าทั้งหมด) — scroll-snap + ปุ่ม/จุด (public/js/sf-slider.js)
   สัดส่วนกรอบ = --ratio / --ratio-m จาก component (หน้าสินค้าทั้งหมด 4:1 · หน้าแรก 16:7) */
.sf-slider { position: relative; }
.sf-cat-banner { position: relative; margin-top: 20px; }
.sf-slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-cat-banner .sf-slides { border-radius: 22px; }
.sf-slides::-webkit-scrollbar { display: none; }
.sf-slides > * { min-width: 0; }
.sf-slide {
  position: relative; scroll-snap-align: start; aspect-ratio: var(--ratio, 4 / 1); min-height: 200px;
  display: flex; align-items: center; padding: 24px clamp(24px, 6vw, 80px); overflow: hidden;
}
.sf-slide img, .sf-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* วิดีโอเต็มกรอบเหมือนรูป (TASK-204) */
/* สไลด์รูปจริง/GIF: กรอบสัดส่วนตายตัว (--ratio จาก component) = ขนาดที่บอกในหลังบ้านเป๊ะ (มติเจ้าของ 2026-10-02 ให้กราฟิกออกแบบตาม)
   ไฟล์ตามขนาดที่บอก = แสดงครบพอดีทุกจอ · ไฟล์ไม่ตรงสัดส่วน = ตัดขอบให้เต็มกรอบ · มือถือใช้กรอบรูปมือถือเมื่อทุกสไลด์มีรูปมือถือ */
.sf-slide-img { padding: 0; min-height: 0; }   /* min-height 200px ของสไลด์ข้อความ ทำให้จอแคบสูงเกินสัดส่วน → รูปโดนตัด */
/* หน้าแรก: กรอบ 3:1 ตายตัว (1920×640) — ไฟล์ขนาดตามที่บอกในหลังบ้าน = แสดงพอดีไม่ตัดขอบทุกจอ */
.sf-slide-img .sf-picture { position: absolute; inset: 0; max-width: none; }   /* ไม่มีลิงก์ = <div> → โดน .sf-slide > div (560px) บีบรูปเหลือครึ่งแบนเนอร์ */
.sf-slide-img .sf-picture picture, .sf-slide-img .sf-picture img { height: 100%; }
.sf-slide > div { position: relative; max-width: 560px; }
.sf-slide p { margin: 0; font-size: 16px; }
.sf-slide-title { font-size: clamp(24px, 3.2vw, 40px) !important; margin-bottom: 8px !important; }
.sf-slide-violet { background: var(--sf-violet); color: #fff; }
.sf-slide-violet .sf-slide-title { color: var(--sf-lime); }
.sf-slide-pink { background: var(--sf-pink); color: #fff; }
.sf-slide-lime { background: var(--sf-lime); color: var(--sf-ink); }
.sf-slide-lime .sf-slide-title { color: var(--sf-violet); }
.sf-slide-note { position: absolute; right: 18px; bottom: 14px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--sf-ink); }
/* ลูกศร: ไม่บังรูป (เจ้าของ 2026-10-02) — ซ่อนไว้ ขึ้นตอนชี้/โฟกัส · เล็ก โปร่ง ชิดขอบ · จอสัมผัสไม่มี (ปัดเอา) */
.sf-slider .sf-rail-btn { top: 50%; transform: translateY(-50%); width: 38px; height: 38px; opacity: 0; background: rgba(255,255,255,.75); transition: opacity .2s; }
.sf-slider:hover .sf-rail-btn, .sf-slider .sf-rail-btn:focus-visible { opacity: 1; }
.sf-slider .sf-rail-btn:hover { background: var(--sf-lime); }
@media (hover: none) { .sf-slider .sf-rail-btn { display: none; } }
.sf-slider .sf-rail-prev { left: 12px; }
.sf-slider .sf-rail-next { right: 12px; }
.sf-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.sf-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 1px rgba(20,16,31,.2); cursor: pointer; transition: width .2s; }
.sf-dots button.on { width: 24px; background: #fff; }
@media (max-width: 720px) {
  .sf-slide { aspect-ratio: var(--ratio-m, 16 / 9); padding: 20px 22px 34px; }
  .sf-slide-img { padding: 0; }
  .sf-slide-note, .sf-slider .sf-rail-btn { display: none; }   /* มือถือปัดด้วยนิ้ว ลูกศรทับตัวหนังสือ */
  .sf-slide p { font-size: 14px; }
}

/* หมวดวงกลม */
/* วงกลมหมวด .sf-cat (partials/category-circle) — หน้าสินค้าทั้งหมด (.sf-cat-circles) + หน้าแรก (.sf-rail-cats ใน home.css) */
.sf-cat-circles { margin-top: 36px; }
.sf-cat-circles-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sf-cat-circles h2 { margin: 0; font-size: 22px; }
.sf-cat-circles-head a { font-weight: 600; color: var(--sf-violet); }
.sf-cat-circles ul { list-style: none; margin: 0; padding: 4px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 120px; gap: 16px; overflow-x: auto; scrollbar-width: thin; }
.sf-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 14px; font-weight: 600; color: var(--sf-ink); text-decoration: none; line-height: 1.3; }
.sf-cat-img {
  display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  background: #F1EEF6; color: var(--sf-violet); font-size: 38px; font-weight: 700; transition: box-shadow .2s, transform .2s;
}
.sf-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-cat:hover .sf-cat-img { transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(20,16,31,.4); }
.sf-cat.on .sf-cat-img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sf-pink); }
.sf-cat.on { color: var(--sf-pink-dk); }
@media (max-width: 640px) { .sf-cat-circles ul { grid-auto-columns: 92px; } .sf-cat-img { width: 84px; height: 84px; font-size: 30px; } }

/* หัวรายการ + เครื่องมือ */
.sf-listing { margin-block: 40px 70px; }
.sf-listing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sf-crumb { font-size: 13.5px; color: var(--ink-mute); }
.sf-crumb a { color: var(--ink-soft); text-decoration: none; }
.sf-crumb a:hover { color: var(--sf-pink-dk); }
.sf-listing h1 { margin: 4px 0 0; font-size: clamp(24px, 3vw, 32px); }
.sf-listing-title { display: flex; align-items: baseline; gap: 8px; }
.sf-listing-count { font-size: clamp(14px, 1.8vw, 19px); color: var(--ink-mute); font-weight: 600; }
.sf-listing-desc { margin: 6px 0 0; color: var(--ink-soft); max-width: 70ch; }
.sf-listing-tools { display: flex; align-items: center; gap: 10px; }
.sf-filter-toggle, .sf-sort select {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--sf-ink); cursor: pointer;
}
.sf-filter-toggle:hover, .sf-sort select:hover { border-color: var(--sf-ink); }
.sf-filter-toggle svg { width: 18px; height: 18px; }
.sf-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.sf-only-mobile { display: none; }

/* ตัวกรองด้านข้าง + กริด */
.sf-listing-body { display: grid; grid-template-columns: 250px 1fr; gap: 32px; margin-top: 22px; align-items: start; }
.sf-listing.is-filters-hidden .sf-listing-body { grid-template-columns: 1fr; }
.sf-listing.is-filters-hidden .sf-filters { display: none; }
.sf-filters { position: sticky; top: calc(var(--sf-head-h) + 16px); max-height: calc(100vh - var(--sf-head-h) - 32px); overflow: auto; padding-right: 6px; }
.sf-filters-sheet-head { display: none; }
.sf-filter-search input { width: 100%; padding: 10px 14px; font: inherit; border: 1px solid var(--line); border-radius: 999px; }
.sf-filter-search input:focus { outline: none; border-color: var(--sf-violet); }
.sf-filter { border-bottom: 1px solid var(--line); padding-block: 14px; }
.sf-filter summary { display: flex; justify-content: space-between; font-weight: 700; cursor: pointer; list-style: none; }
.sf-filter summary::-webkit-details-marker { display: none; }
.sf-filter summary::after { content: ""; width: 9px; height: 9px; margin-top: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.sf-filter[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.sf-filter label { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; cursor: pointer; }
.sf-filter label:first-of-type { margin-top: 8px; }
.sf-filter input[type=radio], .sf-filter input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--sf-violet); }
.sf-filter-links { list-style: none; margin: 8px 0 0; padding: 0; }
.sf-filter-links a { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14.5px; color: var(--sf-ink); text-decoration: none; }
.sf-filter-links a:hover { color: var(--sf-pink-dk); }
.sf-filter-links a.on { font-weight: 700; color: var(--sf-pink-dk); }
.sf-filter-links small { color: var(--ink-mute); }
.sf-filter-actions { display: flex; align-items: center; gap: 14px; padding-top: 16px; }
.sf-filter-actions a { font-size: 14px; color: var(--ink-soft); }

/* 2026-10-02 (เจ้าของ: 3 คอลัมน์ใหญ่ไป) — 4 คอลัมน์ · ซ่อนตัวกรอง = 5 */
.sf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
.sf-listing.is-filters-hidden .sf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-lcard { display: flex; flex-direction: column; height: 100%; color: var(--sf-ink); text-decoration: none; }
.sf-lcard-img { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #F4F2F7; }
.sf-lcard-img img, .sf-lcard-img video { width: 100%; height: 100%; object-fit: cover; }
.sf-lcard-img img { transition: transform .35s ease; }   /* วิดีโอใช้ transition ของ .sf-hover-video (fade + ขยาย) ไม่ทับกัน */
.sf-lcard:hover .sf-lcard-img :is(img, video) { transform: scale(1.04); }
.sf-lcard-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 2px 0; }
.sf-lcard-cat { color: var(--sf-violet); font-weight: 600; font-size: 13px; }
.sf-lcard h2 { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.sf-lcard:hover h2 { color: var(--sf-pink-dk); }
.sf-lcard-price { font-size: 14px; color: var(--ink-soft); }
.sf-lcard-price b { font-size: 18px; color: var(--sf-ink); }
.sf-lcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sf-lcard-tags span { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #F1EEF6; color: var(--ink-soft); }
.sf-lcard-tags .is-custom { font-weight: 700; }   /* ป้ายเพิ่มเอง (TASK-199) — สีมาจากหลังบ้านทาง style="" */
.sf-lcard-tags:empty { display: none; }
.sf-empty { padding: 50px 24px; text-align: center; border: 2px dashed var(--line); border-radius: 20px; }
.sf-empty p { margin: 0 0 10px; color: var(--ink-soft); }

@media (max-width: 1280px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-listing.is-filters-hidden .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .sf-grid, .sf-listing.is-filters-hidden .sf-grid { grid-template-columns: repeat(3, 1fr); } .sf-listing-body { grid-template-columns: 210px 1fr; } }
@media (max-width: 900px) {
  .sf-only-desk { display: none !important; }
  .sf-only-mobile { display: inline; }
  .sf-listing-body, .sf-listing.is-filters-hidden .sf-listing-body { grid-template-columns: 1fr; }
  .sf-grid, .sf-listing.is-filters-hidden .sf-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  /* มือถือ: ตัวกรองเป็นแผงเลื่อนขึ้นจากด้านล่าง */
  .sf-filters, .sf-listing.is-filters-hidden .sf-filters {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 950; max-height: 82dvh;
    padding: 0 18px 20px; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 40px rgba(20,16,31,.25);
    transform: translateY(105%); transition: transform .25s ease;
  }
  body.filters-open .sf-filters { transform: none; }
  body.filters-open::after { content: ""; position: fixed; inset: 0; z-index: 940; background: rgba(20,16,31,.45); }
  .sf-filters-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; background: #fff; font-size: 17px; }
  .sf-filter-actions .sf-pill { flex: 1; justify-content: center; }
}

/* ═══════════ รีวิว (การ์ดเป็น <button>/<a> ได้) + ป๊อปอัปคลิป — 2026-10-02 ═══════════ */
button.sf-vcard { appearance: none; }
.sf-vcard { text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
button.sf-vcard:hover, a.sf-vcard:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(20,16,31,.45); }
.sf-vcard:focus-visible { outline: 3px solid var(--sf-pink); outline-offset: 3px; }
.sf-video-modal { width: min(420px, 92vw); aspect-ratio: 9 / 16; max-height: 88dvh; padding: 0; border: 0; border-radius: 20px; overflow: visible; background: #000; }
.sf-video-modal::backdrop { background: rgba(10,8,16,.75); }
.sf-video-modal iframe { width: 100%; height: 100%; border: 0; border-radius: 20px; }
.sf-video-close { position: absolute; top: -14px; right: -14px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--sf-ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3); }

/* ═══════════ หน้า /faq — 2026-10-02 ═══════════ */
.sf-faq-page { max-width: 860px; margin-block: 36px 70px; padding-block: 0; }
.sf-faq-page h1 { margin: 6px 0 6px; font-size: clamp(30px, 4.4vw, 46px); }
.sf-faq-page h1 span { color: var(--sf-pink); }
.sf-faq-lead { margin: 0 0 26px; color: var(--ink-soft); }
.sf-faq-all { display: grid; gap: 10px; }
.sf-faq-all details { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.sf-faq-all details[open] { border-color: var(--purple-br); box-shadow: 0 8px 24px -14px rgba(91,24,242,.45); }
.sf-faq-all summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.sf-faq-all summary::-webkit-details-marker { display: none; }
.sf-faq-all summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--purple-lt); color: var(--sf-violet); font-size: 20px; transition: transform .2s; }
.sf-faq-all details[open] summary::after { transform: rotate(45deg); background: var(--sf-pink); color: #fff; }
.sf-faq-all details p { margin: 0; padding: 0 20px 18px; color: var(--ink-soft); line-height: 1.75; }
.sf-faq-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding: 20px 24px; border-radius: 18px; background: var(--sf-mist); }
.sf-faq-more p { margin: 0; }
.sf-faq-more .sf-pill svg { width: 20px; height: 20px; }

/* ═══════════ หน้านโยบาย/เงื่อนไข /privacy /terms — TASK-262 ═══════════ */
.sf-legal { max-width: 860px; margin-block: 36px 70px; padding-block: 0; color: var(--ink); line-height: 1.8; }
.sf-legal h1 { margin: 6px 0 6px; font-size: clamp(28px, 4.2vw, 44px); }
.sf-legal h1 span { color: var(--sf-pink); }
.sf-legal h2 { margin: 38px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 20px; line-height: 1.5; color: var(--ink); scroll-margin-top: calc(var(--sf-head-h, 72px) + 16px); }
.sf-legal p { margin: 10px 0; }
.sf-legal ul { margin: 10px 0; padding-left: 24px; }
.sf-legal li { margin: 6px 0; padding-left: 2px; }
.sf-legal li::marker { color: var(--ink); }
.sf-legal-toc { margin: 22px 0 8px; padding: 18px 22px 20px; border-radius: 16px; background: var(--sf-mist); }
.sf-legal-toc strong { display: block; margin-bottom: 8px; font-size: 15px; color: var(--ink); }
.sf-legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2 280px; column-gap: 28px; font-size: 15px; }
.sf-legal-toc li { margin: 0; padding: 3px 0; break-inside: avoid; }
.sf-legal-toc a { text-decoration: none; }
.sf-legal-toc a:hover, .sf-legal-toc a:focus-visible { text-decoration: underline; }
.sf-legal a { color: var(--sf-pink-dk); }
.sf-legal-date { margin: 0 0 22px; font-size: 14px; color: var(--ink); }
.sf-legal-note { margin: 10px 0; padding: 14px 18px; border-radius: 14px; background: var(--sf-mist); color: var(--ink); }
.sf-legal-see { margin-top: 30px; }
.sf-legal-table { overflow-x: auto; margin: 10px 0; border: 1px solid var(--line); border-radius: 14px; }
.sf-legal-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sf-legal-table th, .sf-legal-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sf-legal-table th { background: var(--sf-mist); color: var(--ink); }
.sf-legal-table tr:last-child td { border-bottom: 0; }
@media print {
  .sf-legal { max-width: none; margin-block: 0; }
  .sf-legal-toc, .sf-crumb { display: none; }
  .sf-legal h2 { break-after: avoid; }
  .sf-legal-table { break-inside: avoid; }
}

/* ═══════════ ติดต่อเรา /contact — TASK-194b (มติเจ้าของ 2026-10-03) ═══════════
   แผนที่เต็มกว้าง → หัวข้อ → ฟอร์ม (ซ้าย · การ์ดขาวกรอบม่วงแบบแผงสั่งสินค้า) + ช่องทางติดต่อ (ขวา · พื้นม่วง) */
.sf-contact-map { position: relative; height: clamp(260px, 34vw, 420px); background: var(--sf-mist); }
.sf-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.sf-contact { margin-block: 30px 80px; padding-block: 0; }
.sf-contact h1 { margin: 6px 0 6px; font-size: clamp(30px, 4.4vw, 46px); }
.sf-contact h1 span { color: var(--sf-pink); }
.sf-contact-lead { margin: 0 0 30px; color: var(--ink-soft); }
.sf-contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sf-contact h2 { margin: 0 0 18px; font-size: 22px; }
.sf-contact-form { display: grid; gap: 14px; padding: 28px; border: 2px solid var(--sf-violet); border-radius: 24px; background: #fff; }
.sf-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-contact-form label { display: block; font-size: 14.5px; font-weight: 600; }   /* block ไม่ใช่ grid — ให้ * อยู่บรรทัดเดียวกับชื่อช่อง */
.sf-contact-form label > :is(input, select, textarea) { margin-top: 6px; }
.sf-contact-form label b { color: var(--sf-pink-dk); }
.sf-contact-form input, .sf-contact-form select, .sf-contact-form textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid #CFC8DA; border-radius: 12px; background: #fff;
  font: inherit; font-weight: 400; color: var(--sf-ink);
}
.sf-contact-form textarea { resize: vertical; min-height: 120px; }
.sf-contact-form input:focus, .sf-contact-form select:focus, .sf-contact-form textarea:focus { outline: none; border-color: var(--sf-violet); box-shadow: 0 0 0 3px rgba(91,24,242,.15); }
.sf-contact-form .sf-pill { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.sf-contact-note { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.sf-contact-note.is-ok { background: color-mix(in oklab, var(--sf-lime) 45%, #fff); }
.sf-contact-note.is-err { background: #FFE4EF; color: var(--sf-pink-dk); }
.sf-field-err { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--sf-pink-dk); }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot — ห้าม display:none (บอตบางตัวข้ามช่องที่ซ่อนแบบนั้น) */
.sf-contact-info { padding: 28px; border-radius: 24px; background: var(--sf-violet); color: #fff; }
.sf-contact-info h2 { color: var(--sf-lime); }
.sf-contact-info ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.sf-contact-info li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.sf-contact-info li small { display: block; font-size: 12.5px; color: rgba(255,255,255,.65); }
.sf-contact-info li a { color: #fff; text-decoration: none; }
.sf-contact-info li a:hover { text-decoration: underline; }
.sf-contact-info li div > a:not(:first-child) { display: block; margin-top: 2px; font-size: 13.5px; color: var(--sf-lime); }
.sf-contact-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.14); }
.sf-contact-ic svg { width: 19px; height: 19px; fill: #fff; }
.sf-contact-line { width: 100%; justify-content: center; }
.sf-contact-social { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.sf-contact-social small { display: block; margin-bottom: 10px; font-size: 12.5px; color: rgba(255,255,255,.65); }
.sf-contact-social div { display: flex; gap: 10px; }
.sf-contact-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--sf-violet); }
.sf-contact-social a:hover { background: var(--sf-lime); }
.sf-contact-social svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .sf-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sf-contact-row { grid-template-columns: 1fr; } .sf-contact-form, .sf-contact-info { padding: 20px; } }

/* คลิปพรีวิวบนการ์ดรีวิว — ซ่อนจนกว่าจะเล่นจริง (ไม่กระพริบดำตอนโหลด) · ปุ่ม play จางลงตอนเล่น */
.sf-vcard-preview { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.sf-vcard.is-playing .sf-vcard-preview { opacity: 1; }
.sf-vcard.is-playing .sf-vcard-play { opacity: 0; transition: opacity .25s ease; }

/* ป๊อปอัปโหมด "ดูรูป" — รีวิวที่ไม่มีคลิป (มติเจ้าของ 2026-10-02) · รูปพอดีจอ ไม่บังคับสัดส่วน 9:16 แบบคลิป */
.sf-video-modal.is-photo { width: auto; max-width: min(720px, 92vw); aspect-ratio: auto; background: transparent; }
.sf-photo-full { display: block; max-width: 100%; max-height: 88dvh; width: auto; height: auto; border-radius: 20px; }
.sf-photo-full[hidden], .sf-video-modal iframe[hidden] { display: none; }

/* ═══ รีวิวสินค้าในหน้าสินค้า = ตาราง 4 คอลัมน์ × 2 แถว เลื่อนทีละหน้าด้วยลูกศร (ตามแบบ · มติเจ้าของ 2026-10-02) ═══
   หน้าแรกยังเป็นแถวเดียวการ์ดสูง 9:14 — ตัวนี้ทับเฉพาะใน .pdp-reviews · การ์ด 9:14 เท่ารูปที่อัป ไม่ครอป */
/* แถวเลื่อน = หน้าละ 1 ช่องเต็มกว้าง · ในหน้าเป็นตาราง 4 คอลัมน์ เรียงซ้าย→ขวา ครบแถวค่อยขึ้นแถว 2 (หน้าละ 8 ใบ — partials/reviews paged) */
.pdp-reviews .sf-rail-videos { grid-auto-columns: 100%; gap: 14px; }
.sf-rev-page { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start; scroll-snap-align: start; }
/* ★ 2026-10-02 (เจ้าของ: "อย่าย่อรูปรีวิว มันขาด เอาเต็มขนาดที่ตั้งไว้") — กลับเป็น 9:14 เท่าที่อัป (เดิมครอปเป็น 4:5) */
.pdp-reviews .sf-vcard { aspect-ratio: 9 / 14; border-radius: 12px; }
.pdp-reviews .sf-vcard-title { font-size: 13.5px; padding: 30px 10px 10px; }
/* ลูกศรอยู่นอกตาราง ซ้าย-ขวา แบบในแบบ */
.pdp-reviews .sf-rail-wrap { padding-inline: 44px; }
.pdp-reviews .sf-rail-btn { top: 50%; transform: translateY(-50%); background: none; box-shadow: none; color: var(--ink-mute); }
.pdp-reviews .sf-rail-btn:hover { background: none; color: var(--sf-ink); }
.pdp-reviews .sf-rail-prev { left: 0; }
.pdp-reviews .sf-rail-next { right: 0; }
.pdp-reviews .sf-rail-btn svg { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .sf-rev-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-reviews .sf-rail-wrap { padding-inline: 0; }
}
/* หัวข้อ "รีวิวสินค้า" บรรทัดเดียวแบบในแบบ · ตารางไม่กว้างเต็มจอ (การ์ดใหญ่เกินแบบ) */
.pdp-reviews h2 span { display: inline; }
.pdp-reviews .sf-rail-wrap { max-width: 1100px; margin-inline: auto; }

/* ── ไอคอนตะกร้าบนหัวเว็บ (2026-10-09) — เลขแดง = จำนวนรายการในตะกร้า · ว่าง = ไม่มีเลข ── */
.sf-cart { position: relative; }
.sf-cart-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center;
  background: #E5262E; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

/* footer ชิดล่างจอเสมอ (2026-10-12 · เจ้าของแจ้ง "footer ลอย" หน้าที่อยู่ของฉัน) — เนื้อหาสั้นกว่าจอ footer เคยลอยกลางจอมีที่ว่างขาวข้างล่าง
   body เป็น flex แนวตั้งสูงอย่างน้อยเต็มจอ + main ยืดกินที่ว่าง · ลูกตรงของ body ยังเป็นลูกตรงเหมือนเดิม (แถบขั้นตอน sticky ไม่กระทบ) */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ═══════════ มือถือ: ไม่ตัดกลางคำ · ไม่บังกัน (2026-10-24) ═══════════ */
/* ภาษาไทยไม่มีเว้นวรรค เบราว์เซอร์เดาจุดตัดจากพจนานุกรม (คำทับศัพท์อย่าง "ไอเดีย" ถูกหั่น) → ห่อวลีด้วย .nobr แล้วใส่ <wbr> ตรงที่ยอมให้ตัด */
.nobr { white-space: nowrap; }
/* หัวข้อหลายบรรทัด: ตัดให้ความยาวแต่ละบรรทัดใกล้กัน ไม่เหลือคำเดียวค้างบรรทัดล่าง */
h1, h2, h3, .sf-display { text-wrap: balance; }

/* หน้ารายการสินค้า: "ตัวกรอง" / "เรียงตาม" เคยถูกหั่นเป็นสองบรรทัด (จอ 360) → ห้ามตัดคำในปุ่ม/ป้าย ให้ช่องเลือกหดแทน */
.sf-filter-toggle, .sf-sort { white-space: nowrap; }
@media (max-width: 480px) {
  .sf-listing-tools { width: 100%; }
  .sf-sort { flex: 1 1 auto; min-width: 0; }
  .sf-sort select { flex: 1 1 auto; min-width: 0; }
}

/* เมนูมือถือ: เดิมวางที่ "ความสูง header จากขอบจอ" (fixed) — มีแถบโหมดทดสอบอยู่เหนือ header เมนูเลยทับแถว header บังปุ่มปิด (สามขีด)
   → วางชิดใต้ header จริงเสมอ (absolute ใต้ .sf-head ที่ sticky/relative อยู่แล้ว) */
@media (max-width: 1080px) {
  .sf-nav { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; max-height: calc(100dvh - var(--sf-head-h) - 16px); }
}

/* แถวการ์ดเลื่อนข้าง: จอแคบใช้นิ้วปัด — ไม่เว้นขอบ 58px ให้ปุ่มลูกศร (เดิมซ่อนเฉพาะ hover:none · เครื่องที่ไม่บอกค่านี้ การ์ดแคบจนชื่อถูกหั่น "สติ๊ก/เกอร์") */
@media (max-width: 640px) {
  .sf-rail-wrap { padding-inline: 0; }
  .sf-rail-wrap > .sf-rail-btn { display: none; }
}


/* ═══════════ แบนเนอร์คุกกี้ (TASK-302 · มติเจ้าของ 2026-10-26 แบบ ข) — markup: partials/cookie-notice · JS: storefront.js ส่วนที่ 5 ═══════════
   การ์ดหมึก + คุกกี้เขียวมะนาว (SVG วาดเอง) · คอม = มุมล่างซ้าย ไม่ชนปุ่ม LINE (ล่างขวา) · มือถือ = เต็มกว้าง ปุ่ม LINE ยกขึ้นเหนือการ์ด
   z-index 890 = ใต้ปุ่ม LINE (900) · ต่ำกว่าป๊อปอัปทุกตัว (1000+) · ไม่มีพื้นหลังทึบ กดส่วนอื่นของหน้าได้ตามปกติ
   motion: เข้า = ลอยขึ้น · รอ = คุกกี้โยกเป็นระยะ · กดยอมรับ = โดนกัด + เศษกระเด็น แล้วการ์ดยุบลง · ลดการเคลื่อนไหว = นิ่ง */
.pp-cookie {
  position: fixed; left: 18px; bottom: 18px; z-index: 890;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: min(460px, calc(100vw - 36px)); padding: 14px 14px 14px 12px;
  background: var(--sf-ink); color: #fff; border-radius: 22px;
  box-shadow: 0 2px 6px rgba(20,16,31,.18), 0 18px 44px -10px rgba(20,16,31,.55);
  animation: pp-cookie-in .7s cubic-bezier(.16,1,.3,1) both;
}
.pp-cookie[hidden], body.is-pp-editing .pp-cookie { display: none; }

.pp-cookie-art { width: 52px; height: 52px; flex: none; overflow: visible; }
.pp-cookie-biscuit { transform-origin: 32px 32px; animation: pp-cookie-pop .8s .25s cubic-bezier(.34,1.56,.64,1) both, pp-cookie-wiggle 6s 2.4s ease-in-out infinite; }
.pp-cookie-bite circle { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.pp-cookie-crumbs circle { opacity: 0; transform-box: fill-box; transform-origin: center; }

.pp-cookie-text { min-width: 0; }
.pp-cookie-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.pp-cookie-body { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: #C9C5D6; }
.pp-cookie-body a { white-space: nowrap; color: var(--sf-lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp-cookie-body a:hover { text-decoration-thickness: 2px; }

.pp-cookie-ok {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sf-lime); color: var(--sf-ink); font: inherit; font-size: 14.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, transform .15s cubic-bezier(.16,1,.3,1);
}
.pp-cookie-ok:hover { background: var(--sf-lime-dk); transform: translateY(-1px); }
.pp-cookie-ok:active { transform: scale(.96); }
.pp-cookie-ok:focus-visible, .pp-cookie-body a:focus-visible { outline: 2px solid var(--sf-lime); outline-offset: 3px; }

/* กดยอมรับ → กัด → เศษกระเด็น → การ์ดยุบลงหายไป (JS รอ animationend ของ pp-cookie-out แล้วค่อยซ่อน) */
.pp-cookie.is-eaten { animation: pp-cookie-out .45s .55s cubic-bezier(.7,0,.84,0) forwards; pointer-events: none; }
.pp-cookie.is-eaten .pp-cookie-biscuit { animation: pp-cookie-chomp .32s ease-out both; }
.pp-cookie.is-eaten .pp-cookie-bite circle { animation: pp-cookie-bite .26s cubic-bezier(.16,1,.3,1) both; }
.pp-cookie.is-eaten .pp-cookie-bite circle:nth-child(2) { animation-delay: .05s; }
.pp-cookie.is-eaten .pp-cookie-bite circle:nth-child(3) { animation-delay: .1s; }
.pp-cookie.is-eaten .pp-cookie-crumbs circle { animation: pp-cookie-crumb .6s .12s cubic-bezier(.16,1,.3,1) both; }
.pp-cookie-crumbs circle:nth-child(1) { --dx: 10px;  --dy: -14px; }
.pp-cookie-crumbs circle:nth-child(2) { --dx: -4px;  --dy: -18px; }
.pp-cookie-crumbs circle:nth-child(3) { --dx: 14px;  --dy: 2px; }

@keyframes pp-cookie-in     { from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pp-cookie-pop    { from { transform: rotate(-35deg) scale(.4); } to { transform: none; } }
@keyframes pp-cookie-wiggle { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-10deg); } 92% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@keyframes pp-cookie-chomp  { 0% { transform: none; } 40% { transform: scale(.9) rotate(-6deg); } 100% { transform: none; } }
@keyframes pp-cookie-bite   { to { transform: scale(1); } }
@keyframes pp-cookie-crumb  { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
@keyframes pp-cookie-out    { to { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(3px); } }

/* มือถือ: เต็มกว้าง เว้นขอบ 12px · ปุ่ม LINE ยกขึ้นเหนือการ์ด (--pp-cookie-h ตั้งจาก JS ตามความสูงจริง) */
@media (max-width: 640px) {
  .pp-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 20px; }
  .pp-cookie-art { width: 44px; height: 44px; }
  .pp-cookie-title { font-size: 14.5px; }
  .pp-cookie-body { font-size: 12.5px; }
  .pp-cookie-ok { padding: 0 16px; }
  .sf-fab { transition: bottom .35s cubic-bezier(.16,1,.3,1), transform .15s ease; }
  html.pp-cookie-on .sf-fab { bottom: calc(var(--pp-cookie-h, 96px) + 24px); }
}
@media (max-width: 360px) {
  .pp-cookie { grid-template-columns: auto 1fr; }
  .pp-cookie-ok { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-cookie, .pp-cookie-biscuit, .pp-cookie.is-eaten, .pp-cookie.is-eaten .pp-cookie-biscuit,
  .pp-cookie.is-eaten .pp-cookie-bite circle, .pp-cookie.is-eaten .pp-cookie-crumbs circle { animation: none; }
}