:root {
  --accent: var(--color-primary);
  --hover: var(--color-primary-hover);
  --yellow: var(--color-accent);
  --pink: var(--color-bg-page);
  --ink: var(--color-text-main);
  --muted: var(--color-text-secondary);
  --line: var(--border-color);
  --paper: var(--color-bg-card);
  --card: var(--color-bg-card);
  --tile: var(--color-bg-subtle);
  --sans: var(--font-ui);
  --digits: var(--font-price);
  color-scheme: light;
}
* { box-sizing:border-box }
html { scroll-padding-top:calc(var(--mast-height,108px) + 8px) }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased }
body:has(dialog[open]) { overflow:hidden }
button,input,select { font:inherit; color:inherit }
button,a,input,select { -webkit-tap-highlight-color:transparent }
a { color:inherit; text-decoration:none }
button { border:0; background:none; padding:0; cursor:pointer }
button:disabled { opacity:.45; cursor:not-allowed }
:focus-visible { outline:3px solid var(--hover); outline-offset:3px }
img,svg,picture { display:block }
[hidden] { display:none!important }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex:none }
[data-icon] svg { width:1.18em; height:1.18em }
h1,h2,h3,h4,p,figure { margin:0 }
.wrap { width:min(1280px,calc(100% - clamp(48px,8vw,136px))); margin-inline:auto }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip:focus { position:fixed; top:10px; left:12px; z-index:12; background:#fff; padding:12px }
.masthead { position:sticky; top:0; z-index:5; background:var(--color-pearl); border-bottom:1px solid #e4d2d7 }
.masthead::before { content:""; position:absolute; inset:auto 0 0; height:37px; background:#fbf1f2; pointer-events:none }
.head-inner { position:relative; display:grid; grid-template-columns:auto auto auto auto minmax(0,1fr) auto auto; grid-template-rows:66px 37px; align-items:center; gap:0 clamp(15px,1.8vw,28px) }
.brand { display:inline-flex; align-items:center; gap:9px; width:fit-content; grid-area:1/1/2/4 }
.brand-mark { width:38px; height:38px }
.wordmark { display:flex; align-items:center; gap:7px; line-height:1 }
.wordmark strong { color:var(--color-mulberry); font-size:25px; font-weight:720 }
.wordmark small { display:flex; flex-direction:column; gap:3px; font:650 10px/1 var(--sans); color:#675b61 }
.wordmark [lang="th"] { font-weight:500; font-size:11px }
.main-nav { display:contents }
.main-nav>a,.main-nav>.bag-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; width:max-content; font-size:14px; font-weight:520; white-space:nowrap }
.main-nav a:hover,.main-nav a[aria-current],.main-nav .bag-link:hover { color:var(--hover) }
.main-nav .mobile-label { display:none }
.bag-symbol { display:inline-flex; align-items:center; position:relative; font-size:17px }
#bag-count { margin-left:3px; min-width:16px; height:16px; padding:0 3px; background:var(--color-primary-light); color:var(--hover); border-radius:9px; text-align:center; font:700 11px/16px var(--digits) }
.goods-search { grid-area:1/4/2/6; display:flex; align-items:center; min-width:0; height:40px; padding:2px; background:white; border:1px solid #d8b9c5; border-radius:6px }
.goods-search:focus-within { border-color:var(--hover); outline:1px solid var(--hover) }
.goods-search #goods-query { border:0; outline:none; min-width:0; width:100%; min-height:32px; padding:0 10px; font-size:14px; background:transparent }
.goods-search button { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:34px; padding:0 11px; border-radius:4px; background:var(--hover); color:white; font-size:13px; font-weight:600; flex:none }
.goods-search button:hover { background:var(--color-brand-deep) }
.service-strip { grid-area:2/5/3/-1; display:flex; justify-content:flex-end; align-items:center; column-gap:17px; color:#685f63; font-size:12px }
.service-strip>a { display:inline-flex; align-items:center; gap:3px; color:var(--hover) }
.service-strip>span { white-space:nowrap }
@media(min-width:768px) {
  .main-nav [href="#home"] { grid-area:2/1 }
  .main-nav [href="#videos"] { grid-area:2/2 }
  .main-nav [href="#products"] { grid-area:2/3 }
  .main-nav [href="#visit"] { grid-area:2/4 }
  .main-nav [href="#orders"] { grid-area:1/6 }
  .main-nav .bag-link { grid-area:1/7 }
}
#main { min-height:60vh; outline:none }
.market-top { display:grid; grid-template-columns:1.38fr 1fr; align-items:stretch; gap:clamp(14px,1.5vw,24px); margin-top:22px }
.store-front { display:grid; grid-template-columns:36% minmax(0,1fr); overflow:hidden; border-radius:7px; background:var(--color-mulberry); color:var(--color-on-mulberry) }
.hero-image { display:block; position:relative; min-width:0; min-height:194px; background:#e7dbcf }
.hero-image picture,.hero-image img { position:absolute; inset:0; width:100%; height:100% }
.hero-image img { object-fit:cover; object-position:50% 5% }
.image-credit { position:absolute; bottom:4px; left:4px; color:white; background:#211c198a; padding:1px 4px; border-radius:2px; font-size:9px }
.store-copy { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; overflow:hidden; padding:18px clamp(17px,2.6vw,38px); border-left:2px solid var(--color-saffron) }
/* The two strokes follow the roof angle on the shop sign. */
.store-copy::after { content:""; position:absolute; inset:auto -2px -1px auto; z-index:-1; width:30%; height:63%; pointer-events:none; background:url('./assets/shop-eave.svg') right bottom / contain no-repeat }
.store-copy h1 { font-size:clamp(26px,2.6vw,37px); line-height:1.18; font-weight:680; letter-spacing:-.035em }
.store-road { margin-top:12px; font-size:16px; line-height:1.5 }
.store-road b { color:#ffda8e; font-weight:650; font-variant-numeric:tabular-nums }
.street-th { margin-top:3px; color:var(--color-on-mulberry-muted); font-size:14px; line-height:1.35 }
.store-route { display:inline-flex; align-items:center; gap:5px; min-height:38px; margin-top:9px; color:#ffe6ae; font-size:14px; font-weight:600 }
.store-route [data-icon="right"] { font-size:10px }
.store-route:focus-visible { outline-color:#ffe6ae }
.store-route:hover { color:white; text-decoration:underline; text-underline-offset:3px }
.photo-caption { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:5px 10px; border-radius:6px; color:var(--ink); background:#fffffff2; font-size:12px; font-weight:620 }
.video-section { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:16px clamp(14px,1.7vw,26px); background:var(--color-rose-paper); color:var(--color-mulberry); border-radius:7px }
.video-section h2 { font-size:21px; line-height:1.25; font-weight:650; margin-bottom:6px }
.video-grid { display:grid }
.video-card { min-width:0; display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid #e7cdd3 }
.video-card:last-child { border:0 }
.video-card:hover strong { color:var(--hover) }
.video-play { display:grid; place-items:center; flex:none; width:22px; height:22px; border:1px solid #b78096; border-radius:50%; background:#fffbf9; color:var(--color-mulberry) }
.video-play svg { width:9px; height:9px; margin-left:1px }
.video-copy { flex:1; min-width:0 }
.video-copy strong,.video-copy small { display:block }
.video-copy strong { font-size:15px; font-weight:580; line-height:1.45 }
.video-copy small { font-size:12px; color:#725463; line-height:1.5; text-overflow:ellipsis; overflow:hidden; white-space:nowrap }
.video-enter { color:#805166; font-size:12px }
.shelf { padding:27px 0 12px }
.shelf-head,.shelf-filters { display:flex; align-items:center; justify-content:space-between; gap:12px }
.shelf-titles { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 12px }
.shelf h2,.page-title { color:var(--color-mulberry); font-size:clamp(23px,2.1vw,30px); line-height:1.2; font-weight:680; letter-spacing:-.025em }
#result-count,.subtle,.shelf-note { font-size:12px; line-height:1.5; color:var(--muted) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1px solid transparent; border-radius:8px; padding:10px 16px; font-size:14px; font-weight:650; line-height:1.4; text-align:center }
.btn.primary { color:white; background:var(--hover) }
.btn.primary:hover,.btn.primary:active { filter:brightness(.92) }
.btn.outline { color:var(--ink); background:var(--paper); border-color:#cebec6 }
.btn.outline:hover { color:var(--hover); border-color:var(--hover) }
.btn.red { background:#a12345; color:white }
.btn.danger { border-color:#dbbdc6; color:#97233f }
.sort { position:relative; display:flex; align-items:center; flex:none }
.sort [data-icon] { position:absolute; left:10px; pointer-events:none; font-size:14px }
.sort #product-sort { border:0; border-radius:3px; background:#fff; padding:8px 7px 8px 31px; width:auto; min-height:40px; font-size:13px }
.shelf-filters { position:sticky; top:var(--mast-height,74px); z-index:3; padding-block:6px 10px; margin:4px 0 13px; background:white; border-bottom:1px solid #e9dbe0; flex-wrap:wrap; gap:6px }
.filters { display:flex; gap:6px; flex-wrap:wrap }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px 15px; border:1px solid var(--line); border-radius:22px; background:white; font-size:13px; font-weight:570; white-space:nowrap }
.pill.active { border-color:var(--hover); color:var(--hover); background:var(--color-primary-light) }
.pill:hover { color:var(--hover); border-color:var(--hover) }
.shelf-filters .pill { --tab-paper:var(--color-rose-paper); --tab-ink:var(--color-mulberry); min-height:40px; padding:6px 15px; gap:6px; border:0; border-radius:5px; background:var(--tab-paper); color:var(--tab-ink) }
.shelf-filters .pill[data-id="beauty"] { --tab-paper:var(--color-beauty-paper); --tab-ink:var(--color-beauty-ink) }
.shelf-filters .pill[data-id="herbal"] { --tab-paper:var(--color-herbal-paper); --tab-ink:var(--color-herbal-ink) }
.shelf-filters .pill[data-id="snacks"] { --tab-paper:var(--color-snacks-paper); --tab-ink:var(--color-snacks-ink) }
.shelf-filters .pill[data-id="gifts"] { --tab-paper:var(--color-gifts-paper); --tab-ink:var(--color-gifts-ink) }
.shelf-filters .pill:hover { box-shadow:inset 0 0 0 1px var(--tab-ink) }
.shelf-filters .pill.active { background:var(--tab-ink); color:white; font-weight:700; text-decoration:underline; text-underline-offset:4px }
.shelf-filters .pill:focus-visible { outline-offset:0 }
#result-count { overflow-wrap:anywhere }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 13px }
.product-grid>.empty { grid-column:1/-1 }
.product-card { min-width:0; display:flex; flex-direction:column; background:white }
.product-visual { display:block; aspect-ratio:1; width:100%; border-radius:5px; overflow:hidden; background:#f8f7f5 }
.product-visual picture,.product-visual img,.detail-pic picture,.detail-pic img,.mini-img picture,.mini-img img { width:100%; height:100%; object-fit:contain }
.product-visual img { transition:transform .2s }
.product-visual:hover img { transform:scale(1.025) }
.product-copy { display:flex; flex-direction:column; align-items:stretch; flex:1; padding:9px 2px 4px }
.product-title { font-size:14px; font-weight:500; line-height:22px; text-align:left }
.product-title:hover { color:var(--hover) }
.product-spec { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; margin-top:2px; font-size:12px; line-height:1.55; color:#6c6567 }
.product-spec>span { white-space:nowrap }
.price-row { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:7px }
.price { font:700 20px/22px var(--digits); letter-spacing:-.02em; color:var(--color-price); font-variant-numeric:tabular-nums }
.currency-symbol { font-size:16px; line-height:20px; letter-spacing:0 }
.price small { font:500 12px var(--sans); color:var(--muted); margin-inline:4px; letter-spacing:0 }
.add { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:5px; color:var(--hover) }
.add [data-icon] { width:28px; height:28px; background:var(--color-primary-light); border-radius:50% }
.add:hover [data-icon],.add:active [data-icon] { color:white; background:var(--hover); border-color:var(--hover) }
.add svg { width:15px; height:15px }
.footer { border-top:1px solid #e5cfd8; padding-block:8px; background:var(--color-pearl); color:var(--muted); font-size:12px }
.footer .wrap { display:flex; align-items:center; flex-wrap:wrap; gap:7px 20px; padding-block:16px }
.footer-brand { margin-right:auto; font-size:19px; color:var(--ink); font-weight:750 }
.footer-brand b { font:700 11px var(--digits) }
.footer a,.staff-link { display:inline-flex; align-items:center; gap:5px; min-height:40px }
.footer a:hover,.staff-link:hover { color:var(--hover); text-decoration:underline }
#private-demo-notice { width:100%; order:5 }

.page{padding-block:clamp(25px,4vw,64px);max-width:900px;margin-inline:auto}
.back-link{display:inline-flex;align-items:center;gap:5px;color:var(--muted);margin-bottom:14px;font-size:13px;min-height:34px}
.back-link:hover{color:var(--accent)}
.page-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:24px}
.page-intro p{font-size:14px;line-height:1.65;color:var(--muted);margin-top:8px}
.empty{background:#faf8f9;border:1px dashed #d7ced4;border-radius:9px;text-align:center;padding:35px 20px}
.empty>span[data-icon]{display:inline-grid;place-items:center;width:44px;height:44px;background:#fce8f3;color:var(--ink);border-radius:50%;font-size:23px;margin-bottom:11px}
.empty h3{font:800 21px/1.5 var(--sans)}
.empty p{margin:7px auto 15px;color:var(--muted);font-size:14px;line-height:1.65}
.lookup,.search-box{display:flex;gap:8px;align-items:center}
.lookup{margin:0 0 21px;max-width:480px}
input:not([type=radio]),select{border:1px solid #beb7bd;border-radius:5px;padding:10px;background:#fff;width:100%;min-width:0;min-height:43px}
.lookup .btn,.search-box .btn{flex:none}
.card-stack{display:grid;gap:14px}
.order{border:1px solid var(--line);background:var(--card);padding:clamp(15px,2vw,24px);border-radius:9px}
.order-head,.order-total,.mini,.staff-tools,.modal-actions,.order-actions,.cart-foot,.detail-price,.split{display:flex;align-items:center;justify-content:space-between;gap:12px}
.order-head h3{font:700 25px/1.25 var(--digits);color:var(--ink)}
.order-head small{display:block;color:var(--muted);font:500 12px/1.45 var(--sans);margin-bottom:2px}
.status{font-size:12px;font-weight:700;border-radius:5px;padding:4px 8px;color:#6c4a0f;background:#fff1cc;white-space:nowrap}
.status.ready,.status.paid,.status.completed{background:#fbe5f2;color:#912057}.status.cancelled{background:#efeded;color:#615e61}
.order-meta{display:flex;flex-wrap:wrap;gap:5px 15px;margin:12px 0;color:var(--muted);font-size:13px;line-height:1.6}
.order-items{list-style:none;padding:10px 0;margin:0;border-block:1px solid var(--line)}
.order-items li{display:flex;justify-content:space-between;gap:16px;font-size:14px;line-height:1.9}
.order-total{padding-top:11px;font-size:13px}
.order-total b{font:700 21px var(--digits);letter-spacing:-.02em;color:var(--color-price)}
.order-actions{justify-content:flex-end;flex-wrap:wrap;margin-top:13px}
.order-hint{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.65}
.staff-tools{margin-bottom:18px;align-items:flex-start;flex-wrap:wrap}.search-box{max-width:300px}
dialog{border:1px solid var(--line);padding:0;width:min(580px,calc(100% - 30px));max-height:min(90dvh,940px);border-radius:13px;background:var(--paper);color:var(--ink);box-shadow:0 22px 90px #2b162c33;overscroll-behavior:contain}
dialog::backdrop{background:#241a22b5}
.dialog-inner{padding:0 clamp(18px,3vw,30px) clamp(19px,2.5vw,29px)}
.dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 0 13px;background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:17px}
.dialog-head h2{font:650 24px/1.35 var(--sans);color:var(--ink)}
.icon-btn{flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:33px;height:33px}
.icon-btn:hover{background:#f6eaf1}
.detail-pic{position:relative;aspect-ratio:1.75/1;background:var(--tile);border-radius:8px;overflow:hidden;margin-bottom:13px}
.detail-pic img{object-fit:contain}
.detail-price{margin:5px 0 10px}
.detail-body{font-size:15px;line-height:1.75}
.modal-actions{justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.dialog-video{display:block;width:100%;max-height:42vh;background:var(--ink);border-radius:8px;aspect-ratio:16/9}
.dialog-subheading{display:flex;align-items:center;justify-content:space-between;margin-top:16px;margin-bottom:3px}
.dialog-subheading h3{font-size:18px;color:var(--ink)}
.mini{padding:12px 0;border-bottom:1px solid var(--line)}
.mini-img{width:65px;height:60px;border-radius:5px;overflow:hidden;flex:none;background:var(--tile)}
.mini-main{flex:1;min-width:0}
.mini-main strong{display:block;font-size:15px;line-height:1.5}
.mini-main p{color:var(--muted);font-size:12px;line-height:1.5;margin-top:2px}
.mini-main .line-price{color:var(--color-price);font-family:var(--digits);font-weight:700;letter-spacing:-.02em}
.qty{display:inline-flex;align-items:center;flex:none;border:1px solid #c9c2c6;border-radius:5px;background:var(--card);height:35px}
.qty button,.qty output{width:31px;display:grid;place-items:center;height:100%;font-size:14px}
.qty button svg{width:12px;height:12px}
.qty button:hover{background:#f6eaf1}.qty output{font-weight:700;width:22px}
.cart-foot{padding-top:15px;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{font-size:13px;font-weight:650}
.form-grid label>span{display:block;margin:0 0 6px}
.checkout-form{margin-top:19px;border-top:1px solid var(--line);padding-top:17px}
.checkout-form .btn{width:100%;margin-top:13px}
.note{font-size:13px;color:var(--muted);line-height:1.65;margin-top:9px}
.form-error{color:#a5223a;font-size:14px;line-height:1.6;margin-top:7px}
.success-code{border:1px dashed #d787b5;border-radius:9px;text-align:center;padding:18px;background:#fdf0f7}
.success-code span,.success-code small{display:block;font-size:13px;color:var(--muted)}
.success-code strong{display:block;color:var(--accent);font:700 clamp(36px,5vw,54px)/1.4 var(--digits);letter-spacing:.06em;color:var(--ink)}
#toast{position:fixed;z-index:12;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,12px);background:#291e26;color:#fff;border:1px solid #493e45;padding:11px 18px;border-radius:8px;font-size:14px;max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
.live-message{color:var(--ink);font-size:13px;line-height:1.5;text-align:right}
.loading{padding-block:65px;text-align:center;color:var(--muted)}
.photo-label{position:absolute;bottom:8px;left:8px;font-size:10px;background:#ffffffed;color:var(--muted);padding:3px 6px;z-index:1}
.pickup-input{display:block;font-size:13px;font-weight:650;margin-top:15px}
.pickup-input input{display:block;margin-top:5px}
.visit-section{display:grid;grid-template-columns:minmax(125px,205px) 1fr;margin-block:34px 48px;border:1px solid var(--line);background:#fcf9fa}
.visit-section[hidden]{display:none}
.visit-photo{position:relative;min-height:185px;background:var(--tile)}
.visit-photo img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.visit-panel{padding:clamp(20px,3vw,40px)}
.visit-photo-link{display:none}
.visit-panel h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.045em;line-height:1.2;margin-bottom:14px}
.visit-name{font-size:16px;font-weight:750}
.visit-district,.map-note{font-size:13px;color:var(--muted);line-height:1.6}
.visit-district{margin-top:4px}
.visit-address{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;margin-top:3px}
.visit-address address{font-family:var(--sans);font-size:17px;font-style:normal;line-height:1.6;user-select:all}
.visit-address button,.map-note a{color:#981055;text-decoration:underline;text-underline-offset:3px}
.visit-address button{min-height:34px;font-size:13px}
.map-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block:10px}
.map-links a{min-height:44px}.map-links a span{font:600 15px var(--digits)}
.map-note{margin:0}.pickup-directions{margin-top:18px;padding:16px;border:1px solid var(--line);background:#fcf9fa;border-radius:8px}
.pickup-directions h3{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:14px;color:var(--accent)}
.method-set{margin:0 0 15px;padding:0;border:0;min-width:0}
.method-set legend{font-size:15px;line-height:1.6;font-weight:750;margin-bottom:8px;padding:0}
.method-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.method-choice{position:relative;min-width:0;cursor:pointer}
.method-choice input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.method-choice>span{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d9d0d6;border-radius:5px;padding:10px 3px;min-height:42px;font-size:13px;font-weight:650;text-align:center}
.method-choice input:checked+span{color:#9a005a;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--pink)}
.method-choice input:focus-visible+span{outline:3px solid #8d1462;outline-offset:2px}
.demo-fill{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff5fa;padding:8px 10px;margin-bottom:12px;font-size:12px;color:#6d425d}
.demo-fill button{font-size:12px;color:#920858;font-weight:680;text-decoration:underline;text-underline-offset:3px;flex:none;min-height:30px}
.form-grid .field-wide{grid-column:1/-1}
.form-grid label small{font-size:11px;font-weight:400;color:var(--muted);margin-left:3px}
.address-form{gap:11px 12px}
.receipt-id,.payment-reference,.tracking,.destination-detail{overflow-wrap:anywhere}
.receipt-id{font-size:13px;color:var(--ink);padding:12px 0}
.receipt-id small{display:block;font-weight:600;font-size:11px;color:var(--muted);margin:0 0 3px}
.order-head{align-items:flex-start}
.order-head .order-number{font:600 clamp(13px,1.4vw,17px)/1.45 var(--digits);overflow-wrap:anywhere}
.destination-detail{padding:12px 13px;background:var(--tile);margin:7px 0 13px;border-left:3px solid #d5becb}
.destination-heading{display:flex;align-items:center;gap:5px;font-size:13px;margin-bottom:5px}
.destination-detail p{font-size:13px;line-height:1.65;color:#564e54}
.destination-detail .tracking{margin-top:6px;color:var(--ink)}
.delivery-totals{display:grid;gap:6px;padding:12px 0 0}
.delivery-totals>div{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted)}
.quote-receipt{display:flex;align-items:flex-start;gap:11px;background:var(--pink);padding:16px;line-height:1.6}
.quote-receipt>span{font-size:21px;color:var(--accent);margin-top:3px}
.quote-receipt h3{font-size:18px}.quote-receipt p{font-size:13px;margin-top:3px}
.quote-preview,.payment-reference{margin-top:12px;padding:12px;background:var(--pink);font-size:14px;line-height:1.65;color:#6d264f}
.status.awaiting_quote,.status.awaiting_payment{background:#fff0ce;color:#71470b}
.status.in_transit{background:#e7edf7;color:#3c526f}
@media(max-width:710px){.method-choice>span{font-size:12px;gap:3px}.address-form{grid-template-columns:1fr 1fr}.order-actions{justify-content:flex-start}.order-actions .btn{font-size:13px}.order .pickup-directions{margin-top:18px}}
@media(max-width:360px){.method-choice>span{padding:8px 2px;font-size:11px}.method-choice [data-icon]{display:none}.demo-fill{padding:7px;font-size:11px}.address-form{grid-template-columns:1fr}.order-head .order-number{font-size:12px}}

picture { position:relative }
picture.photo-failed::after { content:"图片暂未载入"; position:absolute; inset:0; display:grid; place-items:center; padding:4px; text-align:center; background:var(--tile); color:var(--muted); font-size:12px }
#image-notice { position:relative; z-index:1; text-align:center; font-size:13px; padding:8px; background:#fff0ae }
#image-notice button,.share-link { color:var(--hover); font-weight:650; text-decoration:underline; text-underline-offset:3px }
.loading-shop { padding-block:28px }
.loading-shop p { font-size:14px; margin:0 0 16px; color:var(--muted) }
.skeleton-hero,.skeleton-card,picture:not(.photo-loaded,.photo-failed) { background-color:var(--color-bg-subtle) }
.skeleton-hero,.skeleton-card { border-radius:12px; animation:skeleton-pulse 1.1s ease-in-out infinite alternate }
.skeleton-hero { height:clamp(200px,25vw,325px); margin-bottom:24px }
.skeleton-card { aspect-ratio:1 }
@keyframes skeleton-pulse { to { opacity:.5 } }
.list-intro { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:10px 0 }
.list-intro .note { flex:1 1 13em; margin:0 }
.share-link { display:inline-flex; align-items:center; gap:4px; font-size:12px; min-height:40px }
.original-photo,.original-photo picture { background:var(--tile); border-radius:8px; overflow:hidden }
.original-photo img { width:100%; height:auto; max-height:67dvh; object-fit:contain }
.store-photo-switch { display:flex; gap:7px; margin:0 0 12px }
.dialog-inner .detail-pic { aspect-ratio:1.5; border:1px solid var(--line) }
.dialog-head { background:var(--paper) }
.visit-section { border-radius:8px; overflow:hidden; background:var(--color-pearl) }
.visit-panel h2,.dialog-head h2 { color:var(--color-mulberry) }
.visit-photo picture { position:absolute; inset:0 }
.visit-photo .photo-caption { left:8px; right:auto; bottom:8px }
.mini-img { height:65px; aspect-ratio:1 }
.icon-btn { width:40px; height:40px }
@media(min-width:768px) {
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
  dialog[data-mode="cart"] { height:100dvh; max-height:100dvh; width:min(520px,93vw); margin:0 0 0 auto; border-radius:14px 0 0 14px; border-block:0; border-right:0 }
}
@media(min-width:1025px) {
  .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px }
}
@media(min-width:768px) and (max-width:1060px) {
  .wrap { width:calc(100% - 42px) }
  .head-inner { gap:0 15px }
  .service-strip { column-gap:10px }
  .service-strip a { display:none }
  .market-top { gap:24px; grid-template-columns:1.2fr 1fr }
}
@media(max-width:767px) {
  html { scroll-padding-top:calc(var(--mast-height,80px) + 5px) }
  body { padding-bottom:calc(62px + env(safe-area-inset-bottom)) }
  .wrap { width:calc(100% - 28px) }
  .head-inner { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:0 13px; padding:8px 0 0 }
  .brand { grid-area:1/1; gap:5px }
  .brand-mark { width:29px; height:29px }
  .wordmark { flex-direction:column; align-items:start; gap:2px }
  .wordmark strong { font-size:18px }
  .wordmark small { font-size:7px }
  .wordmark [lang="th"] { display:none }
  .masthead::before { height:29px }
  .goods-search { grid-area:1/2; height:36px }
  .goods-search #goods-query { min-height:29px; padding:0 7px; font-size:13px }
  .goods-search button { height:30px; width:34px; padding:0 }
  .search-text { display:none }
  .service-strip { grid-area:2/1/3/-1; justify-content:flex-start; flex-wrap:wrap; gap:0 12px; min-height:29px; font-size:11px }
  .service-strip a { margin-right:auto; min-height:29px }
  .main-nav { position:fixed; inset:auto 0 0; display:grid; grid-template-columns:repeat(4,1fr); background:white; border-top:1px solid #e7e5e3; padding:2px 0 max(4px,env(safe-area-inset-bottom)); z-index:6 }
  .main-nav>a,.main-nav>.bag-link { grid-area:auto; display:flex; flex-direction:column; gap:3px; width:auto; min-height:49px; font-size:11px; font-weight:550; color:#685f64 }
  .main-nav .desktop-nav,.main-nav .desktop-label { display:none }
  .main-nav .mobile-label { display:inline }
  .main-nav a>[data-icon],.bag-symbol { display:flex; font-size:18px }
  .main-nav [aria-current] { color:var(--hover) }
  .bag-symbol #bag-count { position:absolute; left:calc(100% - 5px); top:-6px; height:14px; line-height:14px; font-size:9px }
  .market-top { grid-template-columns:1fr; gap:13px; margin-top:10px }
  .store-front { grid-template-columns:32% 1fr }
  .hero-image { min-height:133px }
  .store-copy { padding:12px 14px }
  .store-copy::after { width:21%; height:44% }
  .store-copy h1 { font-size:25px }
  .store-road { font-size:14px; margin-top:4px }
  .street-th { font-size:11px; margin:1px 0 0 }
  .store-route { min-height:32px; margin-top:1px; font-size:12px }
  .video-section { padding:8px 12px 1px }
  .video-section h2 { font-size:15px; margin-bottom:0 }
  .video-grid { display:flex; align-items:stretch; flex-wrap:wrap; column-gap:clamp(7px,3.3vw,24px) }
  .video-card { min-height:44px; border:0; padding:4px 0; gap:5px }
  .video-play { width:16px; height:16px }
  .video-play svg { width:6px; height:6px }
  .video-copy strong { font-size:13px; font-weight:500 }
  .video-copy small,.video-enter { display:none }
  .shelf { padding:13px 0 6px }
  .shelf-titles { gap:4px 8px }
  .shelf h2 { font-size:22px }
  .shelf-note { font-size:11px }
  .sort #product-sort { min-height:34px; font-size:12px; padding:5px 1px 5px 23px }
  .sort [data-icon] { left:5px; font-size:12px }
  .shelf-filters { margin:1px 0 10px; padding-block:4px 7px; gap:0 }
  .shelf-filters .filters { display:grid; grid-template-columns:.64fr repeat(3,1.12fr) .95fr; gap:4px; width:100% }
  .shelf-filters .pill { min-width:0; min-height:40px; padding:4px 2px; gap:3px; font-size:12px }
  .shelf-filters .pill [data-icon] svg { width:13px; height:13px }
  .shelf-filters #result-count { font-size:10px }
  .shelf-filters #result-count[data-search="false"] { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden }
  .product-grid { gap:16px 12px }
  .product-copy { padding-top:6px }
  .product-spec { gap:0 6px; font-size:11px }
  .footer .wrap { gap:0 12px; padding-block:6px }
  .footer-brand { width:100%; margin:5px 0 }
  .footer .wrap>span:not(.footer-brand) { font-size:11px }
  .page { padding-block:24px; min-height:50vh }
  .page-intro { align-items:flex-start; margin-bottom:16px }
  .staff-tools .pill { min-height:36px; padding:5px 10px }
  .visit-section { grid-template-columns:1fr; margin-block:22px }
  .visit-photo { display:none }
  .visit-panel { padding:18px 16px }
  .visit-photo-link { float:right; display:flex; align-items:center; gap:5px; min-height:34px; color:var(--hover); font-size:13px; font-weight:650 }
  .map-links .btn { font-size:13px; padding:9px 12px }
  .search-box { max-width:100%; width:100% }
  dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:15px 15px 0 0; max-height:92dvh; border-bottom:0 }
  .dialog-inner { padding:0 17px max(22px,env(safe-area-inset-bottom)) }
  .dialog-head { padding:13px 0 9px; margin-bottom:12px }
  .dialog-head h2 { font-size:21px }
  .modal-actions .btn { flex:1; white-space:nowrap }
  .mini { gap:9px }
  .mini-img { width:53px; height:53px }
  .mini-main strong { font-size:14px }
  .form-grid { grid-template-columns:1fr }
  .address-form { grid-template-columns:1fr 1fr }
  #toast { bottom:calc(73px + env(safe-area-inset-bottom)) }
  dialog #toast { bottom:20px }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 24px) }
  .service-strip { column-gap:9px }
  .video-grid { gap:0 8px }
  .video-copy strong { font-size:12px }
  .shelf-filters .pill { gap:2px; padding-inline:1px; font-size:11px }
  .shelf-filters .pill [data-icon] svg { width:11px; height:11px }
  .video-section { padding-inline:8px }
  .address-form { grid-template-columns:1fr }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important }
}