/* ============================================================
   สินค้าทั้งหมด + บริการของเรา  (ธีมเดียวกับหน้าแรก ดำ/เขียว)
   ============================================================ */

/* ---------- แถบเครื่องมือค้นหา ---------- */
.shop .panel{padding:22px 20px 24px}
.shop-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.sfield{
  flex:1 1 300px;min-width:0;display:flex;align-items:center;gap:10px;
  background:#04070300;border:1px solid var(--line);border-radius:12px;padding:9px 14px;
  transition:border-color .18s,box-shadow .18s}
.sfield:focus-within{border-color:var(--g3);box-shadow:0 0 0 3px rgba(128,208,1,.12)}
.sfield svg{width:18px;height:18px;color:var(--g);flex:0 0 auto}
.sfield input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font:400 16px/1.5 'Kanit',sans-serif}
.sfield input::placeholder{color:#6f7d68}
.sfield .clr{
  border:0;background:transparent;color:#8d9a86;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.sfield .clr:hover{color:var(--g)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:transparent;color:#d5ddcf;
  border-radius:999px;padding:7px 15px;font:400 14.5px/1.2 'Kanit',sans-serif;cursor:pointer;
  transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--g3);color:#fff}
.chip.on{background:var(--g);border-color:var(--g);color:#04210a;font-weight:500}
.chip i{font-style:normal;opacity:.6;font-size:12.5px;margin-left:5px}
.chip.on i{opacity:.75}

.chips.brands{margin:12px 0 0;padding-top:12px;border-top:1px solid #1a2314}
.scount{margin:14px 2px 12px;color:var(--dim2);font-size:14px;font-weight:300}
.scount b{color:var(--g);font-weight:500}

/* ---------- ตารางสินค้า ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{
  display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:linear-gradient(170deg,#0b1209,#050803);
  border:1px solid #1e2917;border-radius:16px;overflow:hidden;padding:0;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.pcard:hover{border-color:var(--g3);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.6)}
.pcard .im{position:relative;background:#eef1f3;aspect-ratio:560/434;overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .tag{
  position:absolute;left:9px;top:9px;border-radius:999px;padding:3px 11px;
  font:500 12px/1.5 'Kanit',sans-serif;color:#04210a;background:var(--g2);
  box-shadow:0 3px 10px rgba(0,0,0,.35)}
.pcard .tag.pm{background:linear-gradient(180deg,#F7E7A8,#D5A93A);color:#2a1e00}
.pcard .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard .br{color:var(--g);font-size:12.5px;font-weight:500;letter-spacing:.4px}
.pcard .cd{color:#fff;font-size:16px;font-weight:500;line-height:1.3}
.pcard .jis{
  align-self:flex-start;border:1px solid #2c3a20;border-radius:6px;padding:1px 8px;
  font-size:12px;color:#b9c5b1;font-weight:300}
.pcard .sp{color:var(--dim2);font-size:12.5px;font-weight:300;line-height:1.45}
.pcard .pr{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pcard .pr b{color:#fff;font-size:20px;font-weight:600}
.pcard .pr s{color:#6f7d68;font-size:13.5px;font-weight:300}
.pcard .pr .ask{color:var(--g2);font-size:16px;font-weight:500}

.smore{text-align:center;margin-top:20px}
.btn-more{
  border:1px solid var(--g3);background:transparent;color:var(--g);border-radius:12px;
  padding:11px 30px;font:500 16px/1.2 'Kanit',sans-serif;cursor:pointer;transition:.18s}
.btn-more:hover{background:var(--g);color:#04210a}

.snone{text-align:center;padding:34px 16px;color:var(--dim);font-weight:300}
.snone b{display:block;color:#fff;font-size:19px;font-weight:500;margin-bottom:6px}
.snone .cta2{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}

/* ---------- กล่องรายละเอียดสินค้า ---------- */
.pmodal{
  position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.78);padding:18px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pmodal.on{display:flex}
.pmbox{
  width:min(920px,100%);max-height:88vh;overflow:auto;border-radius:20px;
  background:linear-gradient(170deg,#0c1409,#05080b);border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.8)}
.pmhead{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:linear-gradient(180deg,#0d1509,#0b1208);border-bottom:1px solid #1a2314}
.pmhead .t{flex:1;min-width:0}
.pmhead .br{color:var(--g);font-size:13px;font-weight:500}
.pmhead h3{margin:0;font-size:20px;font-weight:600;color:#fff;line-height:1.25}
.pmhead .x{
  border:1px solid #24301c;background:#0a0f08;color:#c9d3c2;width:38px;height:38px;
  border-radius:10px;font-size:20px;line-height:1;cursor:pointer;flex:0 0 auto}
.pmhead .x:hover{border-color:var(--g3);color:var(--g)}
.pmbody{padding:18px}
.pmtop{display:grid;grid-template-columns:300px 1fr;gap:20px}
.pmim{background:#eef1f3;border-radius:14px;overflow:hidden;aspect-ratio:560/434}
.pmim img{width:100%;height:100%;object-fit:cover}
.pmprice{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pmprice b{color:#fff;font-size:32px;font-weight:700;line-height:1}
.pmprice s{color:#6f7d68;font-size:16px;font-weight:300}
.pmprice .save{
  background:var(--red);color:#fff;border-radius:6px;padding:2px 9px;font-size:13px;font-weight:500}
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#1a2314;
  border:1px solid #1a2314;border-radius:12px;overflow:hidden}
.spec div{background:#080d06;padding:9px 13px;display:flex;gap:10px;font-size:14px}
.spec dt{color:var(--dim2);font-weight:300;flex:0 0 96px}
.spec dd{margin:0;color:#fff;font-weight:400;flex:1;min-width:0}
.pmsec{margin-top:20px}
.pmsec h4{
  margin:0 0 10px;font-size:16.5px;font-weight:500;color:var(--g);
  display:flex;align-items:center;gap:10px}
.pmsec h4::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#2c3a20,transparent)}
.pmsec ul{display:grid;gap:7px}
.pmsec li{
  padding-left:22px;position:relative;color:#d7dfd1;font-size:14.5px;font-weight:300;line-height:1.6}
.pmsec li::before{
  content:'';position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;
  background:var(--g);box-shadow:0 0 8px rgba(128,208,1,.6)}
.pmfoot{
  position:sticky;bottom:0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  padding:14px 18px;background:linear-gradient(0deg,#0b1208,rgba(11,18,8,.6));
  border-top:1px solid #1a2314}

/* ---------- บริการของเรา ---------- */
.svc .panel{padding:24px 20px}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.scard{
  text-align:left;cursor:pointer;padding:18px 16px 16px;border-radius:16px;
  background:linear-gradient(170deg,#0b1209,#050803);border:1px solid #1e2917;
  display:flex;flex-direction:column;gap:9px;transition:.18s}
.scard:hover{border-color:var(--g3);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.6)}
.scard .si{width:46px;height:46px;color:var(--g)}
.scard .si svg{width:100%;height:100%}
.scard b{color:#fff;font-size:16.5px;font-weight:500;line-height:1.35}
.scard .wh{
  align-self:flex-start;border:1px solid #2c3a20;border-radius:999px;padding:2px 11px;
  font-size:12px;color:var(--g);font-weight:300}
.scard p{margin:0;color:var(--dim2);font-size:13.5px;font-weight:300;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.scard .more{color:var(--g);font-size:13.5px;font-weight:400;margin-top:auto;padding-top:6px}

.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.tags span{
  border:1px solid #2c3a20;border-radius:999px;padding:4px 12px;
  font-size:13px;color:#c3cebb;font-weight:300}

/* ============================================================
   จอเล็ก
   ============================================================ */
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .sgrid{grid-template-columns:repeat(3,1fr)}
  .pmtop{grid-template-columns:240px 1fr}
}
@media (max-width:860px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .pmtop{grid-template-columns:1fr}
  .pmim{max-width:340px}
  .spec{grid-template-columns:1fr}
}
@media (max-width:640px){
  .shop .panel,.svc .panel{padding:16px 12px 18px}
  .pgrid{gap:10px}
  .pcard .bd{padding:10px 11px 12px}
  .pcard .cd{font-size:14.5px}
  .pcard .pr b{font-size:17px}
  .sgrid{grid-template-columns:1fr}
  .pmodal{padding:0}
  .pmbox{max-height:100vh;border-radius:0;width:100%}
  .pmprice b{font-size:26px}
  .chip{padding:6px 12px;font-size:13.5px}
}

/* ---------- จัดกลุ่มตามยี่ห้อ ---------- */
.bgroup{margin-bottom:26px}
.bgroup:last-child{margin-bottom:0}
.bgh{
  margin:0 0 12px;display:flex;align-items:center;gap:12px;
  font-size:19px;font-weight:600;color:var(--g);letter-spacing:.4px}
.bgh i{font-style:normal;font-size:13px;font-weight:300;color:var(--dim2);letter-spacing:0}
.bgh::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#2c3a20,transparent)}
.pgrid-in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ---------- หัวหน้าย่อย ---------- */
.phead{position:relative;overflow:hidden;background:#03060a;border-bottom:1px solid #151a12}
.phead::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(60% 140% at 12% 50%, rgba(128,208,1,.16), transparent 70%),
    radial-gradient(50% 140% at 88% 40%, rgba(128,208,1,.10), transparent 72%)}
.phead .wrap{position:relative;padding:30px 0 26px}
.phead h1{
  margin:0;font-size:clamp(26px,3.6vw,40px);font-weight:700;line-height:1.2;
  text-shadow:0 4px 18px rgba(0,0,0,.8)}
.phead h1 .kr-green{font-style:normal;color:var(--g);text-shadow:0 0 24px rgba(128,208,1,.4)}
.phead p{margin:6px 0 0;color:var(--dim);font-size:clamp(14.5px,1.8vw,17px);font-weight:300}
.crumb{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--dim2);font-weight:300;margin-bottom:10px}
.crumb a{color:var(--g3)}
.crumb a:hover{color:var(--g)}

@media (max-width:1080px){ .pgrid-in{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .pgrid-in{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .pgrid-in{gap:10px} .bgh{font-size:17px} .phead .wrap{padding:20px 0 18px} }

/* บนมือถือ ให้แถวหมวด/ยี่ห้อเลื่อนแนวนอนแทนการตกหลายบรรทัด */
@media (max-width:640px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:4px;scroll-snap-type:x proximity}
  .chips::-webkit-scrollbar{display:none}
  .chip{scroll-snap-align:start}
  .chips.brands{margin-top:10px;padding-top:10px}
}

/* นิ้วกดง่ายขึ้นบนมือถือ */
@media (max-width:860px){
  .chip{min-height:36px;display:inline-flex;align-items:center}
  .crumb a{display:inline-block;padding:4px 2px}
  .pcard,.scard{-webkit-tap-highlight-color:rgba(128,208,1,.15)}
}

/* ============================================================
   จองพื้นที่ไว้ก่อนรายการจะวาดเสร็จ
   ไม่งั้นหน้าจะกระตุกแรงตอนโหลด (Google หักคะแนน CLS)
   ============================================================ */
#pgrid:not(.ready){min-height:calc(100vh + 820px)}
#sgrid:not(.ready){min-height:calc(100vh + 120px)}
@media (max-width:860px){
  #pgrid:not(.ready){min-height:calc(100vh + 2600px)}
  #sgrid:not(.ready){min-height:calc(100vh + 1400px)}
}