/*
Theme Name: Libevelas
Author: Libevelas
Description: Tema premium para loja de velas aromáticas, difusores e presentes. Paleta pistache, tipografia elegante e integração WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: libevelas
Tags: e-commerce, woocommerce, custom-colors, custom-logo, full-width-template
*/

/* ============================================
   VARIÁVEIS E RESET
============================================ */
:root {
  --pistache:       #8C9970;
  --pistache-light: #c5ceaf;
  --pistache-dark:  #5e6a4a;
  --bege:           #FCFAF6;
  --bege-dark:      #f0ebe0;
  --marrom:         #A38C76;
  --marrom-dark:    #7a6655;
  --rosa:           #FFD1DC;
  --text:           #333333;
  --text-light:     #777777;
  --fonte-titulos:  'Playfair Display', Georgia, serif;
  --fonte-textos:   'Montserrat', 'Helvetica Neue', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--fonte-textos);
  background:  var(--bege);
  color:       var(--text);
  font-size:   14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; transition: color .2s; }
ul  { list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulos);
  font-weight: 400;
  color:       var(--text);
  line-height: 1.2;
}

/* ============================================
   ANNOUNCEMENT BAR
============================================ */
.libevelas-ann-bar {
  background:     var(--pistache);
  color:          #fff;
  text-align:     center;
  padding:        8px 16px;
  font-size:      12px;
  letter-spacing: 1.5px;
  font-weight:    500;
}

/* ============================================
   HEADER
============================================ */
.libevelas-header {
  background:    var(--bege);
  border-bottom: 1px solid #e0d8cc;
  position:      sticky;
  top:           0;
  z-index:       1000;
  box-shadow:    0 2px 12px rgba(0,0,0,.04);
}
.libevelas-header-inner {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 24px;
  height:          72px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             20px;
}
.libevelas-logo {
  font-family:    var(--fonte-titulos);
  font-size:      26px;
  font-weight:    400;
  letter-spacing: 3px;
  color:          var(--text);
  text-transform: uppercase;
}
.libevelas-logo span { color: var(--pistache); }

.libevelas-nav a {
  font-size:      12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight:    500;
  margin-right:   24px;
  color:          var(--text);
}
.libevelas-nav a:hover { color: var(--pistache); }

.libevelas-header-icons { display: flex; align-items: center; gap: 20px; }
.libevelas-header-icons a { color: var(--text); }
.libevelas-header-icons a:hover { color: var(--pistache); }

/* ============================================
   BOTÕES GLOBAIS
============================================ */
.libevelas-btn {
  display:        inline-block;
  background:     var(--marrom);
  color:          #fff !important;
  border:         none;
  padding:        12px 32px;
  font-size:      12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight:    500;
  transition:     background .2s;
  cursor:         pointer;
}
.libevelas-btn:hover { background: var(--marrom-dark); }

.libevelas-btn-outline {
  display:        inline-block;
  background:     transparent;
  color:          var(--marrom) !important;
  border:         1.5px solid var(--marrom);
  padding:        11px 32px;
  font-size:      12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight:    500;
  transition:     all .2s;
  cursor:         pointer;
}
.libevelas-btn-outline:hover { background: var(--marrom); color: #fff !important; }

/* ============================================
   HERO BANNER
============================================ */
.libevelas-hero {
  position: relative;
  height:   520px;
  overflow: hidden;
}
.libevelas-hero-slide {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  opacity:    0;
  transition: opacity .8s ease;
}
.libevelas-hero-slide.active { opacity: 1; }

.libevelas-hero-content {
  position:    relative;
  z-index:     2;
  padding-left: 8%;
  max-width:   520px;
}
.libevelas-hero-tag {
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--pistache-light);
  margin-bottom:  14px;
  font-weight:    500;
}
.libevelas-hero-title {
  font-family:   var(--fonte-titulos);
  font-size:     64px;
  line-height:   1;
  color:         #fff;
  margin-bottom: 10px;
  font-style:    italic;
}
.libevelas-hero-title span {
  font-style:  normal;
  display:     block;
  font-size:   48px;
}
.libevelas-hero-sub {
  font-size:      11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--pistache-light);
  margin-bottom:  32px;
}
.libevelas-hero-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(255,255,255,.15);
  border:          none;
  color:           #fff;
  width:           44px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  z-index:         5;
  transition:      background .2s;
  cursor:          pointer;
}
.libevelas-hero-arrow:hover { background: rgba(255,255,255,.3); }
.libevelas-hero-arrow.left  { left:  16px; }
.libevelas-hero-arrow.right { right: 16px; }

.libevelas-hero-dots {
  position:  absolute;
  bottom:    24px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       8px;
  z-index:   5;
}
.libevelas-hero-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   rgba(255,255,255,.4);
  border:       none;
  cursor:       pointer;
  transition:   background .2s;
}
.libevelas-hero-dot.active { background: #fff; }

/* ============================================
   BENEFITS BAR
============================================ */
.libevelas-benefits {
  background:    var(--bege-dark);
  border-top:    1px solid #e0d8cc;
  border-bottom: 1px solid #e0d8cc;
  padding:       18px 24px;
}
.libevelas-benefits-inner {
  max-width:             1200px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
}
.libevelas-benefit       { display: flex; align-items: center; gap: 12px; }
.libevelas-benefit-icon  { width: 32px; height: 32px; color: var(--pistache); flex-shrink: 0; }
.libevelas-benefit-icon svg { width: 100%; height: 100%; }
.libevelas-benefit-text p    { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.libevelas-benefit-text span { font-size: 11px; color: var(--text-light); }

/* ============================================
   SEÇÕES
============================================ */
.libevelas-section       { padding: 60px 24px; }
.libevelas-section-inner { max-width: 1200px; margin: 0 auto; }

.libevelas-section-divider {
  display:        flex;
  align-items:    center;
  gap:            16px;
  margin-bottom:  40px;
}
.libevelas-section-divider::before,
.libevelas-section-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: #e0d8cc;
}
.libevelas-section-divider span {
  font-family:  var(--fonte-titulos);
  font-size:    28px;
  color:        var(--text);
  white-space:  nowrap;
  text-align:   center;
}

/* ============================================
   CATEGORIAS EM CÍRCULO
============================================ */
.libevelas-categories-grid {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   20px;
}
.libevelas-category-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  cursor:         pointer;
}
.libevelas-category-circle {
  width:         100px;
  height:        100px;
  border-radius: 50%;
  overflow:      hidden;
  border:        2px solid var(--pistache-light);
  transition:    border-color .2s, transform .2s;
  background:    var(--bege-dark);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.libevelas-category-circle img { width: 100%; height: 100%; object-fit: cover; }
.libevelas-category-item:hover .libevelas-category-circle {
  border-color: var(--pistache);
  transform:    scale(1.05);
}
.libevelas-category-name {
  font-size:      11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align:     center;
  font-weight:    500;
}

/* ============================================
   GRID DE PRODUTOS WOOCOMMERCE
============================================ */
.woocommerce ul.products {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   20px !important;
  margin:                0 !important;
  padding:               0 !important;
}
.woocommerce ul.products li.product {
  background:    #fff;
  border-radius: 8px;
  overflow:      hidden;
  text-align:    center;
  transition:    transform .3s, box-shadow .3s;
  margin:        0 !important;
  padding:       0 !important;
  float:         none !important;
  width:         auto !important;
}
.woocommerce ul.products li.product:hover {
  transform:  translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.woocommerce ul.products li.product a img {
  width:        100%;
  aspect-ratio: 1;
  object-fit:   cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size:   13px !important;
  font-weight: 500 !important;
  padding:     16px 12px 6px !important;
  font-family: var(--fonte-textos) !important;
  color:       var(--text) !important;
}
.woocommerce ul.products li.product .price {
  color:         var(--text) !important;
  font-weight:   700 !important;
  font-size:     16px !important;
  display:       block;
  margin-bottom: 14px;
}
.woocommerce ul.products li.product .price del {
  font-size:   12px !important;
  color:       var(--text-light) !important;
  font-weight: 400 !important;
}
.woocommerce ul.products li.product .button,
.woocommerce button.button.alt {
  background-color: var(--marrom) !important;
  color:            #fff !important;
  border-radius:    0 !important;
  width:            90% !important;
  margin:           0 auto 14px !important;
  padding:          10px 15px !important;
  font-weight:      500 !important;
  text-transform:   uppercase !important;
  font-size:        11px !important;
  letter-spacing:   1.5px !important;
  display:          block !important;
  transition:       background .2s !important;
  border:           none !important;
}
.woocommerce ul.products li.product .button:hover {
  background-color: var(--marrom-dark) !important;
}
.woocommerce span.onsale {
  background-color: var(--marrom) !important;
  border-radius:    0 !important;
  padding:          5px 10px !important;
  font-size:        11px !important;
  top:              10px !important;
  right:            10px !important;
  left:             auto !important;
}

/* ============================================
   SEÇÃO ROSA (NAMORADOS)
============================================ */
.libevelas-rosa { background: var(--rosa); }

/* ============================================
   NEWSLETTER
============================================ */
.libevelas-newsletter {
  background:  var(--pistache);
  padding:     60px 24px;
  text-align:  center;
}
.libevelas-newsletter h2 {
  font-family:   var(--fonte-titulos);
  font-size:     36px;
  color:         #fff;
  margin-bottom: 8px;
}
.libevelas-newsletter p {
  color:         rgba(255,255,255,.85);
  font-size:     13px;
  margin-bottom: 28px;
}
.libevelas-newsletter-form {
  display:    flex;
  max-width:  420px;
  margin:     0 auto;
}
.libevelas-newsletter-form input {
  flex:        1;
  padding:     14px 20px;
  border:      none;
  background:  #fff;
  font-size:   13px;
  outline:     none;
  font-family: var(--fonte-textos);
}
.libevelas-newsletter-form button {
  background:     var(--marrom);
  color:          #fff;
  border:         none;
  padding:        14px 28px;
  font-size:      12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight:    600;
  cursor:         pointer;
  transition:     background .2s;
}
.libevelas-newsletter-form button:hover { background: var(--marrom-dark); }

/* ============================================
   FOOTER
============================================ */
.libevelas-footer {
  background: #4a4035;
  color:      #c9c0b5;
  padding:    60px 24px 30px;
}
.libevelas-footer-inner { max-width: 1200px; margin: 0 auto; }
.libevelas-footer-grid {
  display:               grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap:                   40px;
  margin-bottom:         40px;
}
.libevelas-footer-logo {
  font-family:    var(--fonte-titulos);
  font-size:      20px;
  letter-spacing: 3px;
  color:          #fff;
  display:        block;
  margin-bottom:  12px;
}
.libevelas-footer-grid p {
  font-size:     12px;
  line-height:   1.7;
  color:         #a09287;
  margin-bottom: 16px;
}
.libevelas-footer-col h4 {
  color:          #fff;
  font-size:      12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom:  20px;
  font-family:    var(--fonte-textos);
  font-weight:    600;
}
.libevelas-footer-col a {
  display:       block;
  color:         #a09287;
  font-size:     12px;
  margin-bottom: 10px;
  transition:    color .2s;
}
.libevelas-footer-col a:hover { color: #fff; }

.libevelas-footer-bottom {
  border-top:      1px solid #6a5a4e;
  padding-top:     24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.libevelas-footer-bottom p { font-size: 11px; color: #7a6655; }

/* ============================================
   RESPONSIVO
============================================ */
@media (max-width: 1024px) {
  .woocommerce ul.products        { grid-template-columns: repeat(3, 1fr) !important; }
  .libevelas-categories-grid      { grid-template-columns: repeat(3, 1fr); }
  .libevelas-footer-grid          { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .libevelas-hero                 { height: 380px; }
  .libevelas-hero-title           { font-size: 40px; }
  .libevelas-hero-title span      { font-size: 30px; }
  .woocommerce ul.products        { grid-template-columns: repeat(2, 1fr) !important; }
  .libevelas-benefits-inner       { grid-template-columns: repeat(2, 1fr); }
  .libevelas-categories-grid      { grid-template-columns: repeat(3, 1fr); }
  .libevelas-footer-grid          { grid-template-columns: 1fr; }
  .libevelas-nav                  { display: none; }
  .libevelas-section-divider span { font-size: 22px; }
}
@media (max-width: 480px) {
  .woocommerce ul.products  { grid-template-columns: 1fr 1fr !important; }
  .libevelas-benefits-inner { grid-template-columns: 1fr 1fr; }
}