/* ===== หน้าร้าน (theme ต่อร้านผ่าน --brand) ===== */
:root{--brand:#0f766e;--ink:#1c1917;--muted:#78716c;--line:#e7e5e4;--bg:#fafaf9;--radius:14px}
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans Thai',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.3;margin:0 0 .4em}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.875rem} .center{text-align:center}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .spacer{flex:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;border:1px solid transparent;font:inherit;font-weight:600;
  cursor:pointer;background:var(--brand);color:#fff;min-height:48px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-line{background:#06c755;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:6px 12px;min-height:36px;font-size:.875rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.s-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.s-head .wrap{display:flex;align-items:center;gap:12px;height:60px}
.s-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);min-width:0}
.s-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-logo{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;background:var(--brand);color:#fff;font-weight:600;white-space:nowrap}
.cart-btn b{background:#fff;color:var(--brand);border-radius:99px;padding:0 7px;font-size:.8rem}

.s-cover{height:clamp(140px,28vw,280px);background:var(--brand) center/cover}
.s-intro{background:#fff;border-bottom:1px solid var(--line);padding-bottom:20px}
.s-intro .intro-top{display:flex;gap:16px;align-items:flex-end;margin-top:-40px;flex-wrap:wrap}
.s-intro .big-logo{width:96px;height:96px;border-radius:22px;border:4px solid #fff;object-fit:cover;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:2.2rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.s-intro h1{font-size:1.6rem;margin-top:8px}
.contact-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.alert{padding:12px 16px;border-radius:10px;margin:12px 0;border:1px solid}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.alert-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
@media(max-width:480px){.p-grid{grid-template-columns:1fr 1fr;gap:10px}}
.p-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);display:flex;flex-direction:column;transition:.15s}
.p-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.p-img{aspect-ratio:1;background:#f5f5f4;object-fit:cover;width:100%;display:grid;place-items:center;font-size:2.5rem;color:#d6d3d1}
.p-body{padding:10px 12px 12px}
.p-name{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.price{font-weight:700;color:var(--brand);font-size:1.05rem}
.price s{color:var(--muted);font-weight:400;font-size:.85rem;margin-left:4px}
.sale{background:#dc2626;color:#fff;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:99px}
.soldout{background:#44403c;color:#fff;font-size:.72rem;padding:1px 8px;border-radius:99px}
.p-wrap{position:relative}
.p-wrap .sale,.p-wrap .soldout{position:absolute;top:8px;left:8px}

.search{display:flex;gap:8px;margin:20px 0}
.input{width:100%;padding:12px 14px;border:1px solid #d6d3d1;border-radius:12px;font:inherit;background:#fff;min-height:48px;color:var(--ink)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
textarea.input{min-height:100px;resize:vertical}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{margin-top:5px;width:18px;height:18px;accent-color:var(--brand)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:24px 0}
@media(max-width:780px){.pd{grid-template-columns:1fr;gap:16px;padding:12px 0}}
.gallery-main{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:#f5f5f4;display:grid;place-items:center;font-size:4rem;color:#d6d3d1}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.thumbs img{width:64px;height:64px;border-radius:10px;object-fit:cover;cursor:pointer;border:2px solid transparent;flex:none}
.thumbs img.on{border-color:var(--brand)}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty button{width:44px;border:0;background:#f5f5f4;font-size:1.2rem;cursor:pointer}
.qty input{width:56px;text-align:center;border:0;font:inherit;font-weight:600}
.desc{white-space:pre-line}

.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-line img,.cart-line .ph{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f5f5f4}
.sum{list-style:none;margin:0;padding:0}
.sum li{display:flex;justify-content:space-between;padding:6px 0}
.sum li.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:1.2rem;font-weight:700}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start;padding:24px 0}
@media(max-width:780px){.two{grid-template-columns:1fr}}
.radio-card{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;margin-bottom:8px;background:#fff}
.radio-card:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.radio-card input{accent-color:var(--brand);width:18px;height:18px}

.s-foot{margin-top:48px;padding:28px 0 40px;border-top:1px solid var(--line);background:#fff;font-size:.9rem;color:var(--muted)}
.powered{display:inline-flex;align-items:center;gap:6px;background:#f5f5f4;border-radius:99px;padding:4px 12px;color:#57534e;font-size:.8rem}
.done-ico{width:72px;height:72px;border-radius:50%;background:#dcfce7;color:#16a34a;display:grid;place-items:center;font-size:2.2rem;margin:0 auto 12px}
/* หมวดหมู่ */
.cat-bar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;margin-bottom:6px;scrollbar-width:none;position:sticky;top:60px;z-index:10;background:var(--bg)}
.cat-bar::-webkit-scrollbar{display:none}
.cat-tab{flex:none;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;white-space:nowrap}
.cat-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.cat-section{margin-bottom:28px;scroll-margin-top:120px}
.cat-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.cat-head h2{font-size:1.25rem;margin:0}.cat-head a{margin-left:auto}
.crumbs a{color:var(--muted)}

/* ที่ตั้งร้าน */
.loc-card{margin-top:32px;scroll-margin-top:80px}
.loc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
@media(max-width:700px){.loc-grid{grid-template-columns:1fr}}
.pin-box{border:1px dashed var(--line);border-radius:12px;padding:12px;background:#fafaf9}
.pin-box.need{border-color:#f59e0b;background:#fffbeb}

/* ติดตามพัสดุ */
.track-box{text-align:left;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:14px;background:#fafaf9}
.track-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;flex-wrap:wrap}
.track-no{display:flex;gap:8px;margin:10px 0}
.track-no input{flex:1;min-width:0;font:inherit;font-size:1.15rem;font-weight:700;letter-spacing:.06em;border:1px dashed #a8a29e;border-radius:10px;padding:8px 12px;background:#fff;color:var(--ink)}

/* ตัวเลือกสินค้า */
.opt-group{border:0;padding:0;margin:18px 0 0}
.opt-group legend{font-weight:600;margin-bottom:8px;padding:0}
.opt-pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px;left:50%;bottom:0}
.pill span{display:inline-block;padding:9px 16px;border:1px solid #d6d3d1;border-radius:99px;background:#fff;font-size:.95rem;transition:.12s;user-select:none}
.pill span small{color:var(--muted)}
.pill:hover span{border-color:var(--brand)}
.pill input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.pill input:checked+span small{color:rgba(255,255,255,.85)}
.pill input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.pill.off{cursor:not-allowed}
.pill.off span{color:#a8a29e;background:#f5f5f4;text-decoration:line-through}
.opt-err{color:#b91c1c;font-size:.88rem;margin-top:6px;font-weight:600}
.opt-line{font-size:.85rem;color:var(--muted)}

/* สถานะร้าน */
.shop-status{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;padding:4px 12px;border-radius:99px;background:#dcfce7;color:#166534}
.shop-status.closed{background:#fee2e2;color:#991b1b}
.shop-status:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.closed-bar{background:#fef3c7;color:#92400e;text-align:center;padding:10px 16px;font-size:.92rem;border-bottom:1px solid #fde68a}

.mobile-cta{display:none}
@media(max-width:780px){
  .mobile-cta{display:flex;gap:8px;position:fixed;bottom:0;left:0;right:0;background:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:30}
  body.has-cta{padding-bottom:84px}
}

/* ===== ฿499+: ปกร้านสูงขึ้น + เมนูร้าน ===== */
.cover-tall .s-cover{height:clamp(180px,30vw,400px);position:relative}
.cover-tall .s-cover::after{content:"";position:absolute;inset:auto 0 0 0;height:35%;background:linear-gradient(transparent,rgba(0,0,0,.18))}
.cover-tall .s-intro .intro-top{margin-top:-56px;position:relative;z-index:1}
.cover-tall .s-intro .big-logo{width:112px;height:112px}

.s-menu{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:60px;z-index:19;box-shadow:0 6px 16px -14px rgba(0,0,0,.4)}
.s-menu-in{display:flex;gap:2px;align-items:stretch;min-height:48px}
.sm-dd{position:relative;display:flex}
.sm-item{display:flex;align-items:center;gap:4px;padding:0 14px;color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.sm-item:hover{color:var(--brand)}
.sm-item.on{color:var(--brand);border-bottom-color:var(--brand)}
.sm-caret{font-size:.7rem;opacity:.6}
.sm-drop{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.14);z-index:30}
.sm-drop a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:.93rem}
.sm-drop a:hover{background:var(--bg);color:var(--brand)}
@media (hover:hover) and (min-width:761px){ .sm-dd.has-sub:hover .sm-drop,.sm-dd.has-sub:focus-within .sm-drop{display:block} }
@media (max-width:760px){
  .s-menu-in{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 4px}
  .s-menu-in::-webkit-scrollbar{display:none}
  .sm-item{padding:0 12px;font-size:.9rem}
}

/* หน้าเนื้อหา */
.pg-hero{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));color:#fff;padding:34px 0 30px}
.pg-hero h1{font-size:clamp(1.5rem,4vw,2.2rem);margin:6px 0 0}
.pg-crumb{opacity:.85}.pg-crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pg-wrap{padding-top:22px;padding-bottom:40px;max-width:860px}
.pg-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:none}
.pg-tab{padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.9rem;white-space:nowrap}
.pg-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pg-body{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,4vw,34px);font-size:1.02rem;line-height:1.85;overflow-wrap:anywhere}
.pg-body h2{font-size:1.35rem;margin:1.3em 0 .5em;padding-left:12px;border-left:4px solid var(--brand)}
.pg-body h3{font-size:1.12rem;margin:1.2em 0 .4em;color:var(--brand)}
.pg-body > :first-child{margin-top:0}
.pg-body p{margin:0 0 1em}
.pg-body ul,.pg-body ol{margin:0 0 1em;padding-left:1.4em}
.pg-body li{margin:.25em 0}
.pg-body blockquote{margin:1.2em 0;padding:14px 18px;border-radius:12px;background:color-mix(in srgb,var(--brand) 8%,#fff);border-left:4px solid var(--brand);font-weight:600}
.pg-body hr{border:0;border-top:1px dashed var(--line);margin:1.6em 0}
.pg-body a{text-decoration:underline;text-underline-offset:3px}
.pg-fig{margin:1.4em 0}
.pg-fig img{width:100%;border-radius:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.35);cursor:zoom-in}
.pg-fig figcaption{text-align:center;color:var(--muted);font-size:.88rem;margin-top:8px}
.pg-empty{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:40px;text-align:center;color:var(--muted)}
.pg-gallery-wrap{margin-top:26px}
.pg-gal-title{font-size:1.2rem}
.pg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;grid-auto-flow:dense}
.pg-gallery a{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:1;background:#eee}
.pg-gallery a.big{grid-column:span 2;grid-row:span 2}
.pg-gallery.one{grid-template-columns:1fr}.pg-gallery.one a{aspect-ratio:16/9}
.pg-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.pg-gallery a:hover img{transform:scale(1.05)}
.pg-gallery span{position:absolute;inset:auto 0 0 0;padding:18px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:.82rem}
@media (max-width:520px){.pg-gallery{grid-template-columns:repeat(2,1fr);gap:6px}.pg-gallery a.big{grid-column:span 2;grid-row:span 1;aspect-ratio:16/10}}
.pg-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}

/* ดูรูปเต็มจอ */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.92);display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{margin:0;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;align-items:center}
.lb img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:8px}
.lb figcaption{color:#e7e5e4;margin-top:10px;text-align:center;font-size:.95rem}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:99px;width:46px;height:46px;font-size:1.6rem;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:rgba(255,255,255,.24)}
.lb-x{top:14px;right:14px;font-size:1.1rem!important}
.lb-p{left:14px;top:50%;transform:translateY(-50%)}.lb-n{right:14px;top:50%;transform:translateY(-50%)}
.lb.single .lb-p,.lb.single .lb-n{display:none}
.lb-c{position:absolute;top:22px;left:20px;color:#d6d3d1;font-size:.9rem}

/* ===== เมนู v2: ไอคอน + เนื้อหาจาก editor ===== */
.sm-ico{font-size:1rem;line-height:1}
.pg-hero h1{display:flex;align-items:center;gap:12px}
.pg-h-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-size:1.6rem;flex:none}
.pg-body img{max-width:100%;height:auto;border-radius:14px;margin:.6em 0;box-shadow:0 10px 30px -14px rgba(0,0,0,.4)}
.pg-body .pg-imglink{display:inline-block;cursor:zoom-in;text-decoration:none}
.pg-body .ql-align-center{text-align:center}.pg-body .ql-align-right{text-align:right}.pg-body .ql-align-justify{text-align:justify}
.pg-body .ql-align-center .pg-imglink{margin:0 auto}
.pg-body .ql-indent-1{padding-left:2em}.pg-body .ql-indent-2{padding-left:4em}.pg-body .ql-indent-3{padding-left:6em}.pg-body .ql-indent-4{padding-left:8em}
.pg-body li.ql-indent-1{margin-left:1.5em;padding-left:0}.pg-body li.ql-indent-2{margin-left:3em;padding-left:0}.pg-body li.ql-indent-3{margin-left:4.5em;padding-left:0}
.pg-body u{text-underline-offset:3px}
.pg-body blockquote p{margin:0}

/* ===== สไลด์ภาพปก (฿499+) ===== */
.s-slider{position:relative;overflow:hidden;background:#111}
.s-slider::after{z-index:1;pointer-events:none}
.ss-track,.ss-slide{position:absolute;inset:0}
.ss-slide{opacity:0;transition:opacity .8s ease;display:block}
.ss-slide.on{opacity:1;z-index:1}
.ss-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease-out;user-select:none}
.ss-slide.on img{transform:scale(1)}
a.ss-slide{cursor:pointer}
.ss-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:99px;border:0;cursor:pointer;
  background:rgba(255,255,255,.85);color:#1c1917;font-size:1.6rem;line-height:1;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.s-slider:hover .ss-nav,.ss-nav:focus-visible{opacity:1}
.ss-prev{left:14px}.ss-next{right:14px}
.ss-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:3;display:flex;gap:7px}
.cover-tall .ss-dots{bottom:auto;top:12px}
.ss-dots button{width:9px;height:9px;padding:0;border-radius:99px;border:0;background:rgba(255,255,255,.6);cursor:pointer;transition:all .25s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ss-dots button.on{width:26px;background:#fff}
@media (hover:none){.ss-nav{display:none}}
@media (prefers-reduced-motion:reduce){.ss-slide,.ss-slide img{transition:none}}
.cover-tall .s-intro .intro-top > div:last-child{align-self:flex-start;padding-top:62px}
.cover-tall .s-intro .intro-top > .big-logo{align-self:flex-start}

/* ===== ร้านพรีเมียม (฿999): โทนทอง ===== */
.plan-managed{--gold1:#b8860b;--gold2:#f5d77a;--gold3:#fff3c4;--gold:linear-gradient(90deg,#a67c00,#f5d77a 30%,#fff3c4 50%,#d4a017 70%,#a67c00)}
.plan-managed .s-head{border-bottom:0;box-shadow:inset 0 3px 0 0 #d4a017}
.plan-managed .s-head::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gold);background-size:200% 100%;animation:goldShine 6s linear infinite}
.plan-managed .s-head::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--gold)}
.plan-managed .s-menu{border-bottom:0;position:sticky}
.plan-managed .s-menu::after{content:"";position:absolute;inset:auto 0 0 0;height:1.5px;background:var(--gold)}
.plan-managed .s-cover{box-shadow:inset 0 -3px 0 0 #d4a017}
.plan-managed .s-slider::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--gold);z-index:4}
.plan-managed .cart-btn{background:linear-gradient(135deg,#7a5a00,#d4a017 45%,#f5d77a 60%,#b8860b);color:#2b1d00;box-shadow:0 4px 14px -4px rgba(184,134,11,.7);border:1px solid #f5d77a}
.plan-managed .cart-btn b{background:#2b1d00;color:#f5d77a}
.plan-managed .s-intro .big-logo{border-color:#f5d77a;box-shadow:0 0 0 3px #b8860b,0 8px 24px -6px rgba(184,134,11,.6)}
.s-crown{font-size:1.05rem;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(184,134,11,.5))}
.tier-badge{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:99px;
  background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;letter-spacing:.2px}
.tier-badge.gold{background:linear-gradient(135deg,#2b1d00,#5c4300);color:#f5d77a;border:1px solid #d4a017;box-shadow:0 2px 10px -2px rgba(184,134,11,.6)}
.plan-managed .sm-item.on{border-bottom-color:#d4a017;color:#8a6500}
.plan-managed .sm-item:hover{color:#8a6500}
.plan-managed .pg-hero{background:linear-gradient(135deg,#1c1400,#3d2c00 55%,#6b4f00);border-bottom:3px solid #d4a017}
.plan-managed .pg-hero h1{color:#f5d77a}
.plan-managed .s-foot{border-top:2px solid #d4a017}
@keyframes goldShine{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.plan-managed .s-head::before{animation:none}}

/* โฆษณาในร้านฟรี */
.ad-slot{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/1;background:#f1f5f9}
.ad-item{position:absolute;inset:0;opacity:0;transition:opacity .7s;display:block}
.ad-item.on{opacity:1;z-index:1}
.ad-item img{width:100%;height:100%;object-fit:cover}
.ad-tag{position:absolute;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:.68rem;padding:2px 8px;border-radius:99px}
.ad-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:5px}
.ad-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.6)}.ad-dots i.on{background:#fff;width:18px}
.s-slider{z-index:0;isolation:isolate}.s-intro .intro-top{position:relative;z-index:2}
/* ท้ายร้าน: ข้อมูลร้าน + โฆษณา (ร้านฟรี) อยู่แถวเดียวกัน */
.s-foot-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.s-foot-info{flex:1;min-width:220px}
.s-foot-row:not(.has-ad){align-items:flex-start}
.s-foot-ad{flex:0 1 520px;min-width:260px}
.s-foot-ad .ad-slot{border-radius:12px}
@media(max-width:640px){.s-foot-ad{flex:1 1 100%;min-width:0}}

/* ===== เมนูอัตโนมัติ: รีวิวลูกค้า / ติดต่อเรา ===== */
.pg-intro{margin-bottom:18px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.req{color:#dc2626}
.stars{display:inline-flex;gap:1px;color:#e7e5e4;font-size:1rem;line-height:1;letter-spacing:0}
.stars i{font-style:normal}.stars i.on{color:#f59e0b}
.stars.lg{font-size:1.5rem}
.rv-sum,.rv-list,.rv-form,.sc-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3.5vw,28px);margin-bottom:18px}
.rv-sum{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.rv-score{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:130px}
.rv-score b{font-size:3rem;line-height:1;font-weight:800}
.rv-score span{color:var(--muted);font-size:.88rem}
.rv-bars{display:flex;flex-direction:column;gap:6px}
.rv-bar{display:grid;grid-template-columns:36px 1fr 30px;gap:8px;align-items:center;font-size:.85rem;color:var(--muted)}
.rv-bar i{height:9px;border-radius:99px;background:#f5f5f4;overflow:hidden;display:block}
.rv-bar em{display:block;height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:99px}
.rv-empty{text-align:center;color:var(--muted);padding:20px 0}.rv-empty div{font-size:2.4rem}
.rv-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #f5f5f4}
.rv-item:first-child{padding-top:0}.rv-item:last-of-type{border-bottom:0}
.rv-ava{flex:none;width:44px;height:44px;border-radius:99px;display:grid;place-items:center;font-weight:700;font-size:1.1rem;color:hsl(var(--h),50%,35%);background:hsl(var(--h),70%,92%)}
.rv-main{flex:1;min-width:0}
.rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.rv-head time{color:var(--muted);font-size:.8rem;margin-left:auto}
.rv-main p{margin:6px 0 0;line-height:1.75;overflow-wrap:anywhere}
.rv-reply{margin-top:10px;background:#f5f5f4;border-left:3px solid var(--brand);border-radius:0 12px 12px 0;padding:10px 14px;font-size:.93rem}
.rv-reply b{font-size:.85rem;color:var(--brand)}.rv-reply p{margin:4px 0 0}
.rv-pager{display:flex;gap:6px;justify-content:center;margin-top:14px}
.rv-pager a{min-width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.rv-pager a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.rv-form h2,.sc-box h2{font-size:1.2rem}
.rv-pick{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:2px}
.rv-pick input{position:absolute;opacity:0;pointer-events:none}
.rv-pick label{font-size:2.2rem;line-height:1;color:#e7e5e4;cursor:pointer;transition:transform .1s,color .1s;margin:0}
.rv-pick label:hover,.rv-pick label:hover~label,.rv-pick input:checked~label{color:#f59e0b}
.rv-pick label:active{transform:scale(1.2)}
.rv-pick input:focus-visible+label{outline:2px solid var(--brand);border-radius:6px}
.rv-pick-txt{order:-1;margin-left:12px;font-weight:600;color:var(--muted);font-size:.9rem}
.rv-thanks,.sc-sent{text-align:center;padding:10px 0}.rv-thanks div,.sc-sent div{font-size:2.8rem}
.sc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.sc-card{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;color:var(--ink);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.sc-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(0,0,0,.35)}
.sc-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.sc-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:var(--cb);margin-bottom:6px}
.sc-val{font-weight:700;color:var(--c);overflow-wrap:anywhere}
.sc-go{margin-top:8px;font-weight:700;font-size:.85rem;color:var(--c)}
.sc-line{--c:#06c755;--cb:#dcfce7}.sc-phone{--c:#2563eb;--cb:#dbeafe}.sc-map{--c:#ea580c;--cb:#ffedd5}.sc-fb{--c:#1877f2;--cb:#dbeafe}
.sc-main{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.sc-main>*{min-width:0}
.sc-main .sc-box{margin-bottom:0}.sc-side{display:flex;flex-direction:column;gap:18px}
.sc-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-status{display:inline-flex;align-items:center;gap:8px;font-weight:700;background:#fef2f2;color:#b91c1c;padding:4px 12px;border-radius:99px;margin:0 0 10px;font-size:.9rem}
.sc-status i{width:8px;height:8px;border-radius:99px;background:currentColor}
.sc-status.on{background:#dcfce7;color:#15803d}
.sc-hours{list-style:none;margin:0;padding:0}
.sc-hours li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.sc-hours li:last-child{border-bottom:0}
.sc-hours li.today{font-weight:700;color:var(--brand)}
.sc-mapview{height:200px;border-radius:14px;overflow:hidden}
@media(max-width:760px){.rv-sum{grid-template-columns:1fr;text-align:center}.rv-write-btn{width:100%}.sc-main{grid-template-columns:1fr}.sc-2{grid-template-columns:1fr}}
.field .rv-pick label{display:inline-block;margin:0;font-weight:400}
.form-err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:.93rem}
.form-err ul{margin:6px 0 0;padding-left:20px}
/* แถบเจ้าของร้าน (เห็นเฉพาะเจ้าของที่ล็อกอินอยู่) */
.owner-bar{background:#0f172a;color:#e2e8f0;font-size:.85rem;position:relative;z-index:30}
.ob-in{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.ob-hi{margin-right:auto}
.ob-note{color:#94a3b8}
.owner-bar a{color:#fff;text-decoration:none;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.1);white-space:nowrap}
.owner-bar a:hover{background:rgba(255,255,255,.2)}
.ob-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ef4444;color:#fff;font-size:.72rem}
@media(max-width:600px){.ob-note,.ob-hide-m{display:none}.owner-bar{font-size:.8rem}.owner-bar a{padding:3px 8px}}
.s-owner-link{display:inline-block;margin-top:10px;font-size:.78rem;color:var(--muted,#64748b)!important;opacity:.75;text-decoration:none}
.s-owner-link:hover{opacity:1;text-decoration:underline}
/* ===== แบนเนอร์ร้าน (พรีเมียม) ===== */
.s-banner{position:relative;aspect-ratio:var(--ratio,4)/1;border-radius:16px;overflow:hidden;background:#f1f5f9;box-shadow:0 10px 30px -14px rgba(15,23,42,.35);isolation:isolate}
.s-banner-mid{margin:8px 0 32px}
.s-banner .ss-slide img{transform:none!important}
.s-banner a.ss-slide{transition:opacity .8s ease,filter .2s}
.s-banner a.ss-slide:hover{filter:brightness(1.04)}
.s-banner .ss-nav{width:34px;height:34px;font-size:1.3rem}
.s-banner .ss-dots{bottom:8px}
.plan-managed .s-banner{box-shadow:0 0 0 1.5px #e9c46a,0 10px 30px -14px rgba(184,134,11,.5)}
.plan-managed .s-banner.s-slider::before{display:none}
.s-foot-ad .s-banner{border-radius:12px}
@media(max-width:640px){.s-banner{border-radius:12px}.s-banner-mid{margin:4px 0 24px}}
.s-banner .ss-dots,.cover-tall .s-banner .ss-dots{top:auto;bottom:8px}
