/* ═══════════════════════════════════════════
   PRODUCTS.CSS — Shatabdi Pavers (products.html ONLY)
   Styles for: the filter tab buttons and the simplified
   product card grid (image, title, description, apps).

   ✏️ Product TEXT/data is in js/shared.js, not here.
      This file only controls how the cards LOOK.
   🔒 Full product spec styling (strength/thickness/colours/
      photo grid) lives in css/product-detail.css instead —
      that page shows the FULL info when a card is clicked.
   ═══════════════════════════════════════════ */

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.ftab{padding:8px 20px;border-radius:24px;font-size:12.5px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--taupe);transition:all var(--t);font-family:'Outfit',sans-serif}
.ftab:hover,.ftab.on{background:var(--terra);color:white;border-color:var(--terra)}

.pfull-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}

/* the whole card is a clickable <a> link to product-detail.html */
.pfc{display:block;border-radius:12px;border:1px solid var(--border);background:var(--white);overflow:hidden;transition:all var(--t);text-decoration:none;color:inherit}
.pfc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(184,92,44,.35)}

.pfc-img{height:220px;position:relative;overflow:hidden;background:var(--cream)}
.pfc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.pfc:hover .pfc-img img{transform:scale(1.06)}
/* small colour dots overlaid bottom-left of the photo, just a quick preview — full colour list is on the detail page */
.pfc-cdots{position:absolute;bottom:12px;left:12px;display:flex;gap:5px;z-index:2}

.pfc-body{padding:24px}
.pfc-cat{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--terra);margin-bottom:6px}
.pfc-name{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;margin-bottom:9px}
.pfc-desc{font-size:13.5px;color:var(--taupe);line-height:1.7;margin-bottom:16px}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.chip{padding:3px 11px;border-radius:20px;font-size:11.5px;background:rgba(184,92,44,.09);color:var(--terra);font-weight:500}
.chip-g{background:rgba(156,148,140,.11);color:var(--taupe)}

/* small colour-dot with a name tooltip on hover — used on both
   the simplified card here AND the full detail page */
.cdot{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.7);position:relative;cursor:default;transition:transform var(--t)}
.cdot:hover{transform:scale(1.2)}
.cdot-tip{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:var(--dark);color:white;font-size:10px;padding:2px 7px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;font-family:'Outfit',sans-serif;z-index:10}
.cdot:hover .cdot-tip{opacity:1}

/* "View Full Details →" affordance at the bottom of each card */
.view-more{display:flex;align-items:center;gap:6px;padding-top:16px;border-top:1px solid var(--border);color:var(--terra);font-size:13px;font-weight:600;transition:gap var(--t)}
.pfc:hover .view-more{gap:12px}