/* ============================================================================
   GELABON — Modern theme layer
   ----------------------------------------------------------------------------
   ไฟล์นี้โหลด "ต่อจาก" framework.min.css และ app.min.css จึงเขียนทับของเดิมได้
   ตั้งใจไม่ลบ CSS เดิม เพื่อให้หน้าอื่น ๆ (ตะกร้า เช็คเอาต์ สมัครสมาชิก)
   ที่ยังใช้ grid เดิมทำงานได้ตามปกติ

   สารบัญ
     1. ตัวแปรดีไซน์
     2. พื้นฐาน + ตัวอักษร
     3. ปุ่มและฟอร์ม
     4. แถบบนสุด + Header
     5. เมนูหลัก
     6. Hero / สไลด์
     7. โครงหน้าและ section
     8. บล็อกรูป-ข้อความสลับซ้ายขวา
     9. การ์ดสินค้า
    10. แท็บ
    11. Footer
    12. เบ็ดเตล็ด
   ========================================================================= */

/* ============================================================================
   1. ตัวแปรดีไซน์  — แก้สี/ฟอนต์ทั้งเว็บได้จากตรงนี้ที่เดียว
   ========================================================================= */
:root {
  /* สีแบรนด์ — ดึงจากโลโก้ GELABON (ม่วง) */
  --gb-brand:        #8A19C4;
  --gb-accent:       #6D2A9E;
  --gb-accent-hover: #58217E;
  --gb-accent-soft:  #F6EFFC;
  --gb-accent-line:  #E9DAF7;

  /* สีกลาง — โทนอุ่นอมม่วงอ่อน ๆ ให้เข้ากับแบรนด์ */
  --gb-bg:      #FFFFFF;
  --gb-bg-alt:  #FAF9FB;
  --gb-bg-deep: #1B1720;
  --gb-ink:     #1B1720;
  --gb-ink-2:   #57506180;
  --gb-ink-mid: #575061;
  /* สีเทาอ่อนสุดที่ใช้กับข้อความ (ชื่อผู้ผลิต, breadcrumb, หัวข้อแถบข้าง)
     ค่าเดิม #8C8598 ให้คอนทราสต์บนพื้นขาวแค่ 3.54:1 ซึ่งต่ำกว่าเกณฑ์
     WCAG AA ที่ต้องการ 4.5:1 — PageSpeed จึงหักคะแนน
     ค่าใหม่ #6F6880 ได้ 5.3:1 ผ่านสบาย ๆ และยังดูอ่อนกว่าตัวอักษรหลัก */
  --gb-ink-3:   #6F6880;
  --gb-line:    #E8E5ED;

  /* สีสถานะ */
  --gb-success: #2E7D52;
  --gb-danger:  #C0392B;

  /* ตัวอักษร — Inter สำหรับละติน, Sarabun สำหรับไทย
     อยากเปลี่ยนฟอนต์ แก้บรรทัดนี้บรรทัดเดียว
     (แล้วแก้ <link> ของ Google Fonts ใน layouts/default.inc.php ด้วย) */
  --gb-font: 'Inter', 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ระยะห่าง */
  --gb-gap:    clamp(16px, 2.2vw, 28px);
  --gb-section: clamp(48px, 6vw, 88px);
  --gb-container: 1240px;

  /* มุมโค้งและเงา */
  --gb-radius:    16px;
  --gb-radius-sm: 10px;
  --gb-radius-lg: 24px;
  --gb-shadow:    0 1px 2px rgba(27,23,32,.04), 0 8px 24px rgba(27,23,32,.06);
  --gb-shadow-lg: 0 2px 4px rgba(27,23,32,.04), 0 18px 48px rgba(27,23,32,.10);

  --gb-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================================
   2. พื้นฐาน + ตัวอักษร
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--gb-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gb-ink);
  background: var(--gb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ภาษาไทยต้องการ line-height มากกว่าละตินเพราะมีสระบน-ล่าง */
html[lang="th"] body { line-height: 1.85; }

h1, h2, h3, h4, h5, h6, .gb-h1, .gb-h2, .gb-h3 {
  font-family: var(--gb-font);
  color: var(--gb-ink);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="th"] .gb-h1, html[lang="th"] .gb-h2, html[lang="th"] .gb-h3 {
  line-height: 1.45;
  letter-spacing: 0;
}

.gb-h1 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; }
.gb-h2 { font-size: clamp(24px, 2.8vw, 34px); }
.gb-h3 { font-size: clamp(18px, 1.6vw, 21px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gb-accent); text-decoration: none; transition: color .18s var(--gb-ease); }
a:hover, a:focus { color: var(--gb-accent-hover); text-decoration: none; }

img { max-width: 100%; height: auto; }

hr { border: 0; border-top: 1px solid var(--gb-line); margin: var(--gb-gap) 0; }

::selection { background: var(--gb-accent-soft); color: var(--gb-accent-hover); }

:focus-visible {
  outline: 2px solid var(--gb-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ป้ายกำกับเล็ก ๆ เหนือหัวข้อ */
.gb-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gb-accent);
  background: var(--gb-accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.gb-lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--gb-ink-mid); }
.gb-muted { color: var(--gb-ink-mid); }

/* ============================================================================
   3. ปุ่มและฟอร์ม
   ========================================================================= */
.btn,
.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--gb-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background .18s var(--gb-ease), color .18s var(--gb-ease),
              border-color .18s var(--gb-ease), transform .18s var(--gb-ease),
              box-shadow .18s var(--gb-ease);
}
.btn:active, .gb-btn:active { transform: translateY(1px); }

/* framework.min.css ประกาศเป็น .btn.btn-success (สองคลาส) จึงต้องเขียน
   ให้ความเฉพาะเจาะจงเท่ากันขึ้นไป ไม่งั้นปุ่มจะยังเป็นสีเขียว/ฟ้าของธีมเดิม */
.gb-btn--primary,
.btn.btn-primary, .btn.btn-success,
button[name="add_cart_product"], .btn.btn-default[type="submit"] {
  background: var(--gb-accent);
  border-color: var(--gb-accent);
  color: #fff;
}
.gb-btn--primary:hover,
.btn.btn-primary:hover:not(.active):not(.disabled):not([disabled]),
.btn.btn-success:hover:not(.active):not(.disabled):not([disabled]),
button[name="add_cart_product"]:hover,
.btn.btn-default[type="submit"]:hover {
  background: var(--gb-accent-hover);
  border-color: var(--gb-accent-hover);
  color: #fff;
  box-shadow: 0 6px 18px rgba(109,42,158,.24);
}
.btn.btn-primary.active, .btn.btn-success.active { background: var(--gb-accent-hover); }

/* ปุ่มรองใช้เส้นขอบ ไม่ใช่พื้นเทา */
.btn.btn-default {
  background: #fff;
  border-color: var(--gb-line);
  color: var(--gb-ink);
}
.btn.btn-default:hover:not(.active):not(.disabled):not([disabled]) {
  background: var(--gb-accent-soft);
  border-color: var(--gb-accent);
  color: var(--gb-accent);
}

.gb-btn--ghost {
  background: transparent;
  border-color: var(--gb-line);
  color: var(--gb-ink);
}
.gb-btn--ghost:hover {
  border-color: var(--gb-accent);
  color: var(--gb-accent);
  background: var(--gb-accent-soft);
}

/* ลิงก์แบบมีลูกศร */
.gb-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 15px;
}
.gb-arrow-link::after {
  content: "→";
  transition: transform .18s var(--gb-ease);
}
.gb-arrow-link:hover::after { transform: translateX(4px); }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
select, textarea, .form-control {
  font-family: var(--gb-font);
  font-size: 15px;
  color: var(--gb-ink);
  background: #fff;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-sm);
  padding: 10px 14px;
  transition: border-color .18s var(--gb-ease), box-shadow .18s var(--gb-ease);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--gb-accent);
  box-shadow: 0 0 0 3px var(--gb-accent-soft);
  outline: none;
}

/* ============================================================================
   4. แถบบนสุด + Header
   ========================================================================= */
.gb-container {
  width: 100%;
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

.gb-topbar {
  background: var(--gb-bg-deep);
  color: #fff;
  font-size: 13px;
  letter-spacing: .01em;
}
.gb-topbar__inner {
  display: flex;
  flex-wrap: wrap;           /* บนจอแคบต้องขึ้นบรรทัดใหม่ได้ ไม่งั้นดันหน้าให้กว้างเกินจอ */
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  min-height: 38px;
  padding-block: 8px;
  text-align: center;
}
.gb-topbar b { font-weight: 600; }
.gb-topbar__dot { color: var(--gb-brand); }

.gb-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gb-line);
}
.gb-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 72px;
}

.gb-logo { flex: 0 0 auto; display: flex; align-items: center; }
.gb-logo img { max-height: 44px; width: auto; display: block; }

.gb-header__search { flex: 1 1 auto; max-width: 440px; }

/* LiteCart สร้างช่องค้นหาเป็น .input-group + <span class="input-group-icon">
   ซึ่งธีมเดิมวาดเป็นกล่องมีกรอบแยกออกมา ตรงนี้ยุบให้เป็นช่องเดียว
   แล้วเอาไอคอนไปวางทับด้านในซ้าย */
.gb-search { position: relative; display: block; }
.gb-search form { margin: 0; }
.gb-search .input-group { display: block; width: 100%; border: 0; background: none; }
.gb-search .input-group-icon {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: auto; height: auto;
  padding: 0; margin: 0;
  border: 0; background: none;
  color: var(--gb-ink-3);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.gb-search input[type="search"],
.gb-search input[type="text"],
.gb-search .form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 10px 16px 10px 42px;
  border-radius: 999px;
  background: var(--gb-bg-alt);
  border: 1px solid transparent;
  box-shadow: none;
}
.gb-search input:focus, .gb-search .form-control:focus {
  background: #fff;
  border-color: var(--gb-accent);
  box-shadow: 0 0 0 3px var(--gb-accent-soft);
}
/* ซ่อนปุ่ม submit ใช้การกด Enter แทน */
.gb-search button, .gb-search input[type="submit"] { display: none; }

.gb-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* สลับภาษา */
.gb-lang { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--gb-bg-alt); border-radius: 999px; }
.gb-lang a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gb-ink-mid);
  line-height: 1;
}
.gb-lang a:hover { color: var(--gb-ink); background: rgba(255,255,255,.7); }
.gb-lang a.is-active { background: #fff; color: var(--gb-accent); box-shadow: 0 1px 3px rgba(27,23,32,.10); }
.gb-lang img { width: 18px; height: auto; border-radius: 2px; display: block; }

/* ตะกร้า */
#cart { margin: 0; }
#cart > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--gb-line);
  color: var(--gb-ink);
  background: #fff;
  transition: border-color .18s var(--gb-ease), box-shadow .18s var(--gb-ease);
}
#cart > a:hover { border-color: var(--gb-accent); box-shadow: 0 4px 14px rgba(27,23,32,.07); }
#cart .image { width: 19px; height: 19px; order: -1; }
#cart .details { font-size: 13px; line-height: 1.3; text-align: left; }
#cart .details .title { display: none; }
#cart .quantity { font-weight: 700; color: var(--gb-accent); }

/* ปุ่มเมนูมือถือ */
.gb-burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--gb-line);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
}
.gb-burger span {
  display: block; position: relative;
  width: 17px; height: 1.8px; background: var(--gb-ink); border-radius: 2px;
}
.gb-burger span::before, .gb-burger span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.8px; background: var(--gb-ink); border-radius: 2px;
}
.gb-burger span::before { top: -5.5px; }
.gb-burger span::after  { top:  5.5px; }

/* ============================================================================
   5. เมนูหลัก
   ========================================================================= */
#site-menu {
  background: #fff;
  border-bottom: 1px solid var(--gb-line);
}
#site-menu .navbar { margin: 0; border: 0; background: none; min-height: 0; border-radius: 0; }
/* ให้เมนูหมวดหมู่กับเมนูบัญชีอยู่บรรทัดเดียวกัน ชิดคนละฝั่ง
   ต้องใช้ !important เพราะ framework.min.css ประกาศ
   .navbar-collapse.collapse{display:block !important} ไว้ */
#site-menu .navbar-collapse,
#site-menu .navbar-collapse.collapse {
  padding: 0; border: 0; box-shadow: none;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#site-menu .navbar-collapse > .navbar-nav.navbar-right { float: none; margin: 0; flex: 0 0 auto; }
#site-menu .dropdown-menu-right { left: auto; right: 0; }

/* ลบเส้นคั่นระหว่างเมนูของธีมเดิม */
#site-menu .navbar-nav > li > a { border-left: 0 !important; }
#site-menu .navbar-nav:not(.navbar-right) { border-right: 0 !important; }

#site-menu .nav.navbar-nav { float: none; display: flex; flex-wrap: wrap; margin: 0; }
#site-menu .nav.navbar-nav > li { float: none; }
#site-menu .nav.navbar-nav > li > a {
  padding: 15px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gb-ink-mid);
  background: none;
  border: 0;
  position: relative;
  line-height: 1.4;
}
#site-menu .nav.navbar-nav > li > a:hover,
#site-menu .nav.navbar-nav > li.active > a { color: var(--gb-accent); background: none; }
#site-menu .nav.navbar-nav > li > a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; background: var(--gb-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--gb-ease);
}
#site-menu .nav.navbar-nav > li > a:hover::after { transform: scaleX(1); }

#site-menu .navbar-brand { padding: 15px 14px; height: auto; font-size: 15px; }

#site-menu .dropdown-menu {
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-sm);
  box-shadow: var(--gb-shadow-lg);
  padding: 8px;
  min-width: 230px;
  margin-top: 2px;
}
#site-menu .dropdown-menu > li > a {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--gb-ink-mid);
  white-space: normal;
}
#site-menu .dropdown-menu > li > a:hover {
  background: var(--gb-accent-soft);
  color: var(--gb-accent);
}
#site-menu .caret { opacity: .5; }

/* ============================================================================
   6. Hero / สไลด์
   ========================================================================= */
.gb-hero { padding-top: clamp(20px, 3vw, 34px); }

#box-slides.carousel {
  position: relative;
  border-radius: var(--gb-radius-lg);
  overflow: hidden;
  background: var(--gb-bg-alt);
  box-shadow: var(--gb-shadow);
}
#box-slides .carousel-inner { border-radius: inherit; }
#box-slides .item img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
/* ไล่เฉดมืดด้านล่างให้ตัวอักษรบนรูปอ่านออกโดยไม่ต้องใส่เงาตัวอักษร */
#box-slides .item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,24,.62) 0%, rgba(20,16,24,.18) 38%, rgba(20,16,24,0) 68%);
  pointer-events: none;
}

#box-slides .carousel-caption {
  right: auto;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(24px, 4vw, 52px);
  max-width: min(640px, 76%);
  text-align: left;
  text-shadow: none;
  padding: 0;
  z-index: 3;
}
/* caption ในฐานข้อมูลใส่ <section> กับ text-shadow มาเอง — เขียนทับให้สะอาด */
#box-slides .carousel-caption section,
#box-slides .carousel-caption strong {
  display: block;
  font-size: clamp(22px, 3.4vw, 42px) !important;
  font-weight: 700;
  line-height: 1.22;
  color: #fff;
  text-shadow: none !important;
  letter-spacing: -0.01em;
}
html[lang="th"] #box-slides .carousel-caption section,
html[lang="th"] #box-slides .carousel-caption strong { line-height: 1.4; letter-spacing: 0; }

#box-slides .carousel-indicators {
  bottom: 16px;
  left: auto;
  right: clamp(20px, 4vw, 56px);
  width: auto;
  margin: 0;
  z-index: 4;
}
#box-slides .carousel-indicators li {
  width: 8px; height: 8px;
  margin: 0 4px;
  background: rgba(255,255,255,.45);
  border: 0;
  border-radius: 999px;
  transition: width .22s var(--gb-ease), background .22s var(--gb-ease);
}
#box-slides .carousel-indicators li.active { width: 26px; background: #fff; }

#box-slides .carousel-control {
  width: 56px;
  background: none;
  opacity: 0;
  text-shadow: none;
  transition: opacity .2s var(--gb-ease);
  z-index: 4;
}
#box-slides:hover .carousel-control { opacity: 1; }
#box-slides .carousel-control .icon-prev,
#box-slides .carousel-control .icon-next {
  position: absolute; top: 50%;
  width: 40px; height: 40px;
  margin-top: -20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92);
  color: var(--gb-ink);
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
#box-slides .carousel-control.left  .icon-prev { left: 12px; }
#box-slides .carousel-control.right .icon-next { right: 12px; }

/* ============================================================================
   7. โครงหน้าและ section
   ========================================================================= */
/* ธีมเดิมกำหนด #page{min-height:100%} ไว้เพื่อดัน footer ที่อยู่ "ข้างใน"
   ให้ติดก้นจอ แต่ธีมนี้ย้าย footer ออกมาไว้นอก #page แล้ว
   ถ้าไม่ล้างค่านี้ footer จะถูกดันลงไปใต้ความสูงหน้าจอเสมอ */
body #page,
body #page.twelve-eighty {
  max-width: none;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--gb-bg);
  border: 0;
  box-shadow: none;
}
body { background: var(--gb-bg); }
#main { padding: 0; }

/* เนื้อหาในฐานข้อมูล (caption สไลด์ ฯลฯ) เคยฝัง <style> ที่เขียน
   selector กว้าง ๆ อย่าง  section { font-size:5vw; text-shadow:... }
   ไว้ ซึ่งจะไปโดน <section> ทุกตัวในหน้า บรรทัดนี้กันไว้อีกชั้น
   (ต้นทางถูกตัดออกแล้วใน pages/index.inc.php) */
.gb-section {
  font-size: 16px;
  text-shadow: none;
  padding-block: var(--gb-section);
}
.gb-section--alt { background: var(--gb-bg-alt); }
.gb-section--tight { padding-block: clamp(32px, 4vw, 56px); }

.gb-section__head { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.gb-section__head--center { margin-inline: auto; text-align: center; }

/* ============================================================================
   8. บล็อกรูป-ข้อความสลับซ้ายขวา
   ========================================================================= */
.gb-features { display: grid; gap: clamp(40px, 5vw, 72px); }

.gb-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
/* สลับข้างในแถวคู่ */
.gb-feature:nth-child(even) .gb-feature__media { order: 2; }

.gb-feature__media {
  position: relative;
  border-radius: var(--gb-radius);
  overflow: hidden;
  background: var(--gb-bg-alt);
  aspect-ratio: 4 / 3;
}
.gb-feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--gb-ease);
}
.gb-feature__media a:hover img { transform: scale(1.035); }

.gb-feature__body h3,
.gb-feature__body strong:first-child {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 600;
}
.gb-feature__body { color: var(--gb-ink-mid); font-size: 16px; }
.gb-feature__body strong { color: var(--gb-ink); font-weight: 600; }
.gb-feature__title {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 600;
  color: var(--gb-ink);
  line-height: 1.3;
  margin-bottom: 12px;
}
html[lang="th"] .gb-feature__title { line-height: 1.5; }
.gb-feature__title strong { font-weight: 600; }

/* รายการรสชาติ/ท็อปปิ้ง — แปลงข้อความคั่นด้วย <br> ให้เป็นชิป */
.gb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gb-chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gb-line);
  font-size: 14px;
  color: var(--gb-ink-mid);
}
.gb-section--alt .gb-chip { background: #fff; }

/* การ์ดตัวเลข/จุดเด่น */
.gb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 16px;
}
.gb-stat {
  background: #fff;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  padding: 22px 24px;
}
.gb-stat__num {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--gb-accent);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gb-stat__label { font-size: 14px; color: var(--gb-ink-mid); margin-top: 6px; }

/* ============================================================================
   9. การ์ดสินค้า
   ========================================================================= */
.products.row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0; }
.products.row > [class*="col-"] { width: 100%; float: none; padding: 0; }

.product.column {
  height: 100%;
  background: #fff;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  overflow: hidden;
  transition: border-color .2s var(--gb-ease), box-shadow .25s var(--gb-ease), transform .25s var(--gb-ease);
}
.product.column:hover {
  border-color: var(--gb-accent-line);
  box-shadow: var(--gb-shadow-lg);
  transform: translateY(-3px);
}
/* app.min.css มี .products.row .product a.link{display:block} (3 คลาส + 1 tag)
   ถ้าไม่เขียนให้เฉพาะเจาะจงกว่า การ์ดจะไม่เป็น flex column
   ผลคือ margin-top:auto ของแถวราคาไม่ทำงาน ราคาของการ์ดที่ชื่อ 1 บรรทัด
   กับ 2 บรรทัดจะอยู่คนละระดับกัน */
.products.row .product.column > a.link,
.product.column > .link { display: flex; flex-direction: column; height: 100%; color: inherit; }

.products.row .product.column .image-wrapper,
.product.column .image-wrapper {
  position: relative;
  background: var(--gb-bg-alt);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}
/* app.min.css มี .products.row .product.column img{width:100%} (4 คลาส)
   จึงต้องเขียนให้เฉพาะเจาะจงกว่า ไม่งั้นรูปจะถูกยืดเต็มความกว้างเสมอ */
.products.row .product.column .image-wrapper img,
.product.column .image-wrapper img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .4s var(--gb-ease);
}
.products.row .product.column:hover .image-wrapper img,
.product.column:hover .image-wrapper img { transform: scale(1.04); }

/* หมายเหตุเรื่องความเฉพาะเจาะจง:
   app.min.css เขียนไว้เป็น .products.row .product.column .price-wrapper
   ซึ่งมี 4 คลาส ถ้าเราเขียนแค่ .product.column .price-wrapper (3 คลาส)
   ของเดิมจะชนะ และบังคับ padding:0 3.75px ทำให้ราคากับไอคอนตะกร้า
   ติดขอบการ์ด จึงต้องเขียนให้ยาวเท่ากัน */
.products.row .product.column .name,
.product.column .name {
  padding: 14px 16px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gb-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* app.min.css ตั้ง .products.row .product .name{height:45px} ไว้
     ซึ่งสูงพอแค่บรรทัดเดียว ชื่อสินค้าที่ยาว 2 บรรทัดจึงถูกตัดหาย
     ต้องล้างเป็น auto แล้วใช้ min-height จองที่ไว้ 2 บรรทัดแทน
     เพื่อให้ราคาของทุกการ์ดอยู่ระดับเดียวกัน */
  height: auto;
  min-height: 2.8em;
}
.products.row .product.column .manufacturer,
.product.column .manufacturer {
  padding: 4px 16px 0;
  font-size: 12.5px;
  color: var(--gb-ink-3);
  min-height: 1.2em;
}
.products.row .product.column .price-wrapper,
.product.column .price-wrapper {
  position: static;
  margin-top: auto;
  padding: 12px 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.products.row .product.column .price,
.products.row .product.column .campaign-price,
.product.column .price,
.product.column .campaign-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--gb-ink);
  letter-spacing: -0.01em;
}
.products.row .product.column .campaign-price { color: var(--gb-danger); }
.products.row .product.column .regular-price { font-size: 13.5px; color: var(--gb-ink-3); }

/* ไอคอนตะกร้าเล็กในการ์ด (เป็น SVG inline ใช้ currentColor) */
.products.row .product.column .smallimage,
.product.column .smallimage {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--gb-accent-soft);
  color: var(--gb-accent);
  transition: background .18s var(--gb-ease), color .18s var(--gb-ease);
}
/* ต้องเขียนให้เฉพาะเจาะจงกว่ากฎ base ด้านบน (4 คลาส) ไม่งั้น hover ไม่ติด */
.products.row .product.column:hover .smallimage,
.product.column:hover .smallimage { background: var(--gb-accent); color: #fff; }
.product.column .smallimage svg { display: block; }

.product .sticker {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--gb-accent);
  color: #fff;
}

/* ============================================================================
   10. แท็บ
   ========================================================================= */
.nav-tabs.nav-justified,
.nav-tabs {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--gb-line);
  background: var(--gb-bg-alt);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  width: auto;
}
.nav-tabs > li { float: none; margin: 0; width: auto; }
.nav-tabs > li > a {
  margin: 0;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 9px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gb-ink-mid);
  background: transparent !important;
  line-height: 1.4;
}
.nav-tabs > li > a:hover { color: var(--gb-ink); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: #fff !important;
  color: var(--gb-accent);
  box-shadow: 0 1px 3px rgba(27,23,32,.10);
}

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* กล่องสินค้าในแท็บไม่ต้องมีกรอบซ้อน */
.tab-content .box { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.tab-content .box > .title { display: none; }

/* ============================================================================
   11. Footer
   ========================================================================= */
#footer {
  background: var(--gb-bg-deep);
  color: rgba(255,255,255,.80);
  padding-block: clamp(40px, 5vw, 64px);
  margin: 0;
  border: 0;
}
/* app.min.css ประกาศ  #footer *{color:#333}  ไว้ ซึ่งจะทำให้ตัวอักษรเข้ม
   จมหายไปกับพื้นหลังสีเข้มของ footer ใหม่ บรรทัดนี้ล้างค่านั้น */
#footer *, #copyright * { color: inherit; }

/* footer อยู่ "นอก" #page จึงไม่ได้รับ container จากที่อื่น
   ถ้าไม่ใส่ max-width + padding ตรงนี้ คอลัมน์แรกจะชนขอบจอซ้ายพอดี
   ใช้ค่าเดียวกับ .gb-container เพื่อให้ขอบตรงกับเนื้อหาส่วนบนของหน้า */
#footer .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
  width: 100%;
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  border: 0;
}
/* app.min.css มี #footer .row [class*=col-]{padding:7.5px 15px}
   ถ้าไม่ล้าง คอลัมน์ footer จะเยื้องเข้ามาอีก 15px ไม่ตรงแนวกับเนื้อหาด้านบน */
#footer .row [class*="col-"],
#footer [class*="col-"] { width: 100%; float: none; padding: 0; }
#footer .title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
  border: 0;
  padding: 0;
}
#footer ul { margin: 0; padding: 0; list-style: none; }
#footer li { margin-bottom: 9px; }
#footer a { color: rgba(255,255,255,.80); font-size: 14.5px; }
#footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#footer p { font-size: 14.5px; margin-bottom: .7em; }

#copyright {
  background: var(--gb-bg-deep);
  /* เดิมตั้งไว้ .45 ซึ่งจางเกินไปบนพื้นเข้ม อ่านแทบไม่ออก */
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: none;
  padding: 0;
}
#copyright .notice {
  max-width: var(--gb-container);
  margin-inline: auto;
  padding: 22px clamp(16px, 3vw, 32px);
  font-size: 13.5px;
  line-height: 1.9;
  text-align: center;
  color: rgba(255,255,255,.72);
}
#copyright .notice strong { color: #fff; font-weight: 600; }
#copyright a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
#copyright a:hover { color: var(--gb-accent-line); }

/* ปุ่มเลื่อนขึ้นบน
   app.min.js ใช้ $('#scroll-up').fadeIn() ซึ่งใส่ style="display:block"
   ลงไปที่ตัว element โดยตรง inline style ชนะ CSS เสมอ
   ดังนั้นจะใช้ flex จัดกึ่งกลางไม่ได้ (ไอคอนจะเบี้ยวไปมุมซ้ายบน)
   จึงจัดกึ่งกลางด้วย text-align + line-height ซึ่งทำงานกับ display:block */
#scroll-up {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 150;
  width: 46px; height: 46px;
  padding: 0;
  text-align: center;
  line-height: 44px;   /* 46px ลบขอบบน-ล่างอย่างละ 1px */
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gb-line);
  box-shadow: var(--gb-shadow);
  color: var(--gb-ink) !important;
  opacity: 1;
  transition: border-color .18s var(--gb-ease), box-shadow .18s var(--gb-ease), transform .18s var(--gb-ease);
}
/* ธีมเดิมตั้ง opacity:.3 ไว้ ทำให้ปุ่มจาง */
#scroll-up i, #scroll-up .fa {
  font-size: 16px !important;
  line-height: inherit !important;
  vertical-align: middle;
  color: var(--gb-ink) !important;
}
#scroll-up:hover {
  border-color: var(--gb-accent);
  color: var(--gb-accent) !important;
  transform: translateY(-2px);
  box-shadow: var(--gb-shadow-lg);
}
#scroll-up:hover i, #scroll-up:hover .fa { color: var(--gb-accent) !important; }

/* ============================================================================
   12. เบ็ดเตล็ด
   ========================================================================= */
/* ข้อความที่มองไม่เห็น แต่โปรแกรมอ่านหน้าจออ่านได้
   ใช้กับปุ่มที่มีแต่ไอคอน */
.gb-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* แจ้งเตือนคุกกี้ */
#site-cookie-notice, .cookie-notice, #cookies-acceptance {
  border-radius: var(--gb-radius);
  border: 1px solid var(--gb-line);
  box-shadow: var(--gb-shadow-lg);
  font-size: 14px;
}
/* ลิงก์ในย่อหน้าต้องไม่แยกด้วย "สี" อย่างเดียว คนตาบอดสีจะมองไม่ออกว่าเป็นลิงก์
   จึงขีดเส้นใต้ให้ลิงก์ที่อยู่ปนกับข้อความ */
#cookies-acceptance a,
#content p a, #box-category > p.description a,
.gb-feature__body a, .gb-section__head a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
#cookies-acceptance a:hover,
#content p a:hover, .gb-feature__body a:hover { text-decoration-thickness: 2px; }

/* กล่องทั่วไปของหน้าอื่น ๆ ให้ดูเข้าชุดกัน */
.box {
  border-radius: var(--gb-radius);
  border-color: var(--gb-line);
}
.box > .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gb-ink);
  border-bottom: 1px solid var(--gb-line);
}

/* breadcrumbs */
.breadcrumb {
  background: none;
  padding: 18px 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--gb-ink-3);
}
.breadcrumb a { color: var(--gb-ink-mid); }
.breadcrumb a:hover { color: var(--gb-accent); }

/* ตารางในหน้าอื่น */
table.table th { font-weight: 600; color: var(--gb-ink); border-color: var(--gb-line) !important; }
table.table td { border-color: var(--gb-line) !important; }

/* ---------------------------------------------------------------------------
   หน้าอื่นที่ไม่ใช่หน้าแรก
   หน้าแรกออกแบบให้ section กินเต็มความกว้างจอ (พื้นหลังสลับสีได้)
   ส่วนหน้าอื่นยังใช้โครงเดิมของ LiteCart จึงต้องใส่กรอบ container ให้
   ไม่งั้นเนื้อหาจะชนขอบจอ  (คลาสนี้ใส่จาก layouts/default.inc.php)
   ------------------------------------------------------------------------ */
body #page.gb-page--inner {
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
  padding-block: clamp(16px, 2vw, 28px);
}

/* เปลี่ยนสีฟ้าเดิมของธีม (#2e9cd4) เป็นสีม่วงของแบรนด์ */
a:link, a:visited { color: var(--gb-accent); }
a:hover, a:active { color: var(--gb-accent-hover); text-decoration: none; }
.hover-light:hover { box-shadow: 0 0 0 2px var(--gb-accent-line); }
.nav-pills li.active > a { background: var(--gb-accent); }
#box-information li a.active, #box-information li a:hover { color: var(--gb-accent); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
  background-color: var(--gb-accent) !important;
  border-color: var(--gb-accent) !important;
}

/* แถบหมวดหมู่ด้านซ้ายและปุ่มเรียงลำดับ */
#box-category-tree li a.active,
#box-category-tree li.active > a { background: var(--gb-accent) !important; color: #fff !important; }
#box-category-tree li a { border-radius: var(--gb-radius-sm); }

/* ============================================================================
   Responsive
   ========================================================================= */
@media (max-width: 991px) {
  .gb-feature { grid-template-columns: 1fr; gap: 20px; }
  .gb-feature:nth-child(even) .gb-feature__media { order: 0; }
  .gb-feature__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
  .gb-burger { display: inline-flex; }
  .gb-logo img { max-height: 34px; }

  .gb-topbar { font-size: 12px; }

  /* บนมือถือ ย้ายช่องค้นหาลงมาเต็มความกว้างใต้โลโก้ */
  .gb-header__inner { min-height: 58px; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
  .gb-header__search { order: 10; flex: 1 0 100%; max-width: none; }
  .gb-header__actions { gap: 6px; }

  #cart .details { display: none; }
  #cart > a { padding: 8px 10px; }

  /* คงตัวอักษร EN/TH ไว้ แค่ลดระยะขอบ ถ้าซ่อนจะเหลือปุ่มเปล่า */
  .gb-lang { padding: 2px; }
  .gb-lang a { padding: 6px 8px; font-size: 12px; }

  .gb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gb-stat { padding: 16px 14px; }

  #site-menu .navbar-collapse,
  #site-menu .navbar-collapse.collapse { display: none !important; }
  #site-menu .navbar-collapse.collapse.in { display: block !important; }
  #site-menu .nav.navbar-nav { flex-direction: column; padding: 6px 0; }
  #site-menu .nav.navbar-nav > li > a { padding: 11px 4px; }
  #site-menu .nav.navbar-nav > li > a::after { display: none; }
  #site-menu .dropdown-menu {
    position: static; float: none; width: 100%;
    box-shadow: none; border: 0; border-left: 2px solid var(--gb-line);
    border-radius: 0; margin: 0 0 6px 8px; padding: 0 0 0 8px;
  }
  #site-menu .nav.navbar-nav.navbar-right { border-top: 1px solid var(--gb-line); }

  #box-slides .item img { aspect-ratio: 16 / 11; }
  #box-slides .carousel-control { display: none; }
  #box-slides .carousel-indicators { right: 50%; transform: translateX(50%); }

  .products.row { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
  .product.column .name { font-size: 13.5px; padding: 11px 12px 0; }
  .product.column .manufacturer, .product.column .price-wrapper { padding-inline: 12px; }

  .nav-tabs { display: flex; width: 100%; overflow-x: auto; }
  .nav-tabs > li { flex: 1 0 auto; }

  #copyright .notice { text-align: left; }
}

@media (max-width: 400px) {
  .products.row { grid-template-columns: repeat(2, 1fr); }
}

/* ลดการเคลื่อนไหวให้ผู้ใช้ที่ตั้งค่าไว้ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .gb-feature__media img, .product.column .image-wrapper img { transition: none; }
}

/* สั่งพิมพ์ */
@media print {
  .gb-topbar, .gb-header, #site-menu, #scroll-up, #footer, #copyright { display: none !important; }
}


/* ============================================================================
   13. หน้าอื่น ๆ — หมวดหมู่ / สินค้า / เนื้อหา / บัญชี / เช็คเอาต์
   ----------------------------------------------------------------------------
   ทำให้เข้าชุดกับหน้าแรก โดยไม่แตะโครง HTML ของ LiteCart
   (ยังใช้ #sidebar + #content, .box, .nav-pills เหมือนเดิม)
   ========================================================================= */

/* ---- โครง 2 คอลัมน์ ---------------------------------------------------- */
#main { display: flex; gap: clamp(20px, 2.4vw, 34px); min-height: 0; align-items: flex-start; }
#main > #sidebar { flex: 0 0 258px; position: sticky; top: 92px; }
#main > #sidebar + #content { margin-left: 0; }
#content { min-width: 0; }

/* ---- กล่องในแถบข้าง ----------------------------------------------------- */
#sidebar .box {
  background: #fff;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: none;
}
#sidebar .box > .title,
#sidebar .box > h3.title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gb-ink-3);
  border: 0;
  padding: 0;
  margin: 0 0 10px;
}

/* ผังหมวดหมู่ */
#box-category-tree .nav-pills { display: block; }
#box-category-tree .nav-pills > li { margin: 0 0 2px; float: none; }
#box-category-tree .nav-pills > li > a {
  display: block;
  padding: 8px 11px;
  border-radius: var(--gb-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-ink-mid);
  background: none;
  line-height: 1.45;
}
#box-category-tree .nav-pills > li > a:hover { background: var(--gb-accent-soft); color: var(--gb-accent); }
#box-category-tree .nav-pills > li.active > a,
#box-category-tree .nav-pills > li > a.active {
  background: var(--gb-accent) !important;
  color: #fff !important;
  font-weight: 600;
}
/* เมนูย่อย เยื้องเข้าไปพร้อมเส้นบอกระดับ */
#box-category-tree .nav-pills .nav-pills {
  margin: 2px 0 6px 10px;
  padding-left: 9px;
  border-left: 1px solid var(--gb-line);
}
#box-category-tree .nav-pills .nav-pills > li > a { font-size: 13.5px; padding: 6px 10px; }

/* กล่องกรอง */
#box-filter label { font-size: 14px; color: var(--gb-ink-mid); display: flex; align-items: center; gap: 8px; }
#box-filter input[type="checkbox"] { accent-color: var(--gb-accent); width: 15px; height: 15px; }

/* ---- breadcrumbs ------------------------------------------------------- */
ul.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 6px;
  list-style: none;
  background: none;
  padding: 4px 0 14px;
  margin: 0;
  font-size: 13.5px;
}
ul.breadcrumb > li { display: inline-flex; align-items: center; gap: 6px; color: var(--gb-ink-3); }
ul.breadcrumb > li + li::before { content: "/"; color: var(--gb-line); }
ul.breadcrumb a { color: var(--gb-ink-mid); }
ul.breadcrumb a:hover { color: var(--gb-accent); }

/* ---- หัวหน้าหมวดหมู่ ---------------------------------------------------- */
#box-category { border: 0; padding: 0; background: none; box-shadow: none; }
#box-category > h1.title,
#content h1.title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gb-ink);
  border: 0;
  padding: 0;
  margin: 0 0 .5em;
}
html[lang="th"] #content h1.title { letter-spacing: 0; line-height: 1.4; }

#box-category > p.description {
  color: var(--gb-ink-mid);
  max-width: 78ch;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

/* ปุ่มเรียงลำดับ */
#box-category .btn-group.pull-right {
  float: none !important;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 18px;
  background: var(--gb-bg-alt);
  border: 1px solid var(--gb-line);
  border-radius: 999px;
}
#box-category .btn-group .btn {
  padding: 7px 16px;
  font-size: 13.5px;
  border: 0;
  border-radius: 999px !important;
  background: transparent;
  color: var(--gb-ink-mid);
}
#box-category .btn-group .btn:hover { color: var(--gb-ink); background: rgba(255,255,255,.7); }
#box-category .btn-group .btn.active {
  background: #fff;
  color: var(--gb-accent);
  box-shadow: 0 1px 3px rgba(27,23,32,.10);
}

/* ---- การ์ดหมวดหมู่ย่อย -------------------------------------------------- */
.categories.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin: 0 0 clamp(26px, 3vw, 40px);
}
.categories.row > [class*="col-"] { width: 100%; float: none; padding: 0; }
.category.hover-light {
  height: 100%;
  background: #fff;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  overflow: hidden;
  transition: border-color .2s var(--gb-ease), box-shadow .25s var(--gb-ease), transform .25s var(--gb-ease);
}
.category.hover-light:hover {
  border-color: var(--gb-accent-line);
  box-shadow: var(--gb-shadow-lg);
  transform: translateY(-3px);
}
.category .link { display: block; color: inherit; }
.category img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--gb-bg-alt);
}
.category .caption { padding: 14px 16px 16px; }
.category .caption h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--gb-ink);
  line-height: 1.4;
}
.category .caption p { font-size: 13.5px; color: var(--gb-ink-mid); margin: 0; }

/* ---- pagination -------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: clamp(24px,3vw,36px) 0 0; padding: 0; }
.pagination > li > a, .pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  border: 1px solid var(--gb-line) !important;
  border-radius: var(--gb-radius-sm) !important;
  color: var(--gb-ink-mid);
  font-size: 14px;
  font-weight: 500;
  background: #fff;
}
.pagination > li > a:hover { border-color: var(--gb-accent) !important; color: var(--gb-accent); }

/* ============================================================================
   หน้าสินค้า
   ========================================================================= */
#box-product {
  max-width: none !important;
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}
#box-product > .row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
  align-items: start;
}
#box-product > .row > [class*="col-"] { width: 100%; float: none; padding: 0; }

/* รูปสินค้า */
#box-product .image-wrapper {
  background: var(--gb-bg-alt);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
#box-product .image-wrapper img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }

#box-product .extra-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(74px, 100%), 1fr));
  gap: 8px;
  margin: 8px 0 0;
}
#box-product .extra-images > [class*="col-"] { width: 100%; float: none; padding: 0; }
#box-product .extra-image {
  background: var(--gb-bg-alt);
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s var(--gb-ease);
}
#box-product .extra-image:hover { border-color: var(--gb-accent); }
#box-product .extra-image img { max-width: 100%; max-height: 100%; width: auto; mix-blend-mode: multiply; }

/* ข้อมูลสินค้า */
#box-product h1.title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  margin-bottom: .4em;
}
#box-product .manufacturer { font-size: 14px; color: var(--gb-ink-mid); }
#box-product .manufacturer img { max-height: 34px; width: auto; }

/* กล่องสั่งซื้อ */
#box-product > .row > div:last-child {
  background: #fff;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  padding: 20px;
  box-shadow: var(--gb-shadow);
  position: sticky;
  top: 92px;
}
#box-product .price-wrapper { margin: 0 0 4px; }
#box-product .price-wrapper .price,
#box-product .price-wrapper .campaign-price {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--gb-ink);
  letter-spacing: -0.02em;
}
#box-product .price-wrapper .campaign-price { color: var(--gb-danger); }
#box-product .price-wrapper .regular-price { font-size: 15px; color: var(--gb-ink-3); }
#box-product .tax, #box-product .codes, #box-product .cheapest-shipping { font-size: 13px; color: var(--gb-ink-3); }
#box-product .stock-status { font-size: 14px; }
#box-product .stock-available { color: var(--gb-success); font-weight: 600; }
#box-product .stock-unavailable { color: var(--gb-danger); font-weight: 600; }
#box-product .buy_now .btn { width: 100%; padding: 14px 22px; font-size: 16px; }
#box-product .buy_now .btn-group.btn-block { width: 100%; }
#box-product .form-group { margin-bottom: 12px; }
#box-product .social-bookmarks { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gb-line); }

/* แท็บรายละเอียด */
#box-product .nav-tabs { margin-top: clamp(28px, 3vw, 44px); }
#box-product .tab-content { padding-top: 4px; }
#box-product .tab-content .tab-pane { max-width: 85ch; color: var(--gb-ink-mid); }
#box-product .attributes table,
#box-product .tab-content table.table { max-width: 720px; border-radius: var(--gb-radius-sm); overflow: hidden; }

/* กล่องสินค้าที่เกี่ยวข้อง */
#box-similar-products, #box-also-purchased-products, #box-recently-viewed-products {
  border: 0; background: none; padding: 0; box-shadow: none;
  margin-top: clamp(32px, 4vw, 56px);
}
#box-similar-products > .title, #box-also-purchased-products > .title {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 600;
  color: var(--gb-ink);
  border: 0;
  padding: 0;
  margin-bottom: 16px;
}

/* ============================================================================
   หน้าเนื้อหา / บัญชี / เช็คเอาต์
   ========================================================================= */
#content .box,
#box-information, #box-customer-service, #box-account {
  border-radius: var(--gb-radius);
  border-color: var(--gb-line);
}
#content h2.title, #content h3.title {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  color: var(--gb-ink);
  border: 0;
  padding: 0;
}
/* ย่อหน้าเนื้อหายาว อ่านง่ายขึ้นเมื่อจำกัดความกว้าง */
#box-information .content, #content .page-content { max-width: 80ch; }

/* ฟอร์มสมัคร/ล็อกอิน/เช็คเอาต์ */
#content form .form-group { margin-bottom: 14px; }
#content form label { font-size: 13.5px; font-weight: 600; color: var(--gb-ink); margin-bottom: 5px; display: block; }
#checkout .box, #box-checkout-cart, #box-checkout-summary { box-shadow: var(--gb-shadow); }

/* ============================================================================
   Responsive ของหน้าอื่น
   ========================================================================= */
@media (max-width: 991px) {
  #box-product > .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #box-product > .row > div:last-child { grid-column: 1 / -1; position: static; }
}

@media (max-width: 767px) {
  #main { display: block; }
  #main > #sidebar { position: static; }
  #box-product > .row { grid-template-columns: 1fr; }
  #box-category .btn-group.pull-right { display: flex; width: 100%; overflow-x: auto; }
  .categories.row { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
}