@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root{
  --navy:#061C30;
  --ocean:#087FA6;
  --aqua:#79D5DF;
  --ice:#F8FCFD;
  --sand:#F5F1EA;
  --coral:#EE7656;
  --accent:#087FA6;
  --accent-dark:#066987;
  --accent-soft:#DDF4F7;
  --accent-soft-hover:#C5EBF0;
  --accent-soft-text:#075D7C;
  --accent-soft-text-hover:#061C30;
  --ink:#102B3D;
  --cream:#F5F1EA;
  --panel:#F8FCFD;
  --border:#D9E5E8;
  --border-soft:#E7F0F2;
  --border-strong:#C4D8DD;
  --muted:#58717D;
  --faint:#748C96;
  --placeholder:#91A8B0;
  --dash:#B8CED3;
  --tag-bg:#E7F6F8;
  --tag-border:#C8E9ED;
  --ok:#15803D;
  --ok-bg:#EAF6EE;
  --warn:#B45309;
  --warn-bg:#FDF3E6;
  --bad:#B91C1C;
  --bad-bg:#FBECEC;
  --info:#3B4A63;
  --info-bg:#EEF1F6;
  --sidebar-bg:#061C30;
  --sidebar-active:#123E55;
  --sidebar-text:#B9D0D8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:hidden}
body{
  background:var(--cream);
  font-family:'IBM Plex Sans Thai',system-ui,sans-serif;
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
.mono,.num{font-family:'Chakra Petch',sans-serif}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--border);border-radius:99px;outline:none;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:99px;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(31,30,28,.3);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:99px;background:var(--accent);border:2px solid #fff;cursor:pointer}

.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
.panel{background:#fff;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;box-shadow:0 2px 14px rgba(31,30,28,.07)}

/* Two-column "flexible content + fixed-width side panel" layout — used for
   category (sidebar + products), product (info + spec panel), cart and
   checkout (list + summary). The fixed side column (its width set via the
   --side custom property per instance) doesn't shrink on its own, so it's
   what overflowed a narrow viewport; collapse to one column on mobile. */
.split-panel{display:grid;grid-template-columns:minmax(0,1fr) var(--side,340px);gap:1px;background:var(--border)}
.split-panel-left{display:grid;grid-template-columns:var(--side,236px) minmax(0,1fr);gap:1px;background:var(--border)}

/* Cart/order line-item row: name + qty + unit price + total. Reflows from
   a 4-column grid to a stacked layout on mobile instead of forcing ~300px
   of fixed-width columns into a ~340px viewport. */
.line-row{display:grid;grid-template-columns:minmax(0,1fr) 108px 96px 96px;gap:16px;align-items:center}

.placeholder-box{
  border:1px dashed var(--dash);border-radius:7px;display:grid;place-items:center;
  background-image:repeating-linear-gradient(135deg,#EDF6F7 0 8px,#F8FCFD 8px 16px);
  color:var(--faint);font:400 12.5px 'Chakra Petch',sans-serif;text-align:center;overflow:hidden;
}
.placeholder-box img{width:100%;height:100%;object-fit:cover}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:6px;font:600 15.5px 'IBM Plex Sans Thai',sans-serif;border:1px solid transparent;white-space:nowrap;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
/* Medium-warm soft accent by default — storefront buy-actions ("หยิบใส่
   ตะกร้า" etc.) shouldn't out-shout the product itself, but a too-pale
   fill reads as bland/low-contrast, so this sits a notch more saturated
   than a bare pastel. Hover deepens further for feedback, without
   jumping to the full-strength --accent. Admin keeps the bold
   solid-accent look (below), since that's an operational console, not a
   page selling something. */
.btn-primary{background:var(--accent-soft);color:var(--accent-soft-text);border-color:rgba(194,65,12,.15);box-shadow:0 1px 4px rgba(194,65,12,.15)}
.btn-primary:hover{background:var(--accent-soft-hover);color:var(--accent-soft-text-hover);box-shadow:0 5px 14px rgba(194,65,12,.24);transform:translateY(-1px)}
#admin-login-overlay .btn-primary{background:#087fa6;color:#fff;border-color:transparent;box-shadow:none}
#admin-login-overlay .btn-primary:hover{background:#066987;color:#fff;transform:none}
.btn-outline{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{color:var(--ink)}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--muted)}
.btn-dark{background:var(--ink);color:#fff}
.btn-sm{padding:8px 13px;font-size:14px;border-radius:5px;font-weight:500}
.btn-block{width:100%}

/* ---------- Header / nav ---------- */
.topbar{background:var(--navy);padding:7px 30px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font:400 13.5px 'IBM Plex Sans Thai',sans-serif;color:#D6EDF2}
.topbar b{font:500 13px 'Chakra Petch',sans-serif;color:var(--aqua)}
.header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:0 30px;height:64px;border-bottom:1px solid var(--border);background:var(--panel);gap:20px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{display:block;width:228px;height:auto;max-height:50px;object-fit:contain}

/* ---- Header-mid: centered search (or breadcrumb) between brand and nav links ---- */
.header-mid{display:flex;justify-content:center;min-width:0}
.hsearch{position:relative;width:min(520px,100%)}
.hsearch-box{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.hsearch:focus-within .hsearch-box{border-color:var(--accent);box-shadow:0 0 0 4px rgba(8,127,166,.14)}
.hsearch-input{flex:1;min-width:0;border:none;outline:none;padding:11px 14px;font:400 15px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:transparent}
.hsearch-input::placeholder{color:var(--placeholder)}
.hsearch-btn{flex:none;width:46px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:filter .15s ease}
.hsearch-btn:hover{filter:brightness(1.08)}
.hsearch-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 36px rgba(31,30,28,.14);overflow:hidden;z-index:70;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.hsearch-suggest.open{opacity:1;visibility:visible;transform:translateY(0)}
.hsuggest-item{display:flex;align-items:center;gap:11px;padding:10px 14px;color:inherit;border-bottom:1px solid var(--border-soft)}
.hsuggest-item:hover{background:var(--panel)}
.hsuggest-thumb{width:38px;height:38px;flex:none;border-radius:6px;background:var(--panel);display:grid;place-items:center;overflow:hidden;font-size:13px;color:var(--faint)}
.hsuggest-thumb img{width:100%;height:100%;object-fit:cover}
.hsuggest-name{font:500 14px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);line-height:1.35}
.hsuggest-price{font:600 12.5px 'Chakra Petch',sans-serif;color:var(--accent);margin-top:2px}
.hsuggest-more{display:block;padding:11px 14px;font:500 13.5px 'IBM Plex Sans Thai',sans-serif;color:var(--accent);text-align:center}
.hsuggest-empty{padding:16px 14px;font:300 13.5px 'IBM Plex Sans Thai',sans-serif;color:var(--faint);text-align:center}

.header-right{display:flex;gap:16px;align-items:center;font:500 15px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.lang-switch{display:flex;align-items:center;border:1px solid var(--border);border-radius:99px;padding:2px;gap:2px}
.lang-btn{border:none;background:none;cursor:pointer;padding:5px 11px;border-radius:99px;font:600 12.5px 'Chakra Petch',sans-serif;letter-spacing:.04em;color:var(--faint);transition:background .15s ease,color .15s ease}
.lang-btn:hover{color:var(--ink)}
.lang-btn.active{background:var(--ink);color:#fff}
.cart-pill{display:flex;align-items:center;gap:7px;padding:8px 14px;background:var(--ink);color:#fff;border-radius:6px;font:500 15px 'IBM Plex Sans Thai',sans-serif}
.cart-pill .count{font:600 12px 'Chakra Petch',sans-serif;background:var(--accent);padding:1px 6px;border-radius:99px}
.breadcrumb{font:400 14px 'Chakra Petch',sans-serif;color:var(--faint)}

/* ---------- Category mega menu ---------- */
.mega-nav{position:relative;display:flex;align-items:center;flex-wrap:wrap;padding:0 22px;border-bottom:1px solid var(--border);background:#fff;font:500 15px 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.mega-item{position:relative;display:inline-flex;align-items:center;flex:none}
.mega-item.active-item{color:var(--accent)}
.mega-trigger{display:inline-flex;align-items:center;vertical-align:middle}
.mega-trigger-link{display:inline-flex;align-items:center;vertical-align:middle;height:100%;padding:13px 4px 13px 14px;color:inherit;line-height:1;white-space:nowrap;box-sizing:border-box}
.mega-trigger-link.active,.mega-item>.mega-trigger-link.active{color:var(--accent);font-weight:600}
.mega-toggle{display:inline-flex;align-items:center;vertical-align:middle;height:100%;padding:13px 14px 13px 3px;border:none;background:none;color:var(--faint);font:11px 'IBM Plex Sans Thai',sans-serif;line-height:1;cursor:pointer;transition:transform .15s ease;box-sizing:border-box}
.mega-item.open .mega-toggle{color:var(--accent);transform:rotate(180deg)}
.mega-trigger-link:hover{color:var(--accent)}
.mega-panel{position:absolute;top:100%;left:0;min-width:260px;background:#fff;border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;box-shadow:0 16px 36px rgba(31,30,28,.14);padding:20px 22px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.mega-item.open .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.mega-panel-inner{display:flex;gap:28px}
.mega-col{min-width:190px}
.mega-col-title{font:600 12.5px 'Chakra Petch',sans-serif;letter-spacing:.1em;color:var(--faint);margin-bottom:10px}
.mega-cta{display:block;padding:0 0 10px;margin-bottom:8px;border-bottom:1px solid var(--border-soft);font:500 14px 'IBM Plex Sans Thai',sans-serif;color:var(--accent)}
.mega-child{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 0;color:#45423A}
.mega-child:hover,.mega-child.active{color:var(--accent)}
.mega-child .cnt{font:400 12.5px 'Chakra Petch',sans-serif;color:var(--faint);flex:none}
.mega-empty{padding:7px 0;font:300 13.5px 'IBM Plex Sans Thai',sans-serif;color:var(--faint)}
.breadcrumb b,.breadcrumb .cur{color:var(--ink);font-weight:400}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border-bottom:1px solid var(--border)}
.cat-card{background:#fff;padding:18px 18px 20px}
.cat-card .img{height:74px;margin-bottom:13px}
.cat-card .code{font:600 12.5px 'Chakra Petch',sans-serif;letter-spacing:.12em;color:var(--accent);margin-bottom:7px}
.cat-card .name{font:600 17.5px/1.35 'IBM Plex Sans Thai',sans-serif;color:var(--ink);margin-bottom:5px}
.cat-card .hint{font:300 14px/1.55 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.cat-card .count{margin-top:9px;font:500 13.5px 'Chakra Petch',sans-serif;color:var(--faint)}

/* ---------- Product card ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-card{background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden;display:flex;flex-direction:column}
/* Real product photos should show the whole item (contain), centered, not
   cropped — overrides the more general .placeholder-box img{object-fit:cover}.
   Same fix applied to the cart line-item thumbnail and the admin product
   list's row thumbnail below, for the same reason. */
.product-card .img{height:132px;border-bottom:1px solid var(--border);position:relative;display:flex;align-items:center;justify-content:center}
.product-card .img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
/* Swapped in for .placeholder-box once a real photo is loaded, same as
   .pdp-img-frame — the dashed border only .product-card .img{border-bottom}
   overrode, leaving dashed edges on the other 3 sides poking out around
   real photos, plus the diagonal-stripe placeholder pattern behind them. */
.card-img-frame{background:#fff}
.cart-thumb img{object-fit:contain;background:#fff}
.admin-row-thumb img{object-fit:contain;background:#fff}
.img-placeholder-icon{color:var(--faint);opacity:.55}
.img-placeholder-icon svg{display:block}

/* Product detail page: the main photo and its thumbnail strip must show the
   whole item, centered, never cropped or overflowing the box — same reasoning
   as .product-card .img img above, just a dedicated class since this page's
   image boxes aren't inside .product-card. Fixed height (290px) let the
   dashed placeholder pattern show through on the sides once real photos
   switched to object-fit:contain instead of cover — aspect-ratio here keeps
   the frame's proportions sane at any width without a hardcoded height. */
.pdp-main-img,.pdp-thumb-img{display:flex;align-items:center;justify-content:center}
.pdp-main-img img,.pdp-thumb-img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.pdp-main-img{aspect-ratio:4/3}
/* Swapped in for .placeholder-box once a real photo is loaded — plain white
   card instead of the dashed border + diagonal-stripe placeholder pattern,
   which has no reason to show once there's an actual image inside. */
.pdp-img-frame{background:#fff;border:1px solid var(--border);border-radius:8px}

/* Thumbnail gallery switcher: pointer cursor + hover/active border so it
   reads as clickable before and after the fact. box-shadow (not a wider
   border) marks the active thumbnail so it doesn't shift layout on select. */
.pdp-thumb-img{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.pdp-thumb-img:hover{border-color:var(--accent)}
.pdp-thumb-img.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* ---------- Product detail page tabs (สเปก / ประกัน / จัดส่ง) ---------- */
.pdp-tab{padding:0 0 10px;border:none;background:none;border-bottom:2px solid transparent;font:500 15px 'IBM Plex Sans Thai',sans-serif;color:var(--muted);cursor:pointer}
.pdp-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.pdp-richtext{font:400 15px/1.8 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.pdp-richtext ul{margin:0 0 12px;padding-left:20px}
.pdp-richtext li{margin-bottom:4px}
.pdp-richtext p{margin:0 0 10px}
.product-card .tag{position:absolute;top:9px;left:9px;padding:3px 7px;background:#fff;border:1px solid var(--border);border-radius:4px;font:600 10px 'Chakra Petch',sans-serif;letter-spacing:.1em;color:var(--accent)}
.product-card .body{padding:15px 15px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.product-card .sku{font:500 12px 'Chakra Petch',sans-serif;letter-spacing:.1em;color:var(--faint)}
.product-card .name{font:600 16px/1.45 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.product-card .spec{font:300 13.5px/1.6 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.stockline{display:flex;align-items:center;gap:6px}
.stockdot{width:6px;height:6px;border-radius:99px;flex:none}
.stockdot.in{background:var(--ok)}.stockdot.low{background:var(--warn)}.stockdot.out{background:var(--bad)}
.stocktext{font:400 13px 'Chakra Petch',sans-serif;color:var(--muted)}
.price-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:auto;padding-top:11px}
.price{font:600 19px/1.1 'Chakra Petch',sans-serif;color:var(--ink)}
.pick-btn{flex:none;white-space:nowrap;padding:7px 12px;background:var(--panel);border:1px solid var(--ink);border-radius:6px;font:500 14px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.pick-btn:hover{background:var(--ink);color:#fff}

/* ---------- Badges ---------- */
.badge{display:inline-flex;padding:4px 9px;border-radius:99px;font:500 13px 'IBM Plex Sans Thai',sans-serif;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-accent{background:var(--tag-bg);color:var(--accent);border:1px solid var(--tag-border)}
.badge-muted{background:var(--border-soft);color:var(--muted)}

/* ---------- Forms ---------- */
.field label{display:block;font:500 14px 'IBM Plex Sans Thai',sans-serif;color:#45423A;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font:400 15px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:#fff}
.field textarea{resize:vertical;min-height:64px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-row.cols-3{grid-template-columns:1.3fr 1fr 1fr}
.field-row.cols-2b{grid-template-columns:1fr 1.4fr}
.checkline{display:flex;gap:9px;align-items:center;font:400 14.5px 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.checkline input{width:15px;height:15px;accent-color:var(--accent)}

/* ---------- Tables ---------- */
.dtable{background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.dtable .thead{display:grid;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--panel);font:500 12px 'Chakra Petch',sans-serif;letter-spacing:.1em;color:var(--faint)}
.dtable .row{display:grid;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border-soft);align-items:center}
.dtable .row:last-child{border-bottom:none}
.dtable .foot{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;font:400 13.5px 'Chakra Petch',sans-serif;color:var(--faint)}
.pageno{padding:6px 10px;border:1px solid var(--border);border-radius:4px;color:#45423A;font:500 13.5px 'Chakra Petch',sans-serif}
.pageno.active{background:var(--ink);color:#fff;border-color:var(--ink)}


#admin-login-overlay{position:fixed;inset:0;background:linear-gradient(145deg,#071d2d 0 43%,#e9f2f2 43%);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.admin-login-card{width:100%;max-width:390px;background:#fff;border:1px solid #d9e5e8;border-radius:16px;padding:38px 34px 32px;box-shadow:0 24px 70px rgba(7,29,45,.22)}
.admin-login-brand{display:grid;justify-items:center;gap:8px;margin-bottom:30px}
.admin-login-brand img{display:block;width:min(100%,286px);height:auto}
.admin-login-label{font:600 12px 'IBM Plex Sans Thai',sans-serif;color:#58717d;letter-spacing:.12em;text-transform:uppercase}
.admin-login-card label{display:block;font:500 12.5px 'Chakra Petch',sans-serif;letter-spacing:.08em;color:var(--faint);margin-bottom:8px}
.admin-login-inputwrap{position:relative}
.admin-login-inputwrap input{width:100%;padding:11px 42px 11px 13px;border:1px solid var(--border);border-radius:7px;font:400 15px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:#fff}
.admin-login-inputwrap input:focus{outline:2px solid #79d5df;outline-offset:1px;border-color:#087fa6}
.admin-login-inputwrap button{position:absolute;right:5px;top:0;bottom:0;border:none;background:transparent;color:var(--faint);font-size:13px;cursor:pointer;padding:0 8px}
.admin-login-error{min-height:18px;margin:8px 0 4px;font:400 13.5px/1.5 'IBM Plex Sans Thai',sans-serif;color:var(--bad)}
.admin-login-card .btn-block{width:100%;margin-top:14px}

/* ---------- Smart Excel Product Importer ---------- */
.importer-overlay{position:fixed;inset:0;background:rgba(31,30,28,.5);display:flex;align-items:center;justify-content:center;z-index:900;padding:24px}
.importer-modal{background:#fff;border-radius:12px;width:min(1040px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(31,30,28,.28)}
.importer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 26px;border-bottom:1px solid var(--border)}
.importer-title{font:600 19px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.importer-sub{margin-top:4px;font:300 13.5px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.importer-close{border:none;background:none;font-size:18px;color:var(--faint);cursor:pointer;padding:4px 8px;line-height:1}
.importer-close:hover{color:var(--ink)}
.importer-body{padding:22px 26px;overflow-y:auto;flex:1}
.importer-dropzone{border:2px dashed var(--dash);border-radius:10px;padding:38px 20px;text-align:center;cursor:pointer;transition:all .2s ease;background:var(--panel)}
.importer-dropzone.drag{border-color:var(--accent);background:var(--tag-bg)}
.importer-dropzone-icon{font-size:30px;margin-bottom:10px}
.importer-dropzone-text{font:500 15px 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.importer-browse{color:var(--accent);font-weight:600;text-decoration:underline}
.importer-dropzone-hint{margin-top:6px;font:300 13px 'IBM Plex Sans Thai',sans-serif;color:var(--faint)}
.importer-filelist{display:grid;gap:8px;margin-top:14px}
.importer-file{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:1px solid var(--border);border-radius:7px;background:#fff;font:400 14px 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.importer-file .brand{font:500 12px 'Chakra Petch',sans-serif;letter-spacing:.06em;color:var(--accent-dark);background:var(--tag-bg);padding:2px 8px;border-radius:99px;margin-left:8px}
.importer-file .rows{color:var(--faint);font-size:12.5px}
.importer-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.importer-stat{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.importer-stat .n{font:600 22px 'Chakra Petch',sans-serif;color:var(--ink)}
.importer-stat .l{margin-top:2px;font:400 12.5px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.importer-filters{display:flex;gap:8px;margin-bottom:14px}
.importer-filter{padding:7px 14px;border:1px solid var(--border);border-radius:99px;background:#fff;font:500 13.5px 'IBM Plex Sans Thai',sans-serif;color:var(--muted);cursor:pointer;transition:all .2s ease}
.importer-filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.importer-table-wrap{border:1px solid var(--border);border-radius:9px;overflow:auto;max-height:420px}
.importer-table{width:100%;border-collapse:collapse;font:400 13.5px 'IBM Plex Sans Thai',sans-serif}
.importer-table thead th{position:sticky;top:0;background:var(--panel);text-align:left;padding:9px 12px;font:500 11px 'Chakra Petch',sans-serif;letter-spacing:.08em;color:var(--faint);border-bottom:1px solid var(--border);white-space:nowrap}
.importer-table tbody td{padding:8px 12px;border-bottom:1px solid var(--border-soft);color:#45423A;vertical-align:middle}
.importer-table tbody tr:last-child td{border-bottom:none}
.importer-table select{padding:5px 7px;border:1px solid var(--border);border-radius:5px;font:400 13px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:#fff;max-width:180px}
.importer-table select.unmatched{border-color:var(--warn)}
.importer-foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px;border-top:1px solid var(--border)}
.ibadge{display:inline-flex;padding:3px 9px;border-radius:99px;font:600 11.5px 'IBM Plex Sans Thai',sans-serif;white-space:nowrap}
.ibadge-new{background:var(--ok-bg);color:var(--ok)}
.ibadge-update{background:var(--info-bg);color:var(--info)}
.ibadge-quote{background:var(--warn-bg);color:var(--warn)}

.importer-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:flex-start;gap:12px;max-width:min(560px,calc(100% - 32px));padding:14px 16px;border-radius:10px;box-shadow:0 8px 28px rgba(31,30,28,.18);background:var(--info-bg);border:1px solid var(--info);animation:importer-toast-in .18s ease-out}
.importer-toast-success{background:var(--ok-bg);border-color:var(--ok)}
.importer-toast-error{background:var(--bad-bg);border-color:var(--bad)}
.importer-toast-msg{flex:1;font:500 14px/1.5 'IBM Plex Sans Thai',sans-serif;color:var(--ink);white-space:pre-line}
.importer-toast-close{flex:none;background:none;border:none;cursor:pointer;font-size:14px;color:var(--faint);line-height:1;padding:2px}
.importer-toast-close:hover{color:var(--ink)}
@keyframes importer-toast-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

.section-title{font:600 29px/1.3 'IBM Plex Sans Thai',sans-serif;color:var(--ink);letter-spacing:-.02em;margin:0}
.eyebrow{font:600 12.5px 'Chakra Petch',sans-serif;letter-spacing:.16em;color:var(--accent)}

footer.site-footer{padding:30px;background:var(--ink);display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
footer.site-footer .col-title{font:600 12.5px 'Chakra Petch',sans-serif;letter-spacing:.12em;color:var(--aqua);margin-bottom:11px}
footer.site-footer .col{display:grid;gap:7px;font:300 14px 'IBM Plex Sans Thai',sans-serif;color:#B9D0D8}
.footer-brand-logo{display:block;width:min(100%,240px);height:auto;margin-bottom:11px}

/* Footer's 4 direct children are: brand/description, then 3 link columns
   ("หมวดสินค้า", "บริษัท", "ติดต่อ"). On mobile the brand block becomes its
   own full-width row and the 3 link columns wrap into a 2-up grid below it
   (2 + 1), rather than cramming 4 columns into a phone-width screen. */
@media (max-width: 768px){
  .brand-logo{width:min(190px,calc(100vw - 88px));max-height:44px}
  footer.site-footer{grid-template-columns:repeat(2,1fr);gap:24px;padding:32px 20px}
  footer.site-footer > div:first-child{grid-column:1/-1}

  /* Tools section (License Calculator / Backup Sizer) on /about: the outer
     #tools block drops its 30px side padding to 16px so the cards don't
     sit needlessly far from the edge, and each card gets tighter interior
     padding — .about-tools already collapses to one column at 980px, this
     only tightens spacing for actual phone widths. */
  #tools{padding-left:16px !important;padding-right:16px !important}
  .tool-card{width:100%;max-width:100%;margin:0 auto;padding:20px 16px !important}
}

.skeleton{opacity:.55}
.empty-state{padding:40px;text-align:center;color:var(--muted);font:300 15px/1.7 'IBM Plex Sans Thai',sans-serif}

@media (max-width: 980px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* These are two-column layouts with a nested fixed-width grid inside the
     flexible column (e.g. cart's .line-row: 108px/96px/96px + gaps just for
     the fixed columns) — that nested grid needs real room, so it stays
     cramped/overlapping well before a plain single fixed side-panel would.
     Collapsing at the same breakpoint as the other 2-column grids above,
     rather than down at phone width, is what actually avoids the overlap. */
  .split-panel,.split-panel-left{grid-template-columns:1fr}
  .spec-cols{grid-template-columns:1fr !important}
  .field-row,.field-row.cols-3,.field-row.cols-2b{grid-template-columns:1fr}
  #pay-methods{grid-template-columns:1fr !important}
  .about-hero{grid-template-columns:1fr !important;gap:24px !important}
  .about-services{grid-template-columns:1fr !important}
  .about-tools{grid-template-columns:1fr !important}
  .about-contact{grid-template-columns:1fr !important}

  .line-row{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .line-row > :nth-child(2),.line-row > :nth-child(3),.line-row > :nth-child(4){text-align:left}
  #cart-head{display:none}

  /* Mega menu -> accordion at tablet width and below (touch is primary
     here, hover isn't reliable): each item stacks full-width and the panel
     expands inline (height driven by the inline max-height wireMegaNav()
     sets on open) instead of floating over the page. */
  .mega-nav{flex-direction:column;padding:6px 16px}
  .mega-item{width:100%;border-bottom:1px solid var(--border-soft)}
  .mega-item:last-child{border-bottom:none}
  .mega-trigger,.mega-item>.mega-trigger-link{width:100%}
  .mega-trigger-link{flex:1;padding:13px 4px 13px 2px}
  .mega-toggle{padding:13px 2px 13px 10px;font-size:13px}
  .mega-panel{position:static;min-width:0;max-height:0;overflow:hidden;border:none;box-shadow:none;border-radius:0;padding:0;opacity:1;visibility:visible;transform:none;transition:max-height .22s ease;background:var(--panel)}
  .mega-item.open .mega-panel{padding:2px 2px 14px}
  .mega-panel-inner{display:block}
  .mega-col-title{display:none}
  .mega-cta{padding:8px 4px;margin-bottom:2px}
  .mega-child{padding:8px 4px}
}

/* .header used a fixed height:64px; on narrow screens the brand + search +
   header-right links wrap onto a second line that then overflowed past that
   fixed height and rendered on top of .mega-nav below it (looked like the
   page had no content). Let it grow, hide the search bar (no room for it
   next to the nav links at this width), and switch .header from its
   desktop 3-column grid back to flex-wrap so header-right can still drop
   to its own line if it doesn't fit — a fixed-track grid can't reflow like
   that, it would just overflow past the viewport instead. */
@media (max-width: 760px){
  /* Every storefront page sets .wrap's padding inline (only the vertical
     value differs per page), which otherwise beats this class rule on
     specificity — !important is scoped to just the horizontal padding so
     each page's own top/bottom spacing is untouched. */
  .wrap{padding-left:16px !important;padding-right:16px !important}
  .topbar{padding:7px 16px;font-size:12.5px}
  .header{display:flex;flex-wrap:wrap;height:auto;min-height:56px;padding:10px 16px}
  .hsearch{display:none}
  .header-right{gap:12px;font-size:13.5px;flex-wrap:wrap;justify-content:flex-end}
  .brand{gap:10px}
  .brand .mark{width:36px;height:36px;font-size:15.5px;border-radius:10px}
  .brand-primary{font-size:17px}
  .brand-sub{font-size:10.5px}
  .about-hero{padding:28px 16px !important}
  .narrow-panel{padding:26px 20px !important}
}

/* Phones narrower than a small Android device — the topbar's promo line
   plus phone-hours line together are too much text for one row even
   wrapped; drop the secondary line rather than let the primary one shrink
   past legibility. */
@media (max-width: 480px){
  .topbar{font-size:11.5px}
  .topbar b{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:1fr}
}
.payment-panel{border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff;text-align:left}.payment-panel__title{font:600 19px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);margin-bottom:10px}.payment-panel__summary{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding:12px 0;border-block:1px solid var(--border-soft);font:400 14px/1.6 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}.payment-panel__amount{font-size:19px;color:var(--accent)}.payment-panel__status,.payment-panel__upload-status,.payment-panel__qr-note{margin-top:12px;font:400 14px/1.6 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}.payment-panel__qr{display:grid;justify-items:center;gap:10px;margin:18px 0;padding:16px;border-radius:10px;background:var(--panel);text-align:center}.payment-panel__qr-image{display:block;width:min(100%,320px);height:auto;background:#fff}.payment-panel__qr-status,.payment-panel__unavailable{font:500 14px/1.65 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}.payment-panel__qr-placeholder{box-sizing:border-box;display:grid;place-content:center;gap:8px;width:min(100%,280px);aspect-ratio:1;border:2px dashed #bdc8bc;border-radius:18px;background:linear-gradient(145deg,#fff,#f1f5ef);color:var(--ink);user-select:none}.payment-panel__qr-placeholder strong{font:700 clamp(64px,22vw,104px)/.9 'IBM Plex Sans Thai',sans-serif;letter-spacing:.08em}.payment-panel__qr-placeholder span{font:600 15px/1.4 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}.payment-panel__unavailable{max-width:34rem;padding:4px 12px;color:var(--bad)}.payment-panel__upload-title{margin-top:18px;font:600 16px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}

/* ---------------------------------------------------------------------------
   Mobile-first shopping flow (storefront UX consolidation).
   Desktop keeps the existing header, mega navigation and full footer; phones get a compact header with a
   cart icon + menu button, the category navigation behind that button, and a compact footer.
   --------------------------------------------------------------------------- */
.cart-pill .cart-icon{flex:none}
.nav-toggle,.mobile-links,.footer-compact{display:none}
.header--compact{grid-template-columns:auto 1fr}
.header--compact .header-right{justify-content:flex-end}

@media (max-width: 980px){
  /* Category navigation collapses behind the menu button instead of stacking above every page. */
  .nav-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink);font:500 14px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
  .mobile-menu-panel{display:none;border-bottom:1px solid var(--border);background:#fff}
  .mobile-menu-panel.open{display:block}
  .mobile-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:10px 16px 14px;border-top:1px solid var(--border-soft);font:500 15px 'IBM Plex Sans Thai',sans-serif}
  .mobile-links a{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width: 760px){
  .header{flex-wrap:nowrap;gap:8px;padding:8px 12px;min-height:60px}
  .header-mid{display:none}
  .brand{min-width:0;flex:1}
  .brand-logo{width:min(168px,100%)}
  .header-right{flex-wrap:nowrap;gap:8px}
  .header-right .header-link{display:none}
  .header:not(.header--compact) .header-right .lang-switch{display:none}
  /* Cart stays one tap away on every page: icon + live count, 44px target. */
  .cart-pill{min-height:44px;padding:0 12px}
  .cart-pill__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-toggle{padding:0;justify-content:center;font-size:19px}
  .topbar{justify-content:center;text-align:center}

  /* Bigger quantity steppers (cart + product page set 32px inline). */
  [data-inc],[data-dec],#qty-dec,#qty-inc{width:44px !important;height:44px !important}
}

/* Compact footer on phones: brand, essential links, copyright — roughly a third of the full footer's height. */
@media (max-width: 768px){
  #chrome-footer{padding:0 !important;max-width:none !important}
  footer.site-footer{display:block;padding:18px 16px calc(76px + env(safe-area-inset-bottom))}
  footer.site-footer > div:not(.footer-compact){display:none}
  .footer-compact{display:grid;gap:10px}
  .footer-compact__logo{width:132px;height:auto}
  .footer-compact__links{display:flex;flex-wrap:wrap;gap:0 18px;font:400 14px 'IBM Plex Sans Thai',sans-serif}
  .footer-compact__links a{display:inline-flex;align-items:center;min-height:44px;color:#D6EDF2}
  .footer-compact small{font:400 12px 'IBM Plex Sans Thai',sans-serif;color:#8FB0BC}
}

/* Product detail + cart density on phones: same hierarchy, less chrome around the actual content. */
@media (max-width: 760px){
  .pdp-crumb{padding:10px 16px !important}
  .pdp-main{padding:18px 16px 22px !important}
  .pdp-title{font-size:25px !important;line-height:1.32 !important}
  .pdp-spec{font-size:15.5px !important;line-height:1.7 !important;margin-bottom:16px !important}
  .pdp-side{padding:16px !important}
  /* Truthful "no product photo yet" placeholder keeps its message, just not a 4:3 block of empty space. */
  .pdp-main-img.placeholder-box{aspect-ratio:16/9}
  .cart-head-bar{padding:16px !important}
  .cart-items{padding:4px 16px 20px !important}
  .cart-side{padding:16px !important}
}

/* Checkout (mobile-first form polish) + Thai address picker. */
.co-section{border:0;margin:0 0 22px;padding:0;min-width:0}
.co-section > legend{padding:0;margin-bottom:15px}
.co-title{margin:0;font:600 16px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.co-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 30px}
.co-steps{display:flex;gap:14px;margin:0;padding:0;list-style:none;font:500 13.5px 'Chakra Petch','IBM Plex Sans Thai',sans-serif;color:var(--faint)}
.co-steps .done{color:var(--ink)}.co-steps .current{color:var(--accent);font-weight:600}
.co-hint{display:block;margin:6px 0 0;font:400 13px/1.55 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.ta-hint{display:none;margin:0 0 10px}
.ta-ready .ta-hint{display:block}
.co-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-choice__opt{display:flex;gap:10px;align-items:flex-start;min-height:56px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:#fff}
.co-choice__opt input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.co-choice__opt span{display:grid;gap:2px;font:400 14.5px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.co-choice__opt small{font-size:12.5px;color:var(--muted)}
.co-choice__opt:has(input:checked){border:1.5px solid var(--accent);background:var(--accent-soft)}
.co-check{display:flex;gap:10px;align-items:center;min-height:44px;margin:6px 0}
.co-check input{width:20px;height:20px;accent-color:var(--accent)}
.pay-opt--disabled{opacity:.62}
.co-mini-summary{display:none}
.co-help{margin-top:4px;padding-top:9px;border-top:1px solid var(--border-soft)}
.ta-field{position:relative}
.ta-list{position:absolute;left:0;right:0;top:100%;z-index:30;max-height:min(300px,45vh);overflow:auto;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 14px 34px rgba(6,28,48,.16)}
.ta-option{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:7px;font:400 15px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);cursor:pointer}
.ta-option[aria-selected="true"],.ta-option:hover{background:var(--accent-soft)}
.ta-empty{padding:12px;font:400 14px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.ta-zip-choices{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font:400 13px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.ta-zip{min-height:40px;padding:0 12px;border:1px solid var(--accent);border-radius:8px;background:#fff;color:var(--accent);font:600 15px 'Chakra Petch',sans-serif}
.field input:disabled,.field textarea:disabled{background:var(--panel);color:var(--faint)}

@media (max-width: 760px){
  .co-wrap{padding-top:12px !important}
  .co-head{padding:10px 16px}
  .co-steps{gap:10px;font-size:12.5px}
  .co-main{padding:18px 16px 22px !important}
  .co-side{padding:16px !important}
  .co-choice{grid-template-columns:1fr}
  /* 16px text keeps mobile browsers from zooming into fields; 48px rows are comfortable to tap. */
  .co-form .field input:not([type=checkbox]):not([type=radio]),.co-form .field textarea{min-height:48px;font-size:16px}
  .co-form .field label{font-size:14px}
  .co-submit{min-height:52px;font-size:16px}
  .co-mini-summary:not([hidden]){display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:12px 16px;background:var(--accent-soft);border-bottom:1px solid var(--border);font:500 14px 'IBM Plex Sans Thai',sans-serif;color:var(--ink);text-decoration:none}
  .co-mini-summary b{font-size:18px;color:var(--accent)}
}

/* Order confirmation: transaction first — success, order number, total/payment, what to save, how to track. */
.oc-card{max-width:680px;margin:0 auto;padding:32px 36px;text-align:left}
.oc-hero{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.oc-check{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:27px}
.oc-title{margin:0;font:600 25px/1.3 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.oc-sub{margin:2px 0 0;font:300 15px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.oc-facts{margin:0 0 16px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.oc-fact{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border-soft)}
.oc-fact:first-child{border-top:0}
.oc-fact[hidden]{display:none}
.oc-fact dt{font:400 14px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.oc-fact dd{margin:0;display:flex;align-items:center;gap:8px;min-width:0}
.oc-orderno{font-size:22px;font-weight:600;color:var(--accent);overflow-wrap:anywhere}
.oc-total{font-size:22px;font-weight:600;color:var(--ink)}
.oc-copy{min-height:40px;min-width:44px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--accent);font:500 14px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
.oc-copy:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.oc-save{margin:0 0 18px;padding:16px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft)}
.oc-save h2{margin:0 0 8px;font:600 16px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.oc-note{margin:0 0 10px;font:400 14px/1.65 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.oc-code-label{font:500 13px 'IBM Plex Sans Thai',sans-serif;color:var(--muted);margin-bottom:4px}
.oc-code-row{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.oc-code{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink);font-size:15px;overflow-wrap:anywhere;user-select:all}
.oc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.oc-actions .btn{flex:1 1 180px;justify-content:center;min-height:48px}
.oc-actions [hidden]{display:none}
.oc-payment:empty{display:none}
.oc-payment{margin-bottom:16px}
.oc-help{margin:0;font:400 14px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.oc-help a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width: 760px){
  .oc-wrap,.lk-wrap{padding-top:14px !important;padding-bottom:20px !important}
  .oc-card{padding:20px 16px !important}
  .oc-title{font-size:22px}
  .oc-orderno,.oc-total{font-size:20px}
  .oc-actions{flex-direction:column}
  .oc-actions .btn{flex:none;width:100%}
}
/* Elements toggled with the hidden attribute must stay hidden despite their display rules above. */
.co-hint[hidden],.ta-zip-choices[hidden],.co-section[hidden]{display:none}
/* Solid style for the one primary purchase-path action per step (add to cart, checkout, confirm, track/pay). */
.btn.btn-solid{background:var(--accent);color:#fff;border-color:transparent}
.btn.btn-solid:hover{background:#066987;color:#fff}
.btn.btn-solid:disabled{opacity:.55}
.oc-copy,.oc-fact dt{white-space:nowrap}
@media (max-width: 760px){
  .oc-orderno{font-size:18px;white-space:nowrap}
  .oc-fact{padding:10px 12px}
}
/* Cart lines on phones: product on top, then stepper · unit price · line total on one row. */
@media (max-width: 760px){
  .cart-items .line-row{grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:10px}
  .cart-items .line-row > :first-child{grid-column:1/-1}
  .cart-items .line-row > :nth-child(2){justify-self:start}
  .cart-items .line-row > :nth-child(3){text-align:right !important;font-size:13px !important;color:var(--muted) !important}
  .cart-items .line-row > :nth-child(4){text-align:right !important}
}
/* Tablet: secondary header links live in the menu panel (they wrapped onto two lines next to the cart). */
@media (max-width: 980px){
  .header:not(.header--compact) .header-right .header-link{display:none}
}
@media (max-width: 400px){
  /* Narrow phones: label above, value + copy below, so nothing is clipped. */
  .oc-fact{flex-wrap:wrap;row-gap:4px}
  .oc-fact dd{flex:1 1 100%;justify-content:space-between}
}

/* Store operations: selling unit, server quote messages, discount code, store notice */
.price-col{min-width:0}
.price-unit,.line-unit,.pdp-unit{display:block;font:400 13px/1.45 'IBM Plex Sans Thai',sans-serif;color:var(--muted);overflow-wrap:anywhere}
.price-unit{margin-top:3px}
.line-unit{margin-top:2px}
.pdp-unit{margin-top:6px;font-size:14.5px}
.quote-note{margin-top:12px;padding:9px 11px;background:var(--panel);border:1px solid var(--border);border-radius:6px;font:400 13.5px/1.5 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.quote-note[hidden]{display:none}
.quote-alert{margin-top:10px;padding:10px 12px;border:1px solid #E8C9A6;border-radius:6px;background:#FFF7EC;font:400 14px/1.55 'IBM Plex Sans Thai',sans-serif;color:#7A4A12;overflow-wrap:anywhere}
.co-novat{margin-top:8px;font:400 13px/1.5 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.promo-box{margin-top:14px;display:grid;gap:6px}
.promo-box__label{font:500 13.5px 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.promo-box__row{display:flex;gap:8px}
.promo-box__row input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:8px;font-size:16px;text-transform:uppercase;background:#fff;color:var(--ink)}
.promo-box__row input::placeholder{text-transform:none;font:400 14px 'IBM Plex Sans Thai',sans-serif}
.promo-box__btn{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--accent);border-radius:8px;background:#fff;color:var(--accent);font:600 14.5px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
.promo-box__applied{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--ok);border-radius:8px;background:#F4FAF6;font:500 14px 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.promo-box__applied .promo-box__btn{border:0;background:transparent}
.promo-box__error{font:400 13.5px/1.5 'IBM Plex Sans Thai',sans-serif;color:var(--bad)}
.btn.is-disabled{opacity:.5;pointer-events:none}
.store-notice{background:#FFF7EC;border-bottom:1px solid #E8C9A6;color:#7A4A12;padding:10px 16px;text-align:center;font:500 14.5px/1.55 'IBM Plex Sans Thai',sans-serif;overflow-wrap:anywhere}
.store-contact{display:grid;gap:6px;margin-top:14px;font:400 14.5px/1.6 'IBM Plex Sans Thai',sans-serif}
.store-contact[hidden]{display:none}
.store-contact__row{display:flex;gap:10px;align-items:baseline;min-width:0}
.store-contact__label{flex:none;min-width:72px;font-weight:600}
.store-contact__value{min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.store-contact--footer{font-size:12.5px;color:#B9D0D8}
.store-contact--footer a{color:inherit}
.seo-content{padding:28px 30px;font:400 15.5px/1.75 'IBM Plex Sans Thai',sans-serif;color:#45423A}
.seo-content h1{margin:8px 0;font:600 30px/1.3 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.seo-content img{max-width:100%;height:auto;border-radius:8px}
.seo-crumb{font-size:14px;color:var(--muted)}
.seo-list{grid-column:1/-1;margin:0;padding:0 0 0 1.2em;font:400 15.5px/2 'IBM Plex Sans Thai',sans-serif}
.seo-list span{color:var(--muted)}

/* ---------- Commerce CTA theme ----------
   One colour, chosen in Admin → เนื้อหาหน้าร้าน → สีปุ่ม and validated on the server (#rrggbb only). The server derives the
   hover shade and a readable text colour and hands all three over as custom properties; these are the built-in values.
   Used by: add to cart, view details (hover), go to checkout, confirm order, track order. NOT used by social buttons,
   warnings, status badges or anything in Admin. */
:root{--cta:#087fa6;--cta-hover:#076b8b;--cta-text:#ffffff}
.btn.btn-solid{background:var(--cta);color:var(--cta-text);border-color:transparent;border-radius:10px;min-height:48px;font-weight:700;box-shadow:0 6px 16px rgba(6,28,48,.14)}
.btn.btn-solid:hover{background:var(--cta-hover);color:var(--cta-text);box-shadow:0 8px 20px rgba(6,28,48,.2);transform:translateY(-1px)}
.btn.btn-solid:active{transform:none;box-shadow:0 3px 8px rgba(6,28,48,.16)}
.btn.btn-solid:disabled,.btn.btn-solid.is-disabled,.btn.btn-solid[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn:focus-visible,.pick-btn:focus-visible,.card-detail:focus-visible,.social-btn:focus-visible{outline:3px solid #102b3d;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.card-actions{display:flex;gap:8px;margin-top:10px}
.card-detail,.card-actions .pick-btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 10px;border-radius:999px;font:600 14px 'IBM Plex Sans Thai',sans-serif;white-space:nowrap;text-align:center}
.card-detail{border:1px solid var(--border);background:#fff;color:var(--ink);transition:border-color .2s,color .2s}
.card-detail:hover{border-color:var(--ink);color:var(--ink)}
.pick-btn{background:var(--cta);color:var(--cta-text);border:0;border-radius:999px;font-weight:600;transition:background-color .2s}
.pick-btn:hover{background:var(--cta-hover);color:var(--cta-text)}
.pick-btn:disabled{opacity:.45;cursor:not-allowed;background:var(--cta)}
@media (max-width:420px){.card-actions{flex-direction:column}.card-detail,.card-actions .pick-btn{flex:none;width:100%}}

/* ---------- Social buttons: each platform's own colour, never the shop's CTA colour ---------- */
.social-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:999px;font:700 14.5px 'IBM Plex Sans Thai',sans-serif;color:#fff;text-decoration:none;white-space:nowrap;transition:filter .2s,transform .2s}
.social-btn svg{flex:none}
.social-btn:hover{color:#fff;filter:brightness(.92);transform:translateY(-1px)}
.social-btn--line{background:#06C755}
.social-btn--facebook{background:#1877F2}
.social-btn--instagram{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
.social-btn--tiktok{background:#000}
.social-btn--youtube{background:#FF0000}
.footer-social{display:flex;flex-wrap:wrap;gap:8px}
.footer-social .social-btn{min-height:38px;padding:0 14px;font-size:13.5px}
.footer-tagline{font:300 12px/1.75 'IBM Plex Sans Thai',sans-serif;color:#B9D0D8}

/* ---------- Brand story and articles ---------- */
.story-page,.article-page{max-width:1080px;margin:0 auto;padding:40px 30px 64px}
.story-hero{position:relative;overflow:hidden;border-radius:22px;padding:clamp(30px,6vw,64px);background:linear-gradient(145deg,#087fa6,#061c30);color:#fff}
.story-hero small{font:700 12.5px 'Chakra Petch',sans-serif;letter-spacing:.16em;color:#79d5df}
.story-hero h1{margin:14px 0 0;font:700 clamp(30px,5.2vw,54px)/1.2 'IBM Plex Sans Thai',sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.story-bays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px;margin:34px 0 0;padding:0;list-style:none}
.story-bays li{text-align:center;font:600 15px 'IBM Plex Sans Thai',sans-serif;color:#d9f1f4}
.story-bays i{display:block;height:34px;margin-bottom:10px;border:3px solid rgba(121,213,223,.85);border-bottom:0;border-radius:120px 120px 0 0}
.story-bays-caption{margin:16px 0 0;font:300 14px/1.7 'IBM Plex Sans Thai',sans-serif;color:#b9d3db}
.story-body{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:34px;align-items:start}
.story-body.has-image{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.story-image{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.story-image[hidden]{display:none}
.rich-text{font:400 17px/1.9 'IBM Plex Sans Thai',sans-serif;color:#24323a;overflow-wrap:anywhere}
.rich-text p{margin:0 0 18px}
.rich-text h2{margin:30px 0 12px;font:600 22px/1.4 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.rich-text ul{margin:0 0 18px;padding-left:1.3em}
.rich-text li{margin-bottom:6px}
.story-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.story-grid2 article,.story-contact{background:#fff;border:1px solid var(--border);border-radius:16px;padding:26px}
.story-grid2 h2,.story-contact h2{margin:0 0 10px;font:600 21px/1.4 'IBM Plex Sans Thai',sans-serif;color:var(--ink)}
.story-grid2 p,.story-contact p{margin:0;font:400 15px/1.8 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.story-grid2 a{font-weight:600}
.story-contact{margin-top:16px;background:#f5f1ea;border-color:transparent}
.story-contact .footer-social{margin-top:16px}
.story-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.article-page h1{margin:8px 0 10px;font:700 clamp(27px,4.4vw,40px)/1.3 'IBM Plex Sans Thai',sans-serif;color:var(--ink);letter-spacing:-.02em;overflow-wrap:anywhere}
.article-page .seo-crumb,.article-back{font:500 14px 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.article-summary{margin:0 0 22px;font:400 18px/1.75 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.article-image{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;margin:0 0 26px}
.article-meta{margin:26px 0 0;font:400 13.5px 'IBM Plex Sans Thai',sans-serif;color:var(--faint)}
.article-text{max-width:760px}
.article-lead{margin:0 0 24px;font:400 16px/1.7 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.article-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.article-list .article-card{display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:16px}
.article-list .article-card h2{margin:0;font:600 19px/1.45 'IBM Plex Sans Thai',sans-serif}
.article-list .article-card h2 a{color:var(--ink)}
.article-list .article-card p{margin:0;font:400 14.5px/1.75 'IBM Plex Sans Thai',sans-serif;color:var(--muted)}
.article-list .article-card .more{margin-top:auto;padding-top:8px;font:600 14px 'IBM Plex Sans Thai',sans-serif}
.article-empty{padding:34px;border:1px dashed var(--border);border-radius:16px;text-align:center;color:var(--muted)}
@media (max-width:760px){
  .story-page,.article-page{padding:22px 16px 48px}
  .story-body.has-image,.story-grid2,.article-list{grid-template-columns:minmax(0,1fr)}
  .story-bays li{font-size:13px}
  .rich-text{font-size:16px}
  .story-actions .btn{width:100%}
}