/* ============================================================
 * DOBLEVE - Catalogo WooCommerce v2
 * Capa aislada para tienda, categorias y etiquetas de producto.
 * ============================================================ */

body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag,
body.tax-product_brand,
body.tax-yith_product_brand,
body.tax-pa_marca {
  /* El ancho sale de --dv-ancho-pagina, definido una sola vez en el
     :root de style.css. Asi la tienda, el encabezado y cualquier otra
     seccion arrancan y terminan exactamente a la misma altura. */
  --dv-catalog-max: var(--dv-ancho-pagina, 1720px);
  --dv-sidebar-width: 230px;
}

/* Estructura general */
body.post-type-archive-product .site.grid-container,
body.tax-product_cat .site.grid-container,
body.tax-product_tag .site.grid-container,
body.tax-product_brand .site.grid-container,
body.tax-yith_product_brand .site.grid-container,
body.tax-pa_marca .site.grid-container {
  max-width: var(--dv-catalog-max) !important;
  padding-inline: var(--dv-aire-lateral, clamp(16px, 3vw, 48px));
}

body.post-type-archive-product .site-content,
body.tax-product_cat .site-content,
body.tax-product_tag .site-content,
body.tax-product_brand .site-content,
body.tax-yith_product_brand .site-content,
body.tax-pa_marca .site-content {
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 4vw, 60px) !important;
}

body.post-type-archive-product .content-area,
body.tax-product_cat .content-area,
body.tax-product_tag .content-area,
body.tax-product_brand .content-area,
body.tax-yith_product_brand .content-area,
body.tax-pa_marca .content-area {
  min-width: 0;
}

body.post-type-archive-product .inside-article,
body.tax-product_cat .inside-article,
body.tax-product_tag .inside-article,
body.tax-product_brand .inside-article,
body.tax-yith_product_brand .inside-article,
body.tax-pa_marca .inside-article {
  padding: 0 !important;
}

/* Encabezado del catalogo */
.woocommerce-products-header {
  margin-bottom: 24px;
}

.woocommerce-products-header .woocommerce-products-header__title.page-title {
  margin: 0;
  color: var(--grafito);
  font-family: "gazzetta-variable", sans-serif !important;
  font-size: clamp(54px, 7vw, 104px) !important;
  font-weight: 800;
  line-height: .82 !important;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.woocommerce .woocommerce-breadcrumb {
  margin: 0 0 18px;
  color: var(--humo);
  font: 500 12px/1.4 "Montserrat", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin: 0 0 24px;
}

.woocommerce .woocommerce-result-count {
  color: var(--humo);
  font: 500 13px/44px "Montserrat", sans-serif;
}

.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--borde);
  border-radius: 0;
  background-color: var(--blanco);
  color: var(--grafito);
  font: 500 13px/1 "Montserrat", sans-serif;
}

.woocommerce .woocommerce-ordering select:focus-visible {
  border-color: var(--cobalto);
  outline: 2px solid color-mix(in srgb, var(--cobalto) 22%, transparent);
  outline-offset: 2px;
}

/* Grilla: tres columnas en desktop, dos en mobile. */
.woocommerce ul.products,
.woocommerce-page ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tarjeta */
.woocommerce ul.products li.product .dobleve-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: var(--blanco);
  box-shadow: none;
  cursor: default;
  transition: border-color .2s ease, transform .2s ease;
}

@media (hover: hover) {
  .woocommerce ul.products li.product .dobleve-card:hover {
    border-color: color-mix(in srgb, var(--grafito) 28%, var(--borde));
    box-shadow: none;
    transform: translateY(-2px);
  }
}

/* Etiqueta de categoria.
   Dentro de Armazones las 46 tarjetas dicen "ARMAZONES": es una
   linea que se repite identica y no ayuda a elegir. El prototipo
   no la tiene. Para recuperarla, borra el display:none. */
.woocommerce ul.products li.product .dobleve-tag {
  display: none;
}

/* Caja de imagen.
   Las fotos de producto son cuadradas de 1024x1024 y el armazon
   ocupa solo el 35% de la altura, centrado, con el resto en blanco.
   Con object-fit:contain ese aire viaja siempre y el producto se ve
   chico, no importa que proporcion tenga la caja: contain respeta el
   cuadrado completo del archivo.

   Con cover + una caja apaisada el recorte se lleva ese aire. Como
   la foto es cuadrada y la caja es mas ancha que alta, el recorte es
   SIEMPRE vertical, nunca horizontal: no hay forma de cortar una
   patilla por ancho que sea el modelo. 16/10 conserva el 62% central,
   asi que sobra margen incluso para monturas fotografiadas de cerca.

   El fondo va en blanco, no en gris: las fotos traen fondo blanco
   propio y no todas ocupan lo mismo, asi que sobre gris se veian
   como un recuadro blanco flotando, distinto en cada tarjeta. */
.woocommerce ul.products li.product .dobleve-card-image {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: var(--blanco);
}

.woocommerce ul.products li.product .dobleve-card-image img,
body.post-type-archive-product ul.products li.product .dobleve-card-image img,
body.tax-product_cat ul.products li.product .dobleve-card-image img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  object-fit: cover !important;
  object-position: center;
  transition: transform .28s ease;
}

@media (hover: hover) {
  .woocommerce ul.products li.product .dobleve-card:hover .dobleve-card-image img {
    transform: scale(1.025);
  }
}

/* text-align:left es a proposito: WooCommerce trae por defecto
   .woocommerce ul.products li.product { text-align: center } y sin
   esto la leyenda de cristales sale centrada mientras el resto va
   a la izquierda. */
.woocommerce ul.products li.product .dobleve-card-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
  color: var(--grafito);
  text-align: left;
}

.woocommerce ul.products li.product .dobleve-brand-wrap {
  min-height: 17px;
  margin: 0 0 5px;
}

.woocommerce ul.products li.product .dobleve-brand,
.woocommerce ul.products li.product .dobleve-brand a {
  margin: 0;
  color: var(--humo);
  font: 600 11px/1.35 "Montserrat", sans-serif;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}

.woocommerce ul.products li.product .dobleve-brand:hover,
.woocommerce ul.products li.product .dobleve-brand a:hover {
  color: var(--cobalto);
}

/* Titulo, precio, cuotas y leyenda apilados, como el pie de tarjeta
   del prototipo. Antes titulo y precio compartian fila; con nombres
   largos el precio quedaba apretado contra el borde. */
.woocommerce ul.products li.product .dobleve-title-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.woocommerce ul.products li.product .dobleve-title-price > * {
  min-width: 0;
  max-width: 100%;
}

.woocommerce ul.products li.product .dobleve-title-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.woocommerce ul.products li.product .dobleve-title {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--grafito);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.woocommerce ul.products li.product .dobleve-title-link:hover .dobleve-title {
  color: var(--cobalto);
}

/* El precio pasa de cobalto a tinta oscura. En el prototipo el azul
   es un acento -enlaces, el tilde, el foco-, no el color de todo:
   con el precio azul Y el boton azul habia dos elementos peleando
   por la misma atencion. Para volver atras, cambia el color por
   var(--cobalto) aca y en el boton. */
.woocommerce ul.products li.product .dobleve-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
  margin-top: 2px;
}

.woocommerce ul.products li.product .dobleve-price,
.woocommerce ul.products li.product .dobleve-price .amount,
.woocommerce ul.products li.product .dobleve-price ins .amount {
  color: var(--grafito);
  font: 700 clamp(16px, 1.1vw, 19px)/1.25 "Montserrat", sans-serif;
}

.woocommerce ul.products li.product .dobleve-price del,
.woocommerce ul.products li.product .dobleve-price del .amount {
  color: var(--humo);
  font-size: 12px;
  font-weight: 500;
  opacity: .55;
}

.woocommerce ul.products li.product .dobleve-price ins {
  background: transparent;
  text-decoration: none;
}

/* Linea de cuotas. La emite content-product.php; si algun dia sacas
   ese template, simplemente no aparece y nada mas cambia. */
.woocommerce ul.products li.product .dv-card-cuotas {
  display: block;
  margin: 1px 0 0;
  color: #0E8F5A;
  font: 600 11.5px/1.35 "Montserrat", sans-serif;
}

/* Leyenda de cristales, con el tilde del prototipo.
   El simbolo se agrega por CSS para no tocar el PHP. */
.woocommerce ul.products li.product .dobleve-incluye-filtro {
  display: flex !important;
  width: 100% !important;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0 !important;
  padding-top: 9px;
  border-top: 1px dashed var(--borde);
  color: var(--humo);
  font: 500 11px/1.35 "Montserrat", sans-serif !important;
  text-align: left !important;
  opacity: .85;
}

.woocommerce ul.products li.product .dobleve-incluye-filtro::before {
  content: '\2713';
  flex: 0 0 auto;
  color: var(--cobalto);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.woocommerce ul.products li.product .dobleve-card-notice {
  min-height: 18px;
  margin: 7px 0 0;
  color: var(--humo);
  font: 500 12px/1.45 "Montserrat", sans-serif;
}

.woocommerce ul.products li.product .dobleve-actions {
  display: block;
  margin-top: auto;
  padding-top: 16px;
}

.woocommerce ul.products li.product .dobleve-btn-primary,
.woocommerce ul.products li.product a.button.dobleve-btn-primary {
  display: flex !important;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--grafito) !important;
  border-radius: 0 !important;
  background: var(--grafito) !important;
  box-shadow: none !important;
  color: var(--blanco) !important;
  font: 600 12px/1 "Montserrat", sans-serif !important;
  letter-spacing: .07em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease;
}

.woocommerce ul.products li.product a.button.dobleve-btn-primary:hover {
  background: var(--cobalto) !important;
  border-color: var(--cobalto) !important;
  color: var(--blanco) !important;
}

.woocommerce ul.products li.product a.button.dobleve-btn-primary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cobalto) 30%, transparent);
  outline-offset: 3px;
}

/* Oferta */
.woocommerce ul.products li.product .onsale {
  top: 12px;
  right: 12px;
  left: auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px 9px;
  border-radius: 0;
  background: var(--magma);
  box-shadow: none;
  color: var(--blanco);
  font: 700 10px/1 "Montserrat", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sidebar y filtros nativos de WooCommerce */
.woocommerce.archive .widget-area {
  flex: 0 0 var(--dv-sidebar-width);
  width: var(--dv-sidebar-width);
}

.woocommerce.archive .widget-area .widget {
  padding: 0;
  background: transparent;
}

.woocommerce.archive .wc-block-product-filters {
  width: 100%;
  color: var(--grafito);
  font-family: "Montserrat", sans-serif;
}

.woocommerce.archive .wc-block-product-filters h2 {
  margin: 0 0 20px;
  color: var(--grafito);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.woocommerce.archive .wc-block-product-filters h3 {
  margin: 0 0 12px;
  color: var(--grafito);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.woocommerce.archive .wc-block-product-filters__overlay-content {
  gap: 22px;
}

.woocommerce.archive .wc-block-product-filter-checkbox-list__items {
  gap: 9px;
}

.woocommerce.archive .wc-block-product-filter-checkbox-list__label {
  color: var(--humo);
  font-size: 14px;
}

.woocommerce.archive input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
  border-radius: 0;
}

.woocommerce.archive .wc-block-product-filter-price-slider .text input[type="text"] {
  max-width: 86px;
  padding: 8px;
  border-color: var(--borde);
  border-radius: 0;
  background: var(--blanco);
}

.woocommerce.archive .wc-block-product-filter-price-slider {
  --wc-product-filter-price-slider: var(--cobalto);
  --wc-product-filter-price-slider-handle-border: var(--cobalto);
}

.woocommerce.archive .wc-block-product-filter-clear-button .wp-block-button__link {
  min-height: 40px;
  border-color: var(--borde);
  border-radius: 0;
  background: var(--blanco);
  color: var(--grafito);
  font-size: 11px;
}

.woocommerce.archive .wc-block-product-filter-removable-chips__item {
  border-radius: 0;
  border-color: var(--borde);
  background: var(--bg-img);
}

/* Paginacion */
.woocommerce nav.woocommerce-pagination {
  margin-top: 40px;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--borde);
  color: var(--grafito);
  font: 600 13px/1 "Montserrat", sans-serif;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--cobalto);
  background: var(--cobalto);
  color: var(--blanco);
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .woocommerce.archive .widget-area {
    flex: 0 0 220px;
    width: 220px;
  }
}

@media (max-width: 768px) {
  body.post-type-archive-product .site.grid-container,
  body.tax-product_cat .site.grid-container,
  body.tax-product_tag .site.grid-container,
  body.tax-product_brand .site.grid-container,
  body.tax-yith_product_brand .site.grid-container,
  body.tax-pa_marca .site.grid-container {
    padding-inline: 14px;
  }

  body.post-type-archive-product .site-content,
  body.tax-product_cat .site-content,
  body.tax-product_tag .site-content,
  body.tax-product_brand .site-content,
  body.tax-yith_product_brand .site-content,
  body.tax-pa_marca .site-content {
    display: block;
    padding-top: 24px !important;
  }

  .woocommerce-products-header .woocommerce-products-header__title.page-title {
    font-size: clamp(48px, 18vw, 72px) !important;
  }

  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering {
    float: none;
    width: 100%;
  }

  .woocommerce .woocommerce-result-count {
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .woocommerce .woocommerce-ordering select {
    width: 100%;
  }

  .woocommerce.archive .widget-area {
    width: 100%;
    margin: 18px 0 0;
  }

  .woocommerce.archive .wc-block-product-filters__open-overlay {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border: 1px solid var(--grafito);
    border-radius: 0;
    font: 600 12px/1 "Montserrat", sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .woocommerce.archive .wc-block-product-filters__overlay-dialog {
    border-radius: 0;
  }

  .woocommerce.archive .wc-block-product-filters__close-overlay,
  .woocommerce.archive .wc-block-product-filters__apply {
    border-radius: 0;
  }

  .woocommerce ul.products li.product .dobleve-card-info {
    padding: 14px;
  }

  .woocommerce ul.products li.product .dobleve-price,
  .woocommerce ul.products li.product .dobleve-price .amount,
  .woocommerce ul.products li.product .dobleve-price ins .amount {
    font-size: 15.5px;
  }

  .woocommerce ul.products li.product .dv-card-cuotas {
    font-size: 10.5px;
  }

  .woocommerce ul.products li.product .dobleve-incluye-filtro {
    font-size: 10px !important;
    padding-top: 8px;
  }

  .woocommerce ul.products li.product .dobleve-card-notice {
    min-height: 34px;
    font-size: 11px;
  }

  .woocommerce ul.products li.product .dobleve-btn-primary,
  .woocommerce ul.products li.product a.button.dobleve-btn-primary {
    min-height: 42px;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 380px) {
  body.post-type-archive-product .site.grid-container,
  body.tax-product_cat .site.grid-container {
    padding-inline: 10px;
  }

  .woocommerce ul.products,
  .woocommerce-page ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products {
    gap: 10px !important;
  }

  .woocommerce ul.products li.product .dobleve-card-info {
    padding: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product .dobleve-card,
  .woocommerce ul.products li.product .dobleve-card-image img,
  .woocommerce ul.products li.product .dobleve-btn-primary {
    transition: none;
  }
}

/* ============================================================
 * Bajada bajo el titulo de la tienda
 * ============================================================
 * Vale tanto para .dv-shop-intro (la bajada por defecto que emite
 * functions.php) como para .term-description (la descripcion que
 * cargues en Productos > Categorias). Se ven iguales, asi que
 * podes escribir una propia sin que cambie el diseno.
 */
.woocommerce .dv-shop-intro,
.woocommerce .term-description,
.woocommerce .term-description p {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--humo);
  font: 400 15px/1.6 "Montserrat", sans-serif;
}

.woocommerce .term-description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .woocommerce .dv-shop-intro,
  .woocommerce .term-description,
  .woocommerce .term-description p {
    font-size: 14px;
    line-height: 1.55;
  }
}


/* ============================================================
 * "Comprar es simple" - los tres pasos
 * ============================================================ */

/* Franja a lo ancho de la pagina, igual que el encabezado: el
   __inner comparte el mismo ancho maximo y el mismo aire lateral,
   asi "Comprar es simple" arranca en la misma linea vertical que
   "ARMAZONES" alla arriba. */
.dv-pasos {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borde);
  background: var(--blanco);
  clear: both;
}

.dv-pasos__inner {
  max-width: var(--dv-ancho-pagina, 1720px);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) var(--dv-aire-lateral, clamp(16px, 3vw, 48px)) clamp(44px, 5vw, 68px);
}

.dv-pasos__head {
  margin-bottom: 24px;
}

.dv-pasos__titulo {
  margin: 0;
  color: var(--grafito);
  font-family: "gazzetta-variable", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.dv-pasos__bajada {
  margin: 8px 0 0;
  color: var(--dv-texto, #6B6B72);
  font: 400 14px/1.5 "Montserrat", sans-serif;
}

.dv-pasos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dv-paso {
  padding: 22px 20px;
  border: 1px solid var(--borde);
  background: var(--bg-img);
}

.dv-paso__n {
  margin-bottom: 10px;
  color: var(--cobalto);
  font-family: "gazzetta-variable", sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.dv-paso__h {
  margin: 0 0 5px;
  color: var(--dv-texto-fuerte, #0B0B0C);
  font: 700 14.5px/1.3 "Montserrat", sans-serif;
  text-transform: none;
}

.dv-paso__p {
  margin: 0;
  color: var(--dv-texto, #6B6B72);
  font: 400 13px/1.5 "Montserrat", sans-serif;
}

@media (max-width: 860px) {
  .dv-pasos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dv-pasos__inner { padding-top: 30px; padding-bottom: 34px; }
  .dv-pasos__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dv-paso { padding: 18px 16px; }
  .dv-paso__n { font-size: 26px; }
}

/* ============================================================
 * Franja del encabezado, a lo ancho de la pagina
 * ============================================================
 * La dibuja dobleve_encabezado_tienda_ancho() en functions.php,
 * arriba de las dos columnas. El __inner usa el mismo ancho maximo
 * y el mismo aire lateral que la grilla de productos, asi el titulo
 * arranca en la misma linea vertical que la primera tarjeta.
 */
.dv-shop-header {
  border-bottom: 1px solid var(--borde);
  background: var(--blanco);
}

.dv-shop-header__inner {
  max-width: var(--dv-ancho-pagina, 1720px);
  margin: 0 auto;
  padding: clamp(22px, 3.5vw, 44px) var(--dv-aire-lateral, clamp(16px, 3vw, 48px)) clamp(20px, 2.6vw, 32px);
}

.dv-shop-header .woocommerce-breadcrumb {
  margin: 0 0 14px;
}

.dv-shop-header__titulo {
  display: block;
  margin: 0;
  color: var(--grafito);
  font-family: "gazzetta-variable", sans-serif !important;
  font-size: clamp(54px, 7vw, 104px) !important;
  font-weight: 800;
  line-height: .82 !important;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

/* La bajada arranca alineada con el titulo y no se estira a lo
   ancho de toda la pantalla: pasados unos 65 caracteres por renglon
   el ojo pierde el hilo al volver al margen izquierdo. */
/* Los colores salen del prototipo, no de la paleta vieja:
     texto  #6B6B72  (gris de lectura, mas claro que --humo)
     negrita #0B0B0C (casi negro, mas oscuro que --grafito)
   Esa distancia entre los dos es la que hace que la negrita se
   lea como un salto y no como un simple engrosado. Con --humo y
   --grafito, que estan a solo dos pasos uno del otro, el contraste
   casi no se percibia. */
.dv-shop-header .dv-shop-intro,
.dv-shop-header .term-description,
.dv-shop-header .term-description p {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--dv-texto, #6B6B72);
  font: 400 15px/1.65 "Montserrat", sans-serif;
}

.dv-shop-header .term-description p + p {
  margin-top: 10px;
}

/* Las negritas que escribis en la descripcion se leen mas oscuras
   que el resto, no solo mas gruesas. Ese contraste es lo que hace
   que el ojo caiga primero en la frase que te importa. */
.dv-shop-header .dv-shop-intro strong,
.dv-shop-header .dv-shop-intro b,
.dv-shop-header .term-description strong,
.dv-shop-header .term-description b {
  color: var(--dv-texto-fuerte, #0B0B0C);
  font-weight: 700;
}

/* Los enlaces dentro de la bajada, en cobalto y subrayados: si es
   clickeable tiene que verse clickeable. */
.dv-shop-header .dv-shop-intro a,
.dv-shop-header .term-description a {
  color: var(--cobalto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Listas, por si alguna categoria las usa en su descripcion. */
.dv-shop-header .term-description ul,
.dv-shop-header .term-description ol {
  max-width: 62ch;
  margin: 10px 0 0;
  padding-left: 1.15em;
  color: var(--dv-texto, #6B6B72);
  font: 400 15px/1.65 "Montserrat", sans-serif;
}

.dv-shop-header .term-description li + li {
  margin-top: 4px;
}

/* Con la franja arriba, las columnas ya no necesitan tanto aire
   propio en el borde superior. */
body.post-type-archive-product .site-content,
body.tax-product_cat .site-content,
body.tax-product_tag .site-content,
body.tax-product_brand .site-content,
body.tax-yith_product_brand .site-content,
body.tax-pa_marca .site-content {
  padding-top: clamp(20px, 2.6vw, 34px) !important;
}

@media (max-width: 768px) {
  .dv-shop-header__titulo {
    font-size: clamp(48px, 18vw, 72px) !important;
  }

  .dv-shop-header .dv-shop-intro,
  .dv-shop-header .term-description,
  .dv-shop-header .term-description p {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 12px;
  }
}

/* ============================================================
 * SHORTCODE [dobleve_lanzamientos]
 * ============================================================
 * El shortcode ahora renderiza la misma plantilla que la tienda,
 * asi que hereda todo el diseno de arriba sin repetir una sola
 * regla. Lo unico propio es la grilla: en la portada no hay barra
 * de filtros al costado, asi que puede respirar mas.
 */
.dobleve-lanzamientos ul.products {
  gap: clamp(18px, 2vw, 28px) !important;
}

@media (min-width: 1025px) {
  .dobleve-lanzamientos ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Boton "Ver todos los modelos", debajo de la grilla del shortcode. */
.dv-vertodos {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 36px);
}

.dv-vertodos__btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 14px 32px;
  border: 1px solid var(--dv-texto-fuerte, #0B0B0C);
  background: transparent;
  color: var(--dv-texto-fuerte, #0B0B0C);
  font: 600 12.5px/1 "Montserrat", sans-serif;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}

/* El hover lleva !important y text-decoration a proposito:
   GeneratePress subraya los enlaces al pasar el mouse y pinta el
   color desde el Personalizador. Sobre un boton, ese subrayado
   apareciendo de golpe queda feo, y el color del tema puede dejar
   el texto oscuro sobre fondo oscuro. */
.dv-vertodos__btn,
.dv-vertodos__btn:hover,
.dv-vertodos__btn:focus,
.dv-vertodos__btn:active {
  text-decoration: none !important;
  box-shadow: none !important;
}

.dv-vertodos__btn:hover,
.dv-vertodos__btn:focus {
  background: var(--dv-texto-fuerte, #0B0B0C) !important;
  border-color: var(--dv-texto-fuerte, #0B0B0C) !important;
  color: var(--blanco) !important;
}

.dv-vertodos__btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cobalto) 30%, transparent);
  outline-offset: 3px;
}

/* ============================================================
 * PRODUCTOS RELACIONADOS (ficha de producto)
 * ============================================================
 * Heredan la card de la tienda. Lo unico propio es el titulo de la
 * seccion y un poco de aire arriba, para que no quede pegado a la
 * descripcion.
 */
.single-product .related.products,
.single-product .up-sells.products {
  margin-top: clamp(40px, 5vw, 64px);
  clear: both;
}

.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
  margin: 0 0 24px;
  color: var(--dv-texto-fuerte, #0B0B0C);
  font-family: "gazzetta-variable", sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}