/* =====================================================================
   Storefront catalog (products page) + product detail dialog — 2026-11
   Self-contained: only .cx-* / .pdx-* classes. Brand colours come from the
   storefront theme (--blue = สีหลัก, --light-blue = สีรอง from Settings).
   ===================================================================== */
.cx,.pdx{
  --c1:var(--blue,#1fae84);--c2:var(--light-blue,#f0899b);
  --c1-ink:color-mix(in srgb,var(--c1) 70%,#0d1f1b);
  --c2-ink:color-mix(in srgb,var(--c2) 72%,#3a1020);
  --c1-soft:color-mix(in srgb,var(--c1) 11%,#fff);
  --c2-soft:color-mix(in srgb,var(--c2) 13%,#fff);
  --cx-surface:#fff;--cx-surface-2:#f7faf9;--cx-ink:#1c2b29;--cx-ink-2:#3d4f4c;--cx-muted:#6d7e7b;--cx-line:#e4ebe9;
  --cx-ok:#169a72;--cx-ok-soft:#e7f7f0;--cx-warn:#9a6410;--cx-warn-soft:#fff4df;--cx-bad:#cf4560;--cx-bad-soft:#ffeef2;
  --cx-shadow:0 2px 6px rgba(20,45,40,.05),0 14px 34px rgba(20,45,40,.08);
}
html[data-front-theme="dark"] .cx,html[data-front-theme="dark"] .pdx{
  --c1-soft:color-mix(in srgb,var(--c1) 18%,#13201e);--c2-soft:color-mix(in srgb,var(--c2) 18%,#13201e);
  --c1-ink:color-mix(in srgb,var(--c1) 55%,#fff);--c2-ink:color-mix(in srgb,var(--c2) 55%,#fff);
  --cx-surface:#14211f;--cx-surface-2:#1a2a27;--cx-ink:#eef5f3;--cx-ink-2:#cbd8d5;--cx-muted:#94a8a4;--cx-line:#2a3c39;
  --cx-ok:#4fd1a3;--cx-ok-soft:#173a30;--cx-warn:#f3c06a;--cx-warn-soft:#3a2f17;--cx-bad:#ff8fa3;--cx-bad-soft:#3d1d25;
  --cx-shadow:0 2px 6px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.3);
}

/* ---------- Page ---------- */
.cx{max-width:1240px;margin:0 auto;padding:8px 0 40px;color:var(--cx-ink)}
.cx-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;gap:24px;padding:30px 34px;border-radius:28px;color:#fff;
  background:radial-gradient(circle at 10% 130%,rgba(255,255,255,.2),transparent 45%),linear-gradient(115deg,var(--c1-ink) 0%,var(--c1) 50%,color-mix(in srgb,var(--c2) 85%,#3a1020) 100%);
  box-shadow:0 18px 40px color-mix(in srgb,var(--c1) 22%,transparent)}
.cx-hero::after{content:"";position:absolute;right:-60px;top:-90px;width:260px;height:260px;border-radius:50%;border:42px solid rgba(255,255,255,.09);pointer-events:none}
.cx-hero-copy{position:relative;z-index:1;min-width:0}
.cx-kicker{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.18);font-size:12px;font-weight:700;letter-spacing:.12em}
.cx-kicker svg{width:14px;height:14px}
.cx-hero h1{margin:12px 0 6px;font-size:clamp(26px,3.2vw,38px);line-height:1.25;letter-spacing:-.01em;color:#fff}
.cx-hero h1 em{font-style:normal;color:#fff;background:rgba(255,255,255,.18);padding:0 10px;border-radius:12px}
.cx-hero p{margin:0;max-width:560px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.9)}
.cx-hero p strong{color:#fff}
.cx-search{position:relative;z-index:1;display:flex;align-items:center}
.cx-search-icon{position:absolute;left:18px;display:grid;color:var(--c1-ink);pointer-events:none}
.cx-search-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cx-search input{width:100%;height:58px;margin:0;padding:0 52px 0 52px;border:0;border-radius:18px;background:#fff;color:#1c2b29;font:inherit;font-size:16px;box-shadow:0 12px 28px rgba(0,0,0,.16);outline:none}
.cx-search input:focus{box-shadow:0 0 0 4px rgba(255,255,255,.45),0 12px 28px rgba(0,0,0,.16)}
.cx-search input::-webkit-search-cancel-button{display:none}
.cx-search button{position:absolute;right:10px;width:36px;height:36px;padding:0;border:0;border-radius:12px;background:#eef3f2;color:#55615f;font-size:22px;line-height:1;cursor:pointer}

/* Toolbar */
.cx-toolbar{position:sticky;top:8px;z-index:20;margin:18px 0 18px;padding:12px;border:1px solid var(--cx-line);border-radius:22px;background:color-mix(in srgb,var(--cx-surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--cx-shadow)}
.cx-filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none;margin:0!important;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.cx-filters::-webkit-scrollbar{display:none}
.cx-filters .chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;margin:0;padding:0 16px;border:1.5px solid var(--cx-line);border-radius:99px;background:var(--cx-surface);color:var(--cx-ink-2);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:none;transition:border-color .15s,background .15s,color .15s}
.cx-filters .chip svg{width:17px;height:17px}
.cx-filters .chip:hover{border-color:var(--c1);color:var(--c1-ink)}
.cx-filters .chip.selected{background:linear-gradient(115deg,var(--c1),color-mix(in srgb,var(--c2) 80%,var(--c1)));border-color:transparent;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--c1) 28%,transparent)}
.cx-toolbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 4px 0;border-top:1px solid var(--cx-line)}
.cx-count{margin:0;font-size:14px;color:var(--cx-muted)}
.cx-count strong{font-size:16px;color:var(--cx-ink)}
.cx-sort{display:flex;align-items:center;gap:8px;margin-left:auto}
.cx-sort label{font-size:13.5px;font-weight:600;color:var(--cx-muted)}
.cx-sort select{height:40px;margin:0;padding:0 34px 0 14px;border:1.5px solid var(--cx-line);border-radius:12px;background:var(--cx-surface);color:var(--cx-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cx-line{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;background:#06c755;color:#fff!important;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.cx-line img{width:22px;height:22px;border-radius:6px}
.cx-line:hover{filter:brightness(1.05)}

/* Grid + cards */
.cx .cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:0;padding:0}
.cx-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;overflow:hidden;border:1px solid var(--cx-line);border-radius:20px;background:var(--cx-surface);color:var(--cx-ink);text-align:left;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(20,45,40,.04);transition:transform .18s,box-shadow .18s,border-color .18s}
.cx-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c1) 35%,var(--cx-line));box-shadow:var(--cx-shadow)}
.cx-card:focus-visible{outline:3px solid color-mix(in srgb,var(--c1) 50%,transparent);outline-offset:3px}
.cx-card.is-out .cx-media img{filter:grayscale(.7);opacity:.75}
.cx-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cx-surface-2)}
.cx-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s}
.cx-card:hover .cx-media img{transform:scale(1.05)}
.cx-flags{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:5px}
.cx-flag{padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.95);color:#3d4f4c;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.cx-flag.is-featured{background:var(--c1);color:#fff}
.cx-flag.is-new{background:var(--c2);color:#fff}
.cx-flag.is-out{background:#cf4560;color:#fff}
.cx .cx-fav{top:10px;right:10px;width:38px;height:38px}
.cx-body{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 16px 6px;min-width:0}
.cx-cat{align-self:flex-start;max-width:100%;padding:2px 10px;border-radius:99px;background:var(--c1-soft);color:var(--c1-ink);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-name{margin:4px 0 0;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--cx-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.cx-price{margin-top:2px;font-size:22px;font-weight:800;line-height:1.2;color:var(--c2-ink)}
.cx-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--cx-line);font-size:12.5px}
.cx-shop{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--cx-muted)}
.cx-shop svg{width:15px;height:15px;flex:none}
.cx-shop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-status{flex:none;padding:2px 9px;border-radius:99px;font-weight:700;white-space:nowrap}
.cx-status.is-ok{background:var(--cx-ok-soft);color:var(--cx-ok)}
.cx-status.is-warn{background:var(--cx-warn-soft);color:var(--cx-warn)}
.cx-status.is-bad{background:var(--cx-bad-soft);color:var(--cx-bad)}
.cx-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 12px 12px;height:40px;border-radius:12px;background:var(--c1-soft);color:var(--c1-ink);font-size:14px;font-weight:700;transition:background .15s,color .15s}
.cx-card:hover .cx-cta{background:var(--c1);color:#fff}
.cx-loading,.cx-empty{grid-column:1/-1;display:grid;justify-items:center;gap:8px;padding:60px 20px;border:2px dashed var(--cx-line);border-radius:22px;text-align:center;color:var(--cx-muted)}
.cx-loading span{width:34px;height:34px;border-radius:50%;border:3px solid var(--cx-line);border-top-color:var(--c1);animation:cx-spin .8s linear infinite}
@keyframes cx-spin{to{transform:rotate(360deg)}}
.cx-empty h3{margin:4px 0 0;color:var(--cx-ink)}

@media(max-width:860px){
  .cx-hero{grid-template-columns:1fr;padding:24px 22px;border-radius:22px}
  .cx-toolbar{top:4px;border-radius:18px}
}
@media(max-width:560px){
  .cx{padding-top:0}
  .cx-hero h1{font-size:26px}
  .cx-hero p{font-size:14px}
  .cx-search input{height:52px;font-size:15px}
  .cx-sort{margin-left:0}
  .cx-sort label{display:none}
  .cx-line span{display:none}
  .cx-line{padding:0 9px}
  .cx-count{flex:1}
  .cx .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cx-card{border-radius:16px}
  .cx-body{padding:10px 10px 4px}
  .cx-name{font-size:14px}
  .cx-price{font-size:18px}
  .cx-foot .cx-shop{display:none}
  .cx-cta{margin:6px 8px 8px;height:36px;font-size:13px}
  .cx .cx-fav{width:34px;height:34px;top:8px;right:8px}
}

/* ---------- Product detail dialog ---------- */
#detail:has(.pdx){max-width:980px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);padding:0;overflow:auto;border:0;border-radius:28px;background:var(--cx-surface,#fff)!important;box-shadow:0 30px 90px rgba(10,30,26,.3)}
html[data-front-theme="dark"] #detail:has(.pdx){background:#14211f!important}
#detail:has(.pdx)::backdrop{background:rgba(12,28,25,.55);backdrop-filter:blur(6px)}
#detail:has(.pdx)>.close{display:none}
.pdx{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);color:var(--cx-ink);background:var(--cx-surface)}
.pdx-close{position:absolute;right:16px;top:16px;z-index:5;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid var(--cx-line);border-radius:14px;background:var(--cx-surface);color:var(--cx-ink-2);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.pdx-close:hover{color:var(--cx-ink);border-color:var(--c1)}
.pdx-media{padding:20px;background:linear-gradient(160deg,var(--c1-soft),var(--c2-soft))}
.pdx-photo{position:sticky;top:20px;aspect-ratio:1/1;overflow:hidden;border-radius:22px;background:#fff;box-shadow:var(--cx-shadow)}
.pdx-photo img{width:100%;height:100%;display:block;object-fit:contain}
.pdx-badges{position:absolute;left:14px;top:14px;display:flex;flex-wrap:wrap;gap:6px}
.pdx-badges .product-detail-badge{padding:5px 12px;border-radius:99px;background:var(--c1);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.pdx-badges .product-detail-badge.new{background:var(--c2)}
.pdx .pdx-fav{top:14px;right:14px}
.pdx-info{display:flex;flex-direction:column;gap:12px;padding:28px 30px 26px;min-width:0}
.pdx-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-right:52px}
.pdx-cat{padding:4px 12px;border-radius:99px;background:var(--c1-soft);color:var(--c1-ink);font-size:13px;font-weight:700}
.pdx-status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700}
.pdx-status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.pdx-status.is-ok{background:var(--cx-ok-soft);color:var(--cx-ok)}
.pdx-status.is-warn{background:var(--cx-warn-soft);color:var(--cx-warn)}
.pdx-status.is-bad{background:var(--cx-bad-soft);color:var(--cx-bad)}
.pdx-name{margin:0;font-size:clamp(22px,2.4vw,28px);line-height:1.35;color:var(--cx-ink)}
.pdx-price{font-size:clamp(28px,3vw,36px);font-weight:800;line-height:1.1;color:var(--c2-ink)}
.pdx-shop{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cx-muted)}
.pdx-shop svg{width:18px;height:18px;color:var(--c1)}
.pdx-shop strong{color:var(--cx-ink)}
.pdx-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.pdx-facts li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 13px;border:1px solid var(--cx-line);border-radius:14px;background:var(--cx-surface-2)}
.pdx-facts li>span{grid-row:1/3;font-size:20px}
.pdx-facts li:last-child:nth-child(odd){grid-column:1/-1}
.pdx-facts small{font-size:12px;color:var(--cx-muted)}
.pdx-facts strong{font-size:14px;color:var(--cx-ink);overflow-wrap:anywhere}
.pdx-desc{padding:14px 16px;border-radius:16px;background:var(--cx-surface-2);border:1px solid var(--cx-line)}
.pdx-desc h3{margin:0 0 6px;font-size:15px;color:var(--cx-ink)}
.pdx-desc p{margin:0;font-size:14.5px;line-height:1.8;color:var(--cx-ink-2);white-space:pre-line}
.pdx-buy{display:flex;align-items:center;gap:12px;margin-top:2px;padding:14px 18px;border-radius:18px;background:#06c755;color:#fff!important;text-decoration:none;box-shadow:0 10px 24px rgba(6,199,85,.28);transition:transform .15s,filter .15s}
.pdx-buy:hover{transform:translateY(-1px);filter:brightness(1.04)}
.pdx-buy img{width:40px;height:40px;flex:none;border-radius:12px;background:#fff;padding:4px}
.pdx-buy span{flex:1;min-width:0}
.pdx-buy strong{display:block;font-size:17px;color:#fff}
.pdx-buy small{display:block;font-size:12.5px;color:rgba(255,255,255,.9)}
.pdx-buy b{font-size:22px}
.pdx-note{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--cx-muted)}
.pdx-note svg{width:15px;height:15px;flex:none;color:var(--cx-ok)}
.pdx-back{align-self:flex-start;padding:8px 2px;border:0;background:none;color:var(--c1-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
@media(max-width:760px){
  #detail:has(.pdx){width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
  .pdx{grid-template-columns:1fr}
  .pdx-media{padding:14px}
  .pdx-photo{position:relative;top:auto;border-radius:18px}
  .pdx-info{padding:18px 18px 22px}
  .pdx-top{padding-right:0}
  .pdx-close{right:22px;top:22px}
  .pdx-facts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cx-card,.cx-media img,.pdx-buy{transition:none}}

.bag-gallery{display:flex;gap:8px;overflow-x:auto;padding:12px 2px}.bag-gallery button{flex:0 0 66px;width:66px;height:66px;border:1px solid #d9d9df;border-radius:10px;background:#fff;padding:4px;cursor:pointer}.bag-gallery button:focus{outline:2px solid #8670a8}.bag-gallery img{width:100%;height:100%;object-fit:contain}.pdx-photo>img{object-fit:contain}