@charset "UTF-8";
/*@import "variables/font_family";*/
/* =========================================================================
   ประตูม้วน — task 4 : CSS ของ "ตัวระบบ" หน้า Product list / Product detail
   ปลายทาง: public/theme/sepmaster/css/custom/pmn-product.css
            (ผูก path ไว้ใน CSS/JS Embeded entry 7 ก่อน admin_custom_style.css)

   ในไฟล์นี้มีแต่สไตล์ของ element ที่ธีม/blade เป็นคนสร้าง (แอดมินแก้ไม่ได้)
   เช่น แผง Filter, แถบ Sort by/Show, กริดการ์ดสินค้า, แกลเลอรี, ตาราง spec, ปุ่ม See More

   สไตล์ของคอนเทนต์ที่แอดมินแก้เองได้ (แบนเนอร์หัวหมวด, product-banner-contact,
   คุณสมบัติเด่น, รหัสสินค้า/คำโปรย/ปุ่มขอใบเสนอราคา, ตรามาตรฐาน)
   อยู่ในกล่อง Custom CSS -> สำเนาที่ custom-css-product-box.css
   ค่าที่วัดจากบอร์ดทั้งหมดอยู่ใน SPEC.md

   🔴 ต้นทางคือไฟล์นี้ (scss/custom/pmn-product.scss) — ห้ามแก้ css/custom/pmn-product.css
   ตรง ๆ แก้ที่นี่แล้ว compile ใหม่ด้วย docs/build_theme_css.sh เท่านั้น
   ========================================================================= */
/* บอร์ดไม่มี breadcrumb ทั้งหน้า list และหน้า detail
   ตาราง "โครงหน้า" ใน task4-product/SPEC.md บรรทัด 47 กับ 128 ระบุตรงกันว่า
   header จบที่ y89 แล้วบล็อกถัดไปเริ่มที่ y90 ทันที ไม่มีแถบคั่น
   ธีมพ่นมาจาก @section('breadcrumbs') ของ blade ซ่อนด้วย CSS ไม่ต้องแก้ blade
   ตัวห่อ .container ที่เหลือสูง 0 อยู่แล้ว (วัดบน UAT) จึงไม่มีช่องว่างค้าง */
body.category-page .breadcrumb,
body.productdetail .breadcrumb {
  display: none;
}

body.category-page .main-content > .main-title.category {
  display: none;
}
body.category-page .content {
  overflow-x: clip;
}
body.category-page .main-content > .row {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 0;
  margin-right: 0;
  padding-top: 56px;
}
body.category-page .main-content > .row > #leftsidebar {
  flex: 0 0 200px;
  max-width: 200px;
  padding: 0;
  border-right: 0;
}
body.category-page .main-content > .row > #leftsidebar + div {
  flex: 1 1 auto;
  max-width: none;
  padding: 0;
  margin-left: 24px;
}
body.category-page .shopby {
  display: flex;
  flex-direction: column;
  position: relative;
}
body.category-page .shopby .filter-block.category-txt .title-sorting {
  display: none;
}
body.category-page .shopby .title-sorting {
  order: 1;
  margin: 0;
  padding: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  color: #111111;
  border-bottom: 2px solid #f4f4f3;
}
body.category-page .shopby .filter-action {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: right;
}
body.category-page .shopby .filter-action .clear-all {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1;
  color: #7d7d7d;
  text-decoration: none;
  cursor: pointer;
}
body.category-page .shopby .filter-block {
  order: 3;
  border: 0;
  padding: 0;
  margin: 0;
}
body.category-page .filter-arrow-title {
  margin: 24px 0 0;
  padding: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 500;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.category-page .filter-arrow-title i {
  position: static;
  font-size: 0.75rem;
  color: #111111;
}
body.category-page .filter-over {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}
body.category-page .filter-over li {
  margin: 0;
  padding: 0;
}
body.category-page .filter-over li a.link-default {
  display: block;
  padding: 8px 0;
  font-size: 0.875rem;
  line-height: 13px;
  color: #111111;
  text-transform: uppercase;
}
body.category-page .filter-over li a.link-default:hover,
body.category-page .filter-over li a.link-default.pmn-active {
  color: #c8102e;
}
body.category-page .filter-block + .filter-block,
body.category-page .filter-over {
  border-bottom: 2px solid #f4f4f3;
}
body.category-page .filter-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  margin: 0;
  padding: 0 0 36px;
  border: 0;
}
body.category-page .filter-list .total-view,
body.category-page .filter-list .mode-view {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
body.category-page .filter-list ul.shortby {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.category-page .filter-list h4 {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 400;
  color: #111111;
}
body.category-page .filter-list .total-view h4.grid-view {
  display: block;
}
body.category-page .filter-list .mode-view h4:nth-of-type(1) {
  display: block;
}
body.category-page .filter-list .mode-view h4:nth-of-type(2) {
  display: none;
}
body.category-page .filter-list .grid-switcher,
body.category-page .filter-list .sort-icon,
body.category-page .filter-list .mobilefilter {
  display: none;
}
body.category-page .filter-list .showfilter {
  display: block;
}
body.category-page .filter-list .showfilter > a.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  color: #111111;
}
body.category-page .filter-list .showfilter > a.dropdown-toggle::after {
  content: "\f078";
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1;
  border: 0;
  margin: 0;
  vertical-align: baseline;
}
body.category-page .filter-list .dropdown-menu {
  padding: 8px 0;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.category-page .filter-list .dropdown-item {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #656a76;
}
body.category-page .filter-list .dropdown-item:hover,
body.category-page .filter-list .dropdown-item.active {
  background: none;
  color: #c8102e;
}
body.category-page .main-content .grid-container {
  margin-left: 0;
  margin-right: 0;
}
body.category-page ul.products.product-grid-view {
  display: grid;
  /* minmax(0,1fr) จำเป็น — ชื่อ/คำโปรยเป็น nowrap ถ้าใช้ 1fr เฉย ๆ min-content จะดันกริดล้นคอลัมน์ */
  /* WP3b: ฐาน = มือถือ 1 คอลัมน์ (เดิม @media max-width:767) · bp-up(tablet) คืน gap เดิม ·
   768-1199 = 2 คอลัมน์ (เดิม range) · min-width:1200 = 3 คอลัมน์ (เดิม desktop ฐาน) —
   ขยายช่วง 2 คอลัมน์ถึง 1199 เพราะหน้านี้มี sidebar กว้าง 200 (ดูหมายเหตุด้านล่างเดิม) */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  body.category-page ul.products.product-grid-view {
    gap: 24px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body.category-page ul.products.product-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  body.category-page ul.products.product-grid-view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body.category-page ul.products.product-grid-view > li.item-box {
  /* global.css ตั้ง .grid-3 li{width:50% !important}
  (<=767) และ 25% !important (<=992)
       สู้ด้วย specificity ไม่ได้ ต้อง !important — จำนวนคอลัมน์คุมด้วย grid-template-columns แทน */
  width: 100% !important;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}

/* การ์ด — ใช้ร่วมกับ Related Products บนหน้ารายละเอียด */
.category-page ul.products > li.item-box {
  display: block;
}

.category-page .item-box .product-item-info,
.related-product .item-box .product-item-info {
  display: block;
  margin: 0;
  background: #f4f4f3;
  border: 0;
  transition: box-shadow 0.25s ease;
}

.category-page .item-box .prod-img,
.related-product .item-box .prod-img {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 349 / 232;
  background: #e6effe;
}

.category-page .item-box .prod-img a,
.related-product .item-box .prod-img a {
  display: block;
  height: 100%;
}

/* 🔴 27 ส.ค. 2026 — สปินเนอร์รอโหลดรูปถูกยืดจนใหญ่เกินกรอบ
   ธีมวาง placeholder เป็น <img class="lazy-image-loader"> ที่ src เป็น GIF base64
   ตัว GIF ขนาดจริง **30 x 30** (อ่านจากเฮดเดอร์ base64: 1E 00 1E 00)
   แต่กฎรูปของการ์ดยืดมันออกเป็น 119 x 79 บนกล่อง 424 x 282 เลยดูใหญ่ผิดสัดส่วน

   หน้า Portfolio ใช้ /images/loading.gif ขนาด **32 x 32** แสดงที่ขนาดจริง จัดกลางด้วย
   text-align ของกล่องแม่ (portfolio_thumb_grid_view.blade.php:11) จึงดูพอดี
   ทำให้ฝั่ง Product เหมือนกัน = แสดงที่ขนาดจริง จัดกลางกรอบ ไม่ยืด

   เลือกจับที่ "src ยังเป็น GIF base64 อยู่" ไม่จับที่ class .lazy-image-loader
   เพราะ class นั้นถูกถอดใน callback load ของ plugin ถ้ารูป 404 หรือ callback ไม่ยิง
   class จะค้าง แล้วกฎนี้จะไปยืด/ย่อรูปจริงแทน · วิธีนี้พอ src เปลี่ยนกฎเลิกแมตช์เอง
   ⚠️ ต้องมีตัวที่ลึกถึง .pmn-related-list ด้วย ไม่งั้นแพ้กฎ
   body.productdetail .related-product .pmn-related-list .prod-img img (0,4,2) */
body.category-page .prod-img img[src^="data:image/gif"],
body.productdetail .related-product .pmn-related-list .prod-img img[src^="data:image/gif"],
body.productdetail .prod-img img[src^="data:image/gif"] {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: none;
  transform: none;
  opacity: 1;
}

.category-page .item-box .prod-img img,
.related-product .item-box .prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.category-page .item-box .product-info,
.related-product .item-box .product-info {
  height: 80px;
  padding: 16px 16px 0;
  text-align: center;
  overflow: hidden;
}

.category-page .item-box .review-wrap,
.category-page .item-box .brand-name,
.category-page .item-box .sku-name,
.category-page .item-box .prod-fix-text,
.category-page .item-box .custom-info,
.category-page .item-box .price-wrap,
.category-page .item-box .hide-price-text,
.category-page .item-box .stock-availability,
.category-page .item-box .addtocart-btn,
.category-page .item-box .add-to-links,
.related-product .item-box .review-wrap,
.related-product .item-box .brand-name,
.related-product .item-box .sku-name,
.related-product .item-box .prod-fix-text,
.related-product .item-box .custom-info,
.related-product .item-box .add-to-links,
.related-product .item-box .price-wrap,
.related-product .item-box .hide-price-text,
.related-product .item-box .stock-availability,
.related-product .item-box .addtocart-btn {
  display: none;
}

.category-page .item-box .product-title,
.related-product .item-box .product-title {
  margin: 0;
  padding: 0;
}

.category-page .item-box .product-title a,
.related-product .item-box .product-title a {
  display: block;
  font-size: 1.125rem;
  line-height: 19px;
  font-weight: 500;
  color: #111111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.category-page .item-box .product-item-info .prod-desc,
.related-product .item-box .product-item-info .prod-desc {
  display: block;
  height: auto;
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 15px;
  color: #54585a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-page .item-box .product-item-info:hover,
.related-product .item-box .product-item-info:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.category-page .item-box .product-item-info:hover .product-title a,
.related-product .item-box .product-item-info:hover .product-title a {
  color: #c8102e;
}

.category-page .item-box .product-item-info:hover .prod-img img,
.related-product .item-box .product-item-info:hover .prod-img img {
  transform: scale(1.06);
}

body.category-page .pagination {
  display: block;
  margin: 0;
  padding: 40px 0 60px;
}
body.category-page .pagination .pagenum {
  text-align: center;
}
body.category-page .pagination .pagenum .btn-primary {
  min-width: 130px;
  height: 48px;
  padding: 0 24px;
  background: #54585a;
  border: 0;
  border-radius: 2px;
  font-size: 1rem;
  line-height: 48px;
  font-weight: 400;
  color: #fff;
}
body.category-page .pagination .pagenum .btn-primary:hover {
  background: #37383a;
}
body.category-page .pagination .pagenum .btn-primary:active {
  background: #111111;
}

body.productdetail .productDisplay > .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0;
  padding-top: 60px;
}
body.productdetail .productDisplay > .row > div {
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
  padding: 0;
}
body.productdetail .product-img-box {
  margin: 0;
}

body.productdetail .imgzoom-box,
body.productdetail .product-info-details,
body.productdetail .product-info-details .header-wrap,
body.productdetail .product-info-details .group-header,
body.productdetail .product-info-details h1.main-title {
  text-align: left;
}

body.productdetail .zoom-gallery {
  display: block;
}
body.productdetail .product-main-img {
  position: relative;
  margin: 0; /* ธีมตั้ง margin-left:$sp-112 ไว้ */
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f4f4f3;
}
body.productdetail .product-main-img .zoom-gallery-slide,
body.productdetail .product-main-img .MagicZoom {
  display: block;
  height: 100%;
}

/* แกลเลอรี crossfade — คู่กับ showSlide() ใน productDetail/d1/v1/product-detail-dir.js
   เดิมรูป 4 ใบเรียงลงมาแล้วเปลี่ยนด้วย scrollTop ซึ่งเลื่อนไม่ลื่นเพราะกล่องเป็น overflow: hidden
   (compositor เลื่อนให้ไม่ได้ ต้อง repaint 648x432 ทุกเฟรม) ย้ายมาซ้อนทับกันแล้วสลับ opacity แทน
   บอร์ดไม่ได้ระบุชนิด animation ของแกลเลอรี ใช้ convention ทั่วไปของ product gallery

   :not(.pmn-fade-ready) คือ fallback — ก่อน JS ทำงานให้เห็นรูปใบแรก
   ไม่ใช่กล่องว่าง JS จะติด .pmn-fade-ready ให้หลังตั้ง .pmn-current ใบแรกเรียบร้อยแล้ว */
body.productdetail .product-main-img > .zoom-gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
body.productdetail .product-main-img:not(.pmn-fade-ready) > .zoom-gallery-slide:first-of-type,
body.productdetail .product-main-img > .zoom-gallery-slide.pmn-current {
  opacity: 1;
}
body.productdetail .product-main-img > .zoom-gallery-slide.pmn-current {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  body.productdetail .product-main-img > .zoom-gallery-slide {
    transition: none;
  }
}
body.productdetail .product-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔴 สามข้อนี้เจอตอน QA ครั้งแรกที่มีสินค้าจริงให้เรนเดอร์ (23 ส.ค. 2026)
   ก่อนหน้านี้หน้า list ว่างเปล่า จึงไม่เคยเห็น DOM จริงของแกลเลอรีเลย

   1) ธีมวาง .selectors (แถบ thumbnail) ไว้ "ก่อน" .product-main-img ใน DOM
      thumbnail จึงไปโผล่เหนือรูปหลัก ทั้งที่บอร์ดวางไว้ใต้รูป (y605)
      สลับด้วย order ไม่ใช่แก้ blade จะได้ไม่ต้องแตะมาร์กอัปของระบบ
   2) MagicZoom เขียน inline style ให้ img เป็น max-width/max-height เท่าขนาดไฟล์จริง
      inline ชนะทุกกฎที่ไม่ใส่ !important รูป 358x239 จึงลอยอยู่กลางกรอบ 648x432
   3) ต้องปลด max-width ที่ .mz-figure ด้วย ไม่งั้น figure คุมรูปไว้เท่าเดิม

   ⚠️ รูปแกลเลอรีที่มีอยู่เป็น 358x239 (ขนาดของเฟรมมือถือ) พอบังคับเต็มกรอบ desktop
   648x432 จะถูกขยาย 1.8 เท่าและเบลอ — ยังต้องขอไฟล์ >= 1300x866 ตาม SPEC.md ข้อ 1
   เลือกเบลอไว้ก่อนเพราะรูปเล็กลอยกลางกรอบเทาดูเหมือนหน้าเว็บพัง */
body.productdetail .zoom-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 🔴 27 ส.ค. 2026 — ปุ่มลูกศรโผล่แค่รูปแรก
   เดิมเอาปุ่มไปแปะไว้ใน .product-main-img ซึ่งเป็นกล่องที่ "เลื่อน scrollTop" เพื่อเปลี่ยนรูป
   ปุ่มจึงเลื่อนหนีไปกับเนื้อหา เห็นเฉพาะตอน scrollTop = 0 (รูปแรก) เท่านั้น
   ย้ายปุ่มออกมาไว้ในเลเยอร์ที่ไม่เลื่อน แล้วซ้อนทับกรอบรูปด้วย aspect-ratio ชุดเดียวกัน (3/2)
   จะได้ตรงกับกล่องรูปพอดีโดยไม่ต้องรู้ความสูงจริง */
body.productdetail .pmn-gal-navs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  z-index: 2;
}
body.productdetail .pmn-gal-navs .pmn-gal-nav {
  pointer-events: auto;
}
body.productdetail .product-main-img {
  order: 1;
}
body.productdetail .selectors.vertical-thumb {
  order: 2;
}
body.productdetail .product-main-img .MagicZoom,
body.productdetail .product-main-img .mz-figure {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
body.productdetail .product-main-img .mz-figure > img {
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
body.productdetail .pmn-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.2);
  color: #fff;
  font-size: 1rem;
  line-height: 42px;
  cursor: pointer;
  z-index: 2;
}
body.productdetail .pmn-gal-nav--prev {
  left: 8px;
}
body.productdetail .pmn-gal-nav--next {
  right: 8px;
}
body.productdetail .pmn-gal-nav:hover {
  background: rgba(51, 51, 51, 0.45);
}
body.productdetail .selectors.vertical-thumb,
body.productdetail .selectors.vertical-thumb .mcs-container,
body.productdetail .selectors.vertical-thumb .mcs-items-container {
  width: 100% !important;
  height: auto !important;
  max-width: none;
}
body.productdetail .selectors.vertical-thumb::before,
body.productdetail .selectors.vertical-thumb::after {
  display: none;
}
body.productdetail .selectors.vertical-thumb,
body.productdetail .selectors.vertical-thumb .mcs-items-container {
  display: flex;
  /* ธีมตั้ง float:left + position:sticky ไว้สำหรับโหมด thumb ด้านข้าง
   ถ้าไม่ล้าง แถบ thumbnail จะลอยออกนอก flow แล้วคอลัมน์ไม่สูงตาม (เห็นชัดบนมือถือ) */
  float: none;
  position: static;
  justify-content: flex-start;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  overflow: hidden;
  transform: none !important;
}
body.productdetail .selectors.vertical-thumb .mcs-items-container {
  margin: 0;
}
body.productdetail .selectors.vertical-thumb a,
body.productdetail .selectors.vertical-thumb a[data-zoom-id] {
  display: block !important;
  flex: 0 0 88px;
  width: 88px;
  height: 59px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
body.productdetail .selectors.vertical-thumb a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.productdetail .selectors.vertical-thumb a.mz-thumb-selected img,
body.productdetail .selectors.vertical-thumb a.active img {
  filter: brightness(0.6);
}
body.productdetail .product-shop,
body.productdetail .product-info-details,
body.productdetail .header-wrap,
body.productdetail .group-header {
  margin: 0;
  padding: 0;
  border: 0;
}
body.productdetail h1.main-title.simple-prod {
  display: block; /* ธีมตั้ง .main-title{display:flex}
— บนมือถือทำให้กล่องกว้าง 0 */
  /* ธีมตั้ง letter-spacing 2.74px บน .main-title ทำให้ชื่อสินค้ากว้างเกินบอร์ด (ตัดบรรทัดบนมือถือ) */
  letter-spacing: normal;
  margin: 16px 0 0;
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 600;
  color: #111111;
  text-transform: uppercase;
}

/* .sku-name.inner-info คือช่อง Product Detail ที่ธีม render ซ้ำอีกรอบ — ซ่อนตัวที่สอง */
body.productdetail .product-info-details > .sku-name.inner-info,
body.productdetail .group-sub-price,
body.productdetail .hide-price-text,
body.productdetail .brand-wrap,
body.productdetail .prod-fix-text,
body.productdetail .qty-box,
body.productdetail .btn-wishlist,
body.productdetail .btn-compare,
body.productdetail .addtocart-btn,
body.productdetail .buy-option-label,
body.productdetail .product-color-specification,
body.productdetail .tier-price-range {
  display: none;
}
body.productdetail .custom-info {
  text-align: left;
}
body.productdetail .option-add-cart {
  text-align: left;
  margin: 0;
}
body.productdetail .buy-option-wrap {
  margin: 24px 0 0;
}
body.productdetail .buy-option-wrap ul {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 0;
}
body.productdetail .buy-option-wrap li {
  margin: 0;
  padding: 0;
  background: none;
}
body.productdetail .tab-pane > h3,
body.productdetail .tab-pane > h3 + div {
  display: none;
}
body.productdetail .pmn-prd-below {
  padding-top: 60px;
}
body.productdetail .pmn-prd-below > .row {
  margin: 0;
}
body.productdetail .pmn-prd-below > .row > div {
  padding: 0;
}
body.productdetail .spec-table {
  width: 100%;
  margin: 40px 0 0;
  border: 0;
}
body.productdetail .spec-table td {
  height: 56px;
  padding: 0 24px;
  border: 0;
  vertical-align: middle;
  font-size: 1rem;
  line-height: 24px;
}
body.productdetail .spec-table td.topic {
  width: 660px;
  color: #111111;
  font-weight: 500;
}
body.productdetail .spec-table td.text {
  color: #656a76;
}
body.productdetail .spec-table.table-striped tbody tr:nth-of-type(odd) {
  background: transparent;
}
body.productdetail .spec-table.table-striped tbody tr:nth-of-type(even) {
  background: #f4f4f3;
}
body.productdetail .description-text {
  padding-top: 40px;
}
body.productdetail .description-text .nav-tabs,
body.productdetail .description-text .main-description {
  display: none;
}
body.productdetail .related-product {
  margin: 0;
  padding: 80px 0 80px;
}
body.productdetail .related-product .sub-title {
  margin: 0 0 56px;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  color: #111111;
  text-align: center;
}
body.productdetail .related-product .sub-title span {
  color: #c8102e;
}
body.productdetail .related-product .pmn-related-list::before,
body.productdetail .related-product .pmn-related-list::after {
  display: none;
}
body.productdetail .related-product .pmn-related-list {
  width: calc(100% + 16px) !important;
  margin: 0 0 0 -8px;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  body.productdetail .related-product .pmn-related-list {
    width: calc(100% + 24px) !important;
    margin-left: -12px;
  }
}
body.productdetail .related-product .pmn-related-list .mcs-item {
  box-sizing: border-box;
  padding: 0 8px !important;
}
@media (min-width: 768px) {
  body.productdetail .related-product .pmn-related-list .mcs-item {
    padding: 0 12px !important;
  }
}

/* แถบชื่อการ์ด Related — ตัวเลขจาก Figma panel node Frame 2147236916
   Fill 424 x Hug 80 / padding T12 R24 B12 L24 / gap 8 / พื้น #F4F4F3
   12 + ชื่อ 27 + gap 8 + คำโปรย 21 + 12 = 80 พอดี
   เขียนแยกจากการ์ดหน้า listing เพราะ listing กว้าง 349 ใช้ 18/16 ซึ่ง QA ผ่านไปแล้ว */
body.productdetail .related-product .pmn-related-list .product-info {
  padding: 12px 24px;
  text-align: center;
}
body.productdetail .related-product .pmn-related-list .product-title a {
  line-height: 27px;
}
body.productdetail .related-product .pmn-related-list .product-item-info .prod-desc {
  margin: 8px 0 0;
  line-height: 21px;
}

/* บอร์ดไม่มีบล็อก "สินค้าที่ดูล่าสุด" — ตาราง "โครงหน้า" ใน SPEC.md บรรทัด 128
   มี 5 บล็อกคือ header / system page / Related Products / product-banner-contact / footer
   ธีมใช้ class .related-product ตัวเดียวกันทั้ง related, upsell, cross, blog และ recent
   แยกได้จาก id ของ ul ข้างใน จึงต้องใช้ :has() */
body.productdetail .related-product:has(#recent_prd_magic_slider) {
  display: none;
}
body.productdetail .related-product .pmn-related-list li.item-box {
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}
body.productdetail .related-product .pmn-related-list .mcs-item li.item-box {
  width: 100% !important;
}
body.productdetail .related-product .pmn-related-list > li.item-box {
  width: calc(89.2857142857% - 16px);
}
@media (min-width: 768px) {
  body.productdetail .related-product .pmn-related-list > li.item-box {
    width: calc(50% - 24px);
  }
}
@media (min-width: 1024px) {
  body.productdetail .related-product .pmn-related-list > li.item-box {
    width: calc(33.3333333333% - 24px);
  }
}

/* 🔴 การ์ด Related — เจอตอน QA ที่มีสินค้าจริงครั้งแรก (23 ส.ค. 2026)
   ธีมใส่ inline style `padding-top: 125%` ให้ .prod-img (aspect hack 4:5 ของการ์ด listing)
   424 x 1.25 = 530 การ์ดจึงสูง 610 และรูปไม่ขึ้นเลย (img สูง 0 เพราะ a ไม่มีความสูง)
   inline ชนะทุกกฎที่ไม่ใส่ !important — เคสเดียวกับที่ MagicZoom ทำกับรูปแกลเลอรี
   ปลด padding-top แล้วคุมด้วย aspect-ratio ของบอร์ดแทน (424x282) + วางรูปแบบ absolute */
body.productdetail .related-product .pmn-related-list .prod-img {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-top: 0 !important;
  height: auto !important;
  aspect-ratio: 424 / 282;
  overflow: hidden;
}
body.productdetail .related-product .pmn-related-list .prod-img > a {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
body.productdetail .related-product .pmn-related-list .prod-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* 🔴 27 ส.ค. 2026 — ถอด scroll-reveal ของการ์ด Related ออก
   เคยแมป annotation y6123 ("เมื่อเลื่อนมาถึง ให้ Zoom In ขึ้นมาพร้อมกัน") ว่าเป็นการ์ด Related
   แล้วใส่ .pmn-prd-anim (opacity 0 + scale .94 -> is-in) ไว้ตั้งแต่ 24 ส.ค. **ซึ่งผิด**
   เปิดบอร์ดดูจริงแล้วกรอบแดงของ y6123 ล้อมอยู่ที่ .pmn-banner-contact__inner ที่เดียว
   ส่วน Zoom-In ของการ์ด Related ที่บอร์ดพูดถึงคือ **ตอน hover** (ชีต Hover:
   "Image: รูปในการ์ด Zoom-In ขยายขึ้นอย่างช้าๆ") ซึ่งทำไว้แล้วที่
   .product-item-info:hover .prod-img img { transform: scale(1.06) } ข้างบน
   -> การ์ด Related จึงไม่ควรมี reveal ตอนเลื่อน ย้าย Zoom In ตอนเลื่อนไปไว้ที่แบนเนอร์ Contact
   (อยู่ในกล่อง Custom Js เพราะเป็น static block) */
/* annotation ระบุ list: Mobile 1 · Tablet 2 · Desktop 3 การ์ด/แถว — ขยายช่วง 2 คอลัมน์ถึง 1199
   (เดิมจบที่ 992) เพราะหน้านี้มี sidebar กว้าง 200 · ที่ 1024 แบบ 3 คอลัมน์ การ์ดเหลือแค่ 241
   ขณะที่บอร์ดวางไว้ 349 แบบ 2 คอลัมน์ได้ 373 ซึ่งใกล้บอร์ดกว่ามาก (วัดจริง 23 ส.ค. 2026)
   ย้ายขึ้นไปแปลงเป็นฐาน + bp-up(tablet)/min-width ที่ ul.products.product-grid-view ด้านบนแล้ว (WP3b) */
@media all and (max-width: 767px) {
  body.category-page .main-content > .row {
    display: block;
    padding-top: 40px;
  }
  body.category-page .main-content > .row > #leftsidebar + div {
    margin-left: 0;
  }
  body.category-page .filter-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 24px;
  }
  body.category-page .filter-list .total-view,
  body.category-page .filter-list .mode-view {
    flex: 0 0 173px;
    max-width: 173px;
    height: 50px;
    border: 1px solid #111111;
    border-radius: 2px;
    background: #fff;
  }
  body.category-page .filter-list .mode-view {
    order: 1;
  }
  body.category-page .filter-list .total-view {
    order: 2;
  }
  body.category-page .filter-list ul.shortby {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  body.category-page .filter-list .mobilefilter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    line-height: 1;
    color: #111111;
    cursor: pointer;
  }
  body.category-page .filter-list .mobilefilter::after {
    content: "";
    width: 12px;
    height: 18px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 36' fill='none' stroke='%23111111' stroke-width='2.4'><path d='M6 0v7.25M6 17.75V36M18 0v17.75M18 28.25V36'/><circle cx='6' cy='12.5' r='4.05'/><circle cx='18' cy='23' r='4.05'/></svg>") no-repeat center/contain;
  }
  body.category-page .filter-list .mode-view h4,
  body.category-page .filter-list .mode-view .showfilter,
  body.category-page .filter-list .total-view .selectdd {
    display: none;
  }
  /* 🔴 ต้องมี !important ตรงนี้ ธีมตั้ง .d-hide { display:none !important } ไว้ในช่วง <=991
  (product-listing.css:1212) ป้าย "Sort by" ในมาร์กอัปคือ h4.grid-view.d-hide
  ถ้าเขียน display:block เฉย ๆ จะแพ้ !important เสมอไม่ว่า selector จะยาวแค่ไหน
  ผลคือกล่องขวาโล่งเหลือแต่ chevron ซึ่งเป็นบั๊กที่เจอ 24 ส.ค. 2026 */
  body.category-page .filter-list .total-view h4.grid-view {
    display: block !important;
    font-size: 1rem;
    margin: 0;
  }
  /* ธีมทาปุ่ม Filter เป็นพื้นแดง #C8102E + กรอบ #CECECE + padding 10 ในช่วง <=991
  (product-listing.css:1186 และ 1191) ซ้อนอยู่ในกล่องขาวกรอบ #111111 ที่เราวางไว้
  บอร์ดให้เป็นกล่องขาวเปล่า ๆ ทั้งสองปุ่ม จึงต้องล้างพื้น/กรอบ/padding ชั้นในทิ้ง */
  body.category-page .filter-list .mobilefilter,
  body.category-page .filter-list .total-view .showfilter {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: auto;
    height: 100%;
  }
  /* ธีมตั้ง li.showfilter เป็น position:relative ถ้าไม่ปลด overlay ข้างล่าง
  จะยึดกับ li (กว้างแค่ chevron) แทนที่จะคลุมทั้งกล่อง */
  body.category-page .filter-list .total-view .showfilter {
    position: static;
    display: flex;
    align-items: center;
  }
  body.category-page .filter-list .total-view .showfilter > a.dropdown-toggle {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
  }
  /* chevron ของธีมเป็น position:absolute จึงไม่มีความสูง ทำให้ li ยุบเหลือ 0
  ดึงกลับเข้าสายงานปกติ แล้วให้ ul.shortby จัด "Sort by" + chevron กึ่งกลางเอง */
  body.category-page .filter-list .total-view .showfilter > a.dropdown-toggle::after {
    position: static;
    transform: none;
    margin: 0;
    font-size: 1rem;
  }
  /* ทำให้ทั้งกล่อง 173x50 กดเปิดเมนูได้ ไม่ใช่กดได้แค่ตรง chevron */
  body.category-page .filter-list .total-view .showfilter > a.dropdown-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  /* 🔴 Popper ของ bootstrap เขียน inline style ให้ dropdown-menu เป็น top:0 left:0
  แล้วเลื่อนตำแหน่งจริงด้วย transform ถ้าไม่ใส่ !important กฎ top/left ที่นี่จะแพ้ inline
  พาเนลจะไปทับกล่องแทนที่จะกางใต้กล่อง · บอร์ดกำหนด 171 x 264 ชิดขอบซ้ายกล่อง แถวละ 33 */
  body.category-page .filter-list .total-view .dropdown-menu {
    position: absolute;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 1px) !important;
    bottom: auto !important;
    width: 171px;
    min-width: 171px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  body.category-page .filter-list .total-view .dropdown-item {
    height: 33px;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }
  .category-page .item-box .prod-img {
    aspect-ratio: 358 / 239;
  }
  body.category-page .main-content > .row > #leftsidebar {
    width: 100%;
    max-width: 100%;
  }
  body.category-page #leftsidebar .fltrhamburger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    margin: 0;
    padding: 0 16px;
    background: #2a2b2d;
    font-size: 1rem;
    line-height: 1;
    font-weight: 500;
    color: #fff;
  }
  body.category-page #leftsidebar .fltrhamburger i {
    font-size: 1.125rem;
    color: #fff;
  }
  body.category-page #leftsidebar .shopby {
    padding: 40px 16px 0;
  }
  body.category-page .shopby .title-sorting,
  body.category-page .shopby .filter-action {
    display: none;
  }
  body.category-page .filter-arrow-title {
    margin-top: 0;
  }
  body.category-page .filter-over li a.link-default {
    padding: 8px 0;
  }
  body.category-page .pagination {
    padding: 40px 0 40px;
  }
  body.productdetail .productDisplay > .row {
    display: block;
    padding-top: 40px;
  }
  body.productdetail .productDisplay > .row > div {
    flex: none;
    max-width: none;
  }
  body.productdetail .zoom-gallery .selectors {
    display: flex !important;
  }
  body.productdetail .selectors a[data-zoom-id] {
    flex: 0 0 82px !important; /* flex-basis ชนะ width ต้องตั้งด้วย */
    width: 82px !important;
    height: 56px !important;
    border-radius: 0 !important;
    background: none !important;
  }
  body.productdetail .selectors a[data-zoom-id] img {
    display: block !important;
  }
  body.productdetail .selectors.vertical-thumb,
  body.productdetail .selectors.vertical-thumb .mcs-items-container {
    gap: 8px;
    margin-top: 24px;
  }
  body.productdetail .selectors.vertical-thumb a {
    flex: 0 0 82px;
    width: 82px;
    height: 56px;
  }
  body.productdetail h1.main-title.simple-prod {
    margin-top: 24px;
    font-size: 2rem;
  }
  body.productdetail .buy-option-wrap {
    margin-top: 24px;
  }
  body.productdetail .pmn-prd-below {
    padding-top: 40px;
  }
  body.productdetail .spec-table {
    margin-top: 24px;
  }
  body.productdetail .spec-table td {
    height: auto;
    min-height: 56px;
    padding: 16px;
  }
  body.productdetail .spec-table td.topic {
    width: 156px;
  }
  body.productdetail .description-text {
    padding-top: 24px;
  }
  body.productdetail .related-product {
    padding: 40px 0 40px;
  }
  body.productdetail .related-product .sub-title {
    margin-bottom: 32px;
    font-size: 1.5rem;
  }
  /* ต้องเขียน selector ให้ยาวเท่ากฎ desktop (.pmn-related-list .prod-img) ไม่งั้นแพ้ specificity
  ค่าที่ได้บังเอิญเท่ากันเพราะ 424/282 กับ 318/212 ต่างกัน 0.2% แต่อย่าพึ่งความบังเอิญ */
  body.productdetail .related-product .pmn-related-list .prod-img {
    aspect-ratio: 318 / 212;
  }
}
/* =========================================================================
   GIF ตัวโหลดของ jq-Lazy (ทุกหน้าที่มีการ์ดรูป)
   ธีมใส่ SITE_LOADER_IMAGE เป็น src ชั่วคราวจนกว่ารูปจริงจะโหลด
   (directive jqLazy ถอดคลาส lazy-image-loader ออกเองใน callback load)
   ไฟล์ที่ลูกค้าส่งมาเป็น 200x200 พอโดนกฎ width:100% ของการ์ดก็ถูกยืดเต็มกรอบ
   -> เห็นเป็นเฟืองยักษ์เบลอ ๆ ก่อนรูปจะมา
   ใช้ transform ย่อแทนการแก้ width เพราะ transform ไม่กระทบ layout
   กล่องจึงยังสูงเท่าเดิม ไม่มีการกระตุกตอนรูปจริงเข้ามาแทน
   ========================================================================= */
img.lazy-image-loader {
  object-fit: contain !important;
  transform: scale(0.28);
  opacity: 0.6;
}

/* ธีมจัดกึ่งกลางตัวโหลดด้วย position:relative + top:50% + translateY(-50%)
   (scss/global/_loader.scss:96 -> cms-slider.css:145) selector คือ
   .products .lazy-image-loader ซึ่ง specificity (0,2,0) ชนะ img.lazy-image-loader
   (0,1,1) ของกฎบน ถ้าไม่เขียน selector ให้ยาวกว่า transform ด้านบนจะไม่ติดเลย
   และต้องคง translateY(-50%) ไว้ด้วย ไม่งั้นรูปจะลอยลงไปครึ่งกล่องตาม top:50% */
.products img.lazy-image-loader,
.blog-img img.lazy-image-loader,
.MagicScroll img.lazy-image-loader {
  transform: translateY(-50%) scale(0.28);
}