/* ══════════════════════════════════════════════════════════════════════
   shop.css — หมวดสินค้าและหน้าสินค้ารายตัว
   โหลดต่อจาก style.css · 🔴 ไม่แก้ style.css และไม่แก้ home.css
   ทุกคลาสขึ้นต้นด้วย sh- เพื่อไม่ให้ชนกับหน้าอื่น
   ══════════════════════════════════════════════════════════════════════ */

body.shop{
  --sh-navy:#0f1e35;
  --sh-blue:#1d4ed8;
  --sh-ice:#eef3fb;
  --sh-ice-2:#f6f9fd;
  --sh-ring:#dbe4f2;
  --sh-mut:#5d6b81;
}

/* ── ทางเดินหน้าเว็บ ───────────────────────────────────────────────── */
.sh-crumb{background:var(--sh-ice-2);border-bottom:1px solid var(--sh-ring);padding:11px 0}
.sh-crumb ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:7px;font-size:13.5px;color:var(--sh-mut);
}
.sh-crumb li{display:flex;align-items:center;gap:7px}
.sh-crumb li+li::before{content:"›";color:#b6c4d8}
.sh-crumb a{color:var(--sh-mut)}
.sh-crumb a:hover{color:var(--sh-blue)}
.sh-crumb [aria-current]{color:var(--ink);font-weight:600}

/* ── หัวเรื่องหมวด ────────────────────────────────────────────────── */
.sh-top{
  background:linear-gradient(160deg,#0c1a30,#16294a 58%,#1b3a6b);
  color:#fff;padding:38px 0 40px;
}
.sh-top .sh-eyebrow{
  display:inline-block;margin-bottom:13px;padding:6px 13px;border-radius:999px;
  font-size:13px;font-weight:600;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);color:rgba(255,255,255,.93);
}
.sh-top h1{margin:0 0 12px;font-size:clamp(24px,5.6vw,36px);line-height:1.3;letter-spacing:-.3px}
.sh-top p{margin:0;font-size:clamp(15px,3.4vw,17px);line-height:1.74;
  color:rgba(255,255,255,.82);max-width:58ch}

/* ── การ์ดสินค้า ──────────────────────────────────────────────────── */
.sh-grid{display:grid;gap:18px;grid-template-columns:1fr}
.sh-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--sh-ring);border-radius:16px;
  box-shadow:0 1px 2px rgba(16,26,44,.05),0 16px 34px -26px rgba(16,26,44,.4);
  transition:box-shadow .16s ease,transform .16s ease;
}
.sh-card:hover{transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(16,26,44,.06),0 22px 42px -22px rgba(16,26,44,.5)}
.sh-card-pic{background:var(--sh-ice);border-bottom:1px solid var(--sh-ring)}
.sh-card-pic img{display:block;width:100%;height:230px;object-fit:cover;object-position:center}
.sh-card-body{padding:18px 18px 0;flex:1 1 auto}
.sh-card h3{margin:0 0 6px;font-size:18px;font-weight:700;line-height:1.4}
.sh-card p{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
.sh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.sh-chips li{
  font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--sh-ice);color:#2c3a52;
}
.sh-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px 18px;margin-top:14px;
}
.sh-price{
  display:inline-flex;align-items:baseline;gap:4px;font-weight:700;
  font-size:20px;color:var(--sh-blue);
}
.sh-price small{font-size:13px;font-weight:600;color:var(--sh-mut)}
.sh-more{display:inline-flex;align-items:center;gap:6px;font-size:14px;
  font-weight:700;color:var(--sh-blue);white-space:nowrap}
.sh-more svg{width:15px;height:15px}
.sh-card-link{position:absolute;inset:0;z-index:3}
.sh-card-link:focus-visible{outline:3px solid var(--sh-blue);outline-offset:-3px}

/* ── หมวดที่ยังไม่เปิด ────────────────────────────────────────────── */
.sh-soon{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:18px;
  padding:0;list-style:none}
.sh-soon li{
  display:flex;align-items:center;gap:9px;font-size:14px;color:var(--sh-mut);
  background:#fff;border:1px dashed var(--sh-ring);border-radius:11px;padding:12px 14px;
}
.sh-soon svg{width:16px;height:16px;flex:0 0 auto;color:#b6c4d8}

/* ── หน้าสินค้า: หัวสินค้า ────────────────────────────────────────── */
.sh-hero{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
.sh-pic{
  background:var(--sh-ice);border:1px solid var(--sh-ring);border-radius:18px;
  padding:14px;
}
.sh-pic img{display:block;width:100%;height:auto;border-radius:10px}
.sh-buy h1{margin:0 0 10px;font-size:clamp(22px,5vw,31px);line-height:1.32;letter-spacing:-.3px}
.sh-lede{margin:0 0 18px;font-size:15.5px;line-height:1.76;color:var(--ink-2)}
.sh-pricebox{
  background:var(--sh-ice-2);border:1px solid var(--sh-ring);border-radius:14px;
  padding:18px;margin-bottom:18px;
}
.sh-pricebox .sh-big{
  display:flex;align-items:baseline;gap:7px;margin:0 0 4px;
  font-size:34px;font-weight:700;color:var(--sh-blue);letter-spacing:-.6px;
}
.sh-pricebox .sh-big span{font-size:16px;font-weight:600;color:var(--sh-mut)}
.sh-stock{display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:14px;font-weight:600;color:#15803d}
.sh-stock svg{width:16px;height:16px}
.sh-btns{display:grid;gap:9px;margin-top:16px}
.sh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:11px;font-size:15.5px;font-weight:700;
  text-decoration:none;border:1px solid transparent;line-height:1.3;
}
.sh-btn svg{width:18px;height:18px;flex:0 0 auto}
.sh-btn-line{background:#06c755;color:#fff}
.sh-btn-line:hover{text-decoration:none;background:#05b34c}
.sh-btn-tel{background:var(--sh-blue);color:#fff}
.sh-btn-tel:hover{text-decoration:none;background:#1a45c0}
.sh-btn-ghost{background:#fff;color:var(--ink);border-color:var(--sh-ring)}
.sh-btn-ghost:hover{text-decoration:none;border-color:var(--sh-blue);color:var(--sh-blue)}

.sh-keys{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sh-keys li{display:flex;gap:10px;align-items:flex-start;font-size:15px;
  line-height:1.7;color:var(--ink-2)}
.sh-keys svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;color:var(--sh-blue)}
.sh-keys b{color:var(--ink);font-weight:700}

/* ── เนื้อหาในหน้าสินค้า ──────────────────────────────────────────── */
.sh-sec{padding:40px 0}
.sh-sec-ice{background:var(--sh-ice-2)}
.sh-h2{margin:0 0 8px;font-size:clamp(20px,4.6vw,27px);line-height:1.34;letter-spacing:-.2px}
.sh-sub{margin:0 0 20px;font-size:15.5px;line-height:1.74;color:var(--sh-mut);max-width:62ch}
.sh-split{display:grid;gap:24px;grid-template-columns:1fr;align-items:center}
.sh-split img{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid var(--sh-ring);background:#fff}

/* ตารางสเปก */
.sh-spec{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--sh-ring);border-radius:14px;overflow:hidden}
.sh-spec th,.sh-spec td{
  padding:13px 16px;text-align:left;font-size:14.5px;line-height:1.66;
  border-bottom:1px solid var(--line-2);vertical-align:top;
}
.sh-spec tr:last-child th,.sh-spec tr:last-child td{border-bottom:0}
.sh-spec th{width:38%;font-weight:700;color:var(--ink);background:var(--sh-ice-2)}
.sh-spec td{color:var(--ink-2)}
.sh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* กล่องเตือนเรื่องต้องรู้ */
.sh-note{
  margin:20px 0 0;padding:15px 17px;border-radius:12px;
  background:#fff8ec;border:1px solid #f0dcb8;
  font-size:14px;line-height:1.76;color:#6b4c17;
}
.sh-note b{color:#4d3609}

/* เหมาะกับร้านแบบไหน */
.sh-fit{display:grid;gap:12px;grid-template-columns:1fr}
.sh-fit div{
  background:#fff;border:1px solid var(--sh-ring);border-radius:13px;padding:16px;
}
.sh-fit h3{margin:0 0 5px;font-size:16px;font-weight:700;line-height:1.42}
.sh-fit p{margin:0;font-size:14.5px;line-height:1.72;color:var(--ink-2)}

/* ถามตอบ */
.sh-faq{display:grid;gap:11px;grid-template-columns:1fr}
.sh-faq-item{background:#fff;border:1px solid var(--sh-ring);border-radius:12px;padding:16px}
.sh-faq-item h3{margin:0 0 7px;font-size:15.5px;font-weight:700;line-height:1.5}
.sh-faq-item p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-2)}

/* แถบชวนติดต่อ */
.sh-band{background:linear-gradient(160deg,var(--sh-navy),#1b3055);color:#fff;
  padding:42px 0;text-align:center}
.sh-band h2{margin:0 0 10px;font-size:clamp(20px,4.6vw,26px);line-height:1.34}
.sh-band p{margin:0 auto 20px;max-width:52ch;font-size:15.5px;line-height:1.74;
  color:rgba(255,255,255,.8)}
.sh-band .sh-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sh-band .sh-btn-ghost{background:rgba(255,255,255,.1);color:#fff;
  border-color:rgba(255,255,255,.28)}
.sh-band .sh-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}

/* ── จอกว้างขึ้น ──────────────────────────────────────────────────── */
@media (min-width:620px){
  .sh-grid{grid-template-columns:1fr 1fr}
  .sh-fit{grid-template-columns:1fr 1fr}
  .sh-faq{grid-template-columns:1fr 1fr}
  .sh-btns{grid-template-columns:1fr 1fr}
  .sh-top{padding:48px 0 52px}
}

@media (min-width:940px){
  .sh-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}
  .sh-split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px}
  .sh-split-flip > :first-child{order:2}
  .sh-grid{grid-template-columns:repeat(3,1fr)}
  .sh-soon{grid-template-columns:repeat(4,1fr)}
  .sh-fit{grid-template-columns:repeat(4,1fr)}
}

/* ข้อความที่มีไว้ให้โปรแกรมอ่านหน้าจอเท่านั้น คนทั่วไปไม่เห็น */
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}


/* ══════════════════════════════════════════════════════════════════════
   ใช้ในหน้า about.html และ contact.html
   ══════════════════════════════════════════════════════════════════════ */

/* กล่องข้อมูลติดต่อแบบตาราง */
.sh-info{display:grid;gap:12px;grid-template-columns:1fr;margin-top:20px}
.sh-info a.sh-row,.sh-info div.sh-row{
  display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--sh-ring);border-radius:13px;padding:15px 16px;
}
.sh-info a.sh-row:hover{text-decoration:none;border-color:var(--sh-blue)}
.sh-ic{
  width:40px;height:40px;flex:0 0 auto;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sh-ice);color:var(--sh-blue);border:1px solid rgba(15,30,53,.06);
}
.sh-ic svg{width:21px;height:21px}
.sh-row .sh-lb{display:block;font-size:12.5px;font-weight:600;color:var(--sh-mut)}
.sh-row .sh-vl{display:block;font-size:16px;font-weight:700;line-height:1.45;margin-top:2px}
.sh-row .sh-xtra{display:block;font-size:13.5px;color:var(--sh-mut);line-height:1.6;margin-top:3px}

/* เวลาทำการ */
.sh-hours{
  background:#fff;border:1px solid var(--sh-ring);border-radius:14px;
  padding:18px;margin-top:20px;
}
.sh-hours h3{margin:0 0 12px;font-size:16.5px;font-weight:700;display:flex;gap:9px;align-items:center}
.sh-hours h3 svg{width:19px;height:19px;color:var(--sh-blue)}
.sh-hours dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15px}
.sh-hours dt{font-weight:600;color:var(--ink)}
.sh-hours dd{margin:0;color:var(--ink-2);text-align:right}
.sh-hours .sh-off{color:#b4232a}

/* แผนที่ */
.sh-map{margin-top:20px;background:#fff;border:1px solid var(--sh-ring);
  border-radius:14px;padding:10px}
.sh-map img{display:block;width:100%;height:auto;border-radius:8px}
.sh-map figcaption{padding:11px 6px 3px;font-size:13.5px;line-height:1.7;color:var(--sh-mut)}

/* กล่องบริการในหน้าเกี่ยวกับเรา */
.sh-svc{display:grid;gap:16px;grid-template-columns:1fr;margin-top:22px}
.sh-svc article{
  position:relative;background:#fff;border:1px solid var(--sh-ring);
  border-radius:15px;padding:20px 18px;overflow:hidden;
}
.sh-svc article::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--sh-blue)}
.sh-svc .sh-no{
  font-size:13px;font-weight:700;color:var(--sh-blue);letter-spacing:.4px;
  display:block;margin-bottom:8px;
}
.sh-svc h3{margin:0 0 8px;font-size:17.5px;font-weight:700;line-height:1.4}
.sh-svc p{margin:0 0 12px;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
.sh-svc ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.sh-svc li{font-size:14px;line-height:1.62;color:var(--ink-2);padding-left:20px;position:relative}
.sh-svc li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;
  border-radius:2px;background:var(--sh-blue);opacity:.5}

/* แถบตัวเลขบริษัท */
.sh-facts{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:22px}
.sh-facts div{
  background:var(--sh-ice);border:1px solid var(--sh-ring);border-radius:13px;padding:16px;
}
.sh-facts b{display:block;font-size:17px;font-weight:700;color:var(--ink);line-height:1.4}
.sh-facts span{display:block;font-size:13.5px;color:var(--sh-mut);margin-top:4px;line-height:1.6}

@media (min-width:620px){
  .sh-info{grid-template-columns:1fr 1fr}
  .sh-svc{grid-template-columns:1fr}
  .sh-facts{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:940px){
  .sh-svc{grid-template-columns:repeat(3,1fr)}
  .sh-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
}

/* แถวภาพเพิ่มเติมใต้ภาพสินค้าหลัก */
.sh-gal{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:10px}
.sh-gal img{display:block;width:100%;height:190px;object-fit:cover;object-position:center;
  border-radius:12px;border:1px solid var(--sh-ring);background:var(--sh-ice)}
@media (min-width:620px){ .sh-gal img{height:210px} }