/* หน้าค้นหากลาง search.html (2026-10-11 ทำใหม่) · ตัวสร้าง notes/site-search/build_index.py · สคริปต์ site-search.js
   โทน BK Blue / Navy / ขาว / ฟ้าอ่อน · คลาส ss- ใช้เฉพาะหน้านี้ */
.ss-page{--ss-blue:#1d4ed8;--ss-blue2:#2563eb;--ss-navy:#0b1f4d;--ss-ink:#14213d;--ss-mut:#5d6e8c;--ss-line:#dce6f5;
  --ss-tint:#eef5ff;--ss-tint2:#f6f9ff;--ss-line-g:#06c755;background:#fff;color:var(--ss-ink)}
.ss-page button{font:inherit;cursor:pointer}
.ss-page svg{flex:0 0 auto}

/* ---------- ฮีโร่ + ช่องค้นหา ---------- */
.ss-hero{position:relative;overflow:hidden;padding:44px 0 30px;
  background:radial-gradient(900px 420px at 88% 10%,#dbe8ff 0,rgba(219,232,255,0) 70%),
             radial-gradient(700px 360px at 0% 100%,#e8f1ff 0,rgba(232,241,255,0) 70%),linear-gradient(180deg,#f3f7ff,#fff 92%)}
.ss-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#c9d9f6 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.ss-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:28px;align-items:center}
.ss-kicker{display:inline-flex;margin:0 0 12px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--ss-line);
  font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--ss-blue)}
.ss-hero h1{margin:0 0 10px;font-size:clamp(30px,3.4vw,46px);line-height:1.18;font-weight:800;color:var(--ss-navy);letter-spacing:-.01em}
.ss-sub{margin:0 0 22px;font-size:clamp(15.5px,1.25vw,18px);line-height:1.7;color:var(--ss-mut);max-width:640px}
.ss-form{position:relative;display:flex;align-items:center;gap:8px;max-width:760px;padding:8px;border-radius:20px;background:#fff;
  border:2px solid #cfe0fb;box-shadow:0 26px 50px -30px rgba(29,78,216,.55);transition:border-color .2s ease,box-shadow .2s ease}
.ss-form:focus-within{border-color:var(--ss-blue);box-shadow:0 0 0 4px rgba(29,78,216,.14),0 26px 50px -30px rgba(29,78,216,.6)}
.ss-form-ic{display:grid;place-items:center;width:40px;color:var(--ss-blue)}.ss-form-ic svg{width:24px;height:24px}
.ss-form input{flex:1 1 auto;min-width:0;height:52px;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ss-ink)}
.ss-form input::placeholder{color:#8a99b4}
.ss-form input::-webkit-search-cancel-button{cursor:pointer}
.ss-go{flex:0 0 auto;height:52px;padding:0 30px;border:0;border-radius:14px;color:#fff;font-size:17px!important;font-weight:800;
  background:linear-gradient(135deg,var(--ss-blue2),var(--ss-blue));box-shadow:0 12px 22px -12px var(--ss-blue);transition:transform .15s ease,filter .15s ease}
.ss-go:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ss-go:focus-visible,.ss-page button:focus-visible,.ss-page a:focus-visible,.ss-sort select:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.ss-pop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;max-width:780px}
.ss-pop-h{font-size:14px;font-weight:700;color:var(--ss-navy)}
.ss-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ss-pill{padding:7px 14px;border-radius:999px;border:1px solid var(--ss-line);background:#fff;color:var(--ss-navy);font-size:14px!important;
  font-weight:600;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.ss-pill:hover{background:var(--ss-tint);border-color:#9dbcf2;color:var(--ss-blue);transform:translateY(-1px)}
.ss-hero-art{position:relative;display:grid;place-items:center;min-height:300px}
.ss-hero-art img{position:relative;width:100%;max-width:380px;height:auto;filter:drop-shadow(0 30px 34px rgba(11,31,77,.28));animation:ssfloat 7s ease-in-out infinite}
.ss-blob{position:absolute;width:82%;aspect-ratio:1;border-radius:46% 54% 52% 48%;background:linear-gradient(140deg,#dbe8ff,#bcd3fb);opacity:.75;animation:ssblob 12s ease-in-out infinite}
@keyframes ssfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ssblob{0%,100%{border-radius:46% 54% 52% 48%;transform:rotate(0)}50%{border-radius:54% 46% 44% 56%;transform:rotate(8deg)}}
.ss-trust{position:relative;list-style:none;margin:26px auto 0;padding-top:0;padding-bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ss-trust li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--ss-line);
  box-shadow:0 18px 34px -28px rgba(11,31,77,.6)}
.ss-trust svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--ss-tint);color:var(--ss-blue)}
.ss-trust span{display:grid;font-size:12.5px;line-height:1.45;color:var(--ss-mut)}
.ss-trust small{font-size:inherit}
.ss-trust b{font-size:14.5px;color:var(--ss-navy)}

/* ---------- การ์ดหมวด ---------- */
.ss-cats-sec{padding:34px 0 8px;background:#fff}
.ss-h2{margin:0 0 16px;font-size:22px;font-weight:800;color:var(--ss-navy)}
.ss-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ss-cat{width:100%;height:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;border-radius:18px;
  border:1px solid var(--ss-line);background:linear-gradient(180deg,#fff,var(--ss-tint2));color:var(--ss-ink);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.ss-cat:hover{transform:translateY(-3px);border-color:#9dbcf2;box-shadow:0 18px 30px -22px rgba(29,78,216,.55)}
.ss-cat[aria-pressed="true"]{border-color:var(--ss-blue);background:linear-gradient(180deg,#eef4ff,#dfeaff);box-shadow:inset 0 0 0 1px var(--ss-blue)}
.ss-cat.is-zero{opacity:.5}
.ss-cat-pic{flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:#fff;overflow:hidden}
.ss-cat-pic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s ease}
.ss-cat:hover .ss-cat-pic img{transform:scale(1.07)}
.ss-cat-svg{width:56px;height:56px}
.ss-cat-tx{display:grid;gap:2px;min-width:0}
.ss-cat-tx b{font-size:14.5px;line-height:1.35;color:var(--ss-navy)}
.ss-cat-tx b span{white-space:nowrap}
.ss-cat-tx small{font-size:12.5px;color:var(--ss-mut)}

/* ---------- ผลลัพธ์ 3 คอลัมน์ ---------- */
.ss-res-sec{padding:26px 0 64px;background:#fff}
.ss-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 270px;gap:24px;align-items:start}
.ss-side{position:sticky;top:126px;border:1px solid var(--ss-line);border-radius:20px;background:#fff;box-shadow:0 18px 40px -36px rgba(11,31,77,.6)}
.ss-side-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px}
.ss-side-head h2{margin:0;font-size:18px;font-weight:800;color:var(--ss-navy)}
.ss-side-x{display:none}
.ss-side-body{padding:4px 12px 16px}
.ss-side-foot{display:none}
.ss-fs{margin:0;padding:10px 0 12px;border:0;border-top:1px solid var(--ss-line)}
.ss-fs:first-child{border-top:0}
.ss-fs legend{padding:0 6px 6px;font-size:14px;font-weight:800;color:var(--ss-navy)}
.ss-fs[hidden]{display:none}
.ss-opts{display:grid;gap:2px}
.ss-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:38px;padding:7px 10px;border:0;
  border-radius:10px;background:transparent;color:var(--ss-ink);font-size:14px!important;text-align:left;transition:background .15s ease,color .15s ease}
.ss-opt:hover{background:var(--ss-tint)}
.ss-opt span{position:relative;padding-left:24px;line-height:1.35}
.ss-opt span::before{content:"";position:absolute;left:0;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:5px;border:1.5px solid #a9bcdc;background:#fff;transition:all .15s ease}
.ss-opt small{flex:0 0 auto;min-width:30px;padding:1px 8px;border-radius:999px;background:#f1f5fb;color:var(--ss-mut);font-size:12px;text-align:center}
.ss-opt.is-on{background:var(--ss-tint);color:var(--ss-blue);font-weight:700}
.ss-opt.is-on span::before{border-color:var(--ss-blue);background:var(--ss-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.ss-opt.is-on small{background:var(--ss-blue);color:#fff}
.ss-opt:disabled{opacity:.42;cursor:default}
.ss-opt:disabled:hover{background:transparent}
.ss-clear{width:100%;margin-top:8px;padding:10px;border-radius:12px;border:1px solid var(--ss-line);background:#fff;color:var(--ss-navy);font-weight:700}
.ss-clear:hover:not(:disabled){border-color:var(--ss-blue);color:var(--ss-blue)}
.ss-clear:disabled{opacity:.45;cursor:default}

.ss-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;scroll-margin-top:110px}
.ss-fbtn{display:none;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--ss-line);background:#fff;color:var(--ss-navy);font-weight:700}
.ss-fbtn svg{width:20px;height:20px;color:var(--ss-blue)}
.ss-fbadge{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ss-blue);color:#fff;font-size:12px}
.ss-fbadge[hidden]{display:none}
.ss-count{flex:1 1 auto;margin:0;font-size:15.5px;color:var(--ss-ink)}
.ss-count b{font-size:19px;color:var(--ss-blue)}
.ss-count span{color:var(--ss-mut)}
.ss-sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ss-mut)}
.ss-sort select{height:42px;padding:0 34px 0 12px;border-radius:12px;border:1px solid var(--ss-line);background:#fff;font:inherit;font-size:14px;color:var(--ss-navy);
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ss-chips:empty{display:none}
.ss-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid #bcd3fb;background:var(--ss-tint);color:var(--ss-blue);font-size:13.5px!important;font-weight:700}
.ss-chip i{font-style:normal;font-size:16px;line-height:1}
.ss-chip:hover{background:#dfeaff}
.ss-chip-all{background:#fff;border-color:var(--ss-line);color:var(--ss-mut)}

.ss-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px}
.ss-grid[hidden]{display:none}
.ss-grid>li{display:flex;animation:ssin .4s ease both}
.ss-grid>li:nth-child(2){animation-delay:.03s}.ss-grid>li:nth-child(3){animation-delay:.06s}.ss-grid>li:nth-child(4){animation-delay:.09s}
.ss-grid>li:nth-child(5){animation-delay:.12s}.ss-grid>li:nth-child(6){animation-delay:.15s}.ss-grid>li:nth-child(n+7){animation-delay:.18s}
@keyframes ssin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ss-card{flex:1 1 auto;display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--ss-line);background:#fff;color:var(--ss-ink);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ss-card:hover{text-decoration:none;transform:translateY(-4px);border-color:#9dbcf2;box-shadow:0 24px 40px -28px rgba(29,78,216,.55)}
.ss-pic{display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(180deg,var(--ss-tint2),#eef4fd);overflow:hidden}
.ss-pic img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;mix-blend-mode:multiply;transition:transform .3s ease}
.ss-card:hover .ss-pic img{transform:scale(1.05)}
.ss-noimg{width:56px;height:56px;border-radius:14px;background:#dfe8f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a6c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E") center/28px no-repeat}
.ss-body{flex:1 1 auto;display:flex;flex-direction:column;gap:5px;padding:13px 14px 14px}
.ss-tag{align-self:flex-start;padding:2px 9px;border-radius:999px;background:var(--ss-tint);color:var(--ss-blue);font-size:11.5px;font-weight:700;line-height:1.6}
/* ชื่อสินค้าไม่เกิน 3 บรรทัด (กันที่ไว้อย่างน้อย 2 บรรทัด) · ยี่ห้อ/รหัส บรรทัดเดียว → การ์ดสูงใกล้กันทั้งตาราง ราคาอยู่ระดับเดียวกัน */
.ss-name{font-size:15px;line-height:1.4;min-height:2.8em;font-weight:700;color:var(--ss-navy);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ss-meta,.ss-sku{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-meta{font-size:12.5px;color:var(--ss-mut);line-height:1.4}
.ss-sku{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#7a8aa6}
.ss-foot{margin-top:auto;padding-top:8px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ss-pr{font-size:18px;font-weight:800;color:var(--ss-blue);white-space:nowrap}
.ss-pr small{font-size:13px;font-weight:700}
.ss-free{color:#15803d}
.ss-pr-none{font-size:13px;font-weight:700;color:var(--ss-mut)}
.ss-view{font-size:13px;font-weight:700;color:var(--ss-navy);white-space:nowrap}
.ss-view i{display:inline-block;font-style:normal;color:var(--ss-blue);transition:transform .18s ease}
.ss-card:hover .ss-view{color:var(--ss-blue)}
.ss-card:hover .ss-view i{transform:translateX(3px)}
.ss-more-w{text-align:center}
.ss-more{margin-top:22px;padding:12px 26px;border-radius:14px;border:1.5px solid var(--ss-blue);background:#fff;color:var(--ss-blue);font-weight:800}
.ss-more:hover{background:var(--ss-tint)}
.ss-more[hidden]{display:none}

.ss-empty{padding:34px 24px;border-radius:22px;border:1px dashed #bcd3fb;background:linear-gradient(180deg,var(--ss-tint2),#fff);text-align:center}
.ss-empty[hidden]{display:none}
.ss-empty-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:#fff;color:var(--ss-blue);border:1px solid var(--ss-line)}
.ss-empty-ic svg{width:30px;height:30px}
.ss-empty h2{margin:0 0 6px;font-size:21px;color:var(--ss-navy)}
.ss-empty>p{margin:0 0 12px;color:var(--ss-mut)}
.ss-tips{display:inline-grid;gap:6px;margin:0 0 16px;padding:0 0 0 20px;text-align:left;font-size:14.5px;color:var(--ss-ink)}
.ss-tips b{color:var(--ss-blue)}
.ss-empty-sug{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:18px}
.ss-empty-sug span{font-size:14px;font-weight:700;color:var(--ss-navy)}
.ss-empty-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ss-nojs{padding:16px;border-radius:14px;background:var(--ss-tint)}

.ss-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:14px;font-weight:800;font-size:15px;color:#fff;
  transition:transform .15s ease,filter .15s ease}
.ss-btn:hover{text-decoration:none;color:#fff;filter:brightness(1.06);transform:translateY(-1px)}
.ss-btn svg{width:20px;height:20px}
.ss-btn-tel{background:linear-gradient(135deg,var(--ss-blue2),var(--ss-blue));box-shadow:0 12px 22px -14px var(--ss-blue)}
.ss-btn-line{background:var(--ss-line-g);box-shadow:0 12px 22px -14px var(--ss-line-g)}
.ss-btn-line svg{width:24px;height:24px}

.ss-help{position:sticky;top:126px}
.ss-help-card{position:relative;overflow:hidden;display:grid;gap:10px;padding:22px 18px 18px;border-radius:22px;color:var(--ss-ink);
  background:linear-gradient(180deg,#eaf2ff 0,#fff 62%);border:1px solid #cfe0fb;box-shadow:0 22px 44px -36px rgba(29,78,216,.7)}
.ss-help-card::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#c7dbff,rgba(199,219,255,0) 70%)}
.ss-help-ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--ss-blue);color:#fff;box-shadow:0 12px 22px -12px var(--ss-blue)}
.ss-help-ic svg{width:28px;height:28px}
.ss-help-card h2{position:relative;margin:4px 0 0;font-size:22px;line-height:1.3;font-weight:800;color:var(--ss-navy)}
.ss-help-card h2 span{display:block;font-size:16px;color:var(--ss-blue)}
.ss-help-card>p{margin:0 0 4px;font-size:14px;line-height:1.65;color:var(--ss-mut)}
.ss-help-link{font-size:14px;font-weight:700;color:var(--ss-blue);text-align:center;padding:4px 0}
.ss-help-time{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding-top:10px;border-top:1px solid var(--ss-line);font-size:13px!important;color:var(--ss-mut)!important}
.ss-help-time svg{width:16px;height:16px;color:var(--ss-blue)}
.ss-scrim{display:none}

/* ---------- จอกลาง: ช่วยเหลือย้ายไปใต้ผลลัพธ์ ---------- */
@media (max-width:1279px){
  .ss-layout{grid-template-columns:240px minmax(0,1fr)}
  .ss-help{position:static;grid-column:2}
  .ss-help-card{grid-template-columns:auto 1fr;align-items:center;column-gap:16px}
  .ss-help-card>*{grid-column:2}.ss-help-ic{grid-column:1;grid-row:1 / span 2}
  .ss-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ss-cat{flex-direction:column;text-align:center;padding:14px 10px}
}
@media (max-width:1100px){.ss-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- แท็บเล็ต/มือถือ: ตัวกรองเป็นลิ้นชัก ---------- */
@media (max-width:1023px){
  .ss-hero-in{grid-template-columns:minmax(0,1fr) 240px}
  .ss-layout{grid-template-columns:minmax(0,1fr)}
  .ss-help{grid-column:auto}
  .ss-fbtn{display:inline-flex}
  .ss-side{position:fixed;z-index:1001;left:0;top:0;bottom:0;width:min(360px,88vw);border-radius:0 20px 20px 0;border:0;display:flex;flex-direction:column;
    transform:translateX(-102%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;box-shadow:0 0 40px rgba(11,31,77,.3)}
  .ss-side.is-open{transform:none;visibility:visible;transition:transform .28s ease}
  .ss-side-head{padding:16px 16px 10px;border-bottom:1px solid var(--ss-line)}
  .ss-side-x{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--ss-line);background:#fff;color:var(--ss-navy)}
  .ss-side-x svg{width:22px;height:22px}
  .ss-side-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px 12px}
  .ss-side-foot{display:block;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ss-line)}
  .ss-apply{width:100%;height:48px;border:0;border-radius:14px;background:var(--ss-blue);color:#fff;font-weight:800;font-size:16px!important}
  .ss-opt{min-height:44px}
  .ss-scrim{display:block;position:fixed;inset:0;z-index:1000;background:rgba(11,31,77,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
  .ss-side.is-open~.ss-scrim,body.ss-lock .ss-scrim{opacity:1;visibility:visible;transition:opacity .25s ease}
  body.ss-lock{overflow:hidden}
  .ss-help-card{max-width:none}
}
@media (max-width:767px){
  .ss-hero{padding:26px 0 22px}
  .ss-hero-in{grid-template-columns:minmax(0,1fr)}
  .ss-hero-art{display:none}
  .ss-form{padding:6px;border-radius:16px;gap:4px}
  .ss-form-ic{width:30px}.ss-form-ic svg{width:20px;height:20px}
  .ss-form input{height:48px;font-size:16px}
  .ss-go{height:48px;padding:0 18px;font-size:16px!important;border-radius:12px}
  .ss-pop{gap:8px}
  /* แถวเลื่อนข้าง (คำค้นยอดนิยม · หมวด): เต็มขอบจอ + snap + เห็นขอบชิ้นถัดไป บอกว่าเลื่อนได้ */
  .ss-pills,.ss-cats{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;overscroll-behavior-x:contain;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:18px;padding-right:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ss-pills::-webkit-scrollbar,.ss-cats::-webkit-scrollbar{display:none}
  .ss-pills::after,.ss-cats::after{content:"";flex:0 0 8px}
  .ss-pills{padding-top:2px;padding-bottom:6px;width:auto;flex-basis:100%}
  .ss-pills>li{flex:0 0 auto;scroll-snap-align:start}
  .ss-pill{white-space:nowrap}
  .ss-trust{gap:10px;margin-top:20px}
  .ss-trust li{padding:10px 12px;gap:10px}
  .ss-trust svg{width:34px;height:34px;padding:7px}
  .ss-trust small,.ss-kicker{display:none}.ss-trust b{font-size:13px;line-height:1.35}
  .ss-cats-sec{padding-top:26px}
  .ss-h2{font-size:19px;margin-bottom:12px}
  .ss-cats{gap:10px;padding-top:2px;padding-bottom:10px}
  .ss-cats>li{flex:0 0 calc((100vw - 74px) / 2);max-width:170px;scroll-snap-align:start}   /* 2 ใบเต็ม + เห็นขอบใบที่ 3 */
  .ss-cat{flex-direction:column;text-align:center;padding:12px 8px;gap:8px}
  .ss-cat-pic{width:58px;height:58px}
  .ss-cat-tx b{font-size:13.5px}
  .ss-res-sec{padding-top:16px}
  .ss-bar{gap:10px}
  .ss-count{order:3;flex-basis:100%;font-size:14.5px}
  .ss-sort{margin-left:auto}.ss-sort span{display:none}
  .ss-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ss-pic img{padding:10px}
  .ss-body{padding:10px 11px 12px;gap:4px}
  .ss-name{font-size:14px}
  .ss-meta{font-size:12px}
  .ss-sku{display:none}
  .ss-foot{flex-direction:column;align-items:flex-start;gap:4px}
  .ss-pr{font-size:16.5px}
  .ss-view{font-size:12.5px}
  .ss-help-card{grid-template-columns:1fr}
  .ss-help-card>*,.ss-help-ic{grid-column:1;grid-row:auto}
  .ss-empty{padding:26px 16px}
  .ss-empty-act .ss-btn{flex:1 1 100%}
}
@media (max-width:380px){
  .ss-go{padding:0 14px}
  .ss-trust li{padding:9px 10px;gap:8px}.ss-trust b{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .ss-hero-art img,.ss-blob,.ss-grid>li{animation:none}
  .ss-card,.ss-cat,.ss-pill,.ss-go,.ss-side,.ss-scrim{transition:none}
}