:root{
  --brand:#33cccc;--brand-dk:#1faaaa;--brand-lt:#e6fafa;--brand-mid:#a8e8e8;
  --bg:#f4f5f7;--surface:#fff;--surface2:#eef0f3;
  --border:#e1e4ea;--text:#111318;--text2:#48505f;--text3:#8a93a2;
  --red:#ff4d6d;--green:#22a06b;
  --r:14px;--r-sm:9px;--font:'Heebo',sans-serif;
  --sh:0 2px 12px rgba(0,0,0,.09);--sh-lg:0 8px 32px rgba(0,0,0,.13);
}
*,*::before,*::after{box-sizing:border-box;}

/* ── TOP BAR ── */
.pm-topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  font-family:var(--font);
}
.pm-topbar-inner{
  max-width:1440px;margin:0 auto;
  padding:12px 28px 10px;
  direction:rtl;
}
.pm-search-row{
  display:flex;align-items:center;gap:12px;
  margin-bottom:10px;flex-wrap:wrap;
}
.pm-search-input{
  flex:1;max-width:480px;
  display:flex;align-items:center;
  background:var(--bg);border-radius:999px;
  padding:0 6px 0 16px;gap:8px;
  transition:box-shadow .2s;
}
.pm-search-input:focus-within{box-shadow:0 0 0 2px var(--brand);background:#fff;}
.pm-search-input input{
  flex:1;border:none;background:transparent;font-family:var(--font);
  font-size:.9rem;color:var(--text);outline:none;direction:rtl;padding:10px 0;
}
.pm-search-input input::placeholder{color:var(--text3);}
.pm-search-btn{
  width:34px;height:34px;background:var(--brand);border:none;
  border-radius:999px;color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;
}
.pm-search-btn:hover{background:var(--brand-dk);}
.pm-meta{display:flex;align-items:center;gap:12px;margin-right:auto;flex-wrap:wrap;}
.pm-count-lbl{font-size:.82rem;color:var(--text3);white-space:nowrap;}
.pm-sort-row{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text2);}
.pm-sort-row select{
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);font-family:var(--font);
  font-size:.82rem;color:var(--text);padding:6px 12px;outline:none;cursor:pointer;
}
.pm-filter-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}

/* ── FILTER PILLS ── */
.pm-fpill{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;font-size:.82rem;color:var(--text2);
  background:var(--surface);cursor:pointer;
  transition:all .15s;user-select:none;font-family:var(--font);
  white-space:nowrap;
}
.pm-fpill:hover{border-color:var(--brand);color:var(--brand-dk);}
.pm-fpill.pm-pill-on{background:var(--brand-lt);border-color:var(--brand-mid);color:var(--brand-dk);font-weight:600;}
.pm-fpill svg{width:11px;height:11px;opacity:.5;transition:transform .2s;}
.pm-fpill.pm-pill-open svg{transform:rotate(180deg);}

/* Dropdown */
.pm-fdrop{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-lg);
  min-width:220px;max-width:280px;padding:12px;z-index:500;
  max-height:340px;overflow-y:auto;
}
.pm-fdrop.pm-drop-open{display:block;}
.pm-drow{
  display:flex;align-items:center;gap:8px;padding:5px 4px;
  cursor:pointer;border-radius:6px;font-size:.83rem;color:var(--text2);
  transition:background .12s;
}
.pm-drow:hover{background:var(--bg);}
.pm-dcb{
  width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--border);background:var(--surface);
  flex-shrink:0;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.pm-drow.pm-don .pm-dcb{background:var(--brand);border-color:var(--brand);}
.pm-drow.pm-don .pm-dcb::after{
  content:'';width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);display:block;
}
.pm-drow.pm-don .pm-dlbl{color:var(--brand-dk);font-weight:600;}
.pm-dcnt{margin-right:auto;font-size:.72rem;color:var(--text3);}

/* Color swatches */
.pm-color-grid{display:flex;flex-wrap:wrap;gap:7px;padding:4px 2px;}
.pm-swatch{
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:2.5px solid transparent;transition:transform .15s;
  position:relative;flex-shrink:0;
}
.pm-swatch:hover{transform:scale(1.2);}
.pm-swatch.pm-son{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--brand-dk);}
.pm-swatch.pm-slight{border-color:var(--border);}
.pm-swatch::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);
  left:50%;transform:translateX(-50%);
  background:#111;color:#fff;font-size:.68rem;white-space:nowrap;
  padding:3px 8px;border-radius:5px;opacity:0;pointer-events:none;
  transition:opacity .15s;z-index:999;font-family:var(--font);
}
.pm-swatch:hover::after{opacity:1;}

/* Price */
.pm-price-inputs{display:flex;gap:6px;margin-bottom:8px;align-items:center;}
.pm-price-inputs input{
  flex:1;min-width:0;border:1px solid var(--border);
  border-radius:var(--r-sm);padding:6px 8px;
  font-family:var(--font);font-size:.8rem;
  text-align:center;color:var(--text);background:var(--surface);outline:none;
}
.pm-price-inputs input:focus{border-color:var(--brand);}
.pm-price-sep{color:var(--text3);font-size:.8rem;}
.pm-price-go{
  width:100%;padding:7px;background:var(--brand);color:#fff;
  border:none;border-radius:var(--r-sm);font-family:var(--font);
  font-size:.8rem;font-weight:700;cursor:pointer;
}
.pm-price-go:hover{background:var(--brand-dk);}

/* Active tags */
.pm-active-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 28px;direction:rtl;font-family:var(--font);
  background:var(--brand-lt);border-bottom:1px solid var(--brand-mid);
  max-width:100%;
}
.pm-atag{
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--brand-mid);
  color:var(--brand-dk);padding:4px 12px;border-radius:999px;
  font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s;
}
.pm-atag:hover{background:var(--brand-lt);}
.pm-clear-all{
  background:none;border:none;font-size:.78rem;color:var(--brand-dk);
  cursor:pointer;text-decoration:underline;font-family:var(--font);padding:0;opacity:.7;
}
.pm-clear-all:hover{opacity:1;}

/* Breadcrumb */
.pm-bc{
  padding:10px 28px;font-size:.78rem;color:var(--text3);
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-family:var(--font);direction:rtl;max-width:1440px;margin:0 auto;
}
.pm-bc a{color:var(--text3);text-decoration:none;}
.pm-bc a:hover{color:var(--brand-dk);}

/* ── GRID ── */
.pm-main{max-width:1440px;margin:0 auto;padding:20px 28px 40px;direction:rtl;}
.pm-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

/* ── PRODUCT CARD ── */
.pm-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:all .22s;
}
.pm-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--brand-mid);}
.pm-card-link{text-decoration:none;display:flex;flex-direction:column;flex:1;color:inherit;}
.pm-card-img{position:relative;background:var(--surface2);width:100%;overflow:hidden;}
.pm-card-img img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .4s;}
.pm-card:hover .pm-card-img img{transform:scale(1.05);}
.pm-card-img-empty{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--text3);}
.pm-badge{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:6px;font-size:.68rem;font-weight:700;}
.pm-sale{background:var(--red);color:#fff;}
.pm-new{background:var(--brand);color:#fff;}
.pm-feat{background:#f59e0b;color:#fff;}
.pm-card-body{padding:14px;flex:1;display:flex;flex-direction:column;direction:rtl;}
.pm-card-cat{font-size:.68rem;font-weight:700;color:var(--brand-dk);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.pm-card-name{font-size:.88rem;font-weight:600;color:var(--text);line-height:1.45;flex:1;margin-bottom:12px;}
.pm-card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:11px;gap:8px;}
.pm-price-wrap{display:flex;flex-direction:column;align-items:flex-start;}
.pm-old{font-size:.75rem;color:var(--text3);text-decoration:line-through;line-height:1.3;}
.pm-price{font-size:1.1rem;font-weight:900;color:var(--brand-dk);line-height:1.2;}
.pm-card-add{
  width:36px;height:36px;background:var(--brand);border:none;
  border-radius:var(--r-sm);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .2s;font-size:1.3rem;
}
.pm-card-add:hover{background:var(--brand-dk);transform:scale(1.1);}
.pm-card-add.pm-added{background:var(--green);}

/* Skeleton */
.pm-skel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.pm-skel-img{aspect-ratio:1;background:linear-gradient(90deg,var(--surface2) 25%,#e4e7ec 50%,var(--surface2) 75%);background-size:200% 100%;animation:pmsw 1.4s infinite;}
@keyframes pmsw{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pm-skel-body{padding:12px;}
.pm-skel-line{height:10px;border-radius:5px;margin-bottom:8px;background:linear-gradient(90deg,var(--surface2) 25%,#e4e7ec 50%,var(--surface2) 75%);background-size:200% 100%;animation:pmsw 1.4s infinite;}
.pm-skel-line.s{width:55%;}
.pm-no-results{grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--text3);font-family:var(--font);}
.pm-no-results strong{display:block;font-size:1rem;color:var(--text2);margin-bottom:6px;}
.pm-inf-loader{text-align:center;padding:20px;display:none;}

/* Mobile */
.pm-mob-filter-btn{
  display:none;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:6px 12px;
  font-size:.84rem;font-weight:600;color:var(--text2);
  cursor:pointer;font-family:var(--font);
}
.pm-mob-cov{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.4);z-index:700;
  cursor:pointer;
}
.pm-mob-cov.on{display:block;}

@media(max-width:1200px){.pm-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:900px){.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){
  .pm-topbar-inner{padding:10px 16px 8px;}
  .pm-active-row,.pm-bc{padding-right:16px;padding-left:16px;}
  .pm-main{padding:14px 16px;}
  .pm-filter-row .pm-fpill:nth-child(n+5){display:none;}
  .pm-mob-filter-btn{display:flex;}
}

/* ── MOBILE FILTER DRAWER ── */
.pm-mob-filter-btn{
  display:none;align-items:center;gap:6px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-sm);padding:7px 14px;
  font-size:.88rem;font-weight:700;color:var(--text2);
  cursor:pointer;font-family:var(--font);position:relative;
}
.pm-mob-filter-btn:hover{border-color:var(--brand);color:var(--brand-dk);}
.pm-mob-filter-btn.has-filters{background:var(--brand-lt);border-color:var(--brand);color:var(--brand-dk);}
.pm-mob-filter-cnt{
  background:var(--brand);color:#fff;
  width:18px;height:18px;border-radius:50%;
  font-size:.65rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

.pm-mob-drawer{
  position:fixed;top:0;right:-100%;width:min(340px,88vw);height:100vh;
  background:var(--surface);z-index:800;
  transition:right .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
  font-family:var(--font);direction:rtl;
}
.pm-mob-drawer.open{right:0;}

.pm-mob-drawer-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.pm-mob-drawer-hdr strong{font-size:1rem;color:var(--text);}
.pm-mob-drawer-close{
  background:none;border:none;font-size:1.2rem;
  color:var(--text3);cursor:pointer;padding:4px 8px;
  font-family:var(--font);
}

.pm-mob-drawer-body{
  flex:1;overflow-y:auto;padding:16px 16px 0;
}
/* In drawer: pills become full-width groups */
.pm-mob-drawer-body .pm-fpill{
  display:block !important;width:100%;border-radius:var(--r-sm) !important;
  border-bottom:1px solid var(--border) !important;
  border-left:none;border-right:none;border-top:none;
  padding:12px 4px !important;
}
.pm-mob-drawer-body .pm-fdrop{
  position:static !important;box-shadow:none !important;
  border:none !important;max-height:none !important;
  padding:8px 0 4px !important;min-width:unset !important;
  max-width:unset !important;background:var(--bg) !important;
  border-radius:var(--r-sm) !important;margin-bottom:4px;
}
.pm-mob-drawer-body .pm-fpill.pm-pill-open .pm-fdrop{display:block !important;}
.pm-mob-drawer-body .pm-color-grid{gap:10px;padding:8px 4px;}
.pm-mob-drawer-body .pm-swatch{width:30px;height:30px;}

.pm-mob-drawer-foot{
  padding:16px 20px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  background:var(--surface);
  position:sticky;
  bottom:0;
}
.pm-mob-drawer-apply{
  width:100%;padding:13px;background:var(--brand);color:#fff;
  border:none;border-radius:var(--r-sm);
  font-family:var(--font);font-size:1rem;font-weight:700;cursor:pointer;
}
.pm-mob-drawer-apply:hover{background:var(--brand-dk);}

/* Desktop only / Mobile only */
.pm-desktop-only{display:flex !important;}
@media(max-width:768px){
  .pm-desktop-only{display:none !important;}
  .pm-mob-filter-btn{display:flex !important;}
  .pm-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  .pm-topbar-inner{padding:10px 14px 8px !important;}
  .pm-main{padding:12px 14px 32px !important;}
  .pm-active-row{padding:6px 14px !important;}
  .pm-bc{padding:8px 14px !important;}
  /* Category section on mobile */
  .pm-cats-section{padding:28px 14px !important;}
  .pm-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  .pm-cat-img{padding-top:65% !important;}
  .pm-cat-body{padding:10px 12px 12px !important;}
  .pm-cat-name{font-size:.9rem !important;}
}
@media(max-width:400px){
  .pm-grid{grid-template-columns:minmax(0,1fr) !important;}
}

/* Filter cover - specific override */
#pm-filter-cov{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:799;
  cursor:pointer;
}
#pm-filter-cov.on{display:block !important;}


/* Toast Notification */
.pm-toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 999999;
    min-width: 320px;
    max-width: 90%;
    transition: bottom 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s;
    opacity: 0;
    font-family: 'Heebo', sans-serif;
    direction: rtl;
    border: 1px solid #e0e0e0;
}

.pm-toast-show {
    bottom: 24px;
    opacity: 1;
}

.pm-toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pm-toast-icon {
    background: #33cccc;
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    flex-shrink: 0;
}

.pm-toast-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-toast-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.pm-toast-text span {
    font-size: 13px;
    color: #666;
    line-height: 1.3;
}

.pm-toast-btn {
    background: #33cccc;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s;
}

.pm-toast-btn:hover {
    background: #2bb3b3;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .pm-toast {
        min-width: 280px;
        padding: 14px 16px;
        gap: 12px;
        bottom: -100px;
    }
    
    .pm-toast-show {
        bottom: 16px;
    }
    
    .pm-toast-content {
        gap: 10px;
    }
    
    .pm-toast-text strong {
        font-size: 14px;
    }
    
    .pm-toast-text span {
        font-size: 12px;
    }
    
    .pm-toast-btn {
        padding: 7px 14px;
        font-size: 12px;
    }
}