/* ═══════════════════════════════════════════════════════════
   REAL ALMIRAH — PRODUCTS & PRODUCT-DETAIL PREMIUM UPGRADE
   Adds: category filter system, swatch-enabled product cards,
   and a few product-detail refinements. Loaded AFTER style.css
   and product-showcase.css — only adds/extends, never overrides
   the header/navbar/footer/theme.
═══════════════════════════════════════════════════════════ */

/* ── CATEGORY FILTER BAR ── */
.rp-cat-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:32px 0 8px;


}
.rp-cat-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px 10px 16px;
  border:2px solid #ece6dc;
  background:#fff;
  border-radius:30px;
  font-size:19px;font-weight:600;
  color:#555;
  cursor:pointer;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.rp-cat-btn i{font-size:13px;color:var(--primary);transition:color .25s}
.rp-cat-btn .rp-cat-count{
  background:#f2ece3;color:#9a8f7f;
  font-size:11px;font-weight:700;
  padding:1px 8px;border-radius:12px;
  margin-left:2px;
}
.rp-cat-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-2px);
}
.rp-cat-btn.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 8px 20px rgba(200,32,43,.28);
}
.rp-cat-btn.active i{color:#fff}
.rp-cat-btn.active .rp-cat-count{background:rgba(255,255,255,.25);color:#fff}

.rp-result-note{font-size:13px;color:#888;margin:4px 0 28px}
.rp-result-note b{color:var(--primary)}

/* ── PRODUCT GRID ── */
.rp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
  gap:26px;
}

/* ── PRODUCT CARD ── */
.rp-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), opacity .3s ease;
  opacity:1;
  transform:scale(1);
}
.rp-card.rp-hide{
  display:none;
}
.rp-card.rp-enter{
  animation:rpFadeIn .45s var(--ease) both;
}
@keyframes rpFadeIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.rp-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 46px rgba(0,0,0,.15);
}

.rp-card-img{
  position:relative;
  aspect-ratio:1/1;
  background:linear-gradient(160deg,#f9f5f0,#ede8e0);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.rp-card-img img{
  width:82%;height:82%;object-fit:contain;
  transition:transform .55s var(--ease), opacity .25s ease;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));
}
.rp-card:hover .rp-card-img img{transform:scale(1.1)}

.rp-card-code{
  position:absolute;top:12px;left:12px;
  background:rgba(26,26,26,.82);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;
  padding:4px 10px;border-radius:20px;
  z-index:3;
}
.rp-card-badge{
  position:absolute;top:12px;right:12px;
  background:var(--primary);color:#fff;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:4px 10px;border-radius:20px;
  z-index:3;
}

/* Zoom / view details overlay on hover */
.rp-card-overlay{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 0 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.32) 0%,transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:2;
}
.rp-card:hover .rp-card-overlay{opacity:1}
.rp-card-overlay span{
  background:#fff;color:var(--dark);
  font-size:12px;font-weight:700;
  padding:9px 20px;border-radius:30px;
  transform:translateY(10px);
  transition:transform .3s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.rp-card:hover .rp-card-overlay span{transform:translateY(0)}

.rp-card-info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.rp-card-cat{font-size:10.5px;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rp-card-info h4{font-size:15.5px;font-weight:700;color:#1a1a1a;margin:0;line-height:1.3}
.rp-card-desc{font-size:12.5px;color:#888;line-height:1.5;margin:0;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Colour swatches on card */
.rp-swatch-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.rp-swatch-label{font-size:10.5px;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.rp-swatch{
  width:18px;height:18px;border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1.5px #ddd5c9;
  cursor:pointer;
  transition:box-shadow .2s, transform .2s;
  padding:0;
}
.rp-swatch:hover{transform:translateY(-2px)}
.rp-swatch.active{box-shadow:0 0 0 2px var(--primary)}
.rp-swatch-single{
  width:14px;height:14px;border-radius:50%;
  box-shadow:0 0 0 1.5px #ddd5c9;
  display:inline-block;
}

.rp-card-cta{
  margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--dark);color:#fff;
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:11px 14px;border-radius:8px;
  text-align:center;
  transition:background .25s, gap .25s;
}
.rp-card-cta:hover{background:var(--primary);gap:11px}

/* Empty-state (category with no matching products yet) */
.rp-empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
  color:#999;
}
.rp-empty i{font-size:34px;color:#d8cfc2;margin-bottom:14px;display:block}
.rp-empty h4{color:#555;margin-bottom:6px}

/* ── Mobile ── */
@media(max-width:640px){
  .rp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .rp-cat-bar{gap:8px}
  .rp-cat-btn{padding:8px 14px 8px 12px;font-size:12px}
  .rp-card-info{padding:12px 13px 14px}
  .rp-card-info h4{font-size:13.5px}
  .rp-card-desc{font-size:11.5px}
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT-DETAIL PAGE — category chips + related-products slider
═══════════════════════════════════════════════════════════ */
.pd2-cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px}
.pd2-cat-chip{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--primary);background:#fdf1ee;
  border:1px solid rgba(200,32,43,.18);
  padding:5px 13px;border-radius:20px;
}

.pd2-related-section .ra-listing-grid{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
}
.pd2-related-section .ra-listing-card{
  flex:0 0 240px;
  scroll-snap-align:start;
}
.pd2-related-section .ra-listing-grid::-webkit-scrollbar{height:6px}
.pd2-related-section .ra-listing-grid::-webkit-scrollbar-thumb{background:#e0d8ca;border-radius:6px}