/* =============================================================================
   site-overrides.css — ชั้นปรับแต่งของเราทับชุดดีไซน์ทีม OneBiz24 (หน้า "สินค้าและบริการ")
   งาน: RQ-20261030-006 (เจ้าของ 30/10/2569 "header fixed · อย่าให้ลอยจากพื้นหลัง · ตรงกลางเกือบเต็มตามสัดส่วนมาตรฐานเว็บ · การ์ดเหมือนของทีม")
   มาตรฐานหัวเว็บเดียวกับ FOTO/FotoDrive (FIXLOG S71/S72 12/10/2569):
     1) หัวเว็บตรึงบนสุดทุกขนาดจอ เป็นแถบขาวเต็มความกว้างจอ (ไม่มีมุมมน/ไม่มีระยะลอยจากขอบบน)
        เนื้อในหัวเว็บจัดตามคอนเทนเนอร์เดียวกับเนื้อหา
     2) ทั้งหน้าพื้นขาวเรียบ ไม่มีกรอบ/เงา/พื้นไล่สีครอบทั้งเว็บ (เดิม .site-shell ทำให้ทั้งเว็บดูเป็นกล่องลอย)
     3) เนื้อหากว้างสุด 1360px (เดิม 1200px) — "เกือบเต็ม" บนจอ 1440–1920 แต่บรรทัดไม่ยาวเกินอ่าน
   ไฟล์ทีม (tokens.css / styles.css / app.js) ไม่แตะ — ไฟล์นี้โหลดหลัง styles.css (ลิงก์ใน build.py)
   ความปลอดภัย: CSS ล้วน ไม่มีโค้ด/ข้อมูลผู้ใช้
   ============================================================================= */

:root{
  --ob-wrap:1360px;          /* ความกว้างเนื้อหาสูงสุด */
  --ob-header-h:68px;        /* ความสูงหัวเว็บ (จอใหญ่) */
  --ob-gutter:28px;          /* ระยะขอบซ้าย-ขวาของเนื้อในหัวเว็บ */
}

/* ---------- พื้นหน้า: ขาวเรียบ ไม่มีกรอบครอบทั้งเว็บ ---------- */
html{scroll-padding-top:calc(var(--ob-header-h) + 16px)}
body{background:#fff}
.site-shell{
  max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#fff;
  overflow:visible;               /* ให้หัวเว็บแบบ fixed ไม่ถูกตัด */
  padding-top:var(--ob-header-h)  /* เว้นที่ใต้หัวเว็บ เนื้อหาเริ่มตำแหน่งเดิม */
}

/* ---------- หัวเว็บตรึงบนสุด แถบเต็มจอ ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--ob-header-h);
  padding-inline:max(var(--ob-gutter),calc((100% - var(--ob-wrap)) / 2 + var(--ob-gutter)));
  background:#fff;border-bottom:1px solid #ecebf7;
  box-shadow:0 8px 24px -18px rgba(36,0,122,.35)
}
/* เมนูมือถือ (เปิดจากปุ่ม ☰) ต้องตามหัวเว็บที่ตรึงอยู่ ไม่จมใต้หัวเว็บ */
.mobile-nav{
  position:fixed;top:var(--ob-header-h);left:0;right:0;z-index:59;
  max-height:calc(100vh - var(--ob-header-h));overflow-y:auto;
  box-shadow:0 12px 24px -16px rgba(36,0,122,.35)
}

/* ---------- เนื้อหากลางหน้า: กว้างสุด 1360px จัดกึ่งกลาง ---------- */
.intro,.catalog-controls,.catalog{width:100%;max-width:var(--ob-wrap);margin-inline:auto}
.intro{padding-top:6px}

/* ---------- ช่วงจอ (ตรงกับ breakpoint ของชุดทีม) ---------- */
@media(min-width:881px) and (max-width:1239px){
  :root{--ob-header-h:58px;--ob-gutter:24px}
  .site-shell{margin:0}
}
@media(min-width:681px) and (max-width:880px){
  :root{--ob-header-h:62px;--ob-gutter:24px}
  .site-shell{margin:0}
}
@media(max-width:680px){
  :root{--ob-header-h:65px;--ob-gutter:15px}
  .site-header{padding-inline:15px}
}
@media(max-width:359px){
  :root{--ob-header-h:59px;--ob-gutter:13px}
  .site-header{padding-inline:13px}
}