/* ==================================================
   WOOCOMMERCE SHOP
   CATEGORY / FILTER / PRODUCT
================================================== */


/* =====================
   BREADCRUMB
===================== */

.breadcrumb-bar {

  background:var(--white);

  border-bottom:1.5px solid var(--gray);

  padding:12px 48px;

}


.breadcrumb-bar nav ol {

  display:flex;

  align-items:center;

  gap:8px;

  list-style:none;

}


.breadcrumb-bar nav ol li {

  display:flex;

  align-items:center;

  gap:8px;

  font-size:13px;

  color:var(--text-mid);

}


.breadcrumb-bar nav ol li a {

  color:var(--text-mid);

  text-decoration:none;

}


.breadcrumb-bar nav ol li:last-child {

  color:var(--navy);

  font-weight:600;

}



/* =====================
   CATEGORY HERO
===================== */

.cat-hero {

  background:
  linear-gradient(
    135deg,
    var(--navy),
    #0a1628 50%,
    #1a2d5a
  );

  padding:40px 48px 36px;

}


.cat-hero-inner {

  max-width:1200px;

  margin:auto;

  display:flex;

  justify-content:space-between;

  align-items:center;

}


.cat-hero-text h1 {

  font-family:'Kanit',sans-serif;

  font-size:clamp(24px,3vw,36px);

  color:#fff;

  font-weight:800;

}


.cat-hero-text h1 .hl {

  color:var(--orange-light);

}


.cat-hero-text p {

  color:
  rgba(255,255,255,.7);

  line-height:1.7;

}


.cat-hero-stats {

  display:flex;

  gap:24px;

  margin-top:20px;

}


.stat-pill {

  background:
  rgba(255,255,255,.1);

  border:
  1px solid rgba(255,255,255,.15);

  border-radius:8px;

  padding:8px 16px;

  text-align:center;

}


.stat-pill .num {

  color:var(--orange-light);

  font-family:'Kanit',sans-serif;

  font-size:20px;

  font-weight:800;

}


.stat-pill .label {

  color:
  rgba(255,255,255,.6);

  font-size:11px;

}


.cat-hero-icon {

  font-size:96px;

}



/* =====================
   MAIN LAYOUT
===================== */

.main-layout {

  max-width:1280px;

  margin:auto;

  padding:32px 48px;

  display:grid;

  grid-template-columns:260px 1fr;

  gap:28px;

  align-items:start;

}


.sidebar {

  position:sticky;

  top:80px;

}



/* =====================
   FILTER EVERYTHING
===================== */

.filter-panel {

  background:#fff;

  border:
  1.5px solid var(--gray);

  border-radius:16px;

  overflow:hidden;

}


.custom-filter-header {

  background:var(--navy);

  padding:14px 20px;

  display:flex;

  justify-content:space-between;

}


.custom-filter-header span {

  color:#fff;

  font-family:'Kanit',sans-serif;

}


.filter-reset {

  background:none;

  border:none;

  color:
  rgba(255,255,255,.6);

  cursor:pointer;

}


.actual-filter-content .wpc-filters-widget-main-wrapper {

  background:transparent!important;

  box-shadow:none!important;

  padding:0!important;

}


.actual-filter-content .wpc-filter-section {

  padding:18px 20px!important;

  border-bottom:
  1.5px solid var(--gray)!important;

}


.actual-filter-content ul.wpc-filters-ul-list {

  list-style:none!important;

  padding:0!important;

  margin:0!important;

}


.actual-filter-content li.wpc-filter-item {

  display:flex!important;

  align-items:center!important;

  padding:7px 0!important;

}


.actual-filter-content li.wpc-filter-item a,
.actual-filter-content li.wpc-filter-item label {

  font-size:14px!important;

  color:var(--text-mid)!important;

  margin-left:10px!important;

}


.actual-filter-content .wpc-filter-count {

  margin-left:auto!important;

  background:#f0f2f7!important;

  padding:2px 8px!important;

  border-radius:20px!important;

  font-size:11px!important;

}



/* =====================
   PRICE FILTER
===================== */

.actual-filter-content .wpc-price-inputs {

  display:flex!important;

  gap:8px!important;

}


.actual-filter-content .wpc-price-input {

  flex:1!important;

  padding:8px 10px!important;

  border:
  1.5px solid var(--gray)!important;

  border-radius:8px!important;

  font-size:13px!important;

  background:#fff!important;

}


.actual-filter-content .wpc-price-input:focus {

  border-color:var(--orange)!important;

}


.actual-filter-content .wpc-filter-range-slider {

  margin-top:14px!important;

}


.actual-filter-content .ui-slider-horizontal {

  height:4px!important;

  background:var(--gray)!important;

  border:none!important;

}


.actual-filter-content .ui-slider-range {

  background:var(--orange)!important;

}


.actual-filter-content .ui-slider-handle {

  width:14px!important;

  height:14px!important;

  border-radius:50%!important;

  background:#fff!important;

  border:
  2px solid var(--orange)!important;

}



/* =====================
   PRODUCT TOOLBAR
===================== */

.product-toolbar {

  background:#fff;

  border:
  1.5px solid var(--gray);

  border-radius:12px;

  padding:14px 20px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:20px;

}


.result-count {

  font-size:14px;

  color:var(--text-mid);

}


.result-count strong {

  color:var(--navy);

  font-family:'Kanit',sans-serif;

}


.toolbar-right {

  display:flex;

  align-items:center;

  gap:12px;

}


.toolbar-right select {

  padding:7px 12px;

  border:
  1.5px solid var(--gray);

  border-radius:8px;

}



/* =====================
   PRODUCT GRID
===================== */

.product-grid {

  display:grid;

  grid-template-columns:
  repeat(auto-fill,minmax(220px,1fr));

  gap:20px;

}



article.product-item {

  background:#fff;

  border:
  1.5px solid var(--gray);

  border-radius:16px;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  transition:.25s;

}


article.product-item:hover {

  transform:translateY(-5px);

  box-shadow:
  0 12px 36px rgba(0,0,0,.1);

}



/* ==================================================
   PRODUCT IMAGE
   SQUARE 1:1 / FULL AREA
================================================== */

.product-img-wrap {

  width:100% !important;

  aspect-ratio:1 / 1 !important;

  height:auto !important;

  min-height:0 !important;

  padding:0 !important;

  margin:0 !important;

  background:
  linear-gradient(
    135deg,
    #eef0f8,
    #e0e4f0
  );

  display:flex !important;

  align-items:center;

  justify-content:center;

  position:relative;

  overflow:hidden;

}


.product-img-wrap img {

  width:100% !important;

  height:100% !important;

  max-width:none !important;

  max-height:none !important;

  min-width:0 !important;

  min-height:0 !important;

  padding:0 !important;

  margin:0 !important;

  display:block !important;

  object-fit:contain !important;

}



/* =====================
   BADGE
===================== */

.badge-strip {

  position:absolute;

  top:10px;

  left:10px;

  display:flex;

  flex-direction:column;

  gap:4px;

}


.badge {

  font-size:10px;

  font-weight:700;

  padding:3px 8px;

  border-radius:4px;

}


.badge-hot {

  background:var(--orange);

  color:#fff;

}


.badge-sale {

  background:var(--red);

  color:#fff;

}


.badge-mok {

  background:var(--green);

  color:#fff;

}



.wishlist-btn {

  position:absolute;

  top:10px;

  right:10px;

  width:30px;

  height:30px;

  border-radius:50%;

  border:none;

  background:#fff;

}



/* =====================
   PRODUCT BODY
===================== */

.product-body {

  padding:16px 18px 20px;

  flex:1;

  display:flex;

  flex-direction:column;

}


.product-item h2 {

  margin:0 0 6px;

  font-family:'Kanit',sans-serif;

  font-size:14px;

  color:var(--navy);

  line-height:1.4;

  display:-webkit-box;

  -webkit-box-orient:vertical;

  -webkit-line-clamp:2;

  overflow:hidden;

}


.product-item h2 a {

  color:inherit;

  text-decoration:none;

}


.product-sku {

  font-size:11px;

  color:var(--text-light);

  margin:8px 0;

}


.product-spec {

  font-size:12px;

  color:var(--text-mid);

  line-height:1.6;

}



.cert-row {

  display:flex;

  gap:4px;

  flex-wrap:wrap;

  margin-top:10px;

}


.mini-cert {

  font-size:10px;

  background:
  rgba(34,197,94,.1);

  color:#16a34a;

  padding:2px 7px;

  border-radius:4px;

}



/* =====================
   RATING
===================== */

.stars {

  margin:10px 0;

}


.star {

  color:var(--gold);

}


.review-count {

  font-size:11px;

  color:var(--text-light);

}



/* =====================
   PRICE
===================== */

.price-row {

  margin-top:auto;

  margin-bottom:12px;

}


.price-row .price {

  font-family:'Kanit',sans-serif;

  font-size:20px;

  font-weight:800;

  color:var(--orange);

}


.price-row .price del {

  font-size:13px;

  color:var(--text-light);

}


.price-row .price ins {

  text-decoration:none;

}


.price-unit {

  font-size:11px;

  color:var(--text-light);

}



/* =====================
   BUTTON
===================== */

.btn-add {

  width:100%;

  box-sizing:border-box;

  background:
  linear-gradient(
    135deg,
    var(--orange),
    var(--orange-light)
  );

  color:#fff;

  padding:10px;

  border-radius:8px;

  text-align:center;

  text-decoration:none;

  font-family:'Kanit',sans-serif;

  font-weight:700;

  display:block;

  transition:.2s;

}


.btn-add:hover {

  color:#fff;

  transform:translateY(-1px);

  filter:brightness(.95);

}



/* ==================================================
   RESPONSIVE
================================================== */


/* =====================
   TABLET
===================== */

@media (max-width:900px) {

  .main-layout {

    grid-template-columns:1fr;

    padding:24px 20px;

  }


  .sidebar {

    position:static;

  }


  .cat-hero {

    padding:32px 20px;

  }


  .cat-hero-inner {

    gap:20px;

  }


  .breadcrumb-bar {

    padding:10px 20px;

  }

}



/* =====================
   MOBILE
===================== */

@media (max-width:600px) {

  .cat-hero-inner {

    flex-direction:column;

    align-items:flex-start;

  }


  .cat-hero-icon {

    display:none;

  }


  .cat-hero-stats {

    gap:10px;

  }


  .product-toolbar {

    flex-direction:column;

    align-items:stretch;

    gap:12px;

  }


  .toolbar-right {

    justify-content:flex-end;

  }


  .product-grid {

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:12px;

  }


  .product-body {

    padding:12px;

  }


  .product-item h2 {

    font-size:13px;

  }


  .product-sku {

    font-size:10px;

  }


  .product-spec {

    font-size:11px;

  }


  .price-row .price {

    font-size:17px;

  }


  .btn-add {

    padding:9px 6px;

    font-size:13px;

  }

}