/* ============================================
   MALBAR SWAAD — PRODUCTS PAGE CSS
   Clean cards. Full details only in modal.
   ============================================ */

.products-page { background:var(--cream); }

/* ── Filter ── */
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; margin-bottom:44px;
}
.fb {
  padding:10px 22px; border-radius:50px; font-family:var(--font-head);
  font-weight:700; font-size:0.85rem; cursor:pointer;
  border:2px solid rgba(197,46,46,0.2); color:var(--muted);
  background:#fff; transition:var(--tr);
}
.fb.active,.fb:hover { background:var(--red); color:#fff; border-color:var(--red); }

/* ── Products Grid (compact cards) ── */
.pg-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}

.pg-card {
  background:#fff; border-radius:var(--rl); overflow:hidden;
  border:2px solid transparent; cursor:pointer;
  transition:var(--tr); position:relative;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.pg-card:hover {
  transform:translateY(-8px); border-color:rgba(197,46,46,0.2);
  box-shadow:var(--shL);
}
.pg-card-img {
  position:relative; display:flex; justify-content:center; align-items:center;
  padding:28px 20px; min-height:180px;
}
.pg-card-img img {
  height:136px; object-fit:contain;
  transition:transform 0.4s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.12));
}
.pg-card:hover .pg-card-img img { transform:scale(1.1) rotate(-2deg); }
.pg-badge {
  position:absolute; top:10px; left:10px;
  background:var(--red); color:#fff;
  padding:3px 10px; border-radius:50px; font-size:0.66rem; font-weight:700;
}
.pg-card-body { padding:14px 16px 18px; }
.pg-card-name  { font-family:var(--font-head); font-size:1rem; font-weight:800; margin-bottom:4px; }
.pg-card-short { font-size:0.8rem; color:var(--muted); line-height:1.6; margin-bottom:12px; }
.pg-card-foot  { display:flex; align-items:center; justify-content:space-between; }
.pg-price { font-family:var(--font-head); font-size:1.15rem; font-weight:800; color:var(--red); }
.pg-tap   {
  font-size:0.75rem; font-weight:700; color:var(--red);
  background:rgba(197,46,46,0.08); padding:5px 12px; border-radius:50px;
  transition:var(--tr);
}
.pg-card:hover .pg-tap { background:var(--red); color:#fff; }

/* ── PRODUCT DETAIL MODAL ── */
.pd-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(18,4,4,0.75);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.pd-overlay.open { opacity:1; pointer-events:all; }

.pd-modal {
  background:#fff; border-radius:var(--rl);
  width:100%; max-width:860px; max-height:90vh; overflow-y:auto;
  position:relative;
  transform:scale(0.93) translateY(20px);
  transition:transform 0.35s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 30px 80px rgba(0,0,0,0.4);
}
.pd-overlay.open .pd-modal { transform:scale(1) translateY(0); }

.pd-close {
  position:absolute; top:14px; right:14px; z-index:10;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,0.08); color:var(--dark);
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--tr);
}
.pd-close:hover { background:var(--red); color:#fff; }

.pd-inner {
  display:grid; grid-template-columns:1fr 1.2fr;
}

/* LEFT — image */
.pd-left {
  padding:40px 32px; display:flex; align-items:center; justify-content:center;
  background:var(--cream); border-radius:var(--rl) 0 0 var(--rl);
  min-height:360px;
}
.pd-img-wrap { text-align:center; }
.pd-img {
  max-height:260px; max-width:100%; object-fit:contain;
  transition:opacity 0.25s, transform 0.4s;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,0.2));
  animation: float 4s ease-in-out infinite;
}
.pd-flip-btn {
  margin-top:16px; background:rgba(197,46,46,0.1); color:var(--red);
  border:1.5px solid rgba(197,46,46,0.2); border-radius:50px;
  padding:7px 16px; font-size:0.78rem; font-weight:700; cursor:pointer;
  transition:var(--tr); font-family:var(--font-body);
}
.pd-flip-btn:hover { background:var(--red); color:#fff; }

/* RIGHT — details */
.pd-right { padding:36px 32px 36px 28px; }
.pd-badge {
  display:inline-block; background:var(--red); color:#fff;
  padding:4px 14px; border-radius:50px; font-size:0.72rem; font-weight:700; margin-bottom:12px;
}
.pd-right h2  { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:4px; }
.pd-tagline   { color:var(--red); font-weight:600; font-size:0.95rem; margin-bottom:14px; }
.pd-desc      { color:var(--muted); line-height:1.85; font-size:0.9rem; margin-bottom:20px; }
.pd-meta      { background:var(--cream); border-radius:var(--r); padding:16px; margin-bottom:24px; }
.pd-meta-row  { display:flex; gap:10px; margin-bottom:9px; font-size:0.85rem; }
.pd-meta-row:last-child { margin-bottom:0; }
.pml          { font-weight:700; color:var(--red); min-width:90px; flex-shrink:0; }
.pd-wa        { width:100%; justify-content:center; font-size:0.95rem; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .pg-grid    { grid-template-columns:repeat(2,1fr); gap:16px; }
  .pd-inner   { grid-template-columns:1fr; }
  .pd-left    { border-radius:var(--rl) var(--rl) 0 0; min-height:220px; padding:28px; }
  .pd-right   { padding:24px; }
  .pd-img     { max-height:180px; }
}
@media(max-width:480px){
  .pg-grid    { grid-template-columns:repeat(2,1fr); gap:12px; }
  .pg-card-img{ min-height:150px; padding:20px 14px; }
  .pg-card-img img { height:110px; }
  .pg-card-body { padding:12px 12px 14px; }
  .pd-overlay { padding:12px; }
}