/*
Theme Name: Vellune Home
Theme URI: https://www.vellune.com
Author: Vellune Home
Description: Theme completo para Vellune Home (WooCommerce): tienda, cuentas de cliente y checkout, con identidad minimalista.
Version: 1.9
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: vellune-home
*/

:root{
  --verde-salvia: #5E6B63;
  --beige-arena: #E7E0D4;
  --blanco-roto: #F4F1EC;
  --dorado-mate: #e4dabd;
  --texto-oscuro: #2b2f2c;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", Helvetica, Arial, sans-serif;
  --espacio: 2.5rem;
}

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

body{
  margin: 0;
  background-color: var(--blanco-roto);
  color: var(--texto-oscuro);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, .site-title, .logo-text{
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--texto-oscuro);
  margin: 0 0 1rem;
}

h1{ font-size: 3rem; }
h2{ font-size: 2.2rem; }
h3{ font-size: 1.5rem; }
p{ margin: 0 0 1.2rem; }

a{ color: var(--texto-oscuro); text-decoration: none; transition: opacity 0.2s ease; }
a:hover{ opacity: 0.65; }
img{ max-width: 100%; height: auto; display: block; }

.container{ max-width: 1180px; margin: 0 auto; padding: 0 var(--espacio); }
section{ padding: 5rem 0; }
* { box-shadow: none !important; text-shadow: none !important; }

.site-header{ background-color: var(--blanco-roto); border-bottom: 1px solid var(--beige-arena); }
.site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.site-title{ font-size: 1.9rem; margin: 0; }
.site-title .logo-sub{ font-family: var(--font-sans); font-size: 0.55rem; letter-spacing: 0.15em; margin-left: 0.35rem; vertical-align: middle; text-transform: uppercase; }
.main-navigation ul{ list-style: none; display: flex; gap: 2.2rem; margin: 0; padding: 0; flex-wrap: wrap; }
.main-navigation a{ font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.header-icons{ display: flex; gap: 1.2rem; align-items: center; font-size: 0.85rem; }

.hero{ background-color: var(--verde-salvia); color: var(--blanco-roto); text-align: center; padding: 7rem 0; }
.hero h1, .hero p{ color: var(--blanco-roto); }
.hero .eyebrow{ font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1rem; }
.hero p{ max-width: 560px; margin: 1.5rem auto 2rem; font-weight: 300; }

.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  display: inline-block; padding: 0.9rem 2.4rem; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid var(--verde-salvia); border-radius: 0; background: var(--verde-salvia); color: var(--blanco-roto); cursor: pointer;
}
.hero .btn{ background: transparent; color: var(--blanco-roto); border-color: var(--blanco-roto); }
.hero .btn:hover{ background: rgba(255,255,255,0.08); opacity: 1; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ background-color: var(--texto-oscuro); border-color: var(--texto-oscuro); opacity: 1; }

.section-title{ text-align: center; margin-bottom: 3rem; }
.section-title .eyebrow{ display: block; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--verde-salvia); margin-bottom: 0.8rem; }

.essence{ background-color: var(--beige-arena); text-align: center; }
.essence .container{ max-width: 760px; }

.values-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; margin-top: 3rem; text-align: left; }
.value-item h4{ font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.5rem; }
.value-item p{ font-size: 0.9rem; color: #565b56; }

.trust-badges{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; justify-items: center; background: var(--beige-arena); padding: 2rem 1.5rem; margin-bottom: 2.5rem; }
.trust-badges span{ display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.trust-badges svg{ width: 30px; height: 30px; color: var(--verde-salvia); }
.trust-badges em{ font-style: normal; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-salvia); }

.products-grid, ul.products{
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 2.5rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
ul.products li.product, .product-card{ text-align: center; display: flex; flex-direction: column; }
ul.products li.product img{ width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 1rem; }
ul.products li.product .woocommerce-loop-product__link{ display: flex; flex-direction: column; flex: 1; }
ul.products li.product .button{ margin-top: auto; align-self: center; }
ul.products li.product .woocommerce-loop-product__title, .product-card h3{ font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.3rem; }
ul.products li.product .price, .product-card .price{ font-family: var(--font-sans); font-size: 0.85rem; color: var(--verde-salvia); }

.woocommerce div.product p.price, .woocommerce div.product span.price{ color: var(--verde-salvia); }
.woocommerce nav.woocommerce-pagination ul{ border: none; }
.woocommerce span.onsale{ background: var(--dorado-mate); color: var(--texto-oscuro); border-radius: 0; font-family: var(--font-sans); font-size: 0.65rem; text-transform: uppercase; }

.woocommerce div.product div.images, .woocommerce div.product div.summary{ margin-bottom: 2rem; }
.woocommerce div.product .product_title{ font-size: 2rem; }
.woocommerce-tabs{ margin-top: 3rem; border-top: 1px solid var(--beige-arena); padding-top: 2rem; }
.woocommerce-tabs ul.tabs{ list-style: none; display: flex; gap: 2rem; padding: 0; margin-bottom: 1.5rem; }
.woocommerce-tabs ul.tabs li{ font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.woocommerce-tabs ul.tabs li.active{ color: var(--verde-salvia); border-bottom: 2px solid var(--verde-salvia); }
.related.products{ margin-top: 4rem; border-top: 1px solid var(--beige-arena); padding-top: 3rem; }

.woocommerce table.shop_table{ border: none; border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th{ font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--beige-arena); padding: 0.8rem; }
.woocommerce table.shop_table td{ border-bottom: 1px solid var(--beige-arena); padding: 0.8rem; }
.woocommerce-checkout #payment{ background: var(--beige-arena) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{
  border: 1px solid var(--beige-arena); border-radius: 0; padding: 0.7rem; font-family: var(--font-sans); background: var(--blanco-roto);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; border-bottom: 1px solid var(--beige-arena); padding-bottom: 1rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a{ font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{ color: var(--verde-salvia); }
.woocommerce-form-login, .woocommerce-form-register{ max-width: 460px; margin: 0 auto; padding: 2.5rem; background: var(--beige-arena); }
.woocommerce-form-login input, .woocommerce-form-register input{ width: 100%; border: 1px solid var(--dorado-mate); padding: 0.8rem; margin-bottom: 1rem; background: var(--blanco-roto); font-family: var(--font-sans); }
.u-columns{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }

.site-footer{ background-color: var(--verde-salvia); color: var(--beige-arena); padding: 4rem 0 2rem; }
.site-footer a{ color: var(--beige-arena); }
.footer-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.footer-grid h4{ font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dorado-mate); margin-bottom: 1rem; }
.footer-bottom{ border-top: 1px solid rgba(231,224,212,0.25); padding-top: 1.5rem; font-size: 0.75rem; text-align: center; opacity: 0.8; }

.text-center{ text-align: center; }

@media (max-width: 780px){
  .values-grid{ grid-template-columns: 1fr; }
  .trust-badges{ grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .site-header .container{ flex-direction: column; gap: 1rem; }
  .main-navigation ul{ flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
  h1{ font-size: 2.2rem; }
  section{ padding: 3.5rem 0; }
}

/* ==========================================================================
   9. Categorias, foto de estilo de vida y newsletter
   ========================================================================== */
.categories-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.category-tile{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  background-color: var(--verde-salvia);
  background-size: cover;
  background-position: center;
  padding: 1.5rem;
  color: var(--blanco-roto);
}
.category-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43,47,44,0.55), rgba(43,47,44,0));
}
.category-tile span{
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.4rem;
}

.lifestyle-photo{
  min-height: 420px;
  background-color: var(--beige-arena);
  background-size: cover;
  background-position: center;
}

.newsletter{
  background-color: var(--beige-arena);
}
.newsletter-form{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.newsletter-form input[type="email"]{
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--dorado-mate);
  background: var(--blanco-roto);
  font-family: var(--font-sans);
  min-width: 260px;
}


/* ==========================================================================
   10. Accesibilidad y RGPD (v1.6)
   ========================================================================== */
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--verde-salvia); color: var(--blanco-roto);
  padding: 0.8rem 1.4rem; font-family: var(--font-sans); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus{ left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--verde-salvia);
  outline-offset: 2px;
}
.hero a:focus-visible, .site-footer a:focus-visible{ outline-color: var(--blanco-roto); }

.newsletter-consent{
  display: flex; gap: 0.6rem; align-items: flex-start;
  max-width: 520px; margin: 1.2rem auto 0; text-align: left;
  font-size: 0.72rem; line-height: 1.5; color: #565b56;
}
.newsletter-consent input[type="checkbox"]{ margin-top: 0.2rem; flex-shrink: 0; }
.newsletter-consent a{ text-decoration: underline; }

/* ==========================================================================
   11. Tienda: barra lateral de búsqueda y filtros (v1.7)
   ========================================================================== */
.shop-breadcrumb{ margin-bottom: 2rem; }
.shop-breadcrumb .woocommerce-breadcrumb{ font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #565b56; }

.shop-layout{ display: block; }
.shop-layout.has-sidebar{
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.shop-filters .filter-block{ margin-bottom: 2.2rem; }
.shop-filters h4{
  font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--verde-salvia);
  border-bottom: 1px solid var(--beige-arena); padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.shop-filters .widget{ margin-bottom: 0; }
.shop-filters ul{ list-style: none; margin: 0; padding: 0; }
.shop-filters ul li{ padding: 0.35rem 0; font-size: 0.88rem; }
.shop-filters ul ul{ padding-left: 1rem; }
.shop-filters .count{ color: #8a8f8a; font-size: 0.75rem; }

.shop-filters .woocommerce-product-search{ display: flex; gap: 0.5rem; }
.shop-filters .woocommerce-product-search .search-field{
  flex: 1; min-width: 0; border: 1px solid var(--beige-arena); border-radius: 0;
  padding: 0.6rem 0.8rem; background: var(--blanco-roto); font-family: var(--font-sans); font-size: 0.85rem;
}
.shop-filters .woocommerce-product-search button{
  border: 1px solid var(--verde-salvia); background: var(--verde-salvia); color: var(--blanco-roto);
  padding: 0.6rem 1rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; border-radius: 0;
}

.shop-filters .price_slider_amount{ display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-size: 0.8rem; }
.shop-filters .price_slider_amount .button{ padding: 0.5rem 1.1rem; font-size: 0.7rem; }
.shop-filters .widget_layered_nav_filters a{ font-size: 0.8rem; color: var(--verde-salvia); }
.shop-filters .widget_layered_nav_filters a::before{ content: "\00d7\0020"; }

@media (max-width: 900px){
  .shop-layout.has-sidebar{ grid-template-columns: 1fr; gap: 2rem; }
  .shop-filters{ background: var(--beige-arena); padding: 1.5rem; }
  .shop-filters .filter-block{ margin-bottom: 1.5rem; }
}

/* ==========================================================================
   12. Correcciones de rejilla y deslizador (v1.7.1)
   ========================================================================== */
ul.products::before, ul.products::after{ content: none !important; display: none !important; }

.shop-main ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
ul.products li.product{ width: auto !important; float: none !important; margin: 0 !important; }

@media (max-width: 1000px){
  .shop-main ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
  .shop-main ul.products{ grid-template-columns: 1fr !important; }
}

.shop-filters .price_slider_wrapper .ui-slider{ background: var(--beige-arena) !important; border: none !important; border-radius: 0; height: 4px; margin-bottom: 1.2rem; }
.shop-filters .price_slider_wrapper .ui-slider .ui-slider-range{ background: var(--verde-salvia) !important; border-radius: 0; }
.shop-filters .price_slider_wrapper .ui-slider .ui-slider-handle{
  background: var(--verde-salvia) !important; border: 2px solid var(--blanco-roto) !important;
  border-radius: 50%; width: 14px; height: 14px; top: -5px; cursor: pointer;
}
.shop-filters .price_slider_amount .button{ background: var(--verde-salvia) !important; color: var(--blanco-roto) !important; }

ul.products li.product .woocommerce-loop-product__title{ line-height: 1.35; overflow-wrap: anywhere; }

/* ==========================================================================
   13. Buscador de cabecera, mosaico editorial y Diario (v1.8)
   ========================================================================== */
.header-search{
  display: flex; align-items: center; flex: 1 1 260px; max-width: 380px;
  border: 1px solid var(--beige-arena); background: #fff;
}
.header-search input[type="search"]{
  flex: 1; min-width: 0; border: none; background: transparent;
  padding: 0.65rem 1rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--texto-oscuro);
}
.header-search input[type="search"]:focus{ outline: none; }
.header-search:focus-within{ border-color: var(--verde-salvia); }
.header-search button{
  border: none; background: transparent; color: var(--verde-salvia);
  padding: 0.55rem 0.9rem; cursor: pointer; display: flex; align-items: center;
}

.categories-mosaic{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: 1.2rem;
  margin-top: 3rem;
}
.categories-mosaic .category-tile{ min-height: 0; }
.categories-mosaic .tile-1{ grid-column: span 2; grid-row: span 2; }
.categories-mosaic .tile-1 span{ font-size: 1.8rem; }
.category-tile{ transition: filter 0.35s ease; }
.category-tile:hover{ filter: brightness(1.08); opacity: 1; }

@media (max-width: 900px){
  .categories-mosaic{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .categories-mosaic .tile-1{ grid-column: span 2; grid-row: span 1; }
}

.journal{ background: var(--blanco-roto); }
.journal-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem;
}
.journal-card a{ display: block; }
.journal-thumb{ overflow: hidden; margin-bottom: 1.2rem; }
.journal-thumb img{ aspect-ratio: 3/2; object-fit: cover; width: 100%; transition: transform 0.4s ease; }
.journal-card:hover .journal-thumb img{ transform: scale(1.03); }
.journal-card h3{ font-size: 1.25rem; margin-bottom: 0.5rem; }
.journal-card p{ font-size: 0.88rem; color: #565b56; margin-bottom: 0.6rem; }
.journal-more{
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--verde-salvia); border-bottom: 1px solid var(--verde-salvia); padding-bottom: 2px;
}
@media (max-width: 780px){
  .journal-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .header-search{ order: 3; flex-basis: 100%; max-width: none; }
}

/* ==========================================================================
   14. Artículo individual del Diario (v1.8.3)
   ========================================================================== */
.single-article .container{ max-width: 780px; }
.article-head{ text-align: center; margin-bottom: 2.5rem; }
.article-back{
  display: inline-block; margin-bottom: 1.5rem; font-family: var(--font-sans);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-salvia);
}
.article-head h1{ font-size: 2.4rem; line-height: 1.25; }
.article-meta{ font-family: var(--font-sans); font-size: 0.78rem; color: #8a8f8a; letter-spacing: 0.08em; text-transform: uppercase; }
.article-cover{ margin-bottom: 2.5rem; }
.article-cover img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.entry-content{ font-size: 1.02rem; line-height: 1.85; }
.entry-content h2{ font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.entry-content h3{ font-size: 1.2rem; margin: 1.8rem 0 0.8rem; color: var(--texto-oscuro); }
.entry-content p{ margin-bottom: 1.3rem; }
.entry-content a{ color: var(--verde-salvia); border-bottom: 1px solid var(--verde-salvia); }
.entry-content a:hover{ opacity: 0.75; }
.entry-content ul, .entry-content ol{ margin: 0 0 1.3rem 1.2rem; padding: 0; }
.entry-content li{ margin-bottom: 0.5rem; }
.entry-content img{ margin: 1.5rem 0; }
.entry-content em{ color: #565b56; }

.article-nav{
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--beige-arena);
  font-family: var(--font-sans); font-size: 0.85rem;
}
.article-nav a{ color: var(--verde-salvia); }

/* ==========================================================================
   15. Valoraciones estilo Vellune (v1.9)
   ========================================================================== */
.vellune-reviews{ margin-top: 3rem; }
.vellune-reviews .woocommerce-Reviews-title{ font-size: 1.6rem; margin-bottom: 1.5rem; }

.vellune-reviews-summary{
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.vellune-reviews-avg{
  font-family: var(--font-serif); font-size: 3rem; line-height: 1; color: var(--texto-oscuro);
}
.vellune-reviews-count{
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a8f8a;
}

.vellune-reviews .star-rating span::before,
.vellune-reviews .star-rating::before,
.vellune-reviews p.stars a{
  color: #b09a63;
}

.vellune-review-grid{
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem;
}
.vellune-review-card{
  border: 1px solid var(--beige-arena); background: #fff;
  padding: 1.5rem; display: flex; flex-direction: column;
}
.review-card-head{ display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.review-score{ font-family: var(--font-sans); font-size: 0.9rem; }
.review-author{ font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; margin: 0 0 0.15rem; }
.review-date{ font-family: var(--font-sans); font-size: 0.78rem; color: #8a8f8a; margin: 0 0 0.9rem; }
.review-verified{ color: var(--verde-salvia); }
.review-text{ font-size: 0.9rem; line-height: 1.65; color: #444844; }
.review-text p{ margin: 0 0 0.5rem; }

#review_form_wrapper{ max-width: 560px; margin-top: 2rem; }
#review_form .comment-reply-title{
  font-family: var(--font-serif); font-size: 1.3rem; display: block; margin-bottom: 1rem;
}
#review_form input[type="text"], #review_form input[type="email"],
#review_form textarea, #review_form select{
  width: 100%; border: 1px solid var(--beige-arena); background: var(--blanco-roto);
  padding: 0.7rem; font-family: var(--font-sans); border-radius: 0; margin-top: 0.3rem;
}
#review_form label{ font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.05em; }
.comment-form-rating{ margin-bottom: 1rem; }
.comment-form-rating p.stars{ margin: 0.4rem 0 0; }

@media (max-width: 780px){
  .vellune-review-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .vellune-review-grid{ grid-template-columns: 1fr; }
}