/* =====================================================
   RAVENZO PARFUM — INTERNATIONAL LUXURY DESIGN
   Clean • Premium • Alta Conversão
===================================================== */

/* ================= DESIGN SYSTEM ================= */

:root{
  --azul-deep:#081f44;
  --azul-premium:#0e3270;
  --gold:#d4af37;
  --gold-light:#f3dc8a;
  --white:#ffffff;
  --bg-soft:#f5f7fb;
  --text:#111;

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;

  --shadow-soft:0 10px 30px rgba(0,0,0,.06);
  --shadow-elevated:0 18px 45px rgba(0,0,0,.12);

  --transition:.35s cubic-bezier(.22,.61,.36,1);
}

/* ================= RESET PREMIUM ================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  background:var(--bg-soft);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ================= HEADER LUXURY ================= */

header,
.navbar,
.header-wrapper{
  background:linear-gradient(135deg,var(--azul-deep),var(--azul-premium));
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px);
}

/* MENU */

nav a{
  color:white;
  padding:10px 16px;
  border-radius:999px;
  font-weight:500;
  transition:var(--transition);
}

nav a:hover{
  background:rgba(255,255,255,.15);
}

/* ================= HERO / BANNER ================= */

.banner,
.hero{
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

/* ================= PRODUCT CARDS ================= */

.product,
.card,
.product-item{

  background:white;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:var(--transition);
  position:relative;
}

/* efeito boutique internacional */
.product:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:var(--shadow-elevated);
}

/* brilho sutil premium */
.product::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.35),
    transparent 60%
  );
  opacity:0;
  transition:.6s;
}

.product:hover::after{
  opacity:1;
}

/* ================= IMAGEM ================= */

.product img{
  border-radius:var(--radius-lg);
  transition:transform .6s ease;
}

.product:hover img{
  transform:scale(1.06);
}

/* ================= PREÇO ================= */

.price{
  color:var(--azul-deep);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.3px;
}

/* ================= BOTÃO COMPRAR ================= */

.button,
.btn,
button,
input[type="submit"]{

  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  border:none;
  border-radius:999px;
  padding:13px 22px;
  font-weight:600;
  color:#222;
  cursor:pointer;

  transition:var(--transition);
  position:relative;
  overflow:hidden;
}

/* efeito luxo hover */
.button::before,
.btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.6),
    transparent
  );
  transition:.6s;
}

.button:hover::before,
.btn:hover::before{
  left:120%;
}

.button:hover,
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(212,175,55,.35);
}

/* ================= INPUTS PREMIUM ================= */

input,
select,
textarea{
  border-radius:999px;
  border:1px solid #e5e7ee;
  padding:13px 18px;
  transition:var(--transition);
}

input:focus,
select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
}

/* ================= SIDEBAR ================= */

.sidebar,
.menu-lateral,
.drawer{
  background:white;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);
}

/* ================= FOOTER ================= */

footer{
  background:linear-gradient(135deg,var(--azul-deep),#061731);
  color:white;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:50px 25px;
  margin-top:50px;
}

/* ================= LOADING ================= */

.loading-placeholder-content{
  border-radius:var(--radius-xl);
}

.loading-placeholder-effect{
  border-radius:var(--radius-md);
}

/* ================= GRID RESPONSIVO ================= */

.product-grid{
  display:grid;
  gap:22px;
}

@media(min-width:768px){
  .product-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(min-width:1200px){
  .product-grid{
    grid-template-columns:repeat(4,1fr);
  }
}