/* v10 – Approved search UI + layout */
:root{
  --border:#ededed; --card:#fff; --radius:36px; --shadow:0 16px 36px rgba(0,0,0,.06);
}
.pfc10{display:grid;grid-template-columns:280px 1fr;gap:1.2rem}
@media(max-width:980px){.pfc10{grid-template-columns:1fr}}

/* Sidebar */
.pfc10-panel{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);position:sticky;top:80px;height:fit-content}
.pfc10-head{padding:1rem 1.1rem;border-bottom:1px solid var(--border)} .pfc10-head h3{margin:0;font-size:1.06rem}
.pfc10-body{padding:1rem 1.1rem}
.pfc10-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pfc10-list li label{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-weight:700;color:#333}
.pfc10-check{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--border);border-radius:4px;background:#fff;display:inline-grid;place-items:center;transition:.15s}
.pfc10-check:checked{border-color:var(--primary)}
.pfc10-check:checked::after{content:'\2713';color:var(--primary);font-weight:900;font-size:.86rem;line-height:1}
.pfc10-count{font-size:.8rem;color:#777;margin-inline-start:auto}
.pfc10-foot{padding:.9rem 1.1rem;border-top:1px solid var(--border);position:sticky;bottom:16px;background:#fff}
.pfc10-clear{width:100%;padding:.7rem 1rem;border-radius:999px;border:2px solid var(--primary);background:#fff;color:var(--primary);font-weight:900;box-shadow:0 8px 20px rgba(0,0,0,.08);cursor:pointer}
.pfc10-clear:hover{background:rgba(0,0,0,.02)}

/* Shell */
.pfc10-shell{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem}

/* Approved Search (from demo) */
.search-pill{
  position:relative; display:flex; align-items:center; gap:.75rem;
  min-height:58px; padding:.45rem .6rem .45rem .8rem;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  box-shadow:0 12px 26px rgba(0,0,0,.05);
}
.search-pill::after{
  content:''; position:absolute; inset:0; border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
  pointer-events:none;
}
.search-btn{
  order:-1; border:0; height:46px; min-width:122px; padding:0 20px;
  border-radius:999px; cursor:pointer; color:#fff; font-weight:900; letter-spacing:.2px;
  background:linear-gradient(180deg,var(--primary) 0%, var(--primaryDark) 100%);
  box-shadow:0 18px 28px rgba(182,74,106,.30), 0 2px 6px rgba(182,74,106,.22), -6px 8px 22px rgba(182,74,106,.18);
  transition:transform .05s ease, filter .15s ease;
}
.search-btn:hover{ filter:brightness(.95) } .search-btn:active{ transform:translateY(1px) }
.search-input{ flex:1; height:100%; border:0; outline:0; background:transparent; padding:.2rem 1rem; font-size:1.05rem; text-align:right; color:#4a4f55 }
.search-input::placeholder{ color:#9aa0a6; letter-spacing:.15px; font-weight:500 }
.search-pill + .pfc10-grid{ margin-top:1rem }

/* Products */
.pfc10-products{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:1100px){.pfc10-products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.pfc10-products{grid-template-columns:1fr}}
.pfc10-card{background:#fff;border:1px solid #f0f0f0;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.06);display:flex;flex-direction:column}
.pfc10-thumb{position:relative;display:block;background:#f6f6f6}
.pfc10-thumb::before{content:'';display:block;padding-top:62%}
.pfc10-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfc10-thumb.empty{background:linear-gradient(140deg,var(--gradA),var(--gradB) 50%,var(--gradC))}
.pfc10-meta{padding:1rem 1rem .8rem}
.pfc10-title{margin:.1rem 0 .4rem;font-size:1.06rem}
.pfc10-excerpt{margin:0;color:#555;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.1em}
.pfc10-empty{color:#777}


/* --- v10.1 Hotfixes --- */

/* 1) Kill theme borders/backgrounds on the search input */
.pfc10 .search-pill .search-input{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
}

/* 2) Make the pink button perfectly flush & circular even if theme resets it */
.pfc10 .search-pill .search-btn{
  border-radius:999px !important; line-height:1 !important; display:inline-flex; align-items:center; justify-content:center;
}

/* 3) Guaranteed grid layout for products */
.pfc10 .pfc10-products{
  display:grid !important; width:100% !important; margin:0 !important; padding:0 !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:1rem !important;
}
@media(max-width:1100px){ .pfc10 .pfc10-products{ grid-template-columns:repeat(2, minmax(0,1fr)) !important } }
@media(max-width:700px){  .pfc10 .pfc10-products{ grid-template-columns:1fr !important } }

/* 4) Checkbox styling via accent-color (respects browser UI but matches brand) */
.pfc10 .pfc10-check{
  accent-color: var(--primary) !important;
  width:18px; height:18px;
  border-radius:4px;
}
.pfc10 .pfc10-list li label{ gap:.5rem }
.pfc10 .pfc10-count{ color:#999 }


/* --- v10.2 Hotfixes --- */

/* (A) Clear button: full pill radius + softer border & shadow */
.pfc10 .pfc10-clear{
  border-radius:999px !important;
  padding:.8rem 1.3rem !important;
  border-width:2px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
}

/* (B) Search button: solid color, readable white text, no overlay */
.pfc10 .search-pill .search-btn{
  background:var(--primary) !important;     /* single tone */
  color:#fff !important;                    /* ensure readable */
  text-shadow:none !important;
  mix-blend-mode:normal !important;
  box-shadow:0 14px 26px rgba(0,0,0,.12) !important; /* neutral shadow */
}
/* remove inner glossy layer influence */
.pfc10 .search-pill::after{ box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important; }


/* --- v10.3 Tweaks --- */
/* Make the whole filter panel visually rounded (clip inner borders) */
.pfc10 .pfc10-panel{
  border-radius:24px !important;
  overflow:hidden !important;
}
.pfc10 .pfc10-head{ border-top-left-radius:24px; border-top-right-radius:24px; }
.pfc10 .pfc10-foot{ border-bottom-left-radius:24px; border-bottom-right-radius:24px; }


/* --- v10.4 Fixes --- */
/* A) Footer clear box must not overlap the list or title */
.pfc10 .pfc10-foot{
  position:static !important;      /* cancel sticky */
  background:#fff !important;
  padding:1rem 1.1rem !important;
  border-top:1px solid var(--border) !important;
}
.pfc10 .pfc10-clear{ display:block; margin:0 auto; } /* center it without intruding */

/* B) Search button single-color (no gradient at all) */
.pfc10 .search-pill .search-btn{
  background:var(--primary) !important;
  background-image:none !important;
  color:#fff !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
}

/* Keep panel nicely rounded */
.pfc10 .pfc10-panel{ border-radius:24px !important; overflow:hidden !important; }