/*
Theme Name: Auric Safe Luxury
Description: Complete Bespoke Emerald & Gold Luxury E-Commerce Theme (Safe Version).
Version: 1.1
Author: AI Developer
*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;600&display=swap');
:root { --bg: #02120a; --card: #042417; --gold: #d4af37; --light-gold: #f3e5ab; --text: #e8e6e1; --font-h: 'Cinzel', serif; --font-p: 'Montserrat', sans-serif; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-p); overflow-x: hidden; }
h1, h2, h3, .price { font-family: var(--font-h); color: var(--gold); }
a { color: var(--gold); text-decoration: none; }
.site-header { background: #000; padding: 20px; text-align: center; border-bottom: 1px solid rgba(212,175,55,0.3); }
.site-title { font-size: 24px; letter-spacing: 2px; text-transform: uppercase; }
.swiper-container { width: 100%; padding: 40px 20px; }
.swiper-slide { background: var(--card); border: 1px solid rgba(212,175,55,0.2); padding-bottom: 15px; text-align: center; }
.swiper-slide img { width: 100%; height: 250px; object-fit: cover; }
.swiper-slide h3 { font-size: 16px; margin: 15px 10px; color: var(--gold); }
.swiper-slide .price { color: var(--light-gold); display: block; margin-bottom: 15px; }
.add-btn { display: inline-block; padding: 10px 20px; background: transparent; border: 1px solid var(--gold); color: var(--gold); font-size: 12px; text-transform: uppercase; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 40px 20px; max-width: 1200px; margin: 0 auto; list-style: none; }
.products li { background: var(--card); border: 1px solid rgba(212,175,55,0.2); text-align: center; padding-bottom: 20px; }
.products li img { width: 100%; height: 300px; object-fit: cover; }
.products li h2 { font-size: 18px; margin: 15px; }
.products li .price { display: block; margin-bottom: 15px; font-size: 20px; color: var(--light-gold); }
.products li .button { padding: 12px 24px; background: var(--gold); color: var(--bg); text-transform: uppercase; font-weight: bold; }
@media(max-width: 768px){ .products { grid-template-columns: 1fr; } }