/* ============================================================
   ASIF TRADERS — CATALOGUE v2
   Cleaner listing: soft cream product panel with the circle behind
   the product (no crop), single clear CTA, sticky filter toolbar,
   and a redrawn category grid on /categories/.
   Scoped to the existing classes (.prod-card / .cat-card / .fx-bar)
   so nothing else on the site is touched. No rates anywhere.
   ============================================================ */

/* ---------- page head ---------- */
.page-hero-sm .container h1{font-family:"Playfair Display",Georgia,serif;font-weight:700;letter-spacing:-.01em}
.page-hero-sm .hero-meta .chip{background:#FDF1E6;color:#8A3B0C;border:none;font-family:var(--font-d);font-weight:700;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.page-hero-sm .hero-meta .chip:hover{background:#FCE3CE}

/* ---------- sticky filter toolbar ---------- */
.fx-bar{position:sticky;top:calc(var(--header-h,72px) + 6px);z-index:35;background:rgba(255,253,249,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(43,43,43,.09);border-radius:14px;
  padding:9px 12px;box-shadow:0 14px 26px -26px rgba(43,43,43,.55)}
.result-count{margin:14px 2px 16px;font-size:13px;color:#8A8A8A}
.result-count b{color:#1A1A1A}

/* ---------- product grid ---------- */
.grid-prods{grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- product card ---------- */
.prod-card{border-radius:18px;border:1px solid rgba(43,43,43,.08);box-shadow:0 12px 26px -22px rgba(43,43,43,.5)}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(43,43,43,.6);border-color:rgba(252,111,32,.4)}
.prod-card .pc-img,.pc-img{background:linear-gradient(180deg,#FFFDF9,#FDF5EA);aspect-ratio:1/1;padding:0}
.pc-img:before{content:"";position:absolute;height:74%;width:auto;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,#F6E3C8 0 60%,rgba(246,227,200,.6) 84%,rgba(246,227,200,0) 100%)}
.prod-card .pc-img img{position:relative;z-index:1;width:auto;height:auto;max-width:78%;max-height:78%;object-fit:contain;
  transform:scale(1);filter:drop-shadow(0 14px 14px rgba(120,70,20,.14));transition:transform .35s ease}
.prod-card:hover .pc-img img{transform:translateY(-4px) scale(1.03)}
.pc-badges{z-index:2}
.pc-quick{display:none !important}

.pc-body{padding:16px 16px 16px}
.pc-brand{font-family:var(--font-d);font-size:9.5px;letter-spacing:.16em;color:#B4450F;margin-bottom:6px}
.pc-name{font-family:var(--font-b);font-weight:700;font-size:15px;line-height:1.34;min-height:42px}
.pc-avail{margin:8px 0 0}
.pc-avail .avail-badge{font-size:10.5px;padding:4px 9px;border-radius:999px}
.pc-meta{margin-top:9px;gap:7px}
.pc-meta span{background:#F6F4F0;color:#5A5A5A;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:600}
.pc-meta span:has(+ span){background:#F6F4F0}
.pc-meta span:nth-child(2){display:none}   /* hide the "·" separators */
.pc-foot{margin-top:14px;padding-top:13px;border-top:1px dashed rgba(43,43,43,.14);gap:10px}
.pc-foot .btn{flex:1;height:44px;border-radius:12px;font-size:13px;font-family:var(--font-d);font-weight:700;
  justify-content:center;display:inline-flex;align-items:center;gap:8px}
.pc-foot .btn-forest,.pc-foot .btn-gold{background:#FC6F20;color:#fff;border:none}
.pc-foot .btn-forest:hover,.pc-foot .btn-gold:hover{background:#E05F0E}
.pc-foot .btn-ghost{display:none !important}

/* ---------- /categories/ grid ---------- */
.grid-cats{grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{border-radius:18px;border:1px solid rgba(43,43,43,.08);box-shadow:0 14px 28px -24px rgba(43,43,43,.55)}
.cat-card:hover{transform:translateY(-4px);border-color:rgba(252,111,32,.4)}
.cat-card .cc-img,.cc-img{height:196px;padding:0;background:linear-gradient(180deg,#FFFDF9,#FDF5EA);position:relative}
.cc-img:before{content:"";position:absolute;height:74%;width:auto;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,#F6E3C8 0 60%,rgba(246,227,200,.6) 84%,rgba(246,227,200,0) 100%)}
.cc-img img{position:relative;z-index:1;max-width:72%;max-height:74%;transform:scale(1);
  filter:drop-shadow(0 14px 14px rgba(120,70,20,.14));transition:transform .35s ease}
.cat-card:hover .cc-img img{transform:translateY(-4px) scale(1.03)}
.cc-count{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-d);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;background:#FEE8D0;color:#8A3B0C;border:none;border-radius:999px;padding:5px 11px}
.cc-body{padding:18px 20px 20px}
.cc-body h3{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:20px;color:#1A1A1A}
.cc-body p{font-size:13px;color:#8A8A8A;margin-top:6px;line-height:1.55}
.cc-chips{margin:14px 0 16px;gap:6px}
.cc-chips span{background:#F6F4F0;color:#5A5A5A;font-size:10.5px;font-weight:600;padding:4px 9px}
.cat-card .cc-link{background:#FC6F20;color:#fff;font-size:13px;font-weight:700;padding:11px 16px;border-radius:12px;
  width:100%;justify-content:center;transition:.18s;border:1px solid transparent}
.cat-card .cc-link svg{color:#fff}
.cat-card .cc-link:hover,.cat-card:hover .cc-link{background:#E05F0E;color:#fff}
.cat-card:hover .cc-link svg{transform:none}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .grid-prods{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .grid-cats{grid-template-columns:repeat(2,1fr)}
  .cat-card .cc-img,.cc-img{height:170px}
}
@media (max-width:860px){
  .grid-prods{grid-template-columns:repeat(2,1fr);gap:14px}
  .pc-body{padding:12px}
  .pc-name{font-size:13.5px;min-height:36px}
  .pc-foot .btn{height:40px;font-size:12px}
  .fx-bar{top:calc(var(--header-h,64px) + 4px);border-radius:12px;padding:8px 10px}
}
@media (max-width:560px){
  .prod-card .pc-img img{max-width:80%;max-height:80%}
  .pc-body{padding:11px 11px 12px}
  .pc-brand{font-size:9px;margin-bottom:4px}
  .pc-name{font-size:12.5px;min-height:0;-webkit-line-clamp:2}
  .pc-meta span{font-size:10px;padding:3px 7px}
  .pc-avail .avail-badge{font-size:10px}
  .pc-foot{margin-top:11px;padding-top:10px}
  .pc-foot .btn{height:38px;font-size:11.5px;border-radius:10px}
  .grid-cats{grid-template-columns:1fr}
  .cat-card .cc-img,.cc-img{height:150px}
  .cc-body{padding:15px 16px 17px}
  .cc-body h3{font-size:18px}
}