﻿/* ============================================================
   MAISON â€” Fashion Shop Styles
   Theme: Minimal black / white / rose gold â€” luxury fashion
   ============================================================ */

body { font-family:'DM Sans','Helvetica Neue',sans-serif;background:#fafaf8;color:#1a1a1a; }
h1,h2,h3 { font-family:'Cormorant Garamond','Georgia',serif; }

/* Nav */
.site-nav { position:fixed;top:0;left:0;right:0;z-index:100;padding:1.4rem 0;background:rgba(250,250,248,0.95);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:all 0.4s ease; }
.site-nav.scrolled { border-bottom-color:#e8e4dd;box-shadow:0 2px 20px rgba(0,0,0,0.05); }
.nav-logo { font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:#1a1a1a;letter-spacing:3px;text-transform:uppercase; }
.nav-logo span { color:#e8005a; }
.nav-links { display:flex;gap:2.5rem;list-style:none; }
.nav-links a { font-size:0.8rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#666;position:relative;padding-bottom:3px;transition:color 0.3s; }
.nav-links a::after { content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;background:#e8005a;transition:width 0.3s; }
.nav-links a:hover,.nav-links a.active { color:#1a1a1a; }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-cta { font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,#e8005a,#ff4d8d);color:#fff !important;padding:0.6rem 1.5rem;border-radius:2px;transition:all 0.3s;box-shadow:0 2px 12px rgba(232,0,90,0.3); }
.nav-cta:hover { background:linear-gradient(135deg,#c4004d,#e8005a);box-shadow:0 4px 20px rgba(232,0,90,0.45); }
.hamburger { background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px; }
.hamburger span { width:24px;height:1.5px;background:#1a1a1a;display:block;transition:all 0.3s; }
.mobile-nav { list-style:none;max-height:0;overflow:hidden;background:#fafaf8;border-bottom:1px solid #e8e4dd;transition:max-height 0.4s ease; }
.mobile-nav.open { max-height:300px; }
.mobile-nav li a { display:block;padding:0.9rem 1.5rem;font-size:0.85rem;letter-spacing:2px;text-transform:uppercase;color:#555;border-bottom:1px solid #f0ece6;transition:color 0.3s; }
.mobile-nav li a:hover { color:#e8005a; }

/* Hero */
.hero-section { position:relative;min-height:100vh;background:#080808;display:flex;align-items:center;overflow:hidden; }
.hero-content { position:relative;z-index:2;padding-top:100px; }
.hero-kicker { font-size:0.72rem;letter-spacing:5px;text-transform:uppercase;color:#e8005a;font-weight:500;margin-bottom:1.5rem;display:block; }
.hero-title { font-size:clamp(3rem,7vw,6rem);color:#fff;line-height:0.95;font-weight:400;margin-bottom:2rem; }
.hero-title em { font-style:italic;background:linear-gradient(90deg,#e8005a,#ff4d8d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-subtitle { font-size:0.95rem;letter-spacing:1px;color:rgba(255,255,255,0.55);max-width:380px;line-height:1.8;margin-bottom:3rem;font-family:'DM Sans',sans-serif; }
.hero-cta { display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center; }
.btn-fashion-primary { background:linear-gradient(135deg,#e8005a,#ff4d8d);color:#fff;padding:1rem 2.5rem;font-size:0.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;transition:all 0.3s;border-radius:2px;box-shadow:0 4px 20px rgba(232,0,90,0.35); }
.btn-fashion-primary:hover { background:linear-gradient(135deg,#c4004d,#e8005a);transform:translateY(-2px);box-shadow:0 8px 32px rgba(232,0,90,0.55); }
.btn-fashion-outline { border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.8);padding:1rem 2.5rem;font-size:0.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:transparent;transition:all 0.3s;border-radius:2px; }
.btn-fashion-outline:hover { border-color:#e8005a;color:#e8005a; }

/* Stats */
.stats-bar { background:#fafaf8;padding:2.5rem 0;border-bottom:1px solid #e8e4dd; }
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;text-align:center; }
.stat-item { color:#1a1a1a; }
.stat-num { display:block;font-family:'Cormorant Garamond',serif;font-size:2.8rem;font-weight:600;color:#1a1a1a; }
.stat-label { font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:#999; }

/* Section */
.section-label { font-size:0.7rem;letter-spacing:4px;text-transform:uppercase;color:#e8005a;font-weight:500;margin-bottom:1rem;display:block; }
.section-title { font-size:clamp(2rem,4vw,3.2rem);color:#1a1a1a;line-height:1.15;margin-bottom:1.5rem;font-weight:400; }
.section-body { color:#666;line-height:1.9;margin-bottom:1rem;max-width:480px;font-size:0.95rem; }
.section-header { text-align:center;margin-bottom:4rem; }
.section-cta { text-align:center;margin-top:3.5rem; }

/* Product Grid */
.products-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem; }
.product-card { cursor:pointer;position:relative; }
.product-img { height:360px;background:#f0ece6;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;transition:transform 0.5s ease; }
.product-card:hover .product-img { transform:scale(1.03); }
.product-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.35);opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity 0.3s; }
.product-card:hover .product-overlay { opacity:1; }
.product-overlay-btn { background:#fff;color:#1a1a1a;padding:0.7rem 1.5rem;font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;font-weight:600;border-radius:2px; }
.product-info { padding:1rem 0.2rem; }
.product-category { font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;color:#e8005a;margin-bottom:0.3rem; }
.product-name { font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#1a1a1a;margin-bottom:0.4rem; }
.product-price { font-size:0.9rem;font-weight:600;color:#1a1a1a; }
.product-price-original { text-decoration:line-through;color:#bbb;margin-right:0.5rem; }

/* Features */
.features-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;text-align:center; }
.feature-item { padding:1rem; }
.feature-icon { font-size:2rem;margin-bottom:1rem;display:block; }
.feature-name { font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#1a1a1a;margin-bottom:0.6rem; }
.feature-desc { font-size:0.85rem;color:#888;line-height:1.6; }

/* Testimonials */
.testimonials-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:3rem; }
.t-card { background:#fff;border:1px solid #e8e4dd;border-radius:4px;padding:2rem; }
.t-card p { font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:#444;line-height:1.7;font-style:italic;margin:1rem 0; }
.reviewer { font-size:0.78rem;letter-spacing:1px;text-transform:uppercase;color:#999; }
.stars { color:#e8005a;font-size:0.9rem;letter-spacing:3px; }

/* CTA Banner */
.cta-banner { background:#080808;padding:5rem 0;text-align:center; }
.cta-banner h2 { font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);color:#fff;margin-bottom:1rem;font-weight:400; }
.cta-banner p { color:rgba(255,255,255,0.55);margin-bottom:2.5rem;font-size:0.9rem;letter-spacing:0.5px; }

/* Footer */
.site-footer { background:#050505;color:rgba(255,255,255,0.55);padding:4rem 0 2rem; }
.footer-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:3rem;margin-bottom:3rem; }
.footer-grid h4 { color:#fff;font-size:0.7rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:1.2rem; }
.footer-grid ul { list-style:none; }
.footer-grid ul li,.footer-grid p { font-size:0.82rem;line-height:2.2; }
.footer-grid ul li a { color:rgba(255,255,255,0.5);transition:color 0.3s; }
.footer-grid ul li a:hover { color:#ff4d8d; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08);padding-top:1.5rem;text-align:center;font-size:0.78rem;opacity:0.4; }

@media(max-width:640px) { .hero-title{font-size:3rem} .hero-cta{flex-direction:column} }
