/* ===========================================
   LAYOUT CARDS - LUXURY DESIGN
   EXACT SPECIFICATIONS
   =========================================== */
:root{
 --card-bg: #ffffff;
 --card-border: none;
 --radius:12px;
}
.cards-grid{
 display:grid;
 grid-template-columns: repeat(3, 1fr);
 gap:24px;
 align-items:stretch;
 max-width:1400px;
 margin:0 auto;
 padding:40px 20px;
}
.cards-grid > .card{
 display:flex;
 flex-direction:column;
 background:#ffffff;
 border:none;
 border-radius:12px;
 overflow:hidden;
 height:480px;
 padding:20px;
 box-sizing:border-box;
 box-shadow:0 2px 8px rgba(0,0,0,0.1);
 transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.cards-grid > .card:hover{
 transform:translateY(-5px);
 box-shadow:0 12px 30px rgba(0,0,0,0.15);
}
.card__image{ position:relative; height:320px; min-height:320px; max-height:320px; overflow:hidden; background:#f8f8f8; display:flex; align-items:center; justify-content:center; padding:0; box-sizing:border-box; border-radius:8px; margin-bottom:15px; flex-shrink:0; }
.card__image img{ max-width:100%; max-height:320px; width:auto; height:auto; object-fit:contain; display:block; margin:0 auto; }
.card__badge{
 position:absolute; top:10px; left:10px;
 background:rgba(136,84,208,.95); color:#fff;
 padding:4px 8px; border-radius:999px; font-size:12px; letter-spacing:.3px;
 z-index:10;
}
.card__body{ padding:0; display:flex; flex-direction:column; justify-content:space-between; flex:1; height:140px; }
.card__title{ font-weight:600; font-size:18px; line-height:1.3; color:#d4af37; max-height:48px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:8px; }
.card__desc{ display:none; }
.card__price{ font-weight:700; font-size:24px; color:#d4af37; margin-bottom:12px; }
.card__actions{ display:flex; gap:8px; padding:0; margin-top:auto; }
.card__actions button,
.card__actions a{ width:100%; height:44px; min-height:44px; background:#d4af37; color:#0f0c29; border:none; border-radius:6px; font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; transition:all 0.3s ease; }
.card__actions button:hover,
.card__actions a:hover{ background:#e5c245; transform:translateY(-2px); }
.skeleton{ background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
 background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer{ to{ background-position-x:-200%; } }
@media (max-width:1199px){.cards-grid{grid-template-columns:repeat(2, 1fr);gap:20px}}
@media (max-width:767px){.cards-grid{grid-template-columns:1fr;gap:16px;padding:20px 16px}.cards-grid > .card{max-width:400px;margin:0 auto}}