/* ===== Products Listing Page — Fresh Design ===== */
:root{
  --pl-green:#16a34a;--pl-green-dark:#15803d;--pl-green-darker:#14532d;
  --pl-ink:#0f172a;--pl-text:#334155;--pl-muted:#64748b;--pl-line:#e2e8f0;
  --pl-bg:#f8fafc;--pl-white:#ffffff;--pl-radius:12px;--pl-radius-sm:8px;
  --pl-shadow:0 4px 16px rgba(0,0,0,.08);--pl-shadow-sm:0 2px 8px rgba(0,0,0,.06);
}

/* ===== HERO SECTION ===== */
.pl-hero{background:linear-gradient(135deg,#ffffff 0%,#f0fdf4 50%,#f8fafc 100%);padding:0;overflow:hidden;}
.pl-hero-inner{display:flex;align-items:center;gap:32px;}
.pl-hero-text{flex:1;min-width:0;}
.pl-hero-text h1{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800;color:var(--pl-ink);margin-bottom:6px;line-height:1.15;}
.pl-hero-text h1 span{color:var(--pl-green);}
.pl-hero-text .pl-hero-sub{font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--pl-green-dark);font-weight:600;margin-bottom:12px;}
.pl-hero-text .pl-hero-desc{font-size:.92rem;color:var(--pl-muted);line-height:1.6;margin-bottom:20px;max-width:520px;}
.pl-hero-stats{display:flex;gap:20px;flex-wrap:wrap;}
.pl-hero-stat{display:flex;align-items:center;gap:8px;}
.pl-hero-stat-icon{width:36px;height:36px;border-radius:50%;background:#dcfce7;color:var(--pl-green);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.pl-hero-stat-text strong{display:block;font-size:1rem;color:var(--pl-ink);line-height:1.2;}
.pl-hero-stat-text small{font-size:.75rem;color:var(--pl-muted);}
.pl-hero-image{flex:0 0 45%;max-width:45%;position:relative;}
.pl-hero-image img{width:100%;height:auto;border-radius:var(--pl-radius);box-shadow:var(--pl-shadow);object-fit:cover;aspect-ratio:4/3;}
@media(max-width:767.98px){
  .pl-hero-inner{flex-direction:column;text-align:center;}
  .pl-hero-stats{justify-content:center;}
  .pl-hero-image{flex:none;max-width:100%;width:100%;}
  .pl-hero-text .pl-hero-desc{max-width:100%;}
}
@media(min-width:768px) and (max-width:991.98px){
  .pl-hero-image{flex:0 0 40%;max-width:40%;}
}

/* ===== SHOP BY CATEGORY ===== */
.pl-cat-section{padding:24px 0 20px;border-bottom:1px solid var(--pl-line);overflow:visible;}
.pl-cat-section .container{overflow:visible;}
.pl-cat-heading{text-align:center;margin-bottom:20px;}
.pl-cat-heading h2{display:inline-flex;align-items:center;gap:16px;font-size:1.2rem;font-weight:700;color:var(--pl-ink);margin:0;white-space:nowrap;}
.pl-cat-heading h2::before,.pl-cat-heading h2::after{content:"";width:60px;height:1px;background:var(--pl-line);}
.pl-cat-scroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;justify-content:center;flex-wrap:nowrap;}
.pl-cat-scroll::-webkit-scrollbar{display:none;}
.pl-cat-card{flex:0 0 auto;width:115px;text-align:center;text-decoration:none;color:var(--pl-text);transition:all .2s;padding:0;border-radius:12px;border:1.5px solid #e2e8f0;background:var(--pl-white);}
.pl-cat-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:#d1fae5;}
.pl-cat-card.active{border-color:var(--pl-green);box-shadow:0 2px 10px rgba(22,163,74,.12);}
.pl-cat-card-img{width:100%;height:90px;margin:0;padding:8px 8px 0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pl-cat-card-img img{width:100%;height:100%;object-fit:contain;}
.pl-cat-card-img i{font-size:1.6rem;color:var(--pl-muted);}
.pl-cat-card-name{font-size:.75rem;font-weight:700;line-height:1.25;color:var(--pl-ink);padding:0 4px 10px;}
.pl-cat-card.view-all{border:1.5px solid #e2e8f0;background:var(--pl-white);}
.pl-cat-card.view-all .pl-cat-card-img{padding:8px 8px 0;justify-content:center;}
.pl-cat-card.view-all .pl-cat-card-img i{font-size:2rem;color:var(--pl-green);line-height:1;}
.pl-cat-card.view-all .pl-cat-card-name{color:var(--pl-green-dark);font-weight:700;white-space:normal;line-height:1.3;}
@media(max-width:991.98px){
  .pl-cat-scroll{justify-content:flex-start;}
}
@media(max-width:767.98px){
  .pl-cat-card{width:85px;}
  .pl-cat-card-img{height:70px;}
  .pl-cat-card-name{font-size:.68rem;}
}

/* ===== MAIN LAYOUT ===== */
.pl-main{padding:24px 0 32px;}
.pl-main-inner{display:flex;gap:24px;align-items:flex-start;}

/* ===== SIDEBAR FILTERS ===== */
.pl-sidebar{flex:0 0 260px;max-width:260px;position:sticky;top:80px;}
.pl-filter-box{background:var(--pl-white);border:1px solid var(--pl-line);border-radius:var(--pl-radius);padding:16px;margin-bottom:16px;box-shadow:var(--pl-shadow-sm);}
.pl-filter-box h5{font-size:.95rem;font-weight:700;color:var(--pl-ink);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.pl-filter-box h5 i{color:var(--pl-green);font-size:1rem;}
.pl-filter-group{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;}
.pl-filter-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.pl-filter-group h6{font-size:.82rem;font-weight:700;color:var(--pl-text);margin-bottom:8px;}
.pl-filter-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;}
.pl-filter-item input[type="checkbox"],.pl-filter-item input[type="radio"]{width:15px;height:15px;accent-color:var(--pl-green);cursor:pointer;flex-shrink:0;}
.pl-filter-item label{font-size:.82rem;color:var(--pl-text);cursor:pointer;flex:1;line-height:1.3;}
.pl-filter-item .pl-count{font-size:.72rem;color:var(--pl-muted);background:var(--pl-bg);padding:1px 6px;border-radius:999px;flex-shrink:0;}
.pl-filter-search{width:100%;height:36px;border:1px solid var(--pl-line);border-radius:var(--pl-radius-sm);padding:0 10px;font-size:.85rem;color:var(--pl-ink);background:var(--pl-bg);}
.pl-filter-search:focus{outline:none;border-color:var(--pl-green);}
.pl-filter-search::placeholder{color:var(--pl-muted);}
.pl-clear-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;border:1px solid var(--pl-green);border-radius:var(--pl-radius-sm);background:var(--pl-white);color:var(--pl-green);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .18s;margin-top:12px;}
.pl-clear-btn:hover{background:var(--pl-green);color:#fff;}

/* Price Range Slider */
.pl-price-range{padding:0 4px;}
.pl-price-slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(to right,var(--pl-green) 0%,var(--pl-green) var(--val,50%),var(--pl-line) var(--val,50%),var(--pl-line) 100%);outline:none;margin:10px 0 6px;}
.pl-price-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--pl-green);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;}
.pl-price-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--pl-green);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;}
.pl-price-labels{display:flex;justify-content:space-between;font-size:.78rem;color:var(--pl-muted);}
.pl-price-labels strong{color:var(--pl-ink);}

@media(max-width:991.98px){
  .pl-sidebar{flex:none;max-width:100%;width:100%;position:static;display:none;}
  .pl-sidebar.show{display:block;}
  .pl-main-inner{flex-direction:column;}
}

/* ===== RESULTS HEADER ===== */
.pl-results-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.pl-results-count{font-size:.9rem;color:var(--pl-text);}
.pl-results-count strong{color:var(--pl-ink);font-weight:700;}
.pl-results-right{display:flex;align-items:center;gap:10px;}
.pl-sort-select{height:36px;border:1px solid var(--pl-line);border-radius:var(--pl-radius-sm);padding:0 30px 0 10px;font-size:.82rem;color:var(--pl-text);background:var(--pl-white);appearance:auto;cursor:pointer;}
.pl-sort-select:focus{outline:none;border-color:var(--pl-green);}
.pl-view-toggle{display:flex;border:1px solid var(--pl-line);border-radius:var(--pl-radius-sm);overflow:hidden;}
.pl-view-toggle a{width:36px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--pl-muted);text-decoration:none;transition:all .15s;font-size:1rem;}
.pl-view-toggle a.active{background:var(--pl-green);color:#fff;}
.pl-view-toggle a:not(.active):hover{background:var(--pl-bg);}

/* Mobile filter toggle */
.pl-mobile-filter-btn{display:none;height:38px;border:1px solid var(--pl-line);border-radius:var(--pl-radius-sm);background:var(--pl-white);color:var(--pl-text);font-size:.85rem;font-weight:600;padding:0 14px;gap:6px;align-items:center;cursor:pointer;}
.pl-mobile-filter-btn i{color:var(--pl-green);}
@media(max-width:991.98px){
  .pl-mobile-filter-btn{display:inline-flex;}
}

/* ===== PRODUCT GRID ===== */
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pl-grid.list-view{grid-template-columns:1fr;gap:12px;}
.pl-grid.list-view .pl-card{flex-direction:row;border-radius:var(--pl-radius);}
.pl-grid.list-view .pl-card-img{flex:0 0 200px;height:auto;aspect-ratio:1/1;}
.pl-grid.list-view .pl-card-body{flex:1;display:flex;flex-direction:column;justify-content:center;}
.pl-grid.list-view .pl-card-badge{top:10px;left:10px;}
@media(max-width:991.98px){.pl-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}
@media(max-width:575.98px){
  .pl-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .pl-grid.list-view{grid-template-columns:1fr;}
  .pl-grid.list-view .pl-card{flex-direction:column;}
  .pl-grid.list-view .pl-card-img{flex:none;height:auto;aspect-ratio:16/9;}
}

/* ===== PRODUCT CARD ===== */
.pl-card{background:var(--pl-white);border:1px solid var(--pl-line);border-radius:var(--pl-radius);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.pl-card:hover{transform:translateY(-3px);box-shadow:var(--pl-shadow);}
.pl-card-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700;color:#fff;z-index:2;text-transform:uppercase;letter-spacing:.3px;}
.pl-card-badge.green{background:var(--pl-green);}
.pl-card-badge.dark{background:var(--pl-ink);}
.pl-card-badge.orange{background:#f97316;}
.pl-card-img{position:relative;background:var(--pl-bg);aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.pl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.pl-card:hover .pl-card-img img{transform:scale(1.03);}
.pl-card-body{padding:12px;flex:1;display:flex;flex-direction:column;}
.pl-card-title{font-size:.88rem;font-weight:700;color:var(--pl-ink);margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pl-card-title a{color:inherit;text-decoration:none;}
.pl-card-title a:hover{color:var(--pl-green-dark);}
.pl-card-specs{font-size:.75rem;color:var(--pl-muted);margin-bottom:2px;line-height:1.4;}
.pl-card-features{font-size:.75rem;color:var(--pl-muted);margin-bottom:8px;line-height:1.4;}
.pl-card-price{margin-top:auto;padding-top:6px;border-top:1px solid #f1f5f9;}
.pl-card-price .pl-price{font-size:1rem;font-weight:800;color:var(--pl-ink);}
.pl-card-price .pl-gst{font-size:.7rem;color:var(--pl-muted);display:block;margin-top:1px;}
.pl-card-actions{display:flex;gap:8px;margin-top:10px;}
.pl-btn-outline{flex:1;height:34px;display:flex;align-items:center;justify-content:center;border:1.5px solid #1a1a2e;border-radius:var(--pl-radius-sm);background:transparent;color:#1a1a2e;font-size:.78rem;font-weight:600;text-decoration:none;transition:all .18s;}
.pl-btn-outline:hover{background:#1a1a2e;color:#fff;}
.pl-btn-filled{flex:1;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--pl-radius-sm);background:#1a1a2e;color:#fff;font-size:.78rem;font-weight:600;text-decoration:none;transition:all .18s;cursor:pointer;}
.pl-btn-filled:hover{background:#15803d;}

@media(max-width:575.98px){
  .pl-card-body{padding:8px;}
  .pl-card-title{font-size:.8rem;margin-bottom:2px;}
  .pl-card-specs,.pl-card-features{font-size:.7rem;}
  .pl-card-price .pl-price{font-size:.88rem;}
  .pl-card-actions{gap:4px;}
  .pl-btn-outline,.pl-btn-filled{height:30px;font-size:.72rem;}
}

/* ===== PAGINATION ===== */
.pl-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;}
.pl-page-link{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--pl-line);border-radius:var(--pl-radius-sm);background:var(--pl-white);color:var(--pl-text);font-size:.85rem;font-weight:600;text-decoration:none;transition:all .15s;}
.pl-page-link:hover{border-color:var(--pl-green);color:var(--pl-green);}
.pl-page-link.active{background:var(--pl-green);border-color:var(--pl-green);color:#fff;}
.pl-page-link.disabled{opacity:.4;pointer-events:none;}
.pl-page-link i{font-size:.7rem;}

/* ===== NO PRODUCTS ===== */
.pl-empty{text-align:center;padding:48px 16px;}
.pl-empty i{font-size:3rem;color:var(--pl-muted);margin-bottom:12px;display:block;}
.pl-empty h3{font-size:1.1rem;color:var(--pl-ink);margin-bottom:8px;}
.pl-empty p{font-size:.9rem;color:var(--pl-muted);margin-bottom:16px;}
.pl-empty .pl-btn-filled{display:inline-flex;height:auto;padding:10px 20px;}

/* ===== BOTTOM CTA ===== */
.pl-cta{background:#f0f5ee;padding:0;color:#1a1a2e;border-radius:14px;margin:10px auto;max-width:1200px;border:1px solid #dce6d8;}
.pl-cta .container{padding:26px 30px;}
.pl-cta-row{display:flex;align-items:center;gap:28px;}
.pl-cta-left{flex:0 0 auto;max-width:340px;}
.pl-cta h2{font-size:clamp(1rem,1.8vw,1.25rem);font-weight:800;margin-bottom:5px;line-height:1.3;color:#1a1a2e;}
.pl-cta p{font-size:.82rem;color:#555;margin:0;max-width:320px;line-height:1.5;}
.pl-cta-features{flex:1;display:flex;justify-content:center;gap:18px;}
.pl-cta-feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;min-width:80px;}
.pl-cta-feat-icon{width:40px;height:40px;border-radius:50%;background:#1a1a2e;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;}
.pl-cta-feat span{font-size:.72rem;color:#444;line-height:1.3;}
.pl-cta-btns{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;}
.pl-cta-btn-green{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 22px;border-radius:var(--pl-radius-sm);background:var(--pl-green);color:#fff;font-weight:700;font-size:.85rem;text-decoration:none;border:2px solid var(--pl-green);transition:all .18s;white-space:nowrap;}
.pl-cta-btn-green:hover{background:#fff;color:var(--pl-green-dark);border-color:var(--pl-green);}
.pl-cta-or{font-size:.78rem;color:#888;}
.pl-cta-btn-wa{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 22px;border-radius:var(--pl-radius-sm);background:#fff;color:#25D366;font-weight:700;font-size:.85rem;text-decoration:none;border:1px solid #dce6d8;transition:all .18s;white-space:nowrap;}
.pl-cta-btn-wa:hover{background:#f0fdf4;border-color:#25D366;}
@media(max-width:991.98px){
  .pl-cta{margin:10px 16px;border-radius:12px;}
  .pl-cta .container{padding:22px 20px;}
  .pl-cta-row{flex-direction:column;text-align:center;align-items:center;gap:16px;}
  .pl-cta-left{max-width:100%;text-align:center;}
  .pl-cta p{max-width:100%;margin:0 auto;}
  .pl-cta-btns{flex-direction:row;gap:12px;}
}
@media(max-width:575.98px){
  .pl-cta{margin:10px 12px;border-radius:10px;}
  .pl-cta-features{flex-wrap:wrap;justify-content:center;gap:12px;}
  .pl-cta-btns{flex-direction:row;}
}

/* ===== POPULAR CATEGORIES ===== */
.pl-pop-cats{padding:24px 0 28px;text-align:center;border-top:1px solid var(--pl-line);}
.pl-pop-cats h3{font-size:1.1rem;font-weight:700;color:var(--pl-ink);margin-bottom:14px;}
.pl-pop-cats-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.pl-pop-cat-link{display:inline-flex;align-items:center;gap:4px;padding:7px 16px;border:1px solid var(--pl-line);border-radius:999px;background:var(--pl-white);color:var(--pl-text);font-size:.82rem;font-weight:600;text-decoration:none;transition:all .18s;}
.pl-pop-cat-link:hover{border-color:var(--pl-green);color:var(--pl-green);background:#f0fdf4;}
.pl-pop-cat-link i{font-size:.65rem;color:var(--pl-muted);}

/* ===== MOBILE FILTER OFFCANVAS ===== */
.pl-filter-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1060;}
.pl-filter-overlay.show{display:block;}
.pl-filter-panel{position:fixed;top:0;left:0;width:300px;max-width:85vw;height:100vh;background:var(--pl-white);z-index:1061;overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease;padding:16px;}
.pl-filter-panel.show{transform:translateX(0);}
.pl-filter-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--pl-line);}
.pl-filter-panel-header h5{font-size:1rem;font-weight:700;margin:0;}
.pl-filter-panel-close{width:32px;height:32px;border:none;background:var(--pl-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;color:var(--pl-text);}
@media(min-width:992px){
  .pl-filter-overlay,.pl-filter-panel{display:none!important;}
}