/* ==========================================================================
   Vella Boutique — Marco global: cabecera y pie (Fase Visual 2C)
   Alcance: exclusivamente .whb-header y .wd-footer.
   No toca el cuerpo de ninguna página, así que la Home sigue intacta.
   ========================================================================== */

.whb-header,
.wd-footer {
  --vella-tinta:     #340E21;
  --vella-oro:       #C8A259;
  --vella-magenta:   #D03982;
  --vella-rosa:      #F6D7E6;
  --vella-champagne: #F7EED9;
  --vella-blanco:    #FFFFFF;
  --vella-linea:     rgba(52, 14, 33, .12);
  --vella-serif:     "Baskervville", Baskerville, "Baskerville Old Face", Georgia, serif;
  --vella-script:    "Corinthia", "Snell Roundhand", cursive;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.whb-header {
  --wd-primary-color:    var(--vella-tinta);
  --wd-alternative-color: var(--vella-oro);
  --wd-link-color:       var(--vella-tinta);
  --wd-link-color-hover: var(--vella-oro);
  --wd-text-font:        var(--vella-serif);
  --wd-title-font:       var(--vella-serif);
}

/* El logotipo va centrado en su columna. */
.whb-header .whb-col-center {
  justify-content: center;
}

.whb-header .site-logo img {
  display: block;
}

/* Navegación */
.whb-header .wd-nav-main > li > a,
.whb-header .wd-nav-header > li > a {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vella-tinta);
}

.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-header > li > a:hover {
  color: var(--vella-oro);
}

.whb-header .wd-nav > li > a .wd-nav-arrow,
.whb-header .wd-nav > li > a::after {
  color: currentColor;
}

/* Submenús */
.whb-header .wd-dropdown-menu,
.whb-header .wd-sub-menu {
  border-top: 2px solid var(--vella-oro);
  box-shadow: 0 18px 44px -24px rgba(52, 14, 33, .45);
}

.whb-header .wd-sub-menu li > a {
  font-family: var(--vella-serif);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--vella-tinta);
  text-transform: none;
}

.whb-header .wd-sub-menu li > a:hover {
  color: var(--vella-oro);
}

/* Herramientas: cuenta, favoritos, carrito, búsqueda */
.whb-header .wd-tools-element > a,
.whb-header .wd-header-search > a,
.whb-header .wd-tools-element .wd-tools-icon,
.whb-header .wd-tools-element .wd-tools-text {
  color: var(--vella-tinta);
}

.whb-header .wd-tools-element > a:hover,
.whb-header .wd-tools-element > a:hover .wd-tools-icon,
.whb-header .wd-tools-element > a:hover .wd-tools-text,
.whb-header .wd-header-search > a:hover {
  color: var(--vella-oro);
}

.whb-header .wd-tools-element .wd-tools-text {
  font-family: var(--vella-serif);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Contador del carrito */
.whb-header .wd-cart-number {
  background: var(--vella-magenta);
  color: var(--vella-blanco);
  font-family: var(--vella-serif);
  font-size: 10px;
}

.whb-header .wd-cart-subtotal,
.whb-header .wd-cart-subtotal .amount {
  font-family: var(--vella-serif);
  color: var(--vella-tinta);
  font-size: 13px;
}

/* Sticky: un poco más compacto y con una línea inferior discreta. */
.whb-header.whb-sticked .whb-general-header {
  box-shadow: 0 1px 0 0 var(--vella-linea);
}

/* --------------------------------------------------------------------------
   Menú móvil
   -------------------------------------------------------------------------- */

.wd-side-hidden.wd-nav-mobile,
.wd-nav-mobile-wrapp {
  background: var(--vella-blanco);
}

.wd-nav-mobile li > a {
  font-family: var(--vella-serif);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--vella-tinta);
  border-bottom: 1px solid var(--vella-champagne);
}

.wd-nav-mobile li > a:hover {
  color: var(--vella-oro);
}

.wd-nav-mobile .wd-sub-menu li > a {
  font-size: 12.5px;
  color: rgba(52, 14, 33, .8);
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.wd-footer {
  --wd-primary-color:    var(--vella-tinta);
  --wd-link-color:       rgba(52, 14, 33, .72);
  --wd-link-color-hover: var(--vella-oro);
  --wd-text-font:        var(--vella-serif);
  --wd-title-font:       var(--vella-serif);
}

/* WoodMart pinta el fondo del pie desde sus propios ajustes, así que hace
   falta un selector algo más específico para imponer el champán de Vella. */
body .wd-footer.footer-container {
  background-color: var(--vella-champagne);
}

.wd-footer .main-footer {
  padding-top: 72px;
  padding-bottom: 72px;
}

/* El pie usa la misma rejilla CSS de 12 columnas que el resto del tema, así
   que el reparto se hace redefiniendo grid-template-columns y anulando el
   span que WoodMart pone en cada hijo. */
@media (min-width: 1025px) {
  .wd-footer .main-footer .footer-sidebar {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: 64px;
    align-items: start;
  }

  .wd-footer .main-footer .footer-sidebar > .footer-column {
    grid-column: auto;
    width: auto;
    max-width: none;
  }
}

.wd-footer .main-footer .footer-column:not(:has(.widget)) {
  display: none;
}

/* Bloque de marca */
.wd-footer .vella-footer-marca {
  max-width: 340px;
}

.wd-footer .vella-footer-logo {
  display: block;
  width: 178px;
  height: auto;
  margin: -18px 0 0 -14px;
}

.wd-footer .widget_custom_html .textwidget,
.wd-footer .widget_custom_html {
  margin: 0;
}

/* Columna Comprar */
.wd-footer .widget_nav_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-footer .widget_nav_menu li {
  padding: 6px 0;
}

.wd-footer .widget_nav_menu li a {
  font-size: 14.5px;
}

.wd-footer .widget-title,
.wd-footer .widgettitle {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vella-tinta);
  margin-bottom: 22px;
}

.wd-footer,
.wd-footer p,
.wd-footer li,
.wd-footer .widget {
  font-family: var(--vella-serif);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(52, 14, 33, .72);
}

.wd-footer a {
  color: rgba(52, 14, 33, .72);
  border-bottom: 1px solid transparent;
}

.wd-footer a:hover {
  color: var(--vella-oro);
  border-bottom-color: var(--vella-oro);
}

.wd-footer .wd-widget ul li {
  border: 0;
  padding: 5px 0;
}

/* Lema de marca — único uso de Corinthia en el marco. */
.wd-footer .vella-lema {
  font-family: var(--vella-script);
  font-size: 34px;
  line-height: 1.1;
  color: var(--vella-oro);
  margin: 6px 0 0;
}

/* Barra inferior */
.wd-footer .copyrights-wrapper {
  background: var(--vella-tinta);
  border-top: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  text-align: center;
}

.wd-footer .copyrights-wrapper,
.wd-footer .copyrights-wrapper p,
.wd-footer .copyrights-wrapper a {
  font-family: var(--vella-serif);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--vella-champagne);
}

.wd-footer .copyrights-wrapper a:hover {
  color: var(--vella-oro);
  border-bottom-color: var(--vella-oro);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .wd-footer .main-footer {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media (max-width: 768px) {
  .whb-header .wd-nav-main > li > a {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .wd-footer .main-footer {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .wd-footer .vella-lema {
    font-size: 30px;
  }

  .wd-footer .vella-footer-logo {
    width: 152px;
  }

  .wd-footer .main-footer .footer-column + .footer-column {
    margin-top: 34px;
  }
}

/* =============================================================================
   FASE 5B · Dirección de arte de la cabecera y mega menús
   No se rediseña la cabecera: se le da aire, se afina la navegación y se viste
   el panel del mega menú. Todo sigue acotado a .whb-header y a los bloques del
   propio menú.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Proporciones y aire
   -------------------------------------------------------------------------- */

/* Logotipo grande + cabecera compacta: se elimina el relleno vertical propio
   de la fila y la altura la fija un min-height ajustado a la tinta del logo.
   La fila es contenedor de posicionamiento para poder centrar geométricamente
   la columna central respecto a la página (ver bloque "Centrado real"). */
.whb-header .whb-general-header .whb-flex-row {
  min-height: 106px;
  padding-block: 0;
  position: relative;
}
.whb-header .whb-header-bottom .whb-flex-row {
  min-height: 50px;
  padding-block: 0;
  position: relative;
}

/* Cabecera fija al desplazar.
   El tema encoge esta fila a 78 px. Con el logotipo a tamaño completo la
   palabra se salía por debajo del header y quedaba flotando sobre el
   contenido. La fila se lleva a 86 px y el logotipo baja a una caja de
   130 px (palabra visible ≈ 93 × 64 px), que deja 11 px de aire arriba y
   abajo. Sigue siendo una barra compacta, pero la marca cabe entera. */
.whb-header.whb-sticked .whb-general-header .whb-flex-row {
  min-height: 86px;
  padding-block: 0;
}

/* --------------------------------------------------------------------------
   Centrado real
   El tema reparte la fila en tres columnas flexibles. Como la columna
   izquierda (buscador, 40 px) y la derecha (cuenta, deseos, carrito, 227 px)
   no pesan lo mismo, el centro del logotipo caía 101 px a la izquierda del
   centro de la pantalla. Se saca la columna central del flujo y se ancla al
   50 % de la fila, que es exactamente el centro de la página.
   -------------------------------------------------------------------------- */
.whb-header .whb-general-header .whb-flex-row > .whb-col-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  flex: 0 0 auto;
  z-index: 2;
}
.whb-header .whb-general-header .whb-flex-row { justify-content: space-between; }

/* La segunda fila sólo contiene la navegación (su segunda columna viene vacía
   del constructor). Se ancla igual, al centro real de la página. */
.whb-header .whb-header-bottom .whb-flex-row > .whb-column:empty { display: none; }
.whb-header .whb-header-bottom .whb-flex-row > .whb-col-left {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  flex: 0 0 auto;
  margin: 0;   /* el tema traía margin-left:-10px y descentraba el anclaje */
  padding: 0;
}
.whb-header .whb-header-bottom .wd-header-nav { padding-inline: 0; }

/* --------------------------------------------------------------------------
   FASE 5B.1 · Logotipo
   El archivo oficial mide 817 × 585 px pero la palabra ocupa sólo 585 × 373:
   un 28 % del ancho y un 36 % del alto son margen transparente. Por eso, con
   la caja anterior de 95 px, la marca se leía a 68 px y parecía pequeña.
   Se agranda la caja y se recupera el margen transparente con un margen
   negativo, de modo que la palabra crece sin que la cabecera engorde.
   El archivo no se toca: ni se recorta, ni se deforma, ni se regenera.
   -------------------------------------------------------------------------- */

.whb-header .site-logo img {
  max-height: none;
  /* el constructor del tema escribe max-width en el atributo style del <img>;
     por eso hace falta !important, no basta con especificidad */
  max-width: none !important;
  width: 198px !important;   /* palabra visible ≈ 142 px de ancho, 91 px de alto */
  height: auto;
  /* El tema fija la altura de .site-logo (93 px normal, 66 px fijo) y la
     imagen es más alta, así que se apoyaría en el borde superior y colgaría
     por abajo. El margen negativo simétrico la recentra: -(alto img - alto
     contenedor)/2. */
  margin-block: -29px;
  display: block;
  transition: width .3s cubic-bezier(.2, .7, .3, 1), margin-block .3s cubic-bezier(.2, .7, .3, 1);
}

.whb-header.whb-sticked .site-logo img {
  max-width: none !important;
  width: 130px !important;   /* palabra visible ≈ 93 × 66 px */
  margin-block: -19px;       /* recentrado sobre el contenedor de 66 px */
}

@media (max-width: 1024px) {
  .whb-header .site-logo img { max-width: none !important; width: 150px !important; margin-block: -18px; }
}

@media (max-width: 767px) {
  .whb-header .site-logo img { max-width: none !important; width: 122px !important; margin-block: -13px; }
  .whb-header.whb-sticked .site-logo img { max-width: none !important; width: 112px !important; margin-block: 0; }
}

/* La columna del logotipo no debe recortar el margen negativo. */
.whb-header .whb-col-center,
.whb-header .site-logo,
.whb-header .site-logo a { overflow: visible; }

/* --------------------------------------------------------------------------
   Navegación principal
   -------------------------------------------------------------------------- */

.whb-header .wd-nav-main > li > a,
.whb-header .wd-nav-header > li > a {
  font-size: 14px;
  letter-spacing: .2em;
  font-weight: 400;
  color: var(--vella-tinta);
  padding-block: 6px;
}

.whb-header .wd-nav-main > li { margin-inline: clamp(20px, 2.1vw, 30px); }  /* hueco real 60-80 px */

/* El grupo VESTIDOS · CONJUNTOS · FALDAS se centra respecto a la página. La
   columna que lo contiene ya está anclada al 50 % de la fila, así que aquí el
   ancho debe ser automático: si fuera 100 % volvería a depender del contenedor.
   Cada panel desplegable conserva su propia alineación. */
.whb-header .whb-header-bottom .wd-header-nav,
.whb-header .whb-header-bottom .wd-nav-main {
  justify-content: center;
  width: auto;
  flex-wrap: nowrap;
}
/* Los márgenes exteriores del primer y último elemento no cuentan para el
   centrado óptico del grupo: se recortan para que el centro del texto coincida
   con el centro de la página. */
/* Al centrar la navegación, los paneles anchos del mega menú (1080 y 880 px)
   quedaban colgando fuera del borde derecho: se posicionaban respecto a su
   propio elemento, que ahora vive más a la derecha. Se les devuelve como
   referencia la columna de navegación —que está anclada al centro de la
   página— y se centran sobre ella. El diseño del panel no se toca. */
.whb-header .whb-header-bottom .wd-nav-main > li:has(> .wd-dropdown-menu) { position: static; }
.whb-header .whb-header-bottom .wd-nav-main > li > .wd-dropdown-menu {
  /* El panel es más ancho que la columna que lo contiene, así que ni
     "margin: auto" ni "right: 0" lo centran: en una caja sobrerrestringida el
     navegador se queda con "left". Y el desplazamiento no puede ir en
     transform, porque el tema escribe ahí su animación de apertura y lo
     borraba —de ahí el salto a la derecha al abrir el menú—.

     La solución es la propiedad "translate", que es independiente de
     "transform": ambas se aplican a la vez, así que el centrado sobrevive a la
     animación del tema. */
  left: 50%;
  right: auto;
  margin-inline: 0;
  translate: -50% 0;
  max-width: calc(100vw - 40px);
}

.whb-header .whb-header-bottom .wd-nav-main > li:first-child { margin-left: 0; }
.whb-header .whb-header-bottom .wd-nav-main > li:last-child  { margin-right: 0; }

/* Subrayado fino que crece desde el centro en lugar del hover plano. */
.whb-header .wd-nav-main > li > a .nav-link-text { position: relative; }
.whb-header .wd-nav-main > li > a .nav-link-text::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 0; height: 1px;
  background: var(--vella-oro);
  transform: translateX(-50%);
  transition: width .34s cubic-bezier(.2, .7, .3, 1);
}
.whb-header .wd-nav-main > li:hover > a .nav-link-text::after,
.whb-header .wd-nav-main > li.current-menu-item > a .nav-link-text::after,
.whb-header .wd-nav-main > li.current-menu-ancestor > a .nav-link-text::after { width: 100%; }

/* La flecha del submenú: casi un susurro. No debe parecer un desplegable de
   formulario. */
.whb-header .wd-nav-main > li > a .wd-nav-arrow {
  opacity: .28;
  font-size: .58em;
  transform: scale(.5);
  margin-left: -1px;
  transition: opacity .3s ease;
}
.whb-header .wd-nav-main > li:hover > a .wd-nav-arrow { opacity: .8; }

/* --------------------------------------------------------------------------
   Panel del mega menú
   -------------------------------------------------------------------------- */

.whb-header .wd-dropdown-menu.wd-design-sized,
.whb-header .wd-dropdown.wd-design-sized {
  border-top: 1px solid var(--vella-oro);
  box-shadow: 0 26px 60px -30px rgba(52, 14, 33, .40);
  background: var(--vella-blanco);
  padding: 0;
}

/* El panel lleva altura fija: si no, la fotografía vertical lo estira hasta
   ocupar casi toda la pantalla. */
.vm {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: 0;
  align-items: stretch;
  height: 430px;
  font-family: var(--vella-serif);
}

.vm-conjuntos { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); height: 380px; }

.vm-col { padding: 0; min-width: 0; --width: 100%; }

.vm-col-enlaces {
  padding: clamp(28px, 2.4vw, 44px) clamp(26px, 2.4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vm-titulo .elementor-heading-title {
  font-family: var(--vella-serif);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vella-oro);
  margin: 0 0 20px;
}

.vm-enlaces ul.vh-lista { list-style: none; margin: 0; padding: 0; }
.vm-enlaces ul.vh-lista li { margin: 0; }
.vm-enlaces ul.vh-lista li + li { margin-top: 2px; }

.vm-enlaces ul.vh-lista li a {
  display: block;
  font-family: var(--vella-serif);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--vella-tinta);
  text-decoration: none;
  padding: 5px 0;
  transition: color .28s ease, padding-left .28s cubic-bezier(.2, .7, .3, 1);
}
.vm-enlaces ul.vh-lista li a:hover {
  color: var(--vella-oro);
  padding-left: 10px;
}

.vm-cta { margin-top: 24px; }
.vm-cta .elementor-button {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--vella-serif);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vella-tinta);
}
.vm-cta .elementor-button-text::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  color: var(--vella-oro);
  transform: translateX(0);
  transition: transform .3s ease;
}
.vm-cta .elementor-button:hover { color: var(--vella-magenta); background: transparent; }
.vm-cta .elementor-button:hover .elementor-button-text::after { transform: translateX(6px); }

.vm-col-foto { position: relative; overflow: hidden; }
.vm-foto, .vm-foto .elementor-widget-container, .vm-foto figure { margin: 0; height: 100%; }
.vm-foto img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 16%;
  transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}
.vm-col-foto:hover .vm-foto img { transform: scale(1.04); }

.vm-pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(52, 14, 33, .58), rgba(52, 14, 33, 0));
  pointer-events: none;
}
.vm-pie .elementor-heading-title {
  font-family: var(--vella-serif);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

@media (max-width: 1024px) {
  .vm { grid-template-columns: 1fr; }
  .vm-col-foto { display: none; }
}

/* --------------------------------------------------------------------------
   Menú móvil
   -------------------------------------------------------------------------- */

.wd-nav-mobile li > a {
  letter-spacing: .14em;
  padding-block: 13px;
}
.wd-nav-mobile .wd-sub-menu li > a {
  letter-spacing: .04em;
  text-transform: none;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Restos del demo en el panel lateral móvil
   El cajón del menú móvil seguía mostrando iconos sociales del demo Cosmetics,
   con enlaces que no pertenecen a Vella. Tu instrucción desde la fase 2C es no
   mostrar redes sin URL real, así que quedan ocultos hasta que existan las
   cuentas. No se borra nada: basta con retirar esta regla para recuperarlos.
   -------------------------------------------------------------------------- */

.wd-side-hidden .wd-social-icons,
.wd-side-hidden .wd-social-icon { display: none; }

/* ==========================================================================
   TARJETAS DE PRODUCTO · altura uniforme
   Los archivos del catálogo llegan con proporciones distintas (de 4:3 a 1:1,9),
   así que en una misma rejilla unas fichas quedaban 160 px más altas que otras.
   Aquí se fija un contenedor 2:3 idéntico para todas y la fotografía se
   encuadra dentro con object-fit: cover.

   Alcance: cualquier rejilla de productos del sitio —tienda, categorías,
   resultados de búsqueda, relacionados, portada—. NO afecta a la galería de
   la ficha de producto, que usa otra estructura (.woocommerce-product-gallery).
   Los archivos originales no se modifican: todo el recorte es de presentación.
   ========================================================================== */

.wd-product .product-element-top {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

/* WooCommerce envuelve la miniatura en un enlace sin altura propia: sin esto
   el height:100% de la imagen no tiene contra qué resolverse. */
.wd-product .product-element-top .wd-product-img-link,
.wd-product .product-element-top .product-image-link {
  display: block;
  height: 100%;
}

.wd-product .product-element-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;   /* deja la cara arriba y recorta por los pies */
}

/* La segunda fotografía (la que aparece al pasar el cursor) sigue la misma
   regla para que el intercambio no cambie de tamaño. */
.wd-product .product-element-top .wd-product-hover img,
.wd-product .product-element-top .hover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* Listas de producto de la barra lateral y del pie (Novedades, vistos
   recientemente, carrito): misma proporción 2:3 que las tarjetas, para que las
   miniaturas no bailen de altura entre una fila y otra. */
.product_list_widget li .widget-product-img,
.product_list_widget li > a:first-child { display: block; }

.product_list_widget li img {
  width: 66px;
  height: 99px;
  object-fit: cover;
  object-position: 50% 18%;
}