/* ========== THEME COLORS ========== */
/* .flw-product-page { background: #fbf7f4; } */
.text-brown {
  color: #9b6a46;
}
:root {
  --flw-brown: #c18e69;
  --flw-brown-2: #b27a55;
  --flw-cream: #fff7f2;
  --flw-dark: #1e1714;
  --flw-shadow: 0 6px 22px rgba(193, 142, 105, 0.12),
    0 2px 10px rgba(193, 142, 105, 0.08);
}

/* Sidebar card */
.flw-product-sidebar {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--flw-shadow);
  padding: 1.25rem 1rem; /* [--- แก้ไข ---] เพิ่ม padding ให้ sidebar desktop */
}
.flw-product-input {
  background: #fff7f4;
  border: none;
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
}
.flw-product-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(193, 142, 105, 0.15);
}

/* Pills (category) */
.flw-product-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.6rem;
}
.flw-product-pill {
  border: 0;
  background: linear-gradient(180deg, #f9efe7, #f1e0d6);
  color: #7b583f;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(193, 142, 105, 0.15);
  transition: 0.2s;
  letter-spacing: 0.2px;
}
.flw-product-pill.is-active {
  background: linear-gradient(180deg, #e8c6aa, #c18e69);
  color: #fff;
}

/* Brand pill toggle */
.flw-product-pill-toggle {
  width: 100%;
  border: 1px solid rgba(193, 142, 105, 0.2);
  background: #fff;
  color: #7b583f;
  font-weight: 700;
  border-radius: 14px;
  padding: 0.55rem 0.8rem;
  transition: 0.2s;
}
.flw-product-pill-toggle.is-on {
  background: linear-gradient(180deg, #fff4ec, #ffece1);
  border-color: #e3b896;
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(193, 142, 105, 0.12);
}
.flw-product-pill-toggle:hover {
  transform: translateY(-1px);
}

/* ====== Dual price range (เพิ่ม/ต่อท้ายเท่านั้น) ====== */
.flw-product-range-track {
  position: relative;
  height: 34px; /* สูงพอให้หัวแม่โป้งไม่โดนคลิป */
  margin-top: 2px;
}

/* แทร็กสีพื้นหลัง */
.flw-product-range-track::before {
  content: "";
  position: absolute;
  inset: 14px 0 0 0;
  height: 6px;
  border-radius: 999px;
  background: #ead8cc; /* สีพื้นแทร็ก */
  pointer-events: none; /* ไม่ดักคลิก */
  z-index: 0;
}

/* แถบช่วงที่ถูกเลือก */
.flw-product-range-track .flw-product-range-fill {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c9a4, #c18e69);
  pointer-events: none; /* ไม่ดักคลิก */
  z-index: 1;
}

/* สองสไลเดอร์ซ้อนกัน */
.flw-product-range-track input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none; /* ตัวแท่งไม่รับคลิก ให้คลิกที่หัวแม่โป้ง */
  z-index: 2;
}
.flw-product-range-track input[type="range"].is-on-top {
  z-index: 3;
}

/* หัวแม่โป้ง – webkit */
.flw-product-range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--flw-brown, #b37b54);
  pointer-events: auto; /* หัวแม่โป้งรับอีเวนต์ */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* แทร็ก webkit */
.flw-product-range-track input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

/* หัวแม่โป้ง – firefox */
.flw-product-range-track input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--flw-brown, #b37b54);
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.flw-product-range-track input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
}

/* ป้องกันถูกซ้อนทับจนลากยากบนหน้าจอเล็ก */
@media (max-width: 576px) {
  .flw-product-range-track {
    height: 40px;
  }
  .flw-product-range-track::before,
  .flw-product-range-fill {
    top: 17px;
  }
}

/* Cards */
.flw-product-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--flw-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flw-product-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.flw-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.flw-product-card:hover .flw-product-thumb img {
  transform: scale(1.06);
}
.flw-product-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #ff7557;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(255, 117, 87, 0.2);
}
.flw-product-body {
  padding: 1.1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.flw-product-brand {
  color: #8a7a70;
  font-weight: 800;
  font-size: 0.8rem;
}
.flw-product-title {
  font-weight: 900;
  color: var(--flw-dark);
  line-height: 1.25;
}
.flw-product-price {
  font-weight: 900;
  color: #9b6a46; /* [--- แก้ไข 2 ---] เปลี่ยนสีราคาเป็นสีน้ำตาล */
}
.flw-product-compare {
  color: #a79c96;
  text-decoration: line-through;
  font-weight: 800;
}

.flw-product-actions {
  margin-top: auto;
  display: flex;
  gap: 0.6rem;
}
.flw-product-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, #f7ebe3, #f1ded3);
  border: 0;
  color: #7b583f;
  font-weight: 900;
  border-radius: 14px;
  padding: 0.65rem 1rem;
  box-shadow: inset 0 1px 0 #fff, 0 10px 20px rgba(193, 142, 105, 0.16);
  transition: 0.2s;
}
.flw-product-btn i {
  font-size: 1rem;
}
.flw-product-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #e8c6aa, #c18e69);
  color: #fff;
  box-shadow: 0 14px 28px rgba(193, 142, 105, 0.28);
}

/* Pagination */
.flw-product-pagebtn,
.flw-product-page-num {
  border: 0;
  background: #fff;
  color: #7b583f;
  font-weight: 900;
  border-radius: 16px;
  padding: 0.6rem 1rem;
  box-shadow: var(--flw-shadow);
}
.flw-product-page-num.is-active {
  background: linear-gradient(180deg, #e8c6aa, #c18e69);
  color: #fff;
}
.flw-product-pagebtn:disabled {
  opacity: 0.45;
}

/* Clear button */
.flw-product-clear {
  background: #fff7f4;
  color: #9b6a46;
  border: 1px dashed #e7c3a6;
}
.flw-product-clear:hover {
  background: #fff2ea;
}

/* Utilities */
.border-bottom {
  border-bottom: 1px dashed #edd9cb !important;
}
@media (max-width: 1199.98px) {
  .flw-product-page {
    padding-top: 0.5rem;
  }
}

/* *** START: CSS ใหม่สำหรับจัดกลุ่มรายละเอียด (วัสดุ/สี) *** */

.flw-product-details-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px; /* ระยะห่างระหว่างแถว "วัสดุ" กับ "สี" */
  min-height: 2.5em; /* จองพื้นที่กัน layout กระโดด */
  margin-top: 4px;
}

.flw-product-detail-item {
  display: flex;
  align-items: center;
  gap: 8px; /* ระยะห่างระหว่าง "ป้าย" กับ "เนื้อหา" */
}

.flw-product-detail-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #888; /* สีเทาเข้ม */
  flex-shrink: 0; /* ไม่ให้ป้ายหดตัว */
  min-width: 40px; /* กันป้าย "สี" กับ "วัสดุ" เยื้องกัน */
}

/* ปรับสไตล์ .flw-product-material เดิมเล็กน้อย */
.flw-product-material {
  font-size: 0.9rem;
  color: #555;
  font-weight: 500;
  min-height: 0; /* เอา min-height เดิมออก */
}

/* ปรับ .flw-color-swatches (ตัวครอบ) */
.flw-color-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* [!!!] ปรับ .flw-color-swatch (ตัวสี) ให้ใหญ่ขึ้น [!!!] */
.flw-color-swatch {
  width: 22px; /* เดิม 20px */
  height: 22px; /* เดิม 20px */
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s;
}

.flw-color-swatch:hover {
  transform: scale(1.15);
}

/* [--- เพิ่มใหม่ ---] ทำให้สีขาวในการ์ดมีขอบ */
.flw-color-swatch[style*="#fff"],
.flw-color-swatch[style*="#ffffff"] {
  border-color: #eee;
}

/* *** END: CSS ใหม่ *** */
/* ========== [NEW] Color Swatch Filter ========== */

/* 1. จัดการ Layout ของตัวเลือกสี */
#flwColors [class*="col-"],
#flwColors-m [class*="col-"] {
  padding: 4px; /* ลดช่องว่างรอบๆ */
  display: flex;
  justify-content: center; /* ให้วงกลมอยู่ตรงกลาง */
}

/* 2. สไตล์หลักของปุ่มวงกลม (เขียนทับ .flw-product-pill-toggle) */
.flw-color-swatch-btn.flw-product-pill-toggle {
  width: 40px; /* ขนาดวงกลม */
  height: 40px; /* ขนาดวงกลม */
  border-radius: 50%; /* ทำให้เป็นวงกลม */
  padding: 0;
  border: 3px solid transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  font-size: 0; /* ซ่อนข้อความ (ถ้าเผลอใส่ไว้) */
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;

  /* เขียนทับสไตล์ Pill เดิม */
  letter-spacing: normal;
  text-align: left;
  background-image: none; /* ลบ gradient ของ .is-on เดิม */
}

/* 3. สไตล์ Hover */
.flw-color-swatch-btn.flw-product-pill-toggle:hover {
  transform: scale(1.1);
}

/* 4. สไตล์ Checkmark (ซ่อนไว้ก่อน) */
.flw-swatch-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #fff; /* สี checkmark (ขาว) */
  opacity: 0; /* ซ่อนไว้ */
  transition: opacity 0.2s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ checkmark */
}

/* 5. สไตล์ตอนถูกเลือก (.is-on) */
.flw-color-swatch-btn.flw-product-pill-toggle.is-on {
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  /* เขียนทับสีพื้นหลัง .is-on ของ Pill เดิม */
  background-image: none !important;
  /* เราจะใช้ background-color จาก inline-style แทน */
}

/* 6. โชว์ Checkmark เมื่อ .is-on */
.flw-color-swatch-btn.flw-product-pill-toggle.is-on .flw-swatch-check {
  opacity: 1; /* แสดง checkmark */
}

/* 7. กรณีพิเศษ: สีขาว (จะได้มองเห็น) */
.flw-color-swatch-btn.flw-product-pill-toggle[style*="#fff"],
.flw-color-swatch-btn.flw-product-pill-toggle[style*="#ffffff"] {
  border-color: #eee; /* ถ้าเป็นสีขาว ให้มีขอบเทาจางๆ */
}
.flw-color-swatch-btn.flw-product-pill-toggle[style*="#fff"].is-on,
.flw-color-swatch-btn.flw-product-pill-toggle[style*="#ffffff"].is-on {
  border-color: #ccc; /* ขอบเทาเข้มขึ้นเมื่อเลือก */
}
/* ทำให้ checkmark ของสีขาวเป็นสีดำ */
.flw-color-swatch-btn.flw-product-pill-toggle[style*="#fff"] .flw-swatch-check,
.flw-color-swatch-btn.flw-product-pill-toggle[style*="#ffffff"]
  .flw-swatch-check {
  color: #333;
  text-shadow: none;
}

/* ===== [เพิ่มต่อท้าย] สไตล์สำหรับปุ่ม "ทุกสี" (สีรุ้ง) ===== */

/* [แก้ไข] เพิ่ม selector ให้เฉพาะเจาะจงมากขึ้น */
.flw-product-pill-toggle.flw-color-swatch-btn.flw-color-swatch-all {
  /* สีรุ้งแบบ Gradient */
  background-image: linear-gradient(
    135deg,
    #ff6b6b,
    #f9d423,
    #57e8a1,
    #4d94ff,
    #b36bff
  ) !important;

  /* ทำให้ checkmark เป็นสีขาวและมองเห็นชัด */
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* [เพิ่มโค้ดใหม่ตรงนี้] เพื่อลบขอบขาว */
  border: none !important; /* ลบเส้นขอบ */
  box-shadow: none !important; /* ลบเงาที่สร้างขอบขาว */
}

/* สไตล์ตอนที่ *ไม่ได้* เลือก (is-on) */
.flw-color-swatch-all:not(.is-on) {
  filter: grayscale(80%) opacity(70%);
}

/* ตอนที่เลือก (is-on) ให้ checkmark ชัด */
.flw-color-swatch-all.is-on .flw-swatch-check {
  opacity: 1;
}

/*
=============================================
  [!!! โค้ดใหม่ที่เพิ่มเข้ามา !!!]
  สไตล์สำหรับ Offcanvas และปุ่มเปิด
=============================================
*/

/* 1. สไตล์ปุ่ม "ตัวกรองสินค้า" (ที่แสดงในมือถือ) */
.flw-filter-toggle-btn {
  background: #fff;
  border-radius: 14px;
  padding: 0.65rem 1rem;
  font-weight: 800;
  color: var(--flw-brown-2);
  box-shadow: var(--flw-shadow);
  border: 1px solid rgba(193, 142, 105, 0.1);
  /* transition: [property] [duration] [timing-function] [delay] */
  transition: all 0.2s ease 0.2s; /* [--- แก้ไข 1 ---] เพิ่ม delay 0.2s */
}
.flw-filter-toggle-btn:hover,
.flw-filter-toggle-btn:focus {
  /* [--- แก้ไข 2 ---] ลบสีพื้นหลังและสีตัวอักษรออก */
  color: var(--flw-brown-2); /* กลับไปเป็นสีเดิม */
  box-shadow: 0 8px 25px rgba(193, 142, 105, 0.25); /* ขยายเงา */
  transform: translateY(-2px); /* ขยับขึ้น */
}

/* 2. สไตล์ Offcanvas (ให้เข้ากับธีม) */
.flw-product-offcanvas {
  background-color: var(--flw-cream, #fff7f2);
  padding: 0.5rem;
}
.flw-product-offcanvas .offcanvas-header {
  border-bottom: 2px solid rgba(193, 142, 105, 0.1);
  color: var(--flw-brown-2);
}
.flw-product-offcanvas .offcanvas-body {
  padding: 1.25rem 1rem;
}

/* 3. สไตล์เนื้อหา Sidebar (ใช้ร่วมกันทั้ง Desktop และ Offcanvas) */
.flw-product-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flw-product-sidebar-inner h5 {
  font-weight: 800;
  color: var(--flw-dark);
  font-size: 1.1rem;
}

/* ทำให้ปุ่มล้างตัวกรองอยู่ล่างสุดเสมอ (ใน Offcanvas) */
.flw-product-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
}
.flw-product-offcanvas .flw-product-sidebar-inner {
  flex-grow: 1;
}

/*
=============================================
  [!!! โค้ดใหม่ที่เพิ่มเข้ามา !!!]
  ปรับแก้ Layout (Max-width, View count)
=============================================
*/

/* --- [เพิ่มใหม่] จัดตำแหน่งยอดวิว --- */
.flw-product-meta-top {
  margin-bottom: 0.25rem; /* ลดระยะห่างก่อนไตเติ้ลเล็กน้อย */
  min-height: 1.25em; /* จองที่กันกระโดด */
}
.flw-product-views {
  font-size: 0.85rem;
  font-weight: 700;
  color: #a79c96; /* สีเทาอมน้ำตาล */
}
.flw-product-views i {
  font-size: 0.8rem;
}
/* --- จบส่วนยอดวิว --- */

@media (min-width: 1200px) {
  /* 1. ขยายความกว้าง Container หลักเป็น 1600px */
  .flw-product-page .container {
    max-width: 1600px;
  }

  /* 2. ปรับขนาดตัวอักษรใน Card */
  .flw-product-title.fs-5 {
    font-size: 1.15rem !important;
  }

  .flw-product-price {
    font-size: 1.1rem;
    /* สีถูกเปลี่ยนใน base class ด้านบนแล้ว */
  }

  /* 3. ปรับขนาดปุ่มสีใน Card (จาก 22px -> 24px) */
  .flw-color-swatch {
    width: 24px;
    height: 24px;
  }
}