/* ===== A1v5 order system · skin for florist templates (Dev 3, 10.11.26) =====
   Markup and scripts come verbatim from the built A1v5 page (see extract_a1v5.py). Only the look is set here.
   A template sets the --a1-* variables. Thai rules: Anuphan first, no letter-spacing, no italics, no weight above 500. */
:root{
  --a1-ink:#1c1a18; --a1-paper:#fff; --a1-soft:#f6f3ee; --a1-mut:#6e6961; --a1-line:rgba(28,26,24,.16);
  --a1-acc:#b59f7a; --a1-go:#1c1a18; --a1-go-t:#fff; --a1-rad:0px;
  --a1-font:'Anuphan',system-ui,-apple-system,'Segoe UI',sans-serif;
  --a1-chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5.6' r='4.2'/%3E%3Ccircle cx='18.1' cy='10' r='4.2'/%3E%3Ccircle cx='15.8' cy='17.2' r='4.2'/%3E%3Ccircle cx='8.2' cy='17.2' r='4.2'/%3E%3Ccircle cx='5.9' cy='10' r='4.2'/%3E%3C/svg%3E");   /* five-petal flower on the chosen filter pill */
}
/* --- budget block --- */
#budget .a1grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
#budget .a1ctl,#card{min-width:0}
#budget .a1h{margin:0;font:300 clamp(30px,8.4vw,46px)/1.25 var(--a1-font);color:var(--a1-ink)}
#budget .amt{margin:14px 0 6px;font:200 clamp(64px,19vw,104px)/1.05 var(--a1-font);color:var(--a1-ink);font-variant-numeric:tabular-nums}
#budget .amt small{font:300 18px/1 var(--a1-font);color:var(--a1-mut)}
#rg{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;touch-action:pan-y;
  background:linear-gradient(90deg,var(--a1-ink) var(--p,40%),var(--a1-line) var(--p,40%)) center/100% 2px no-repeat}
#rg::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--a1-ink);background:var(--a1-acc);box-shadow:inset 0 0 0 10px var(--a1-paper);cursor:pointer}
#rg::-moz-range-thumb{width:28px;height:28px;border-radius:50%;border:1px solid var(--a1-ink);background:var(--a1-acc);box-shadow:inset 0 0 0 10px var(--a1-paper);cursor:pointer}
#rg::-moz-range-track{background:transparent}
#rg:focus-visible{outline:0}
#rg:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 0 0 10px var(--a1-paper),0 0 0 4px rgba(0,0,0,.12)}
#ticks{display:flex;justify-content:space-between;margin-top:2px;font:300 12.5px/1.5 var(--a1-font);color:var(--a1-mut)}
#ochint{display:inline-block;margin-top:22px;font:400 13.5px/1.5 var(--a1-font);color:var(--a1-ink);animation:a1ob 1s ease-in-out 4 .4s}
#ochint[hidden]{display:none}
@keyframes a1ob{50%{transform:translateY(-4px)}}
/* category / occasion filter (Owen 10.11.26: "ไม่เอาสี่เหลี่ยมตื้อๆ", make it cute like the Budget slider's own chips).
   Soft pills; the chosen one fills, pops and gets a small flower in the theme's accent colour; they wiggle on load as in A1v5.
   Wreath / funeral sites: put data-calm on the budget section for the same pills without the flower, pop and tilt. */
#chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#chips button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 17px;border:1px solid var(--a1-chip-line,var(--a1-line));border-radius:999px;background:var(--a1-chip-bg,var(--a1-paper));color:var(--a1-chip-t,var(--a1-ink));font:400 14px/1.4 var(--a1-font);cursor:pointer;box-shadow:0 2px 0 var(--a1-chip-shade,rgba(0,0,0,.07));transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
#chips button::before{content:"";flex:none;width:0;height:14px;margin-right:0;background:var(--a1-chip-icon-c,var(--a1-acc));opacity:0;transition:width .22s cubic-bezier(.3,1.6,.5,1),margin-right .22s,opacity .2s;-webkit-mask:var(--a1-chip-icon) center/14px 14px no-repeat;mask:var(--a1-chip-icon) center/14px 14px no-repeat}
#chips button.on{background:var(--a1-chip-on,var(--a1-ink));border-color:var(--a1-chip-on,var(--a1-ink));color:var(--a1-chip-on-t,var(--a1-paper));box-shadow:0 2px 0 transparent}
#chips button.on::before{width:14px;margin-right:7px;opacity:1}
#chips button:active{transform:scale(.94)}
@media (hover:hover){#chips button:not(.on):hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--a1-chip-shade,rgba(0,0,0,.07))}}
#chips.wig button{animation:a1wig .9s ease-in-out 2 both}
#chips.wig button:nth-child(2){animation-delay:.12s}#chips.wig button:nth-child(3){animation-delay:.24s}#chips.wig button:nth-child(4){animation-delay:.36s}#chips.wig button:nth-child(5){animation-delay:.48s}
#chips button.on{animation:a1pop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes a1wig{0%,100%{transform:none}15%{transform:translateY(-6px) rotate(-6deg) scale(1.06)}30%{transform:rotate(5deg)}45%{transform:translateY(-3px) rotate(-4deg)}60%{transform:rotate(3deg)}75%{transform:rotate(-1deg)}}
@keyframes a1pop{0%{transform:scale(.9)}60%{transform:scale(1.07)}100%{transform:none}}
#budget[data-calm] #chips button::before{display:none}
#budget[data-calm] #chips button.on{animation:none}
#budget[data-calm] #chips.wig button{animation-name:a1wigc}
@keyframes a1wigc{0%,100%{transform:none}20%{transform:translateY(-5px)}45%{transform:none}65%{transform:translateY(-2px)}}
/* --- the card --- */
#card{position:relative;background:var(--a1-paper);border:1px solid var(--a1-line);border-radius:var(--a1-rad);padding:12px}
#card.none>*{display:none!important}          /* empty category: only the "หมวดนี้ยังไม่มีสินค้า" note shows (found by the M port, 10.11.26) */
#card .empty-cat{display:none;margin:0;padding:44px 10px;text-align:center;font:400 16px/1.5 var(--a1-font)}
#card.none>.empty-cat{display:block!important}
#card .empty-cat small{display:block;margin-top:4px;font:300 13.5px/1.5 var(--a1-font);color:var(--a1-mut)}
#card .empty-shop{margin:0;padding:30px 10px;text-align:center;font:400 15px/1.5 var(--a1-font)}
#fit{position:absolute;z-index:2;top:22px;left:22px;padding:6px 11px;border-radius:var(--a1-rad);background:var(--a1-ink);color:var(--a1-paper);font:400 12.5px/1.4 var(--a1-font)}
#fit.over{background:var(--a1-acc);color:var(--a1-ink)}
#bdg{position:absolute;z-index:2;top:22px;right:22px;left:auto;max-width:calc(100% - 190px);padding:6px 11px;border-radius:var(--a1-rad);background:var(--a1-paper);color:var(--a1-ink);font:400 12.5px/1.4 var(--a1-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bdg:empty{display:none}
#gal{position:relative;overflow:hidden;background:var(--a1-soft);border-radius:var(--a1-rad)}
#gtrack{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#gtrack::-webkit-scrollbar{display:none}
#gtrack .ph{position:static;flex:0 0 100%;min-width:0;width:100%;max-width:none;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--a1-soft);border-radius:0;scroll-snap-align:start;cursor:zoom-in}
#gdots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
#gdots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:width .2s}
#gdots i.on{background:#fff;width:16px}
#gal .garr{display:none;position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--a1-ink);font:300 22px/1 var(--a1-font);cursor:pointer}
#gal .garr.l{left:10px}#gal .garr.r{right:10px}
@media (hover:hover) and (pointer:fine){#gal.multi .garr{display:block}}
#card .row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 4px 2px}
#nm{min-width:0;font:400 19px/1.4 var(--a1-font);overflow-wrap:anywhere;cursor:pointer}
#card .pr{display:block;margin:0;font:400 19px/1.4 var(--a1-font);color:var(--a1-ink);white-space:nowrap;text-align:right}
#was{display:block;font:300 13px/1.3 var(--a1-font);color:var(--a1-mut);text-decoration:line-through}
#was:empty{display:none}
#ds{display:block;padding:0 4px;font:300 13.5px/1.6 var(--a1-font);color:var(--a1-mut)}
#more{display:inline-flex;align-items:center;min-height:40px;margin:2px 4px 0;padding:0;border:0;background:none;color:var(--a1-ink);font:400 13.5px/1.4 var(--a1-font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#altw{position:relative;margin-top:8px}
#alt{display:flex;gap:8px;padding:2px 4px 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
#alt::-webkit-scrollbar{display:none}
#alt button{flex:none;scroll-snap-align:start;width:56px;height:56px;padding:0;border:0;border-radius:var(--a1-rad);background:none;overflow:hidden;cursor:pointer;opacity:.7}
#alt button.on{opacity:1;outline:2px solid var(--a1-ink);outline-offset:-2px}
#alt img{width:100%;height:100%;object-fit:cover;display:block}
#alt span{align-self:center;font:300 13px/1.5 var(--a1-font);color:var(--a1-mut)}
#altw .ar{display:none;position:absolute;top:31px;transform:translateY(-50%);z-index:2;width:32px;height:32px;padding:0;border:1px solid var(--a1-line);border-radius:50%;background:var(--a1-paper);color:var(--a1-ink);font:300 18px/1 var(--a1-font);cursor:pointer}
#altw .ar.l{left:0}#altw .ar.r{right:0}
#altw.ax-more .ar.r{display:block}#altw.ax-more.ax-mid .ar.l,#altw.ax-more.ax-end .ar.l{display:block}#altw.ax-more.ax-end .ar.r{display:none}
#hintx{display:none;margin:2px 4px 0;font:300 12.5px/1.5 var(--a1-font);color:var(--a1-mut)}
#altw.ax-more #hintx{display:block}
#card .go{display:flex;gap:8px;margin-top:14px}
#card .go button{flex:1;min-width:0;min-height:48px;padding:12px 8px;border:1px solid var(--a1-ink);border-radius:var(--a1-rad);background:transparent;color:var(--a1-ink);font:400 14.5px/1.4 var(--a1-font);text-align:center;cursor:pointer}
#card .go button.l{background:var(--a1-go);border-color:var(--a1-go);color:var(--a1-go-t)}
/* --- fee check button (LINE MAN / Grab) --- */
#feeb{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-soft);color:var(--a1-ink);font:400 14.5px/1.4 var(--a1-font);text-align:left;cursor:pointer}
#feeb[hidden]{display:none}
#feeb .ft,#feeb .fi,#feeb .fh,#feeb .fc,#feeb .fa,#cst .ci,#cst .ct,#cst .ca{position:static;margin:0;padding:0;border:0;background:none;color:inherit}   /* short A1v5 class names: drop whatever a template rule of the same name brings */
#feeb .fi{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--a1-paper);font-size:18px;line-height:1}
#feeb .ft{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#feeb .ft b{font:400 14.5px/1.4 var(--a1-font)}
#feeb .fh{display:block;font:300 12.5px/1.45 var(--a1-font);color:var(--a1-mut)}
#feeb .fc{display:flex;gap:6px;flex-wrap:wrap}
#feeb .fc i{padding:4px 7px;border:1px solid var(--a1-line);background:var(--a1-paper);color:var(--a1-mut);font:400 11px/1 var(--a1-font);font-style:normal}
#feeb .fnew{display:none}
#feeb .fa{display:block;flex:none;font:300 20px/1 var(--a1-font);color:var(--a1-mut)}
/* --- custom order card + chat link under the block --- */
#end{margin-top:28px;text-align:center}
#end[hidden]{display:none}
#cst{display:flex;align-items:center;gap:12px;width:100%;max-width:520px;margin:0 auto;padding:13px 14px;border:1px dashed var(--a1-ink);border-radius:var(--a1-rad);background:transparent;color:var(--a1-ink);font:300 15px/1.5 var(--a1-font);text-align:left;cursor:pointer}
#cst[hidden]{display:none}
#cst .ci{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--a1-paper);font-size:17px;line-height:1}
#cst .ct{flex:1;min-width:0}
#cst b{display:block;font:400 15px/1.4 var(--a1-font);overflow-wrap:anywhere}
#cst small{display:block;margin-top:1px;font:300 13px/1.5 var(--a1-font);color:var(--a1-mut);overflow-wrap:anywhere}
#cst small[hidden]{display:none}
#cst .ca{flex:none;font:400 14px/1.4 var(--a1-font);white-space:nowrap}
#end [data-chat]{min-height:44px;padding:10px 0 4px;border:0;border-bottom:1px solid var(--a1-ink);border-radius:0;background:none;color:var(--a1-ink);font:400 14px/1.4 var(--a1-font);cursor:pointer}
#end .cst:not([hidden])~[data-chat]{display:none}
@media (min-width:900px){
  #budget .a1grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
  #budget .a1ctl{position:sticky;top:96px}
  #card{width:100%;max-width:470px;justify-self:end;padding:14px}
  #budget .amt{font-size:112px}
  #nm,#card .pr{font-size:21px}
}
#chips button,#gal .garr,#altw .ar,.ak-x,.ak-qty button,.ak-seg button,.ak-link,.fee-x,.fee-km-c button{text-align:center}          /* templates that reset button text-align */
/* --- floating bag button, toast --- */
.ak-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 18px;background:var(--a1-ink);color:var(--a1-paper);font:400 14.5px/1.3 var(--a1-font);cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.ak-fab b{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--a1-acc);color:var(--a1-ink);display:grid;place-items:center;font:500 12.5px/1 var(--a1-font)}
.ak-fab.bump{animation:akbump .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes akbump{40%{transform:scale(1.1)}}
.ak-back{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;border:1px solid var(--a1-line);border-radius:999px;padding:11px 16px;background:rgba(255,255,255,.94);color:var(--a1-ink);text-decoration:none;font:400 13.5px/1.3 var(--a1-font);box-shadow:0 8px 20px -12px rgba(0,0,0,.4)}
.ak-fab,.ak-back{transition:opacity .3s,transform .3s}
body:not(.ak-show) .ak-fab,body:not(.ak-show) .ak-back{opacity:0;transform:translateY(16px);pointer-events:none}
.ak-toast{position:fixed;left:50%;top:18px;z-index:95;transform:translate(-50%,-20px);opacity:0;pointer-events:none;transition:.25s;width:max-content;max-width:calc(100% - 40px);padding:12px 18px;border-radius:var(--a1-rad);background:var(--a1-ink);color:var(--a1-paper);font:400 14px/1.5 var(--a1-font);text-align:center;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.ak-toast.on{opacity:1;transform:translate(-50%,0)}
/* --- bag drawer + order form + LINE message preview --- */
.ak-scrim{position:fixed;inset:0;z-index:90;background:rgba(20,16,12,.45);opacity:0;transition:opacity .25s}
.ak-scrim.on{opacity:1}
.ak-drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(440px,100%);display:flex;flex-direction:column;background:var(--a1-paper);color:var(--a1-ink);font:300 15px/1.6 var(--a1-font);transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.8,.3,1);overscroll-behavior:contain}
.ak-drawer.on{transform:none}
.ak-drawer[hidden],.ak-scrim[hidden]{display:none}
.ak-head{display:flex;justify-content:space-between;align-items:center;padding:22px 20px 14px;border-bottom:1px solid var(--a1-line)}
.ak-head h2{margin:0;font:300 22px/1.3 var(--a1-font)}
.ak-x{width:40px;height:40px;padding:0;border:1px solid var(--a1-line);border-radius:50%;background:none;color:inherit;font:300 22px/1 var(--a1-font);cursor:pointer}
.ak-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 20px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ak-foot{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--a1-line)}
.ak-foot[hidden]{display:none}
.ak-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--a1-line)}
.ak-item img{width:64px;height:80px;object-fit:cover;border-radius:var(--a1-rad)}
.ak-item b{display:block;font:400 14.5px/1.4 var(--a1-font);overflow-wrap:anywhere}
.ak-item small{font:300 13px/1.5 var(--a1-font);color:var(--a1-mut)}
.ak-qty{display:flex;align-items:center;gap:6px}
.ak-qty button{width:34px;height:34px;padding:0;border:1px solid var(--a1-line);border-radius:50%;background:var(--a1-paper);color:inherit;font:300 16px/1 var(--a1-font);cursor:pointer;touch-action:manipulation}
.ak-qty button:disabled{opacity:.35}
.ak-qty span{min-width:18px;text-align:center;font:400 14px/1 var(--a1-font)}
.ak-opts{display:grid;gap:14px;margin-top:18px}
.ak-opts label{display:grid;gap:5px;min-width:0;font:400 13px/1.4 var(--a1-font)}
.ak-opts .ak-shiphint{display:block;padding:8px 10px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-soft);color:var(--a1-ink);font:300 12.5px/1.55 var(--a1-font);overflow-wrap:anywhere}
.ak-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ak-seg button{min-height:46px;padding:10px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-paper);color:inherit;font:300 15px/1.4 var(--a1-font);cursor:pointer}
.ak-seg button[aria-pressed="true"]{background:var(--a1-ink);border-color:var(--a1-ink);color:var(--a1-paper);font-weight:400}
.ak-opts input,.ak-opts textarea{width:100%;min-width:0;box-sizing:border-box;margin:0;padding:11px 12px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-paper);color:inherit;font:300 16px/1.5 var(--a1-font)}
.ak-opts input[type="date"]{-webkit-appearance:none;appearance:none;min-width:0;display:block;min-height:46px}
.ak-opts input:focus,.ak-opts textarea:focus{outline:1px solid var(--a1-ink);outline-offset:0}
.ak-total{display:flex;justify-content:space-between;padding:4px 0;font:400 17px/1.4 var(--a1-font)}
.ak-btn{display:block;width:100%;box-sizing:border-box;min-height:50px;padding:14px;border:1px solid var(--a1-ink);border-radius:var(--a1-rad);background:var(--a1-ink);color:var(--a1-paper);font:400 15px/1.4 var(--a1-font);text-align:center;text-decoration:none;cursor:pointer}
.ak-btn--line{background:var(--a1-go);border-color:var(--a1-go);color:var(--a1-go-t)}
.ak-ship{margin:10px 0 4px;padding:12px 14px;border:1px solid var(--a1-acc);border-radius:var(--a1-rad);background:var(--a1-soft);font:400 14px/1.65 var(--a1-font);overflow-wrap:anywhere}
.ak-feeq{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-soft);color:var(--a1-ink);font:400 13.5px/1.6 var(--a1-font)}
.ak-link{min-height:40px;padding:8px;border:0;background:none;color:inherit;font:400 14px/1.4 var(--a1-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ak-pre{margin:8px 0 12px;padding:14px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-soft);font:300 14px/1.7 var(--a1-font);white-space:pre-wrap;overflow-wrap:anywhere}
.ak-note{margin:0;font:300 13px/1.6 var(--a1-font);color:var(--a1-mut)}
.ak-drawer .nw{display:inline!important;white-space:nowrap}
.ak-empty{padding:40px 8px;text-align:center}
.ak-empty p{margin:0 0 14px;font:400 17px/1.5 var(--a1-font)}
/* --- fee check sheet --- */
.feesh{position:fixed;inset:0;z-index:85;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,16,12,.45)}
.feesh[hidden]{display:none}
.feesh-b{width:100%;max-width:480px;max-height:92vh;overflow:auto;padding:20px 20px calc(22px + env(safe-area-inset-bottom));border-radius:var(--a1-rad);background:var(--a1-paper);color:var(--a1-ink);font:300 15px/1.6 var(--a1-font)}
@media (min-width:700px){.feesh{align-items:center}}
.fee-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fee-h h3{margin:0;font:300 21px/1.3 var(--a1-font)}
.fee-x{width:40px;height:40px;padding:0;border:1px solid var(--a1-line);border-radius:50%;background:none;color:var(--a1-ink);font:300 16px/1 var(--a1-font);cursor:pointer}
.fee-from{margin:4px 0 14px;font:300 13.5px/1.55 var(--a1-font);color:var(--a1-mut)}
.fee-loc{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:13px;border:1px solid var(--a1-ink);border-radius:var(--a1-rad);background:var(--a1-ink);color:var(--a1-paper);font:400 15px/1.4 var(--a1-font);cursor:pointer}
.fee-or{margin:16px 2px 8px;font:400 13px/1.5 var(--a1-font);color:var(--a1-mut)}
.fee-km-c{display:flex;flex-wrap:wrap;gap:8px}
.fee-km-c button{min-height:40px;padding:8px 14px;border:1px solid var(--a1-line);border-radius:var(--a1-rad);background:var(--a1-paper);color:var(--a1-ink);font:300 14px/1.4 var(--a1-font);cursor:pointer}
.fee-km-c button[aria-pressed="true"]{background:var(--a1-ink);border-color:var(--a1-ink);color:var(--a1-paper)}
.fee-msg{margin:10px 2px 0;font:400 13.5px/1.55 var(--a1-font);color:#a23b2d}
.fee-msg.ok{color:var(--a1-mut)}
.fee-msg:empty{display:none}
.fee-out{margin-top:14px}
.fee-km{margin:0 0 10px;font:300 14.5px/1.5 var(--a1-font)}
.fee-km b{font-weight:500;font-size:17px}
.fee-km small{display:block;font-size:12.5px;color:var(--a1-mut)}
.fee-r{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;padding:13px 14px;border-radius:var(--a1-rad);background:var(--a1-soft);font:400 15px/1.4 var(--a1-font)}
.fee-r span{display:flex;align-items:center;gap:8px}
.fee-r i{display:inline-block;width:10px;height:10px;border-radius:50%}
.fee-r i.lm{background:#00b900}.fee-r i.gr{background:#00a5cf}
.fee-r b{font-weight:500;font-size:15.5px;white-space:nowrap}
.fee-note{margin:6px 2px 14px;font:300 12.5px/1.6 var(--a1-font);color:var(--a1-mut)}
@media (prefers-reduced-motion:reduce){#ochint,#chips.wig button,#chips button.on,.ak-fab.bump{animation:none}.ak-drawer,.ak-scrim,.ak-toast{transition:none}}
/* ===== end A1v5 skin ===== */

/* ---- เนรมิตพวงหรีด · A1v5 skin variables + fit (11.11.26) ---- */
:root{--a1-ink:var(--ink);--a1-paper:#fff;--a1-soft:var(--greige);--a1-mut:var(--mid);--a1-line:var(--line);--a1-acc:var(--gold);--a1-go:var(--wine);--a1-go-t:#fff;--a1-rad:0px;--a1-font:var(--font)}
#budget{scroll-margin-top:96px}
.page-head+#budget{padding-top:0}
.nw{white-space:nowrap}
#budget .lab{margin-bottom:18px}
#budget .a1h{font-weight:600;color:var(--wine)}
#budget .amt{font-weight:600;color:var(--wine)}
#budget .amt small{font-weight:400;color:var(--mid)}
/* 12.11.26 evening, Owen: the Budget slider follows the latest A2 (A2v1 #a2look in florist-templates/A2v1/build_a2v1.py):
   Noto Sans Thai 800 heading, Inter 900 amount, thick track + big ring thumb. Neramit colours: ink + wine. LINE button stays LINE green. */
html{--a2-ink:var(--ink);--a2-acc:var(--wine);--a2-line:var(--line);--a2-mut:var(--mid);--a2-th:"Noto Sans Thai",system-ui,sans-serif;--a2-num:"Inter",system-ui,sans-serif}
html #budget .a1h{font-family:var(--a2-th);font-weight:800;line-height:1.1;color:var(--a2-acc)}
html #budget .amt{font-family:var(--a2-num);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--a2-acc)}
html #budget .amt small{font-family:var(--a2-th);font-weight:700;font-size:22px;letter-spacing:0;color:var(--a2-ink)}
html #budget #rg{height:14px;margin:16px 0 4px;border-radius:14px;background:linear-gradient(90deg,var(--a2-acc) var(--p,40%),var(--a2-line) var(--p,40%))}
html #budget #rg::-webkit-slider-thumb{width:38px;height:38px;border-radius:50%;border:6px solid var(--a2-acc);background:#fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.35)}
html #budget #rg::-moz-range-thumb{width:28px;height:28px;border-radius:50%;border:6px solid var(--a2-acc);background:#fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.35)}
html #budget #rg:focus-visible::-webkit-slider-thumb{box-shadow:0 6px 14px -4px rgba(0,0,0,.35),0 0 0 4px rgba(0,0,0,.12)}
html #budget #ticks{margin-top:10px;font:600 13px/1.5 var(--a2-num);color:var(--a2-mut)}
html #budget #ochint{font:700 14px/1.5 var(--a2-th);color:var(--a2-acc)}
html #budget #chips button{font-family:var(--a2-th);font-weight:600}
html #budget #fit{font-family:var(--a2-th);font-weight:700}
html #budget #bdg{font-family:var(--a2-th);font-weight:700;color:var(--a2-ink)}
html #budget #nm{font-family:var(--a2-th);font-weight:800;color:var(--a2-ink)}
html #budget #card .pr{font-family:var(--a2-num);font-weight:900;color:var(--a2-acc)}
html #budget #was{font-family:var(--a2-num);font-weight:600}
html #budget #more{font-family:var(--a2-th);font-weight:700;color:var(--a2-acc)}
html #budget #card .go button{font-family:var(--a2-th);font-weight:700}
.bag-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:400 14px/1 var(--font);cursor:pointer}
.bag-btn span{min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--wine);color:#fff;display:grid;place-items:center;font-size:12px}
.hd .right{gap:14px}
.has-mbar .ak-fab{bottom:calc(80px + env(safe-area-inset-bottom))}
.szfig{margin:18px 0 4px}
.szfig-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:end;padding:14px 14px 10px;background:var(--greige)}
.szfig-in svg{width:100%;height:auto;display:block;max-height:240px}
#ladder{display:block;scroll-margin-top:96px}
/* never crop a product photo (CLAUDE.md rule 14): whole wreath, letterboxed */
#gtrack .ph,#alt img,.ak-item img{object-fit:contain!important;background:var(--greige)!important}
.szfig-in .t{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.szfig-in .t b{font-weight:500}
.szfig-in .t small{display:inline-block;color:var(--mid);font-size:12.5px;line-height:1.5;margin-top:6px}
.sheet .szfig-in{margin-top:20px}
.sh-go{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.sh-go .btn{width:100%;padding:0 10px}
.sh-note{font-size:13.5px;margin:10px 0 0}
/* LINE green + logo on every LINE button of the A1v5 block (Owen 11.11.26 HARD RULE); ids, not .ak-btn--line ("ถัดไป" shares it) */
#card .go button#lineone,#line-go,#end [data-chat],#cst{background:#06C755!important;border-color:#06C755!important;color:#fff!important}
#card .go button#lineone,#line-go,#end [data-chat]{display:flex;align-items:center;justify-content:center;gap:8px}
#card .go button#lineone:hover,#line-go:hover,#end [data-chat]:hover,#cst:hover{background:#05a648!important}
#cst b,#cst small,#cst .ca{color:#fff!important}
#cst .ci .lnw{width:28px;height:26px}
.lineico{display:inline-block;width:20px;height:20px;flex:none;vertical-align:-4px}
.lineico svg{display:block;width:100%;height:100%}
#cst .ci svg{display:block;width:30px;height:30px}
.szfig-in svg image{image-rendering:auto}
body:has(.sheet.open) .ak-fab{opacity:0;pointer-events:none}   /* the floating bag must not cover the sheet's own buttons */
@media (max-width:699px){.bag-btn{height:36px;padding:0 9px;font-size:13.5px}.hd .bag-btn~.line-link{display:none}}   /* phone: the bottom bar already has สั่งทาง LINE */
/* ---- KANTIMA master design (12.11.26 night, via Dev team) ---- */
/* no "ไม่เจอแบบที่ใช่ในงบ?" LINE box under the slider (KANTIMA "ตัดด้วย"): the shop zone is shorter on phones */
#budget #end{display:none!important}
/* band under the home slider that leads to the Shop page: wine card, 4 whole photos, gold button, calm breathing glow.
   Square corners like the rest of Neramit (design G); phones: under the slider; desktop: in the slider's left column */
.nr-shopcta{padding:0 0 clamp(40px,5vw,72px)}
.kmc{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,34px) clamp(22px,3.2vw,40px);background:var(--wine);color:#f4ede4;text-decoration:none;animation:nrGlow 2.4s ease-in-out infinite;transition:transform .2s}
.kmc:hover{transform:translateY(-2px)}
/* 13.11.26 Owen: glow too faint ("จางๆแทบไม่เห็น") -> deeper amber from the site's gold, wider and faster pulse + a gold ring at the peak */
@keyframes nrGlow{0%,100%{box-shadow:0 20px 40px -26px rgba(61,20,31,.8),0 0 0 0 rgba(217,170,90,0),0 0 16px 2px rgba(196,138,52,.32)}50%{box-shadow:0 20px 40px -26px rgba(61,20,31,.8),0 0 0 4px rgba(217,170,90,.6),0 0 72px 24px rgba(196,138,52,.82)}}
.kmc-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.kmc-t small{font:600 13.5px/1.4 var(--font);color:#e2c9a2}
.kmc-t b{font:800 clamp(24px,2.6vw,34px)/1.2 var(--font);letter-spacing:-.01em;color:#fff}
.kmc-nw{white-space:nowrap}
.kmc-cats{font:400 14px/1.5 var(--font);color:rgba(244,237,228,.82)}
.kmc-th{display:flex;gap:10px}
.kmc-th i{display:block;width:clamp(64px,6.4vw,92px);aspect-ratio:4/5;background:#fff;overflow:hidden}
.kmc-th img{display:block;width:100%;height:100%;object-fit:contain!important;background:#fff}   /* whole wreath (CLAUDE.md rule 14) */
.kmc-go{display:inline-flex;align-items:center;gap:14px;min-height:58px;padding:0 10px 0 26px;background:#d9bd8c;color:var(--wine-d);font:800 18px/1 var(--font);white-space:nowrap;box-shadow:0 12px 24px -12px rgba(217,189,140,.8);transition:transform .15s}
.kmc:hover .kmc-go{transform:translateY(-1px)}
.kmc-go svg{box-sizing:border-box;width:38px;height:38px;padding:9px;background:var(--wine-d);fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:nrNudge 1.8s ease-in-out infinite}
@keyframes nrNudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(3px)}}
@media (max-width:860px){.kmc{grid-template-columns:1fr;gap:18px}.kmc-th{order:2}.kmc-go{order:3;justify-content:space-between;width:100%}.kmc-th i{flex:1;width:auto}}
.kmc--side{margin-top:32px;grid-template-columns:1fr auto;gap:18px 20px;padding:24px 26px;text-align:left}
.kmc--side .kmc-t{grid-column:1/-1}
.kmc--side .kmc-t b{font-size:26px}
.kmc--side .kmc-cats{font-size:13px}
.kmc--side .kmc-th i{width:62px}
/* 13.11.26 (Owen "ใส่ทุกเว็บ", KANTIMA fix): at 900-1279px the side band is narrower than thumbs + button (~511px) and the
   button stuck out of the box; the band sizes to its own width: under 540px thumbs and button take a full row each */
.kmc--side{container-type:inline-size;grid-template-columns:minmax(0,1fr) auto}
@container (max-width:540px){.kmc--side .kmc-th,.kmc--side .kmc-go{grid-column:1/-1}.kmc--side .kmc-go{width:100%;justify-content:space-between}.kmc--side .kmc-th i{flex:1;width:auto}}
@media (min-width:900px){.nr-shopcta{display:none}}
@media (max-width:899px){.kmc--side{display:none}}
@media (prefers-reduced-motion:reduce){.kmc,.kmc-go svg{animation:none}.kmc{box-shadow:0 20px 40px -26px rgba(61,20,31,.8),0 0 0 3px rgba(217,170,90,.5),0 0 48px 14px rgba(196,138,52,.6)}}