/* Farm Macaron Shop v2 — ported from Claude Design "Farm Macaron Shop v2" */
:root{
  --fm-orange:#F26A1B; --fm-orange-d:#D9560C; --fm-tint:#FFEEDF;
  --fm-ink:#1F1A1C; --fm-ink2:#4A4246; --fm-mute:#6F666B; --fm-mute2:#8B8086;
  --fm-line:#ECE8EB; --fm-line2:#E6E2E5; --fm-bg:#F5F4F6; --fm-chip:#EBE8EA; --fm-green:#2DB55D;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{-webkit-user-drag:none}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fm-bg);font-family:'Noto Sans Thai',sans-serif;color:var(--fm-ink);-webkit-font-smoothing:antialiased}
a{color:var(--fm-orange);text-decoration:none}a:hover{color:var(--fm-orange-d)}
button,input{font-family:inherit}
img{display:block}
.fm-hide-scroll{scrollbar-width:none}.fm-hide-scroll::-webkit-scrollbar{display:none}

@keyframes fmWave{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-10deg) scale(1.15)}}
@keyframes fmPulse{0%,100%{box-shadow:0 0 0 3px rgba(45,181,93,.18)}50%{box-shadow:0 0 0 6px rgba(45,181,93,.05)}}
@keyframes fmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fmFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.fm-root{min-height:100vh;display:flex;flex-direction:column}
.fm-wrap{max-width:1100px;width:100%;margin:0 auto}

/* greeting */
.fm-greet{padding:22px 16px 8px;display:flex;flex-direction:column;gap:14px}
.fm-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fm-open{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--fm-line);border-radius:999px;padding:5px 12px 5px 8px;font-size:13px;font-weight:600;color:var(--fm-ink2)}
.fm-dot{width:8px;height:8px;border-radius:50%;background:var(--fm-green);flex:none}
.fm-open .fm-dot{box-shadow:0 0 0 3px rgba(45,181,93,.18);animation:fmPulse 2s ease-in-out infinite}
.fm-today{font-size:13px;color:var(--fm-mute2)}
.fm-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
.fm-hero-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.fm-hero-title{font-family:'Mali',cursive;font-size:clamp(26px,7vw,40px);font-weight:700;line-height:1.25;color:var(--fm-ink);text-wrap:balance}
.fm-heart{display:inline-block;color:var(--fm-orange);animation:fmWave 2.4s ease-in-out infinite;transform-origin:50% 80%}
.fm-hero-sub{font-size:14px;line-height:1.5;color:var(--fm-mute);text-wrap:pretty}
.fm-avatar{position:relative;width:clamp(78px,22vw,120px);aspect-ratio:1/1;flex:none}
.fm-avatar-img{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--fm-tint);border:3px solid #fff;box-shadow:0 8px 22px rgba(242,106,27,.22);animation:fmFloat 4s ease-in-out infinite}
.fm-avatar-img img{width:100%;height:100%;object-fit:cover}
.fm-avatar-tag{position:absolute;right:-4px;bottom:2px;background:var(--fm-orange);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;border:2px solid #fff}
.fm-perks{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px}
.fm-perk{flex:none;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--fm-line);border-radius:14px;padding:8px 12px}
.fm-perk-ic{width:28px;height:28px;border-radius:9px;background:var(--fm-tint);color:var(--fm-orange);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.fm-perk-tx{display:flex;flex-direction:column;line-height:1.25}
.fm-perk-tx b{font-size:13px;font-weight:700;color:var(--fm-ink)}
.fm-perk-tx span{font-size:11px;color:var(--fm-mute2)}

/* header */
.fm-hdr{position:sticky;top:0;z-index:35;background:rgba(245,244,246,0);transition:background .25s,box-shadow .25s}
.fm-hdr.is-scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 4px 18px rgba(30,20,25,.07)}
.fm-hdr-in{max-width:1100px;margin:0 auto;padding:0 12px;height:56px;display:flex;align-items:center;gap:10px}
.fm-circle{width:36px;height:36px;flex:none;border:0;border-radius:50%;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(30,20,25,.08);transition:transform .15s;color:var(--fm-orange)}
.fm-circle:active{transform:scale(.9)}
.fm-logo{width:36px;height:36px;flex:none;border-radius:50%;background:var(--fm-orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:-.3px;cursor:pointer;border:0}
.fm-hdr-title{flex:1;min-width:0;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-nav{flex:1;min-width:0;display:flex;justify-content:center}
.fm-tabs{width:100%;height:38px;background:var(--fm-chip);border-radius:999px;overflow-x:auto;overflow-y:hidden}
.fm-track{position:relative;height:100%;padding:3px;display:grid}
.fm-pill{position:absolute;top:3px;bottom:3px;left:3px;border-radius:999px;background:var(--fm-orange);box-shadow:0 3px 10px rgba(242,106,27,.35);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.fm-tab{position:relative;z-index:1;border:0;background:transparent;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:color .25s,transform .15s;color:var(--fm-mute);white-space:nowrap;padding:0 6px}
.fm-tab:active{transform:scale(.95)}
.fm-tab.is-on{color:#fff}

/* list */
.fm-main{padding:12px 10px 32px;display:flex;flex-direction:column;gap:18px}
.fm-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--fm-line2);border-radius:16px;padding:0 16px;height:52px}
.fm-search input{flex:1;min-width:0;border:0;outline:0;font-size:16px;background:transparent;color:var(--fm-ink)}
.fm-cats{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.fm-chip{flex:none;border:0;background:var(--fm-chip);color:var(--fm-mute);border-radius:999px;padding:10px 20px;font-size:15px;font-weight:600;cursor:pointer}
.fm-chip.is-on{background:var(--fm-tint);color:var(--fm-orange);box-shadow:inset 0 0 0 1.5px var(--fm-orange)}
.fm-chip small{opacity:.6;font-weight:500;font-size:inherit}
.fm-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fm-sec-title{font-size:18px;font-weight:700}
.fm-sorts{display:flex;gap:6px;flex-wrap:wrap}
.fm-sort{border:0;background:transparent;color:var(--fm-mute);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer}
.fm-sort.is-on{background:var(--fm-ink);color:#fff}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,calc(50% - 5px)),1fr));gap:10px}
.fm-card{background:#fff;border:1px solid var(--fm-line);border-radius:18px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;color:inherit}
.fm-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,20,25,.10);color:inherit}
.fm-card-img{position:relative;aspect-ratio:1/0.92;background:#F1EEF0}
.fm-card-img img,.fm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-tag{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);color:var(--fm-orange);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;pointer-events:none;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.fm-card-meta{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--fm-mute2);padding-bottom:7px;border-bottom:1px dashed var(--fm-line2);flex-wrap:wrap}
.fm-card-meta span{display:flex;align-items:center;gap:4px}
.fm-card-name{font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-card-price{font-size:19px;font-weight:700}
.fm-card-price small,.fm-unit{font-size:13px;font-weight:500;color:var(--fm-mute2)}
.fm-card-cta{margin-top:auto;height:38px;border-radius:10px;background:var(--fm-orange);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.fm-empty{background:#fff;border-radius:18px;padding:48px;text-align:center;color:var(--fm-mute2)}

/* detail */
.fm-detail{padding:0 16px 104px;display:flex;flex-direction:column;gap:12px}

/* ปุ่มย้อนกลับลอยเหนือรูป */
.fm-fback{position:fixed;z-index:40;top:calc(12px + env(safe-area-inset-top));left:max(12px, calc((100vw - 1100px) / 2 + 28px));width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(30,20,25,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s}
.fm-fback:active{transform:scale(.9)}

/* แกลเลอรี: รูปใหญ่ล็อก 1:1 + แถบรูปเล็กแถวเดียว */
.fm-gal{margin:0 -16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fm-gal-main{position:relative;width:100%;aspect-ratio:1/1;background:#fff;overflow:hidden}
.fm-gal-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.fm-gal-slide{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;border:0;padding:0;margin:0;background:#fff;cursor:zoom-in}
.fm-gal-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-gal-count{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);border:1px solid var(--fm-line);color:var(--fm-ink2);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;pointer-events:none}
.fm-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px;scroll-padding:0 16px}
.fm-thumb{position:relative;flex:0 0 64px;width:64px;height:64px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#F1EEF0;cursor:pointer;box-shadow:inset 0 0 0 1px var(--fm-line)}
.fm-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-thumb::after{content:"";position:absolute;inset:0;border-radius:10px;border:2px solid transparent;transition:border-color .15s}
.fm-thumb.is-on::after{border-color:var(--fm-orange)}
@media (min-width:860px){
  .fm-detail{padding-top:24px}
  .fm-gal{margin:0}
  .fm-gal-main{border-radius:20px}
  .fm-thumbs{padding:2px 0 4px;scroll-padding:0}
  .fm-col-g{position:sticky;top:24px}
  .fm-fback{top:36px}
}
.fm-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:12px 24px;align-items:start}
.fm-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.fm-col-r{gap:10px}
.fm-photos-hd{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px}
.fm-h17{font-size:16px;font-weight:700}
.fm-small{font-size:12px;color:var(--fm-mute2)}
.fm-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 -16px;background:#fff}
.fm-photos.n1{grid-template-columns:1fr}
.fm-photos.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fm-photos.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.fm-ph{position:relative;aspect-ratio:1/1;background:#E9E6E8;overflow:hidden;cursor:zoom-in;border:0;padding:0}
.fm-box{background:#fff;border-radius:18px;padding:14px 14px;display:flex;flex-direction:column;gap:8px}
.fm-badge{background:var(--fm-orange);color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.fm-detail h1{margin:0;font-size:19px;font-weight:700;line-height:1.35;text-wrap:pretty}
.fm-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fm-mute2);flex-wrap:wrap}
.fm-meta span{display:flex;align-items:center;gap:4px}
.fm-bigprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fm-bigprice b{font-size:26px;font-weight:800;line-height:1.1}
.fm-bigprice span{font-size:13px;color:var(--fm-mute2)}
.fm-box-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.fm-tiers{display:flex;flex-direction:column;gap:5px}
.fm-tier{cursor:pointer;border:0;border-radius:11px;padding:8px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;background:#F7F5F6;text-align:left;font:inherit;color:inherit;width:100%}
.fm-tier.is-on{background:var(--fm-tint);box-shadow:inset 0 0 0 1.5px var(--fm-orange)}
.fm-tier-l{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fm-ink2)}
.fm-radio{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid #CFC8CC;box-shadow:inset 0 0 0 2.5px #fff;background:#fff}
.fm-tier.is-on .fm-radio{border-color:var(--fm-orange);background:var(--fm-orange)}
.fm-tier-p{font-size:16px;font-weight:700;color:var(--fm-ink)}
.fm-tier-s{font-size:11px;font-weight:600;color:var(--fm-orange);min-width:70px;text-align:right}
.fm-note{font-size:11.5px;color:var(--fm-mute2);line-height:1.45}
.fm-specs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;font-size:13.5px}
.fm-specs dt{color:var(--fm-mute2)}.fm-specs dd{margin:0}
.fm-desc{font-size:13.5px;line-height:1.6;color:var(--fm-ink2);text-wrap:pretty;border-top:1px dashed var(--fm-line2);padding-top:10px;white-space:pre-line}

/* bottom bar */
.fm-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -6px 20px rgba(30,20,25,.08)}
.fm-bar-in{max-width:1100px;margin:0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px}
.fm-bar-txt{display:flex;flex-direction:column;min-width:92px;flex:0 1 auto}
.fm-bar-txt span{font-size:12px;color:var(--fm-mute2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-bar-txt b{font-size:20px;font-weight:800;line-height:1.2}
.fm-msg{flex:1 1 0;max-width:340px;margin-left:auto;white-space:nowrap;height:48px;background:var(--fm-orange);color:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;box-shadow:0 6px 16px rgba(242,106,27,.35)}
.fm-msg:hover{background:var(--fm-orange-d);color:#fff}

/* lightbox */
.fm-lb{position:fixed;inset:0;z-index:60;background:rgba(18,14,16,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}
.fm-lb-top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;color:#fff}
.fm-lb-top span{font-size:15px;font-weight:600}
.fm-lb-x{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer}
.fm-lb-img{position:relative;width:min(96vw,78vh);aspect-ratio:1/1;overflow:hidden}
.fm-lb-img img{width:100%;height:100%;object-fit:contain}
.fm-lb-nav{display:flex;gap:12px}
.fm-lb-nav button{width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}

.fm-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}

/* สินค้าอื่น ๆ ท้ายหน้าสินค้า */
.fm-more{display:flex;flex-direction:column;gap:12px;margin:14px -6px 0}
.fm-more .fm-sec{padding:0 6px}
@media (min-width:860px){.fm-more{margin:28px 0 0}}

/* HTML ฝั่งเซิร์ฟเวอร์ (ก่อน JS เข้าแทน) */
.fm-ssr{max-width:1100px;margin:0 auto;padding:24px 16px;font-size:15px;line-height:1.6}
.fm-ssr img{max-width:160px;height:auto;border-radius:12px;margin:4px}
.fm-ssr table{border-collapse:collapse}.fm-ssr td,.fm-ssr th{padding:4px 10px;border-bottom:1px solid var(--fm-line)}

/* หัวข้อ + ข้อความแนะนำหน้าหมวด + คำถามที่พบบ่อย */
.fm-hero-sub{margin:0;font-weight:400}
h1.fm-hero-sub{font-size:14px;line-height:1.5;color:var(--fm-mute)}
.fm-landing{background:#fff;border:1px solid var(--fm-line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.fm-landing h2{margin:0;font-size:17px;font-weight:700}
.fm-landing p{margin:0;font-size:13.5px;line-height:1.65;color:var(--fm-ink2)}
.fm-landing .fm-more-btn{align-self:flex-start;border:0;background:none;color:var(--fm-orange);font-weight:600;font-size:13px;padding:0;cursor:pointer}
.fm-landing.is-short p+p{display:none}
.fm-faq{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.fm-faq h2{margin:0 0 4px;font-size:17px;font-weight:700}
.fm-faq details{background:#fff;border:1px solid var(--fm-line);border-radius:14px;padding:12px 14px}
.fm-faq summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.fm-faq summary::-webkit-details-marker{display:none}
.fm-faq summary::after{content:"+";color:var(--fm-orange);font-weight:700}
.fm-faq details[open] summary::after{content:"–"}
.fm-faq details p{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:var(--fm-ink2)}
a.fm-chip,a.fm-tab{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
a.fm-chip{gap:6px}
a.fm-chip:hover{color:var(--fm-mute)}a.fm-chip.is-on:hover{color:var(--fm-orange)}
a.fm-tab:hover{color:var(--fm-mute)}a.fm-tab.is-on,a.fm-tab.is-on:hover{color:#fff}

/* แถบหมวดเต็มความกว้าง (ไม่มีโลโก้/ปุ่ม Messenger) */
.fm-greet{padding-top:18px}
.fm-hdr-in{padding:0 16px}
.fm-nav{justify-content:stretch}
.fm-tabs{max-width:none}