/* ==========================================================================
   VELLA BOUTIQUE · Fase 6A
   Banda superior de tienda y categorías.

   Ámbito estricto: todo cuelga de .vella-tienda .wd-page-title, una clase que
   sólo se añade en la tienda y en las taxonomías de producto. Nada de aquí
   alcanza la portada, la cabecera, el pie ni la ficha de producto.
   ========================================================================== */

.vella-tienda {
  --v-tinta:     #340E21;
  --v-oro:       #C8A259;
  --v-champagne: #F7EED9;
  --v-rosa:      #F6D7E6;
  --v-durazno:   #F7CFB8;
  --v-serif:     "Baskervville", Baskerville, "Baskerville Old Face", Georgia, serif;
}

/* --------------------------------------------------------------------------
   La franja
   -------------------------------------------------------------------------- */

.vella-tienda .wd-page-title {
  min-height: 306px;
  padding-block: clamp(40px, 4.2vw, 62px);
  display: flex;
  align-items: center;
  background-color: transparent;
  border: 0;
}

/* PROVISIONAL — fondo de marca sin imagen.
   La fotografía del demo (cosmetics-page-title.jpg) se retira aquí. En su
   lugar queda un suelo champagne construido sólo con la paleta: no se ha
   elegido ninguna imagen sustituta. Cuando exista el fondo Vella aprobado,
   basta con retirar el background-image:none y apuntar el ajuste del tema al
   nuevo adjunto. */
.vella-tienda .wd-page-title-bg {
  background-image: none !important;
  background-color: transparent !important;
  opacity: 1 !important;
}
/* El tema no pinta el fondo con CSS: inserta un <img> dentro de esa capa.
   Por eso no bastaba con anular background-image. */
.vella-tienda .wd-page-title-bg img { display: none !important; }
.vella-tienda .wd-page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(112% 82% at 12% 0%,   rgba(247, 238, 217, .95) 0%, rgba(247, 238, 217, 0) 64%),
    radial-gradient(84%  70% at 88% 100%, rgba(246, 215, 230, .42) 0%, rgba(246, 215, 230, 0) 60%),
    radial-gradient(60%  90% at 98% 18%,  rgba(247, 207, 184, .34) 0%, rgba(247, 207, 184, 0) 62%),
    #FDFBF7;
  z-index: 0;
}
.vella-tienda .wd-page-title { position: relative; }
.vella-tienda .wd-page-title > .container { position: relative; z-index: 1; }

/* Sin velo oscuro: el fondo ya es claro. */
.vella-tienda .wd-page-title .wd-page-title-overlay,
.vella-tienda .wd-page-title::after { display: none !important; }

/* --------------------------------------------------------------------------
   Título
   -------------------------------------------------------------------------- */

.vella-tienda .wd-page-title .wd-title-wrapp {
  display: block;
  text-align: center;
}

/* Antetítulo de marca. Es decorativo: el h1 sigue siendo el título real. */
.vella-tienda .wd-page-title .wd-title-wrapp::before {
  content: "Vella Boutique";
  display: block;
  font-family: var(--v-serif);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--v-oro);
  margin-bottom: 16px;
}

.vella-tienda .wd-page-title .entry-title,
.vella-tienda .wd-page-title h1 {
  font-family: var(--v-serif);
  font-weight: 400;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.06;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-tinta);
  margin: 0;
}

/* Filete dorado bajo el título. */
.vella-tienda .wd-page-title .wd-title-wrapp::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--v-oro);
}

/* La flecha de retroceso apuntaba a "#": no navegaba a ninguna parte, así que
   se retira en lugar de dejarla como adorno. */
.vella-tienda .wd-page-title .wd-back-btn { display: none !important; }

/* --------------------------------------------------------------------------
   Navegación de categorías
   -------------------------------------------------------------------------- */

/* El tema esconde esta lista por debajo de 1025 px y la sustituye por un
   botón "Categorías". Con tres palabras cortas eso sobra: la navegación se
   muestra siempre y el botón desaparece de esta franja. */
.vella-tienda .wd-page-title .wd-btn-show-cat { display: none !important; }
.vella-tienda .wd-page-title .wd-nav-product-cat {
  display: flex !important;
  flex-direction: row !important;   /* el acordeón del tema la ponía en columna */
  justify-content: center;
  margin-top: clamp(26px, 2.6vw, 38px);
  gap: clamp(22px, 3vw, 46px);
  flex-wrap: wrap;
  row-gap: 14px;
}

.vella-tienda .wd-page-title .wd-nav-product-cat > li > a {
  font-family: var(--v-serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v-tinta);
  padding-block: 6px;
  transition: color .3s ease;
}
.vella-tienda .wd-page-title .wd-nav-product-cat > li > a:hover,
.vella-tienda .wd-page-title .wd-nav-product-cat > li.current-cat > a,
.vella-tienda .wd-page-title .wd-nav-product-cat > li.current-cat-ancestor > a { color: var(--v-oro); }

/* Filete dorado bajo la categoría activa. */
.vella-tienda .wd-page-title .wd-nav-product-cat > li > a .nav-link-text { position: relative; }
.vella-tienda .wd-page-title .wd-nav-product-cat > li > a .nav-link-text::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 0; height: 1px;
  background: var(--v-oro);
  transform: translateX(-50%);
  transition: width .34s cubic-bezier(.2, .7, .3, 1);
}
.vella-tienda .wd-page-title .wd-nav-product-cat > li:hover > a .nav-link-text::after,
.vella-tienda .wd-page-title .wd-nav-product-cat > li.current-cat > a .nav-link-text::after,
.vella-tienda .wd-page-title .wd-nav-product-cat > li.current-cat-ancestor > a .nav-link-text::after { width: 100%; }

/* El conteo de productos no se borra en ninguna parte: sólo deja de mostrarse
   en esta franja, que vende estilo y no inventario. */
.vella-tienda .wd-page-title .wd-nav-product-cat .nav-link-count { display: none !important; }

/* Orden de lectura de la marca: Vestidos primero. Es una reordenación
   puramente visual —flex order—: no se toca el orden real de las categorías
   en WooCommerce ni ningún metadato de los términos. */
/* En modo acordeón el tema estira cada elemento a todo el ancho. */
.vella-tienda .wd-page-title .wd-nav-product-cat > li {
  width: auto !important;
  flex: 0 0 auto !important;   /* el acordeón fijaba flex:1 1 100% */
  border: 0 !important;
}
/* La franja lista sólo las tres ramas: las subcategorías viven en el mega
   menú, y así el acordeón móvil no las vuelca dentro de la banda. */
.vella-tienda .wd-page-title .wd-nav-product-cat .children,
.vella-tienda .wd-page-title .wd-nav-product-cat .wd-sub-menu { display: none !important; }

.vella-tienda .wd-page-title .wd-nav-product-cat > li { order: 4; }
.vella-tienda .wd-page-title .wd-nav-product-cat > li.cat-item-74 { order: 1; }  /* Vestidos  */
.vella-tienda .wd-page-title .wd-nav-product-cat > li.cat-item-79 { order: 2; }  /* Conjuntos */
.vella-tienda .wd-page-title .wd-nav-product-cat > li.cat-item-84 { order: 3; }  /* Faldas    */

/* Ningún icono en esta navegación: es tipográfica. */
.vella-tienda .wd-page-title .wd-nav-product-cat img,
.vella-tienda .wd-page-title .wd-nav-product-cat svg,
.vella-tienda .wd-page-title .wd-nav-product-cat .wd-cat-image { display: none !important; }

/* Botón "Categorías" (acordeón móvil del tema). */
.vella-tienda .wd-page-title .wd-btn-show-cat > a {
  font-family: var(--v-serif);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v-tinta);
}

/* --------------------------------------------------------------------------
   Migas de pan: se conservan donde están, sólo con color de marca.
   -------------------------------------------------------------------------- */

.vella-tienda .woocommerce-breadcrumb,
.vella-tienda .wd-breadcrumbs {
  font-family: var(--v-serif);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(52, 14, 33, .55);
}
.vella-tienda .woocommerce-breadcrumb a,
.vella-tienda .wd-breadcrumbs a { color: rgba(52, 14, 33, .78); }
.vella-tienda .woocommerce-breadcrumb a:hover,
.vella-tienda .wd-breadcrumbs a:hover { color: var(--v-oro); }

/* --------------------------------------------------------------------------
   Tablet y móvil
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .vella-tienda .wd-page-title { min-height: 278px; }
}

@media (max-width: 767px) {
  .vella-tienda .wd-page-title {
    min-height: 244px;
    padding-block: 34px;
  }
  .vella-tienda .wd-page-title .entry-title,
  .vella-tienda .wd-page-title h1 { font-size: clamp(32px, 10vw, 42px); }
  .vella-tienda .wd-page-title .wd-title-wrapp::before { font-size: 10px; margin-bottom: 12px; }
  .vella-tienda .wd-page-title .wd-title-wrapp::after { margin-top: 16px; }

  /* Las tres categorías no se comprimen: si no caben, la fila se desliza. */
  .vella-tienda .wd-page-title .wd-nav-product-cat {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 26px;
    padding-inline: 4px;
    margin-top: 22px;
    -webkit-overflow-scrolling: touch;
  }
  .vella-tienda .wd-page-title .wd-nav-product-cat::-webkit-scrollbar { display: none; }
  .vella-tienda .wd-page-title .wd-nav-product-cat > li { flex: 0 0 auto; }
  .vella-tienda .wd-page-title .wd-nav-product-cat > li > a { font-size: 12px; letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .vella-tienda .wd-page-title .wd-nav-product-cat > li > a .nav-link-text::after { transition: none; }
}