/* ============================================================
   PRODUCTS.CSS — page-specific styles for products.php:
   the hero image, the search/category filter bar, the product
   card grid (image, fixed-height title/description, WhatsApp
   button), and the per-card "More Details" accordion.
   ============================================================ */
:root{
  --hero-bg-image: url('../../assets/img/product.png');
}

/* ===== FILTER BAR (search + category tabs, same pattern as contact.php branches) ===== */
.product-filters{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:center; margin-bottom:28px;}
.product-filters .form-group{flex:1; min-width:220px; max-width:320px; margin-bottom:0;}

/* ===== PRODUCT GRID & CARD ===== */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch;}
.product-card{
  position:relative; display:flex; flex-direction:column; gap:8px; height:100%;
  background:linear-gradient(165deg, #ffffff 0%, var(--ivory) 100%);
  border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  box-shadow:0 6px 18px rgba(10,79,82,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover{box-shadow:0 22px 48px rgba(10,79,82,.18); transform:translateY(-6px); border-color:transparent;}

/* Image area: fixed height, neutral backdrop, full product visible via object-fit:contain */
.product-card .product-image-wrap{
  width:calc(100% + 48px); margin:-24px -24px 4px; height:200px;
  background:var(--ivory); border-radius:var(--radius) var(--radius) 0 0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-card .product-image{
  width:100%; height:100%; object-fit:contain; object-position:center; padding:18px;
  transition:transform .5s var(--ease);
}
.product-card:hover .product-image{transform:scale(1.07);}

.product-card .tag{display:inline-block; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); background:var(--ivory); padding:5px 12px; border-radius:999px; margin-bottom:2px;}

/* Fixed-height title (2 lines) and description (2 lines) so every card lines up.
   Title is sized up from the description to read as the card's primary focus. */
.product-card h3{
  font-size:21px; font-family:var(--sans); font-weight:800; line-height:1.25; color:var(--charcoal);
  height:calc(1.25em * 2); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card > p{
  font-size:13.5px; line-height:1.5; margin:0; color:var(--gray);
  height:calc(1.5em * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-meta{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--gray); margin:2px 0;}
.product-meta strong{color:var(--charcoal); font-weight:700;}

/* Pins the WhatsApp button to the same bottom position on every card, regardless of content above */
.product-card .whatsapp-enquire-btn{margin-top:auto; justify-content:center; width:100%;}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr;}}

/* ===== "MORE DETAILS" ACCORDION ===== */
.product-details{margin-top:2px; border-top:1px solid var(--line); padding-top:10px;}
.product-details summary{cursor:pointer; font-size:12.5px; font-weight:800; color:var(--teal); list-style:none; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.04em;}
.product-details summary::-webkit-details-marker{display:none;}
.product-details summary svg{width:12px; height:12px; transition:transform .25s;}
.product-details[open] summary svg{transform:rotate(90deg);}
.product-details[open] summary{margin-bottom:8px;}

/* Tighter detail-block sizing to fit inside the compact product card
   (components.css's shared .detail-block defaults are sized for the
   larger offers.php package-details accordion) */
.product-details .detail-block{margin-bottom:12px;}
.product-details .detail-block h4{font-size:11.5px; margin-bottom:4px;}
.product-details .detail-block p{font-size:13px;}

/* Tighter package-included sizing to match the compact product card
   (components.css's shared defaults are sized for offers.php packages) */
.product-card .package-included{gap:6px; margin:2px 0 0;}
.product-card .package-included li{font-size:13px;}
.product-card .package-included li svg{width:13px; height:13px;}