/* Flamme Garonne — Shared Styles v2 */
/* Cache: 1 year (versioned URL: main.css?v=2) */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg: #080808;
  --bg-card: #0f0f0f;
  --bg-light: #1a1a1a;
  --bg-input: #1a1a1a;
  --gold: #C9A96E;
  --gold-bright: #E8D5A3;
  --gold-dim: #8B7355;
  --flame: #E8963A;
  --text: #B8B8B8;
  --text-dim: #6B6B6B;
  --white: #FFFFFF;
  --error: #E84855;
  --success: #4CAF50;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-weight:300;
  line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(200,165,106,0.3);color:var(--white)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Skip to content (accessibility) */
.skip-link{
  position:absolute;top:-100px;left:1rem;z-index:9999;
  background:var(--gold);color:#000;padding:0.75rem 1.5rem;
  font-size:0.8rem;font-weight:700;text-decoration:none;
  border-radius:0 0 4px 4px;transition:top 0.2s;
}
.skip-link:focus{top:0}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0.3rem 2rem;display:flex;
  justify-content:space-between;align-items:center;
  transition:all 0.4s;background:#C8A56A;
}
nav.scrolled{
  background:rgba(0,0,0,0.95);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
nav.scrolled .nav-logo{color:var(--white)}
nav.scrolled .nav-links a{color:var(--text-bright);}
nav.scrolled .nav-links a:hover{color:var(--gold)}
nav.scrolled .hamburger span{background:var(--white)}
nav.scrolled .lang-switch a{color:var(--text-bright)}

.nav-logo{
  font-family:var(--font-display);font-size:1.4rem;
  font-weight:600;color:#000;letter-spacing:0.04em;text-decoration:none;
}
.nav-links{display:flex;gap:1.2rem;list-style:none;align-items:center}
.nav-links a{
  font-family:var(--font-display);text-decoration:none;
  color:#000;font-size:1.3rem;letter-spacing:0.05em;
  transition:opacity 0.3s;font-weight:700;
}
.nav-links a:hover{opacity:0.7}
.lang-switch{display:flex;gap:0.3rem;margin-left:1rem}
.lang-switch a{
  text-decoration:none;font-size:0.9rem;opacity:0.6;
  color:#000;transition:opacity 0.3s;
}
.lang-switch a.active,.lang-switch a:hover{opacity:1}

/* Hamburger */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  z-index:101;padding:10px;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.hamburger span{
  display:block;width:22px;height:2px;background:#000;
  transition:all 0.3s;border-radius:1px;
}
nav.scrolled .hamburger span{background:var(--white)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:#040404;padding:5rem 2rem 2rem;text-align:center;
  border-top:1px solid rgba(255,255,255,0.03);margin-top:4rem;
}
.footer-logo{font-family:var(--font-display);font-size:1.8rem;color:var(--white);margin-bottom:0.5rem;font-weight:700}
.footer-sub{font-size:0.7rem;color:var(--gold-dim);font-style:italic;margin-bottom:2rem;font-family:var(--font-display)}
.footer-links{display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.footer-links a{color:var(--text-dim);text-decoration:none;font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;transition:color 0.4s}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{font-size:0.6rem;color:#444;border-top:1px solid rgba(255,255,255,0.03);padding-top:1.5rem}

/* ============================================================
   TYPOGRAPHY & UTILITY
   ============================================================ */
.section-number{
  font-family:var(--font-display);font-size:0.6rem;letter-spacing:0.5em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:1.5rem;
}
.section-line{
  width:1px;height:30px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  margin:0 auto 2rem;
}
.section-title{
  font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);
  font-weight:400;color:var(--white);margin-bottom:1rem;
}
.section-text{
  font-family:var(--font-display);font-size:1rem;font-style:italic;
  color:var(--text-dim);line-height:1.9;max-width:550px;margin:0 auto;
}
.trust-bar{
  display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;
  padding:2rem;max-width:900px;margin:0 auto;text-align:center;
}
.trust-item{
  font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-dim);
}
.trust-item strong{color:var(--gold-bright);font-weight:700}

/* ============================================================
   PRODUCT GRID & CARDS
   ============================================================ */
.product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:1050px;margin:0 auto;padding:0 2rem 4rem;align-items:stretch;
}
.product-card-wrapper{
  display:flex;flex-direction:column;background:var(--bg-card);
  border-radius:2px;border:1px solid rgba(255,255,255,0.03);
  transition:all 0.4s ease, opacity 0.3s ease, transform 0.3s ease;height:100%;
  opacity:1;transform:scale(1);
}
.product-card-wrapper.filter-hidden{
  opacity:0;transform:scale(0.95);pointer-events:none;
  position:absolute;visibility:hidden;
}
.product-card-wrapper:hover{
  transform:translateY(-4px);border-color:rgba(201,169,110,0.2);
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.product-card-wrapper .product-card{flex:1;display:flex;flex-direction:column}
.product-card-wrapper .product-info{flex:1;display:flex;flex-direction:column}
.product-actions{margin-top:auto!important}
.product-card{position:relative;overflow:hidden;cursor:pointer;text-decoration:none;display:block;color:inherit}
.product-visual{aspect-ratio:4/5;overflow:hidden;position:relative;background:#08111F}
.product-visual img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.product-card:hover .product-visual img{transform:scale(1.03)}
.product-badge{
  position:absolute;top:0.6rem;left:0.6rem;z-index:3;
  font-size:0.45rem;letter-spacing:0.15em;text-transform:uppercase;
  padding:0.2rem 0.5rem;font-weight:700;
}
.badge-premium{background:var(--gold);color:#000}
.badge-artist{background:transparent;color:var(--gold-bright);border:1px solid var(--gold-dim)}
.badge-essentiel{background:var(--bg-light);color:var(--text);border:1px solid rgba(255,255,255,0.15)}
.product-info{padding:1rem}
.product-category{font-size:0.45rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.3rem}
.product-name{font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--white);margin-bottom:0.25rem}
.product-notes{font-size:0.65rem;color:var(--text-dim);font-style:italic;line-height:1.5;margin-bottom:0.5rem}
.product-bottom{display:flex;justify-content:space-between;align-items:center}
.product-price{font-size:1rem;font-weight:400;color:var(--gold-bright)}
.product-weight{font-size:0.55rem;color:var(--text-dim)}
.product-edition{font-size:0.5rem;color:var(--gold-dim);margin-top:0.25rem;font-style:italic}
.promo-bar{
  background:var(--gold-dim);color:var(--white);text-align:center;
  padding:0.8rem;font-size:0.72rem;letter-spacing:0.05em;margin-top:2rem;
}

/* Filters */
.filters{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:1rem 2rem 3rem}
.filter-btn{
  padding:0.5rem 1.2rem;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;
  background:transparent;color:var(--text-dim);border:1px solid rgba(255,255,255,0.1);
  cursor:pointer;transition:all 0.3s;font-family:'Inter',sans-serif;
}
.filter-btn:hover,.filter-btn.active{color:var(--gold-bright);border-color:var(--gold-dim)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
  display:block;width:100%;padding:1rem;background:var(--gold);color:#000;
  border:none;font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;
  font-weight:700;cursor:pointer;font-family:var(--font-body);
  text-align:center;text-decoration:none;border-radius:3px;transition:all 0.3s;
}
.btn-primary:hover{background:var(--gold-bright);transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-secondary{
  display:block;width:100%;padding:0.9rem;background:transparent;color:var(--gold);
  border:1px solid var(--gold);font-size:0.7rem;letter-spacing:0.1em;
  text-transform:uppercase;font-weight:600;cursor:pointer;font-family:var(--font-body);
  text-align:center;text-decoration:none;border-radius:3px;transition:all 0.3s;margin-top:0.6rem;
}
.btn-secondary:hover{background:rgba(200,165,106,0.1)}
.btn-cart{
  display:inline-block;margin-top:0.5rem;padding:0.5rem 1.2rem;background:transparent;
  color:var(--gold);border:1px solid var(--gold);font-size:0.65rem;
  letter-spacing:0.15em;text-transform:uppercase;font-weight:600;cursor:pointer;
}
.btn-cart:hover{background:rgba(200,165,106,0.15)}

/* ============================================================
   SOCIAL MEDIA BUTTONS (Nav)
   ============================================================ */
.nav-socials{display:flex;gap:0.5rem;align-items:center;margin-left:0.5rem}
.nav-socials a{color:#000;text-decoration:none;font-size:1.2rem;transition:all 0.3s;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.08)}
.nav-socials a:hover{background:rgba(0,0,0,0.2);transform:scale(1.1)}
@media(max-width:768px){.nav-socials{display:none}}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-float{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;
  width:56px;height:56px;background:#25D366;color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;text-decoration:none;
  box-shadow:0 4px 15px rgba(37,211,102,0.3);
  transition:all 0.3s;
}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(37,211,102,0.4)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  nav{padding:0.5rem 0.8rem;justify-content:flex-start;gap:0.3rem;flex-wrap:nowrap}
  .nav-logo{font-size:0.9rem;flex-shrink:0}
  .nav-logo img{height:28px!important}
  .hamburger{display:flex!important;order:1;flex-shrink:0}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:fixed;
    top:0;left:0;right:0;bottom:0;background:rgba(200,165,106,0.98);
    padding:5rem 1.5rem;gap:0.8rem;z-index:100;
    justify-content:flex-start;align-items:center;
  }
  .nav-links.open a{
    font-size:1.5rem;color:#000;padding:0.75rem 1.5rem;
    min-height:44px;display:flex;align-items:center;
  }
  .lang-switch{margin-left:auto;flex-shrink:0}
  .lang-switch a{font-size:0.8rem}
  .cart-icon{flex-shrink:0}
  .product-grid{grid-template-columns:1fr;max-width:450px}
  .trust-bar{gap:1rem}
}