/* style.css — Catalog/Product Card Style */
:root {
    --primary: #3b82f6;
    --primary-dark: #3b82f6;
    --bg: #f2e0b1;
    --bg-dark: #0f172a;
    --card-bg: #ffffff;
    --card-bg-dark: #1e293b;
    --text: #0f172a;
    --text-dark: #f1f5f9;
    --text-muted: #64748b;
    --text-muted-dark: #94a3b8;
    --shadow: rgba(0,0,0,0.08);
    --shadow-hover: rgba(0,0,0,0.16);
    --border: #e2e8f0;
    --border-dark: #334155;
    --radius: 12px;
    --transition: 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; background:var(--bg); color:var(--text); padding:40px 20px; min-height:100vh; display:flex; justify-content:center; }
body.dark-mode { background:var(--bg-dark); color:var(--text-dark); }
.container { max-width:1300px; width:100%; }
h1 { font-size:2.8rem; color:var(--text); margin-bottom:10px; text-align:center; }
body.dark-mode h1 { color:var(--text-dark); }
h1 span { color:var(--primary); }
.subtitle { color:var(--text-muted); font-size:1.1rem; border-left:4px solid var(--primary); padding-left:18px; margin-bottom:40px; text-align:center; border-left:none; }
body.dark-mode .subtitle { color:var(--text-muted-dark); }

#demoGrid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    justify-items:center;
}

.demo-card {
    background:transparent;
    border:none;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    transition:transform var(--transition);
    width:100%;
    max-width:320px;
}
.demo-card:hover { transform:translateY(-6px); }

.card-image {
    width:100%;
    aspect-ratio:4/5;
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    box-shadow:0 8px 30px var(--shadow);
    background:var(--border);
}
body.dark-mode .card-image { background:var(--border-dark); }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.demo-card:hover .card-image img { transform:scale(1.05); }

.card-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(3px); display:flex; justify-content:center; align-items:center; opacity:0; transition:opacity var(--transition); border-radius:var(--radius); }
.demo-card:hover .card-overlay { opacity:1; }
.card-overlay span { background:white; color:var(--text); padding:10px 24px; border-radius:50px; font-weight:700; font-size:0.85rem; letter-spacing:1px; box-shadow:0 5px 20px rgba(0,0,0,0.2); transition:0.2s; }
body.dark-mode .card-overlay span { background:var(--card-bg-dark); color:var(--text-dark); }
.demo-card:hover .card-overlay span { background:var(--primary); color:white; }

.card-category-badge { position:absolute; top:10px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.65); backdrop-filter:blur(6px); color:white; padding:4px 14px; border-radius:50px; font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; z-index:2; white-space:nowrap; }

.card-content { padding:14px 4px 0; text-align:center; width:100%; }
.card-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:2px; }
body.dark-mode .card-title { color:var(--text-dark); }
.card-description { font-size:0.78rem; color:var(--text-muted); margin-bottom:6px; }
body.dark-mode .card-description { color:var(--text-muted-dark); }

.card-price { font-size:0.82rem; color:var(--text-muted); }
.card-price .price-new { color:var(--primary); font-weight:800; font-size:1rem; margin-left:4px; }
.card-price .price-old { text-decoration:line-through; color:#94a3b8; font-size:0.8rem; }

.loading { text-align:center; padding:60px 0; font-size:1.2rem; color:var(--text-muted); grid-column:1/-1; }
.loading .spinner { display:inline-block; width:40px; height:40px; border:4px solid var(--border); border-top:4px solid var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; margin-bottom:15px; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:768px) {
    h1 { font-size:2rem; }
    #demoGrid { grid-template-columns:repeat(2,1fr) !important; gap:16px; justify-items:stretch; }
    .demo-card { max-width:100% !important; width:100%; }
    .card-image { aspect-ratio:4/5; }
    .card-category-badge { font-size:0.6rem; padding:4px 12px; top:8px; }
    .card-title { font-size:0.9rem; }
}
@media (max-width:480px) {
    #demoGrid { gap:12px; }
    .card-category-badge { font-size:0.5rem; padding:3px 10px; top:6px; }
    .card-title { font-size:0.8rem; }
    .card-description { font-size:0.7rem; }
    .card-price { font-size:0.7rem; }
    .card-price .price-new { font-size:0.85rem; }
}