/* =================================================================
   Base tokens
   ================================================================= */
:root{
  --brand: #fc7404;
  --content-max: 1400px;
  --gutter: 20px;

  /* Search UI */
  --search-radius: 28px;
  --search-h: 64px;

  /* Cat gallery */
  --cat-size: 140px;
  --cat-img: 74px;
  --cat-gap: clamp(18px, 3vw, 34px);
  --cat-radius: 20px;

  /* Shadows */
  --shadow-soft: 0 4px 12px rgba(0,0,0,.06);
  --shadow-card: 0 4px 12px rgba(0,0,0,.08);
}

/* Motion pref */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Utility */
a{ -webkit-tap-highlight-color: transparent; }

/* =================================================================
   NAVBAR
   ================================================================= */
.navbar{
  position:fixed; top:0; left:0; width:100%;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:999;
  transition:background .28s ease, box-shadow .28s ease;
}
.navbar.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}
.nav-container{
  max-width:var(--content-max);
  margin:0 auto;
  padding:10px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.nav-logo img{ height:52px; }

/* Menu (desktop) */
.menu{ display:flex; align-items:center; gap:14px; }
.menu a{
  display:flex; align-items:center; gap:6px;
  text-decoration:none; color:#111; font-weight:500;
  padding:8px 12px; border-radius:10px; transition:.3s; font-size:14px;
}
.menu a:hover{ color:var(--brand); }
.menu a.active,
.menu a.highlight-home{ background:var(--brand); color:#fff; }
.menu a.highlight-home{ font-weight:600; border-radius:12px; }

/* Search + Cart + Lang */
.nav-actions{ display:flex; align-items:center; gap:12px; margin-left:20px; }
.nav-search{ position:relative; }
.nav-search input{
  padding:6px 34px 6px 12px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:20px; font-size:14px;
}
.nav-search button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:#555;
}
.nav-cart{
  position:relative; text-decoration:none; color:#111;
  display:flex; align-items:center;
}
.nav-cart .material-symbols-rounded{ font-size:22px; }
.nav-cart .cart-count{
  position:absolute; top:-6px; right:-10px;
  background:var(--brand); color:#fff; font-size:11px;
  padding:2px 5px; border-radius:999px;
}
.language-switch-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:500; color:#111; text-decoration:none;
  padding:6px 8px; border-radius:6px; transition:color .2s ease;
}
.language-switch-btn:hover{ color:var(--brand); }
.language-switch-btn .material-symbols-rounded{ font-size:16px; }

/* =================================================================
   SIDEBAR & HAMBURGER
   ================================================================= */
.menu-desktop-only{}
.sidebar{
  position:fixed; top:0; right:-100%; width:260px; height:100vh;
  background:#fff; padding:24px;
  box-shadow:-4px 0 10px rgba(0,0,0,.1);
  transition:right .3s ease; z-index:1000;
  display:flex; flex-direction:column;
}
.sidebar.open{ right:0; }
.sidebar-header{ display:flex; justify-content:space-between; align-items:center; }
.sidebar-header .close-btn{ font-size:22px; cursor:pointer; user-select:none; }

.sidebar-menu{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.sidebar-menu a{
  display:flex; align-items:center; gap:8px;
  color:#111; font-weight:500; text-decoration:none;
  padding:10px; border-radius:8px; transition:background .3s, color .3s;
}
.sidebar-menu a:hover,
.sidebar-menu a.active{ background:var(--brand); color:#fff; }
.sidebar-menu a.highlight-home{
  background:linear-gradient(to bottom, var(--brand), #f86a04);
  border-radius:12px; font-weight:600; color:#fff;
  box-shadow:0 3px 6px rgba(252,116,4,.25);
  padding:12px 16px;
}
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.3);
  z-index:999; display:none;
}
.sidebar-overlay.show{ display:block; }

/* Dropdown ใน sidebar */
.sidebar-dropdown{ display:flex; flex-direction:column; margin-top:12px; }
.dropdown-toggle{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  width:100%; background:#fafafa; border:1px solid #e0e0e0;
  padding:12px 14px; font-size:15px; font-weight:600; border-radius:10px;
  cursor:pointer; color:#111; transition:all .2s ease;
}
.dropdown-toggle:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.dropdown-toggle .material-symbols-rounded{ font-size:20px; transition:transform .3s ease; }
.sidebar-dropdown.open .dropdown-icon{ transform:rotate(180deg); }
.dropdown-submenu{
  display:none; flex-direction:column; gap:10px; margin-top:10px; padding-left:8px;
}
.sidebar-dropdown.open .dropdown-submenu{ display:flex; }
.dropdown-submenu a{
  display:flex; align-items:center; gap:8px; font-size:14px; color:#333; text-decoration:none;
  padding:8px 12px; border-radius:8px; transition:background .2s ease, color .2s ease;
}
.dropdown-submenu a:hover{ background:#f5f5f5; color:var(--brand); }

/* Hamburger */
.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  width:36px; height:36px; padding:0; background:transparent; border:none; cursor:pointer;
}
.hamburger span{
  display:block; width:26px; height:2px; background:#1d1d1f; border-radius:2px;
  transition:transform .28s ease, opacity .2s ease;
}
.hamburger span + span{ margin-top:4px; }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translateY(6px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translateY(-6px); }
.hamburger:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }

/* Responsive: navbar menu/controls */
@media (max-width:1024px){
  .menu-desktop-only{ display:none !important; }
  .hamburger{ display:flex; }
}
@media (min-width:1025px){
  .hamburger{ display:none; }
}

/* =================================================================
   HERO (split)
   ================================================================= */
.hero-split{ max-width:var(--content-max); margin:96px auto 0; padding:0 var(--gutter); display:grid; grid-template-columns:1fr 360px; gap:16px; }
.hero-left{ position:relative; }
.hero-track{ height:100%; display:flex; transition:transform .5s ease; }
.hero-slide{ position:relative; flex:0 0 100%; height:68vh; min-height:420px; max-height:760px; border-radius:18px; overflow:hidden; background:#f3f4f6; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(105%); }

.hero-caption{
  position:absolute; right:6vw; top:50%; transform:translateY(-50%);
  color:#111; text-align:left; max-width:520px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  padding:22px 26px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.hero-caption h2{ margin:0 0 8px; font-size:clamp(24px,3.2vw,40px); font-weight:700; }
.hero-caption p{ margin:0 0 14px; color:#333; font-size:clamp(14px,1.4vw,16px); }
.btn-hero{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:12px; font-weight:600;
  box-shadow:0 6px 16px rgba(252,116,4,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-hero:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(252,116,4,.45); }

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:none; border-radius:999px;
  background:rgba(255,255,255,.86); box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer; font-size:22px; line-height:40px;
}
.hero-nav.prev{ left:14px; } .hero-nav.next{ right:14px; }
.hero-nav:hover{ background:#fff; }

.hero-dots{
  position:absolute; right:22px; bottom:18px; display:flex; gap:8px;
  background:rgba(255,255,255,.7); padding:6px 10px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.hero-dots button{
  width:8px; height:8px; border-radius:999px; border:none; cursor:pointer; background:#c7c7cc; padding:0;
}
.hero-dots button.is-active{ background:#111; width:22px; }

.promo-card{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); }
.promo-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.promo-caption{ padding:14px; }
.promo-caption h3{ margin:0 0 6px; }

@media (max-width:1024px){
  .hero-split{ grid-template-columns:1fr; }
  .promo-card img{ height:180px; }
}
@media (max-width:768px){
  .hero-slide{ height:56vh; min-height:360px; border-radius:12px; }
  .hero-caption{
    left:16px; right:16px; top:auto; bottom:14px; transform:none;
    text-align:center; padding:14px 16px; border-radius:12px;
  }
}

/* =================================================================
   SEO HERO (H1 + description)
   ================================================================= */
.seo-hero{ margin-top:40px; padding:36px var(--gutter); text-align:center; }
.seo-inner{ max-width:var(--content-max); margin:0 auto; }
.seo-hero h1{
  font-size:clamp(26px, 3.2vw, 42px);
  font-weight:800; line-height:1.3; color:#111; margin:0 0 14px;
}
.seo-hero p{
  max-width:980px; margin:0 auto; color:#444;
  font-size:clamp(15px, 1.6vw, 18px); line-height:1.65;
}
@media (max-width:768px){
  .seo-hero{ padding:28px 16px; }
  .seo-hero h1{ font-size:22px; }
  .seo-hero p{ font-size:14px; }
}

/* =================================================================
   CATEGORY GALLERY
   ================================================================= */
.cat-gallery{ max-width:var(--content-max); margin:56px auto; padding:0 var(--gutter); }
.cat-gallery .sec-title{
  font-size:clamp(20px, 2.4vw, 28px); font-weight:800; margin:0 0 22px; text-align:center;
}
.cat-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:var(--cat-gap); justify-items:center;
}
.cat-link{
  display:grid; place-items:center; gap:10px;
  width:var(--cat-size); height:var(--cat-size);
  text-decoration:none; border-radius:var(--cat-radius);
  transition:transform .25s ease;
}
.cat-link:hover{ transform:translateY(-6px); }
.cat-media{ position:relative; display:grid; place-items:center; }
.cat-media img{ width:var(--cat-img); height:var(--cat-img); object-fit:contain; transition:transform .25s ease, filter .25s ease; }
.cat-media::after{
  content:""; position:absolute; bottom:-6px; left:50%;
  width:70%; height:8px; transform:translateX(-50%) scaleX(.5);
  border-radius:999px; opacity:0; transition:transform .3s ease, opacity .3s ease;
  background:linear-gradient(90deg,#ff007a 0%,#ff8a00 16%,#ffe600 33%,#3ce6d4 50%,#00b3ff 66%,#8a2be2 83%,#ff007a 100%);
  background-size:300% 100%; filter:blur(6px) saturate(1.3);
}
.cat-link:hover .cat-media::after{ opacity:.95; transform:translateX(-50%) scaleX(1); animation:rainbowMove 2.2s linear infinite; }
.cat-link:hover .cat-media img{ transform:scale(1.1); filter:drop-shadow(0 0 8px rgba(255,255,255,.75)); }
.cat-label{ font-size:15px; font-weight:600; color:#111; text-align:center; }
@keyframes rainbowMove{ from{background-position:0% 50%;} to{background-position:100% 50%;} }
@media (max-width:1024px){ :root{ --cat-size:120px; --cat-img:66px; } }
@media (max-width:768px){ :root{ --cat-size:110px; --cat-img:58px; } .cat-gallery .sec-title{ margin-bottom:14px; } }
@media (max-width:480px){ :root{ --cat-size:100px; --cat-img:52px; } .cat-grid{ gap:16px; } }

/* =================================================================
   SEARCH SECTION (box + button)
   ================================================================= */
@keyframes rgb-glow{
  0%{ box-shadow:0 0 10px 2px rgba(255,0,0,.4), var(--shadow-soft); }
  16%{ box-shadow:0 0 10px 2px rgba(255,165,0,.4), var(--shadow-soft); }
  33%{ box-shadow:0 0 10px 2px rgba(255,255,0,.4), var(--shadow-soft); }
  50%{ box-shadow:0 0 10px 2px rgba(0,128,0,.4), var(--shadow-soft); }
  66%{ box-shadow:0 0 10px 2px rgba(0,0,255,.4), var(--shadow-soft); }
  83%{ box-shadow:0 0 10px 2px rgba(75,0,130,.4), var(--shadow-soft); }
  100%{ box-shadow:0 0 10px 2px rgba(255,0,0,.4), var(--shadow-soft); }
}
.search-section{ background:#fff; padding:40px 0; display:flex; justify-content:center; }
.search-wrap{ width:min(1200px, 92%); }
.search-form{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.search-box, .search-extra, .search-btn{
  height:var(--search-h); border-radius:var(--search-radius);
  background:#fff; color:#111; box-shadow:var(--shadow-soft); border:none; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.search-box{ position:relative; display:flex; align-items:center; gap:10px; flex:1 1 560px; min-width:260px; padding:0 20px; border:1px solid transparent; }
.search-icon{ color:var(--brand); font-size:20px; }
.search-box input{ flex:1; border:none; outline:none; font-size:18px; background:transparent; color:#222; }
.search-box input::placeholder{ color:#8a8a8a; }
.search-box:hover, .search-box:focus-within, .search-extra:hover, .search-btn:hover{ animation:rgb-glow 3s linear infinite; }
.search-extra, .search-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap; font-weight:700; padding:0 18px; }
.search-btn{ padding:0 26px; font-weight:800; }
.search-extra .material-symbols-rounded, .search-btn .material-symbols-rounded{ font-size:20px; }
@media (max-width:768px){ :root{ --search-h:58px; --search-radius:24px; } }
@media (max-width:480px){
  :root{ --search-h:54px; }
  .search-extra{ flex:1 1 auto; justify-content:center; }
  .search-btn{ flex:0 0 auto; }
}

/* =================================================================
   PRODUCTS (cmnsx)
   ================================================================= */
.cmnsx-products{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding:2rem 1rem; max-width:1200px; margin:0 auto;
  position:relative; z-index:0; /* กัน stacking context */
}
.cmnsx-title{ font-size:1.8rem; font-weight:700; margin-bottom:2rem; color:#333; }
.cmnsx-empty{ text-align:center; padding:3rem; background:#f9f9f9; border-radius:8px; color:#777; }

/* Grid */
.cmnsx-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem; list-style:none; padding:0; margin:0;
}
@media (max-width:1024px){ .cmnsx-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .cmnsx-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; } }
@media (max-width:480px){ .cmnsx-grid{ grid-template-columns:1fr; } }

/* Card */
.cmnsx-card{
  background:#fff; border-radius:12px; box-shadow:var(--shadow-card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease; position:relative;
  z-index:1;
}
.cmnsx-card:hover{ transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* Badge */
.cmnsx-badge{
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; background:#243443; color:#fff;
  font-weight:700; font-size:.85rem; line-height:1; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.18); z-index:5; pointer-events:none;
}
.cmnsx-badge::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
@media (max-width:768px){ .cmnsx-badge{ top:8px; left:8px; padding:5px 9px; font-size:.8rem; } }

/* Thumb */
.cmnsx-thumb{
  display:block;
  position:relative;
  aspect-ratio:1 / 1;
  background:#f5f5f5;
  overflow:hidden;
  /* [GEMINI-FIX] ฆ่าขีดน้ำเงินที่มาจาก CSS ไฟล์อื่น */
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.cmnsx-img{ width:100%; height:100%; object-fit:cover; display:block; background:#fff; position:relative; z-index:2; }

/* --- [NEW] สไตล์สำหรับ Fallback Icon (ใน Grid หลัก) --- */
.cmnsx-thumb-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* ทำให้มันเป็นสี่เหลี่ยมจัตุรัส */
  
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0; /* สีพื้นหลัง */
  border-radius: 8px; /* ความโค้งของขอบ (แก้ตามดีไซน์มึง) */
}

.cmnsx-thumb-icon .material-symbols-rounded {
  font-size: 64px; /* ขนาดไอคอน (ใหญ่กว่าใน popup) */
  color: #888; /* สีไอคอน */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

/* Fallback (ถ้ารูปพัง) - [DEPRECATED by GEMINI] 
   กูลบคอมเมนต์บล็อกนี้ออก เพราะเราเปลี่ยนไปใช้ logic onerror + .cmnsx-thumb-icon แทนแล้ว
.cmnsx-thumb::before,
.cmnsx-thumb::after{ ... }
.cmnsx-thumb:has(...) ... { ... }
*/

/* Info */
.cmnsx-info{ padding:1rem; display:flex; flex-direction:column; flex-grow:1; }
.cmnsx-cat{ font-size:.75rem; color:#888; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.5px; }
.cmnsx-name{ font-size:1rem; font-weight:600; color:#222; margin:0 0 .5rem; line-height:1.4; flex-grow:1; }
.cmnsx-link{ text-decoration:none; color:inherit; }
.cmnsx-link:hover{ text-decoration:underline; }

/* Price row + cart icon button */
.cmnsx-price{ display:flex; align-items:baseline; gap:.5rem; margin-bottom:.5rem; }
.cmnsx-price-now{ font-size:1.5rem; font-weight:700; color:#e74c3c; }
.cmnsx-price-old{ font-size:1rem; color:#999; text-decoration:line-through; }

.card-cart-btn{
  margin-left:auto; width:44px; height:44px; border:0; border-radius:12px;
  background:#111; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .2s;
}
.card-cart-btn .material-symbols-rounded{ font-size:22px; line-height:1; }
.card-cart-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.24); }
.card-cart-btn:active{ transform:translateY(0); }
.card-cart-btn[disabled]{ opacity:.6; cursor:wait; }
.cart-on-price{ position:static !important; right:auto !important; top:auto !important; }

/* Low stock */
.cmnsx-low{ margin-top:6px; color:#c55; font-weight:700; font-size:.88rem; }

/* LINE full-width button */
.btn-line-full{
  margin-top:12px; width:100%; height:48px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:14px; font-weight:800; background:#06C755; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(6,199,85,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-line-full .material-symbols-rounded{ font-size:22px; }
.btn-line-full:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(6,199,85,.35); }

/* =================================================================
   FILTER BAR (compact dropdowns)
   ================================================================= */
.filter-bar{ max-width:1200px; margin:10px auto 6px; padding:0 12px; position:relative; z-index:5; }
.fb-row{
  display:flex; align-items:flex-start; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
  padding:8px 10px; border:1px solid #e7e7e7; border-radius:14px; background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.03);
}
.fb-row:has(.fb-dd.is-open){ overflow:visible; padding-bottom:14px; }
.fb-row::-webkit-scrollbar{ height:8px; }
.fb-row::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }
.fb-row{ scrollbar-width:thin; }

.fb-dd{ position:relative; flex:0 0 auto; }
.fb-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px; border-radius:999px;
  border:1px solid #e5e5e7; background:#f7f7f9; color:#222;
  font-weight:700; font-size:.92rem; cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s, color .15s, transform .12s;
}
.fb-chip:hover{ background:#f1f2f5; }
.fb-chip:active{ transform:translateY(1px); }
.fb-chip.is-active{ background:#111; color:#fff; border-color:#111; }
.fb-chip .material-symbols-rounded{ font-size:18px; }
.fb-caret{ font-size:18px; opacity:.7; transition:transform .15s; }
.fb-dd.is-open .fb-caret{ transform:rotate(180deg); }

/* เมนูลอยบนสุด (กันโดนคลิป) */
.fb-menu{
  position:fixed !important; top:0; left:0; display:none;
  min-width:190px; max-height:260px; overflow:auto; z-index:2147483647 !important;
  background:#fff; border:1px solid #e7e7e7; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding:6px;
}
.fb-dd.is-open .fb-menu{ display:block; }

.fb-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; text-decoration:none; color:#222; font-weight:600; white-space:nowrap;
}
.fb-item:hover{ background:#f4f5f7; }
.fb-item.is-selected{ background:#111; color:#fff; }
.fb-count{ opacity:.6; font-weight:700; }

.fb-spacer{ flex:1 1 auto; }
.fb-clear{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 12px; border-radius:999px;
  text-decoration:none; font-weight:700; color:#444; background:#f4f4f6; border:1px solid #e7e7e7;
  transition:background .15s, border-color .15s;
}
.fb-clear:hover{ background:#eee; }

@media (max-width:768px){
  .fb-chip,.fb-clear{ height:32px; padding:0 10px; font-size:.9rem; }
  .fb-menu{ min-width:170px; max-height:220px; }
}

/* =================================================================
   PAGINATION
   ================================================================= */
.cmnsx-pager{ margin-top:2.5rem; }
.cmnsx-pager-list{
  display:flex; justify-content:center; align-items:center; gap:.5rem;
  list-style:none; padding:0; margin:0;
}
.cmnsx-pager-item{ line-height:1; }
.cmnsx-pager-link,
.cmnsx-pager-current,
.cmnsx-pager-item.cmnsx-pager-nav > a,
.cmnsx-pager-item.cmnsx-pager-nav > span{
  display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:10px; text-decoration:none; font-weight:700; font-size:1rem; user-select:none;
  transition:background-color .2s ease, color .2s ease, transform .12s ease;
}
.cmnsx-pager-link{ background:#f1f1f1; color:#555; }
.cmnsx-pager-link:hover{ background:#e8e8e8; }
.cmnsx-pager-link:active{ transform:translateY(1px); }
.cmnsx-pager-current{ background:#111; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.cmnsx-pager-nav > a{ background:#efefef; color:#333; }
.cmnsx-pager-nav > a:hover{ background:#e5e5e5; }
.cmnsx-pager-item.is-disabled > span{ background:#f6f6f6; color:#bbb; cursor:not-allowed; }
.cmnsx-pager a:focus-visible{ outline:3px solid #4c9ffe; outline-offset:2px; border-radius:10px; }
@media (max-width:480px){
  .cmnsx-pager-link,
  .cmnsx-pager-current,
  .cmnsx-pager-item.cmnsx-pager-nav > a,
  .cmnsx-pager-item.cmnsx-pager-nav > span{
    width:38px; height:38px; border-radius:9px; font-size:.95rem;
  }
  .cmnsx-pager-list{ gap:.4rem; }
}


/* ======= FORCE 2-COLUMN GRID ON MOBILE, 1-COLUMN ON VERY SMALL ======= */
/* แท็บเล็ต/มือถือส่วนใหญ่: บังคับ 2 คอลัมน์เต็มแถว */
@media (max-width: 920px){
  .cmnsx-products{ padding-left: 14px; padding-right: 14px; }
  .cmnsx-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  /* กันการ์ดมี min-width แปลก ๆ จากที่อื่น */
  .cmnsx-card{ min-width: 0 !important; }
  /* ปรับขนาดตัวอักษรเล็กลงนิดให้พอดี 2 คอลัมน์ */
  .cmnsx-name{ font-size: .98rem; line-height: 1.35; }
  .cmnsx-price-now{ font-size: 1.35rem; }
  .cmnsx-price-old{ font-size: .95rem; }
  .cmnsx-badge{ font-size: .78rem; padding: 5px 8px; }
  .btn-line-full{ height: 46px; }
}

/* จอเล็กมาก (เช่น iPhone SE): 1 คอลัมน์อ่านง่าย */
@media (max-width: 420px){
  .cmnsx-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ป้องกันข้อความยาว/ภาษาไทยดันการ์ดแคบผิดรูป */
.cmnsx-name{
  overflow-wrap: anywhere;   /* บังคับตัดบรรทัดถ้าคำยาวมาก */
  hyphens: auto;
}

/* ปุ่ม LINE ไม่หักคำ */
.btn-line-full{ white-space: nowrap; }


/* =================================================================
   STYLES FROM PROMO-MODAL.CSS
   ================================================================= */

/* --- CSS สำหรับ Promo Popup (Refactored) --- */
#promo-backdrop[hidden],
#promo-modal[hidden] {
  display: none !important;
}

#promo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9996;
}
#promo-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

#promo-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9997;
}
#promo-modal.show {
  opacity: 1;
  pointer-events: auto;
}

#promo-modal .promo-card {
  width: min(600px, 96vw);
  max-height: calc(100vh - 32px); /* จำกัดไม่ให้เกินจอ - padding */
  height: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(12px);
  transition: transform 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
#promo-modal.show .promo-card {
  transform: translateY(0);
}

.promo-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 10;
}

/* --- พื้นที่ Scrollable สำหรับ Content --- */
.promo-scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

/* --- CSS สำหรับ Product List ใน Popup --- */
.promo-product-container {
  position: relative;
  background: #f4f4f4;
  min-height: 120px;
  border-bottom: 1px solid #eee;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  flex-shrink: 0; /* ไม่ให้หด */
}
.promo-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #555;
  font-weight: 500;
  transition: opacity 0.2s;
  z-index: 2;
}
.promo-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.promo-loader .spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #ddd;
  border-top-color: #333;
  border-radius: 50%;
  animation: promo-spin 1s linear infinite;
}
@keyframes promo-spin {
  to {
    transform: rotate(360deg);
  }
}

.promo-product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  z-index: 1;
  position: relative;
}
.promo-product-item {
  background: #fff;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.promo-product-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 3;
}

/* --- [GEMINI-FIX] ฆ่าขีดน้ำเงิน --- */
.promo-product-item a {
  display: block;
  text-decoration: none !important; /* <--- ฆ่าเส้นใต้ */
  color: #333;
  padding: 12px;
  border-bottom: none !important;   /* <--- ฆ่า border */
  box-shadow: none !important;      /* <--- ฆ่าเงา */
}
/* --- [END FIX] --- */

.promo-product-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}
.promo-product-name {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  height: 2.6em; /* 2 บรรทัด */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.promo-product-price {
  font-size: 1rem;
  font-weight: 900;
  color: #000;
  margin-top: 4px;
}

.promo-body {
  padding: 0 16px 0;
}
.promo-body h3 {
  margin-top: 16px;
}
.promo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid transparent;
}
.promo-btn.primary {
  background: #111;
  color: #fff;
}
.promo-btn.line {
  background: #06c755;
  color: #fff;
  border-color: #06c755;
}
.promo-nomore {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #444;
  font-size: 0.9rem;
  margin-top: 12px;
  padding-bottom: 8px;
}

@media (max-width: 640px) {
  #promo-modal .promo-card {
    width: 100%;
  }
  .promo-product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- [NEW] สไตล์สำหรับ Fallback Icon (ใน Popup) --- */
.promo-product-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0; /* สีพื้นหลัง */
}

.promo-product-icon .material-symbols-rounded {
  font-size: 48px; /* ขนาดไอคอน */
  color: #888; /* สีไอคอน */
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}


/* ---------- Footer ---------- */
.cmns-footer {
  background-color: #1a1a1a;
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
  padding: 60px 0 0;
  margin-top: 48px;
  border-top: 1px solid #333;
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
}

.footer-col {
  min-width: 0;
}

.footer-col .f-logo {
  display: inline-block;
  margin-bottom: 16px;
}
.footer-col .f-logo img {
  height: 40px;
  max-width: 100%;
  filter: brightness(0) invert(1) opacity(0.8);
}

.footer-col p {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 20px;
}

.footer-col h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.footer-col ul li a:hover {
  color: #fff;
  padding-left: 4px;
}

/* Contact List */
.f-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.f-contact .material-symbols-rounded {
  color: #888;
  font-size: 18px;
  padding-top: 2px;
}
.f-contact a {
  flex: 1;
}

/* Socials */
.f-socials {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.f-socials a {
  display: inline-block;
  color: #999;
  transition: color 0.2s ease, transform 0.2s ease;
}
.f-socials a:hover {
  color: #fff;
  transform: translateY(-2px);
}
.f-socials a svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Bottom Bar */
.footer-bottom {
  border-top: 1px solid #333;
  padding: 24px 0;
  text-align: center;
}
.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #888;
}

/* Responsive */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  #f-brand {
    grid-column: 1 / -1; /* Brand spans full width */
  }
}

@media (max-width: 576px) {
  .cmns-footer {
    padding-top: 40px;
  }
  .footer-grid {
    grid-template-columns: 1fr; /* Stack all columns */
    gap: 32px;
  }
  .footer-col h4 {
    margin-bottom: 16px;
  }
}




/* =================================================================
   [REVISED] Breadcrumb (ดีไซน์ใหม่แบบรูปที่มึงส่งมา)
   ================================================================= */
.pdp-breadcrumb {
  width: 100%;
  margin-bottom: 2rem; /* ระยะห่างก่อนถึงรูปสินค้า */
  font-size: 0.95rem; /* ขยายตัวอักษรนิดนึง */
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;

  /* [!!] ทำให้มันไถลข้างได้ ถ้าจอมือถือแคบ [!!] */
  overflow-x: auto;
  white-space: nowrap;
  /* ซ่อน scrollbar กากๆ */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.pdp-breadcrumb::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}


.breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0; /* [!!] ใช้ margin ที่ตัวคั่นแทน */
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: 0;
}

.breadcrumb-list a {
  color: #555;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  padding: 6px 10px; /* [!!] เพิ่ม padding ให้กดง่าย */
  border-radius: 6px;
  font-weight: 500;
}
.breadcrumb-list a:hover {
  color: var(--brand, #D70015);
  background-color: #f5f5f5; /* [!!] ไฮไลท์ตอน hover */
}

/* [!!] สไตล์ไอคอน Home */
.breadcrumb-list li:first-child a {
  padding: 6px; /* ไอคอนอย่างเดียว padding น้อยกว่า */
}
.breadcrumb-list a .material-symbols-rounded {
  font-size: 20px; /* ไอคอนใหญ่ขึ้น */
  color: #777;
  transition: color 0.2s ease;
}
.breadcrumb-list a:hover .material-symbols-rounded {
  color: var(--brand, #D70015);
}

/* [!!] สไตล์ตัวคั่น > */
.breadcrumb-list .breadcrumb-sep {
  color: #aaa; /* [!!] สีเทาจางๆ */
  user-select: none;
  font-size: 16px;
  margin: 0 4px; /* ระยะห่างของ > */
}

/* [!!] สไตล์หน้าปัจจุบัน (ตัวหนังสือเข้ม, ไม่ใช่ลิงก์) */
.breadcrumb-current {
  color: #111;
  font-weight: 600; /* [!!] เข้มกว่าลิงก์ */
  padding: 6px 10px;

  /* [!!] กันชื่อสินค้ายาวเหี้ยๆ แล้วล้นจอ */
  white-space: normal;
  display: inline-block;
  word-break: break-word;
  line-height: 1.4;
}

/* [!!] ทำให้ลิงก์สุดท้ายก่อนหน้าปัจจุบันเด่นขึ้น (แบบในรูป) */
.breadcrumb-list li:has(+ li:has(.breadcrumb-current)) a {
  /* ถ้าตัวต่อไปคือ "หน้าปัจจุบัน" */
  color: #111;
  font-weight: 600;
}
.breadcrumb-list li:has(+ li:has(.breadcrumb-current)) a:hover {
  color: var(--brand, #D70015);
}

/* [!!] แก้มือถือให้มันตัดคำ */
@media (max-width: 600px) {
  .breadcrumb-current {
    max-width: 200px; /* หรือจำกัดความกว้างถ้าจำเป็น */
  }
}