/*
Theme Name: GeneratePress Child Dobleve
Description: Tema hijo de GeneratePress para Dobleve Eyewear Company.
Template: generatepress
Version: 2.19.0
Text Domain: generatepress-child-dobleve
*/

/* =========================
   1) Fuente base y encabezados
========================= */
body{ font-family:'Montserrat',system-ui,-apple-system,sans-serif; font-style:normal; }
h1,h2,h3,h4,h5,h6{ font-family:'gazzetta-variable',sans-serif; }

.woocommerce-products-header .woocommerce-products-header__title.page-title {
    font-family: "gazzetta-variable", sans-serif !important;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 5rem;
    font-size: 8rem;
}

/* Borro caja/outline que meta UAGB */
.dv-seeall-link a.uagb-buttons-repeater,
.dv-seeall-link button.uagb-buttons-repeater{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  text-decoration:none !important;
}

/* Link de marca + animación */
.dv-seeall-link a.uagb-buttons-repeater,
.dv-seeall-link button.uagb-buttons-repeater{
  position:relative;
  display:inline-block;
  font:600 14px/1 'Montserrat', sans-serif !important;
  text-transform:uppercase; letter-spacing:.04em !important;
  color:var(--cobalto) !important;
  cursor:pointer;
}


.dv-seeall-link a.uagb-buttons-repeater::after,
.dv-seeall-link button.uagb-buttons-repeater::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:0; height:2px; background:var(--humo);
  transition:width .28s ease;
}

.dv-seeall-link a.uagb-buttons-repeater:hover::after,
.dv-seeall-link button.uagb-buttons-repeater:hover::after{
  width:100%;
}


/* =========================
   2) Paleta DOBLEVE (variables)
========================= */
:root{
  --cobalto:#1A32C1;
  --magma:#F44E00;
  --blanco:#FFFFFF;
  --tiza:#DDDDDD;
  --humo:#353535;
  --grafito:#171717;
  --borde:#EEEEEE;
  --bg-img:#F7F7F7;

  /* ---- Ancho de pagina, uno solo para toda la web ----
     Este es EL numero. Si algun dia queres la web mas ancha o mas
     angosta, se cambia aca y se mueve todo junto: la tienda, el
     encabezado y cualquier seccion que lo use.
     Antes cada bloque tenia su propio maximo (1180, 1480...) y por
     eso las secciones no arrancaban ni terminaban a la misma altura. */
  --dv-ancho-pagina: 1720px;

  /* El aire lateral, para que el contenido no toque el borde en
     pantallas chicas. Va de la mano del ancho de arriba. */
  --dv-aire-lateral: clamp(16px, 3vw, 48px);

  /* ---- Colores de texto, tomados del prototipo ----
     --humo y --grafito estan muy cerca uno del otro, asi que una
     negrita entre los dos casi no se notaba. Estos dos abren la
     distancia: el gris es mas claro y la negrita casi negra, y ese
     salto es lo que hace que el ojo caiga primero donde vos queres. */
  --dv-texto: #6B6B72;
  --dv-texto-fuerte: #0B0B0C;
}

/* ---- Ancho unico para el resto de la web (apagado) ----
   La tienda ya usa --dv-ancho-pagina. Si ademas queres que TODAS
   las paginas compartan ese ancho, borra la linea de arriba y la de
   abajo de este bloque para activarlo.
   Lo dejo apagado a proposito: tu portada esta armada con bloques
   que quiza definan su propio ancho, y no quiero moverte esa pagina
   sin que la mires primero.
--------------------------------------------------------------
.site.grid-container{
  max-width: var(--dv-ancho-pagina) !important;
}
-------------------------------------------------------------- */

/* =========================
   3) Correcciones globales menores
========================= */
.no-sidebar .entry-content .alignfull {
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
}

html, body {
  overflow-x: hidden;
}

/* =========================
  LANDING 45K
========================= */


@media (max-width: 768px) {

  .uagb-block-4c560335 {
    text-align: center;
  }

  .uagb-block-4c560335 .uagb-heading-text,
  .uagb-block-4c560335 .uagb-desc-text {
    text-align: center;
  }
  
  .hero45-wrap {
 border: none !important;
}
  
  .hero45-content p{
      max-width: 100%;
  }



}

@media (min-width: 1025px) {



  /* HERO */
  .hero45-img{
          justify-content: flex-end;

  }
  
  .hero45-wrap {
  position: relative;
}

.hero45-wrap {
  border-left: 20px solid !important;
  border-color: #1A32C1 !important;
  z-index: 10;
}

  

  .hero45-content p{
      text-align: left;
  }


  /* BENEFICIOS */


  .section-beneficios h2 {
    margin: 0;
    max-width: 320px;
    font-size: 68px;
    line-height: 0.95;
  }

  .beneficios {
    max-width: 760px;
    width: 100%;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .beneficios .wp-block-uagb-icon-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .beneficios span {
    font-size: 21px;
    line-height: 1.45;
  }

  .beneficios svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* PRODUCTOS */
  .section-modelos {
    padding: 90px 64px;
  }

  .section-modelos h2 {
    margin-bottom: 12px;
  }

  .section-modelos p {
    margin-bottom: 36px;
  }

  .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto !important;
    padding: 0;
  }

  .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* GRADUACION */
 
}

.page-id-3182 {
  overflow-x: hidden;
}

.page-id-3182 .alignfull,
.page-id-3182 .wp-block-uagb-container,
.page-id-3182 .uagb-is-root-container,
.page-id-3182 .wp-block-group,
.page-id-3182 .wp-block-columns {
  max-width: 100% !important;
  box-sizing: border-box;
}

.precio {
  display: block;
  font-size: 56px;
  font-weight: 800;
  color: #1A32C1;
  line-height: 1.1;
  
}

.sub-45k {
    padding-top: 3em ;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}
.hero-45k {
     font-weight: 700;
}

.beneficios .wp-block-columns{
display:flex;
align-items:center;
gap:12px;
margin-bottom:14px;
}

.beneficios .uagb-icon-wrapper{
flex:0 0 28px;
}

.beneficios .uagb-svg-wrapper svg{
width:22px;
height:22px;
}

.beneficios p{
margin:0;
}

.beneficios .uagb-svg-wrapper svg{
fill:#353535;
transition:fill .25s ease, transform .25s ease;
}

.beneficios .wp-block-columns:hover .uagb-svg-wrapper svg{
fill:#1A32C1;
transform:scale(1.08);
}

.beneficios .wp-block-columns{
transition:transform .2s ease;
}

.beneficios .wp-block-columns:hover{
transform:translateX(4px);
}


@media (min-width: 768px) and (max-width: 1024px) {
    
/* CONTENEDOR GENERAL */
  .section-beneficios {
    padding: 70px 36px;
    align-items: flex-start !important;
  }
  
   .uagb-block-4c560335 .uagb-heading-text,
  .uagb-block-4c560335 .uagb-desc-text {
    text-align: left;
  }

  /* TÍTULO */
  .section-beneficios h2 {
    max-width: 700px;
    margin-bottom: 36px;
  }

  /* LISTA */
  .beneficios {
    max-width: 620px;
    width: 100%;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* ITEMS */
  .beneficios .wp-block-uagb-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  /* ICONOS */
  .beneficios svg {
    color: #353535;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 3px;
  }

  /* TEXTO */
  .beneficios span {
    color: #353535;
    font-size: 18px;
    line-height: 1.45;
  }
    .hero45-wrap .wp-block-uagb-container.uagb-block-1190004a {
  padding: 0 !important;
}

  .hero45-wrap.wp-block-columns {
    gap: 32px;
    align-items: center;
    padding: 48px 36px;
  }
  
  .hero45-wrap {
  position: relative;
}


.hero45-wrap {
  border-left: 5px solid !important;
  border-color: #1A32C1 !important;
  z-index: 10;
}

  .hero45-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero45-content h2 {
    font-size: 72px;
    line-height: 0.95;
    margin-bottom: 20px;
  }

 

  .hero45-content .wp-block-buttons {
    margin-top: 20px;
  }

  .hero45-img {
    min-height: 460px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    object-fit: cover;
        height: 100%;
  }

  .hero45-img figure,
  .hero45-img .wp-block-image {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .hero45-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 13% center;
    display: block;
    
  }
  
  
}

@media (min-width: 768px) {
  .hero45-img {
    margin-right: -40px; /* ajustá según tu container */
  }
}




/* =========================
   4) WooCommerce: reset del <li> SOLO en shop/archive
========================= */
.woocommerce-shop .products li.product,
.post-type-archive-product .products li.product,
.tax-product_cat .products li.product{
  background:transparent;
  padding:0;
  box-shadow:none;
  text-align:initial;
  transition:none;
}
.woocommerce-shop .products li.product a.woocommerce-LoopProduct-link,
.post-type-archive-product .products li.product a.woocommerce-LoopProduct-link,
.tax-product_cat .products li.product a.woocommerce-LoopProduct-link{
  display:block; position:relative; text-decoration:none; color:inherit;
}

/* =========================
   5) Card DOBLEVE (shop/archive)
========================= */
.dobleve-card{
  position:relative;
  background:var(--bg-img);
  border:none;
  border-radius:14px;
  padding-bottom:2rem ;
 
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.dobleve-card:hover{ transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,.10); }

/* Tag de categoría */
.dobleve-tag{
  display: block;              /* ocupa todo el ancho disponible */
  text-align: center;          /* centra el texto dentro */
            /* espacio inferior antes de la imagen */
  font: 600 12px/1 'Montserrat', sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--humo);
}

.dobleve-tag:hover{
  color: #000000;
}


/* Caja de imagen */
.dobleve-card-image{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  margin-bottom: 14px;
  display: block;
  padding: 0px;
  background: var(--bg-img);
}

.dobleve-card-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
}

.dobleve-card-image .img-hover{
  display: none !important;
}

.dobleve-card:hover .img-main{
  opacity: 1 !important;
}

.dobleve-card:hover .img-main{
  opacity: 1 !important;
}

/* Contenido */
.dobleve-card-info{ padding:6px 1rem 0; color:var(--grafito); }

/* Marca */
.dobleve-brand,.dobleve-brand a{
  display:inline-block; margin-bottom:4px;
  font:600 16px/1.2 'Montserrat',sans-serif;
  color:var(--humo); text-decoration:none;
}
.dobleve-brand:hover{ 
    color:var(--cobalto);
    
    }

/* Título + precio */
.dobleve-title-price{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:8px;
}
.dobleve-title-link{ text-decoration:none; color:inherit; }

/* Título */
.dobleve-title{
  font-family:'gazzetta-variable',sans-serif;
  font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,1.2vw + 14px,32px);
  line-height:0.66; color:var(--grafito);
  padding-bottom: 0.2rem;
  
  background-image: linear-gradient(var(--cobalto), var(--cobalto));
  background-size: 0% 2px;       /* arranca invisible */
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .3s ease;
}

.dobleve-title:hover{
 background-size: 100% 2px;     /* se expande a todo el ancho */
}

/* Precio */
.dobleve-price,
.dobleve-price .amount,
.dobleve-price ins .amount{
  font:600 clamp(18px,1.2vw + 12px,22px)/1 'Montserrat',sans-serif;
  color:var(--cobalto);
}

/* LEYENDA INCLUYE BLUE + AR */


/* NOTA: aca vivia un bloque "ARMAZONES: leyenda incluye filtro azul"
   que armaba la tarjeta como una fila horizontal (align-items:flex-end,
   leyenda a la derecha) con !important en todo. Era de una version
   anterior del disenio. Con la tarjeta apilada de catalog.css empujaba
   el titulo, el precio y las cuotas contra el borde derecho.
   Lo saque: el layout de la tarjeta vive ahora solo en
   assets/css/catalog.css. */



/* Acciones */
.dobleve-actions{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }

/* Botón secundario */
.dobleve-btn-secondary{
  display:inline-block; width:100%; text-align:center;
  font:600 14px/1 'Montserrat',sans-serif; text-transform:uppercase;
  color:var(--humo); background:#F2F2F2;
  border-radius:10px; padding:10px 12px; text-decoration:none;
}

/* Botón primario (add to cart) */
.dobleve-btn-primary{
  display:inline-block !important;
  width:100% !important;
  text-align:center !important;
  text-transform:uppercase !important;
  font:600 14px/1 'Montserrat', sans-serif !important;

  color:#fff !important;
  background: linear-gradient(135deg, #1A32C1 0%, #263fd6 100%) !important; /* base */
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  padding:10px 12px !important;

  transition: background .35s ease, color .25s ease !important;
}

.dobleve-btn-primary:hover{
  /* Misma gama, apenas más clara en el inicio y apenas más oscura en el final */
  background: linear-gradient(135deg, #243dd0 0%, #1a2ca5 100%) !important;
  color:#fff !important;
}



/* Etiquetas auxiliares */
.categorias-producto{ font:600 11px/1 'Montserrat',sans-serif; color:var(--humo); text-transform:uppercase; }

/* Responsive fino */
@media (max-width:480px){
  .dobleve-brand{ font-size:13px; }
  .dobleve-tag{ font-size:11px; }
}

/* =========================
   6) SHORTCODE [products] dentro del contenido
   (grid en fila + resets que impedían el layout)
========================= */
.dobleve-shortcode ul.products{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr)); /* 4 por fila desktop */
  gap:24px;
  list-style:none; margin:0; padding:0;
}
.dobleve-shortcode ul.products li.product{
  width:auto!important; float:none!important; margin:0!important;
   padding:12px;
}
/* Reset de la “imagen cuadrada” en shortcodes */
.dobleve-shortcode ul.products li.product a.woocommerce-LoopProduct-link::before{ content:none!important; }
.dobleve-shortcode ul.products li.product img{
  position:static!important; inset:auto!important;
  width:100%!important; height:auto!important; max-height:none!important;
  object-fit:contain!important;
}

/* Responsive del shortcode */
@media (max-width:1024px){
  .dobleve-shortcode ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:680px){
  .dobleve-shortcode ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px){
  .dobleve-shortcode ul.products{ grid-template-columns:1fr; }
}

/* Grid de 3 columnas sobre el contenedor real */
.dobleve-card-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Cada card ocupa su columna */
.dobleve-card-grid .dobleve-card{
  width: 100% !important;
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 1024px){
  .dobleve-card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .dobleve-card-grid{ grid-template-columns: 1fr; }
}

/* SINGLE PRODUCT */

.product .summary .product_title{
    text-transform: uppercase;
    font-size:6rem ;
    line-height: 4rem;
    margin-top:1rem!important ;
}

.testimonio-padre{
    align-items: stretch!important;
}


.testimonio{
     display: flex!important;
  flex-direction: column;
  justify-content: space-between!important;
}

    /* CARRITO */
    
:root{
  --cobalto-oscuro: color-mix(in oklab, var(--cobalto), black 20%);
}

/* Base ítems con icono */
.main-navigation .menu-item.menu-item-has-icon > a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .5rem; border-radius:999px; text-decoration:none; line-height:1;
}

/* Tamaño de los SVG */
.main-navigation .menu-item-has-icon .icon{
  width:20px; height:20px; translate:0 1px;
}

/* ====== CARRITO ICON-ONLY ====== */
.main-navigation .menu-cart--icon-only > a{
  background:transparent; border:none; color:var(--cobalto);
  position:relative; /* para ubicar badge si es superpuesto */
}

/* Badge superpuesto (default) */
.main-navigation .menu-cart--badge .menu-cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; line-height:18px; padding:0 5px;
  border-radius:999px; font-size:12px; font-weight:700;
  background:var(--cobalto); color:var(--blanco);
  box-shadow:0 0 0 2px var(--blanco); /* anillo para que se lea sobre el header */
}

/* Opción “al lado del icono” (cambiá el PHP a cart_style='inline' o fuerza con esta clase) */
.main-navigation .menu-cart--inline .menu-cart-count{
  position:static; margin-left:.25rem;
  min-width:18px; height:18px; line-height:18px; padding:0 6px;
  border-radius:999px; font-size:12px; font-weight:700;
  background:var(--cobalto-oscuro); color:var(--blanco);
}

/* Ocultar contador si es 0 (gracias al data-attr) */
.menu-cart-count[data-count="0"]{ display:none; }

/* Hover/active sutil */
.main-navigation .menu-cart--icon-only > a:hover{ color:color-mix(in oklab, var(--cobalto), black 12%); }
.main-navigation .menu-cart--icon-only > a:active{ transform:translateY(1px); }

/* Accesibilidad: solo lectores */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* —— Mi Cuenta (outlined, como ya lo tenías) —— */
.main-navigation .menu-account--outlined > a{
  border:var(--cobalto); color:var(--cobalto); background:transparent;
  transition:.2s ease;
  padding-left: 1rem ;
}
.main-navigation .menu-account--outlined > a:hover{
  background:var(--cobalto); color:var(--blanco);
}

/* CTA del héroe — forzamos tamaño por viewport */
.btn-hero .uagb-infobox-cta-link.wp-block-button__link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--blanco);
  background-color: var(--cobalto);
  font-size: 18px !important;   /* Desktop */
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .btn-hero .uagb-infobox-cta-link.wp-block-button__link {
    font-size: 16px !important; /* Tablet */
  }
}

@media (max-width: 767px) {
  .btn-hero .uagb-infobox-cta-link.wp-block-button__link {
    font-size: 12px !important; /* Mobile */
  }
}

/* TIENDA: forzar columnas con CSS Grid */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display: grid !important;
  gap: 24px;              /* separacion entre tarjetas */
}

/* Desktop ≥1025px -> 3 columnas */
@media (min-width: 1025px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet 768–1024px -> 2 columnas (opcional, se ve mejor) */
@media (min-width: 768px) and (max-width: 1024px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile ≤767px -> 1 columna */
@media (max-width: 767px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: 1fr !important;
  }
}

/* Anular widths/márgenes que pone el theme en los items */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width: auto !important;
  margin: 0 !important;
}

/* Woo: evitar que el clearfix ocupe la 1ª celda del grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
  content: none !important;
  display: none !important;
}



/* === DOBLEVE: Badge % OFF como barra superior === */
.woocommerce ul.products li.product .onsale{
  position:absolute;
  top:18px; left:16px; right:16px;
  background:var(--cobalto);
  color:var(--blanco);
  text-align:center;
  font:700 13px/1 'Montserrat',system-ui,-apple-system,sans-serif;
  letter-spacing:.04em; text-transform:uppercase;
  padding:8px 10px; border-radius:10px;
  box-shadow:0 4px 10px rgba(26,50,193,.25);
  z-index:3;
}

/* === DOBLEVE: precios en tarjetas === */
.woocommerce ul.products li.product .price{
  display:flex; align-items:baseline; gap:10px; margin-top:6px; line-height:1.1;
  
}

.woocommerce ul.products li.product .price del{
  order:1; color:var(--humo); opacity:.7;
  font-size:13px; text-decoration-thickness:2px; text-decoration-color:var(--humo);
}

.woocommerce ul.products li.product .price ins{
  order:2; color:var(--cobalto);
  font:800 22px/1 'Montserrat',system-ui,-apple-system,sans-serif;
  text-decoration:none;
}

/* porcentaje junto al precio (cuando lo inyectemos por PHP) */
.dv-price-pct{
  margin-left:6px; font:700 12px/1 'Montserrat',sans-serif;
  color:var(--magma);
}

/* Botón primario: mantenemos tu estilo pero con focus accesible */
.dobleve-btn-primary:focus-visible{
  outline:2px solid var(--cobalto); outline-offset:2px;
}


/* Si hay bloque de promo, ocultá la tabla original de totales */
.single-product .summary:has(.dv-total-con-promo)
  .ywapo_total_container,
.single-product .summary:has(.dv-total-con-promo)
  .yith_wapo_total_price,
.single-product .summary:has(.dv-total-con-promo)
  .product-addon-totals,
.single-product .summary:has(.dv-total-con-promo)
  .dv-original-totals {
  display: none !important;
}


/* Contenedor sin fondo ni borde */
.dv-confianza{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:0;
  background: transparent;
  border:0;
  margin: 14px 0;
}

/* ===== Badges compactos Dobleve ===== */
.dv-badges{
  display:grid; gap:14px; margin:16px 0 6px;
}
@media(min-width:992px){
  .dv-badges{ grid-template-columns:repeat(3,1fr); }
}
.dv-badge{
  text-align:center;
  background: var(--blanco);
  border:1px solid var(--borde);
  border-radius:14px;
  padding:14px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.dv-ico{
  width:28px; height:28px; margin-bottom:8px; fill: var(--cobalto);
}
.dv-badge h5{
  margin:0 0 4px;
  font: 600 15px/1.1 'Montserrat',system-ui,sans-serif;
  color: var(--grafito);
  letter-spacing:.2px;
}
.dv-badge p{
  margin:0; color: var(--humo); font-size:14px; line-height:1.35;
}
.dv-badge .dv-sub{ color:#6f6f6f; font-size:13px; }

/* Más aire en mobile (evita “bloques pesados”) */
@media(max-width:768px){
  .dv-badge{ padding:12px 10px; }
  .dv-ico{ width:26px; height:26px; }
}

/* Slim: en una sola fila, sin tarjetas */
.dv-badges--slim{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.dv-badges--slim .dv-badge{
  border:0; box-shadow:none; padding:0; display:flex; gap:8px; align-items:center; background:transparent;
}
.dv-badges--slim .dv-badge .dv-sub{ display:none; } /* solo 1 línea */
.dv-badges--slim .dv-ico{ margin:0; }
.dv-badges--slim h5{ display:none; } /* si querés aún más minimal */


/* Columna izquierda: el bloque “EXCELENTE + estrellas + Google” */
.single-product .dv-rev-inline .ti-widget-container > div:first-child{
  /* algunos templates de Trustindex usan .ti-header; el :first-child lo hace a prueba de cambios */

  padding: 16px;
  background: var(--blanco);
}

/* Columna derecha: el carrusel/listado */
.single-product .dv-rev-inline .ti-widget-container > div:last-child{

  overflow: hidden; /* evita desbordes del carrusel */
}

/* Afinado de estilos para que respire */
.single-product .dv-rev-inline .ti-widget-container > div:last-child .ti-review,
.single-product .dv-rev-inline .ti-widget-container > div:last-child .ti-slide{
  padding: 12px 16px !important;
}



/* Mobile: vuelve a columna */
@media (max-width: 992px){
  .single-product .dv-rev-inline .ti-widget-container{
    display:block;
  }
  .single-product .dv-rev-inline .ti-widget-container > div:first-child,
  .single-product .dv-rev-inline .ti-widget-container > div:last-child{
    margin-bottom: 14px;
  }
}

/* Safety: si el widget fuerza anchos, los limitamos */
.single-product .dv-rev-inline .ti-widget-container,
.single-product .dv-rev-inline .ti-widget,
.single-product .dv-rev-inline iframe{
  max-width: 100% !important;
  width: 100% !important;
}



/* Tienda WooCommerce full width con padding lateral */
.woocommerce.archive .site-main,
.woocommerce.archive .site-content {
    max-width: 100% !important;  /* rompe el límite del contenedor */
    padding-left: 24px;          /* aire a la izquierda */
    padding-right: 24px;         /* aire a la derecha */
}

/* Grid de productos con aire entre tarjetas */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px; /* separación entre productos */
    margin: 0;
    padding: 0;
}

/* === SHOP FULL WIDTH + AIRE (GP Free) === */
/* 0) Aplica sólo a tienda y categorías de producto */
body.post-type-archive-product .site.grid-container,
body.tax-product_cat .site.grid-container{
  max-width:100% !important;            /* romper ancho fijo del theme */
}

/* Título/breadcrumb de la tienda también a lo ancho + padding lateral */
body.post-type-archive-product .page-header,
body.tax-product_cat .page-header{
  max-width:100% !important;
  padding-left:24px; padding-right:24px;
}

/* 1) Aire lateral del contenido */
body.post-type-archive-product .site-content,
body.tax-product_cat .site-content{
  padding-left:24px;                     /* ajustá a gusto: 24/32/40 */
  padding-right:24px;
}

/* 2) Grid responsivo de productos (ocupa todo el ancho disponible) */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;
  margin:0; padding:0;
}


/* 4) Imágenes dentro de la card, sin deformarse */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  width:100%; height:auto; border-radius:8px;
}

/* 5) (Opcional) Si NO querés sidebar en la tienda, descomentá este bloque
body.post-type-archive-product #right-sidebar,
body.post-type-archive-product #left-sidebar,
body.tax-product_cat #right-sidebar,
body.tax-product_cat #left-sidebar{ display:none; }
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area{ width:100% !important; float:none; }
*/



/* Financiación arriba */
.dv-financiacion{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--borde);
  border-radius:10px;
  background: var(--bg-img);
  margin: -1rem 0px 1.5rem 0;
}
.dv-financiacion .dv-fin-label{
  font: 600 13px/1 'Montserrat', system-ui, sans-serif;
  color: var(--grafito);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.dv-financiacion .dv-fin-texto{
  font: 500 14px/1.2 'Montserrat', system-ui, sans-serif;
  color: var(--humo);
}

/* Badges resumidos debajo del CTA */
.dv-badges{
  display:grid; gap:12px; margin:16px 0 4px;
}
@media(min-width: 992px){ .dv-badges{ grid-template-columns: repeat(3,1fr); } }

.dv-badge{
  text-align:center;
  background: var(--blanco);
  border:1px solid var(--borde);
  border-radius:12px;
  padding:12px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
	margin-bottom: 1rem;
}
.dv-badge h5{
  margin:6px 0 2px;
  font: 700 14px/1 'Montserrat', system-ui, sans-serif;
  color: var(--grafito);
}
.dv-badge p{
  margin:0;
  font: 500 13px/1.3 'Montserrat', system-ui, sans-serif;
  color:#6f6f6f;
}
.dv-ico{ width:26px; height:26px; fill: var(--cobalto); }


/* TAPAR TITULOS CORTOS Y PONER LARGOS*/

.single-product .product_title { display:none; }
.dobleve-display-title{
  margin: 0 0 10px;
  line-height: 1.05;
}

.single-product h1.dobleve-display-title{
  text-transform: uppercase !important;
}


/* Oculta el precio repetido que aparece dentro del form de variaciones */
/* Oculta el bloque de precio/stock de la variación (pero NO el botón) */
.single-product .single_variation_wrap .woocommerce-variation,
.single-product .single_variation_wrap .woocommerce-variation-price,
.single-product .single_variation_wrap .woocommerce-variation-availability {
  display: none !important;
}

/* Asegura que el botón siga visible */
.single-product .single_variation_wrap .woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   DOBLEVE — Selector de cristales + leyenda del filtro azul
   Pegar al final de style.css del tema hijo.
   Usa tus variables de marca ya existentes: --cobalto, --grafito,
   --humo, --tiza, --borde, --bg-img.
   ============================================================ */


/* ---------- Selector en la ficha de producto ---------- */

.dv-cristales {
  border: 0;
  padding: 0;
  margin: 22px 0 18px;
  display: grid;
  gap: 9px;
}

.dv-cristales__titulo {
  padding: 0;
  margin-bottom: 4px;
  font: 600 12px/1 'Montserrat', sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grafito);
}

.dv-cristal-op {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border: 1.6px solid var(--tiza);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.dv-cristal-op:hover {
  border-color: var(--humo);
  background: var(--bg-img);
}

/* El radio nativo se oculta pero sigue siendo el que recibe el foco
   y el que viaja en el formulario. */
.dv-cristal-op input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.dv-cristal-radio {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 1.8px solid var(--tiza);
  border-radius: 50%;
  background: #fff;
  transition: border-color .16s ease, border-width .16s ease;
}

.dv-cristal-op:has(input:checked) {
  border-color: var(--grafito);
  box-shadow: 0 0 0 1px var(--grafito);
  background: #fff;
}

.dv-cristal-op:has(input:checked) .dv-cristal-radio {
  border-color: var(--grafito);
  border-width: 6px;
}

/* Foco visible al navegar con teclado. */
.dv-cristal-op:has(input:focus-visible) {
  outline: 2.5px solid var(--cobalto);
  outline-offset: 2px;
}

.dv-cristal-cuerpo {
  flex: 1;
  min-width: 0;
}

.dv-cristal-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font: 600 14.5px/1.3 'Montserrat', sans-serif;
  color: var(--grafito);
}

.dv-cristal-tag {
  font: 700 9.5px/1 'Montserrat', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cobalto);
  background: color-mix(in oklab, var(--cobalto), white 90%);
  padding: 4px 7px;
  border-radius: 99px;
}

.dv-cristal-desc {
  display: block;
  margin-top: 3px;
  font: 400 12.5px/1.45 'Montserrat', sans-serif;
  color: var(--humo);
  opacity: .9;
}

.dv-cristal-monto {
  margin-left: auto;
  flex-shrink: 0;
  font: 700 14px/1.3 'Montserrat', sans-serif;
  color: var(--grafito);
  white-space: nowrap;
  text-align: right;
}

/* El descuento de "solo el armazón" en verde: se lee como ahorro. */
.dv-cristal-op:last-child .dv-cristal-monto {
  color: #0E8F5A;
}

@media (max-width: 480px) {
  .dv-cristal-op { padding: 13px 14px; gap: 11px; }
  .dv-cristal-monto { font-size: 13px; }
  .dv-cristal-desc { font-size: 12px; }
}

/* Respaldo para navegadores sin :has() (Firefox anterior a 121).
   El JS agrega la clase, así el estado seleccionado se ve igual. */
.dv-cristal-op.is-checked {
  border-color: var(--grafito);
  box-shadow: 0 0 0 1px var(--grafito);
}
.dv-cristal-op.is-checked .dv-cristal-radio {
  border-color: var(--grafito);
  border-width: 6px;
}


/* NOTA: aca vivia una copia global de esas mismas reglas horizontales
   (.dobleve-title-price con align-items:flex-end y la leyenda con
   text-align:right). Mismo motivo, misma suerte: el layout de la
   tarjeta lo define assets/css/catalog.css y nada mas. */


/* ---------- Cristales elegidos, en carrito y checkout ---------- */

.woocommerce-cart .variation,
.woocommerce-checkout .variation {
  font-size: 12.5px;
  color: var(--humo);
}



/* ============================================================
 * FOOTER DOBLEVE
 * ============================================================
 * Va en style.css y no en catalog.css a proposito: catalog.css
 * solo se encola en la tienda y las categorias, y el footer se ve
 * en TODAS las paginas.
 */

.dv-foot {
  background: #0B0B0C;
  color: rgba(255, 255, 255, .82);
  font-family: 'Montserrat', sans-serif;
}

.dv-foot__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(20px, 2vw, 28px);
}

/* --- Fila de garantias --- */
.dv-foot__garantias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.dv-foot__garantia {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dv-foot__garantia svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: #fff;
}

.dv-foot__garantia b {
  display: block;
  color: #fff;
  font: 700 13.5px/1.3 'Montserrat', sans-serif;
}

.dv-foot__garantia span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .58);
  font: 400 12.5px/1.45 'Montserrat', sans-serif;
}

/* --- Columnas --- */
.dv-foot__cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(30px, 3.5vw, 48px) 0;
}

.dv-foot__logo {
  display: block;
  color: #fff;
  font-family: 'gazzetta-variable', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  text-transform: lowercase;
}

.dv-foot__claim {
  max-width: 34ch;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .58);
  font: 400 13px/1.55 'Montserrat', sans-serif;
}

.dv-foot__news { margin-top: 18px; }
.dv-foot__news input[type="email"],
.dv-foot__news input[type="text"] {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 400 13px/1 'Montserrat', sans-serif;
  padding: 12px 14px;
}

.dv-foot__h {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .5);
  font: 700 11px/1 'Montserrat', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dv-foot__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dv-foot__links li { margin: 0 0 9px; }

.dv-foot__links a {
  color: rgba(255, 255, 255, .82);
  font: 400 13.5px/1.4 'Montserrat', sans-serif;
  text-decoration: none;
  transition: color .15s ease;
}

.dv-foot__links a:hover { color: #fff; }

/* --- Barra de abajo --- */
.dv-foot__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .45);
  font: 400 12.5px/1.4 'Montserrat', sans-serif;
}

@media (max-width: 900px) {
  .dv-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-foot__marca { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .dv-foot__garantias { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dv-foot__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .dv-foot__logo { font-size: 26px; }
}

/* ============================================================
 * NAVBAR BLANCO
 * ============================================================
 * El fondo negro no vive en este archivo: lo pone GeneratePress
 * desde Apariencia > Personalizar > Colores, como CSS en linea.
 * Este bloque lo sobreescribe. Si algun dia queres volver al negro,
 * borra este bloque entero y vuelve solo, sin tocar el Personalizador.
 */

.site-header,
.site-header .inside-header,
#masthead.site-header {
  background-color: var(--blanco) !important;
}

.site-header {
  border-bottom: 1px solid var(--borde);
}

.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav > ul {
  background-color: transparent !important;
}

/* --- LOGO ---
   SIN filtro de inversion a proposito. Vas a subir la version negra
   del logo desde Personalizar > Identidad del sitio, asi que el
   archivo ya llega listo. Si ademas lo invirtieramos por CSS, ese
   logo negro se volveria blanco y desapareceria sobre el header
   blanco: el mismo problema, al reves.

   Aca solo se limita la altura para que el logo no empuje el alto
   del header. Si lo queres mas grande o mas chico, ese es el numero. */
.site-logo img.header-image,
.site-header .header-image.is-logo-image {
  max-height: 44px;
  width: auto;
}

/* --- ENLACES DEL MENU --- */
.main-navigation .main-nav > ul > li > a {
  color: var(--dv-texto-fuerte) !important;
  font: 600 14px/1 'Montserrat', sans-serif;
  letter-spacing: .01em;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
  color: var(--cobalto) !important;
}

/* La flechita del desplegable acompaña al texto */
.main-navigation .dropdown-menu-toggle .gp-icon { color: inherit; }

/* --- SUBMENU --- */
.main-navigation ul ul {
  background-color: var(--blanco) !important;
  border: 1px solid var(--borde);
  box-shadow: 0 10px 28px rgba(11, 11, 12, .1);
}

.main-navigation ul ul li a {
  color: var(--dv-texto) !important;
  font: 500 13.5px/1.3 'Montserrat', sans-serif;
}

.main-navigation ul ul li a:hover,
.main-navigation ul ul li.current-menu-item > a {
  color: var(--dv-texto-fuerte) !important;
  background-color: var(--bg-img) !important;
}

/* --- BUSCADOR (FiboSearch) ---
   Pasa a la pildora del prototipo: sin borde duro, fondo gris muy
   claro, y el cobalto aparece solo al enfocar. */
.main-navigation .dgwt-wcas-search-wrapp {
  min-width: 240px;
  max-width: 340px;
}

.main-navigation .dgwt-wcas-sf-wrapp {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--bg-img) !important;
  transition: border-color .18s ease, background-color .18s ease;
}

.main-navigation .dgwt-wcas-sf-wrapp:focus-within {
  border-color: var(--cobalto) !important;
  background: var(--blanco) !important;
}

.main-navigation input.dgwt-wcas-search-input {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--dv-texto-fuerte) !important;
  font: 400 13.5px/1 'Montserrat', sans-serif !important;
  box-shadow: none !important;
}

.main-navigation input.dgwt-wcas-search-input::placeholder {
  color: var(--dv-texto);
  opacity: .85;
}

.main-navigation .dgwt-wcas-search-submit {
  background: transparent !important;
  color: var(--dv-texto) !important;
}

.main-navigation .dgwt-wcas-search-submit:hover { color: var(--cobalto) !important; }
.main-navigation .dgwt-wcas-ico-magnifier { fill: currentColor; }

/* --- CARRITO Y CUENTA ---
   Ya tenias reglas para estos dos mas arriba en el archivo; estas
   solo ajustan lo que cambia al pasar el header a blanco. */
.main-navigation .menu-cart--icon-only > a { color: var(--dv-texto-fuerte); }
.main-navigation .menu-cart--icon-only > a:hover { color: var(--cobalto); }

.main-navigation .menu-cart--badge .menu-cart-count {
  box-shadow: 0 0 0 2px var(--blanco);
}

.main-navigation .menu-account--outlined > a {
  border: 1px solid var(--tiza);
  border-radius: 999px;
  padding: 9px 16px !important;
  color: var(--dv-texto-fuerte);
  font: 600 13px/1 'Montserrat', sans-serif;
}

.main-navigation .menu-account--outlined > a:hover {
  background: var(--dv-texto-fuerte);
  border-color: var(--dv-texto-fuerte);
  color: var(--blanco);
}

/* --- BOTON DE MENU EN CELULAR --- */
.main-navigation .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
  color: var(--dv-texto-fuerte) !important;
  background-color: transparent !important;
}

@media (max-width: 1024px) {
  .main-navigation .dgwt-wcas-search-wrapp {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ============================================================
 * BARRA DE ANUNCIO
 * ============================================================ */
.dv-barra {
  background: var(--dv-texto-fuerte, #0B0B0C);
  color: #fff;
}

.dv-barra__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  max-width: var(--dv-ancho-pagina, 1720px);
  margin: 0 auto;
  padding: 9px var(--dv-aire-lateral, clamp(16px, 3vw, 48px));
  text-align: center;
}

.dv-barra__texto {
  font: 500 12.5px/1.4 'Montserrat', sans-serif;
  letter-spacing: .01em;
}

.dv-barra__cta {
  color: #fff;
  font: 700 12.5px/1.4 'Montserrat', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dv-barra__cta:hover { color: rgba(255, 255, 255, .78); }

@media (max-width: 640px) {
  .dv-barra__inner { padding: 8px 14px; gap: 4px 12px; }
  .dv-barra__texto,
  .dv-barra__cta { font-size: 11.5px; }
}

/* Cuando el producto no lleva badge de garantía quedan dos, no tres.
   Sin esto, en escritorio la grilla de 3 columnas dejaba un hueco
   vacío a la derecha. */
@media (min-width: 992px) {
  .dv-badges.dv-badges--dos { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * COLORES DE WOOCOMMERCE
 * ============================================================
 * El precio salia naranja, el boton violeta y "Hay stock" naranja.
 * Nada de eso estaba en este archivo: son los colores por defecto de
 * WooCommerce, que aparecen donde el tema no dijo nada. WooCommerce
 * los define como variables, asi que apuntarlas a tu paleta corrige
 * todo de una vez — ficha, carrito, checkout y avisos.
 */
:root,
body {
  --wc-primary: var(--cobalto);
  --wc-primary-text: var(--blanco);
  --wc-secondary: var(--bg-img);
  --wc-secondary-text: var(--dv-texto-fuerte, #0B0B0C);
  --wc-highlight: var(--cobalto);
  --wc-highlight-text: var(--blanco);
  --wc-content-bg: var(--blanco);
  --wc-subtext: var(--dv-texto, #6B6B72);
}

/* --- Precio de la ficha ---
   Va en tinta oscura, igual que en las tarjetas de la tienda. El
   cobalto queda reservado para lo que es interactivo: enlaces, el
   selector de cristales, el foco. Si lo preferis en cobalto, cambia
   el color de este bloque y listo. */
.single-product div.product p.price,
.single-product div.product .summary .price,
.single-product div.product p.price .amount,
.single-product div.product .summary .price .amount,
.single-product div.product .summary .price ins .amount {
  color: var(--dv-texto-fuerte, #0B0B0C) !important;
}

.single-product div.product .summary .price del,
.single-product div.product .summary .price del .amount {
  color: var(--dv-texto, #6B6B72) !important;
  opacity: .7;
}

.single-product div.product .summary .price ins {
  background: transparent;
  text-decoration: none;
}

/* --- Disponibilidad ---
   Verde para "hay stock" y rojo apagado para "sin stock": el color
   dice lo mismo que el texto, asi se lee de un vistazo. */
.single-product .stock.in-stock {
  color: #0E8F5A !important;
  font-weight: 600;
}

.single-product .stock.out-of-stock {
  color: #B42318 !important;
  font-weight: 600;
}

/* --- Boton principal de la ficha ---
   Mismo tratamiento que el boton de las tarjetas: tinta oscura, y
   cobalto al pasar el mouse. Asi la misma accion se ve igual en la
   tienda y en la ficha. */
.single-product div.product form.cart button.single_add_to_cart_button,
.single-product div.product .single_add_to_cart_button.button {
  background: var(--dv-texto-fuerte, #0B0B0C) !important;
  border: 1px solid var(--dv-texto-fuerte, #0B0B0C) !important;
  border-radius: 0 !important;
  color: var(--blanco) !important;
  font: 600 13px/1 'Montserrat', sans-serif !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  min-height: 52px;
  padding: 16px 28px !important;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}

.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product .single_add_to_cart_button.button:hover {
  background: var(--cobalto) !important;
  border-color: var(--cobalto) !important;
  color: var(--blanco) !important;
}

.single-product div.product form.cart button.single_add_to_cart_button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cobalto) 30%, transparent);
  outline-offset: 3px;
}

/* ============================================================
 * BOTONES DE WOOCOMMERCE (carrito, checkout, avisos)
 * ============================================================
 * Overridear las variables --wc-* no alcanza: varios botones de
 * WooCommerce todavia traen el violeta escrito a mano en su hoja de
 * estilos. Por eso "Ir a finalizar la compra" seguia saliendo lila.
 *
 * Criterio: la accion principal va en tinta oscura con hover cobalto,
 * igual que en las tarjetas y en la ficha. Las secundarias
 * (Actualizar carrito, Aplicar cupon) van con borde y fondo
 * transparente, para que no compitan con la principal.
 */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
  background: var(--dv-texto-fuerte, #0B0B0C) !important;
  border: 1px solid var(--dv-texto-fuerte, #0B0B0C) !important;
  border-radius: 0 !important;
  color: var(--blanco) !important;
  font: 600 13px/1 'Montserrat', sans-serif !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
  background: var(--cobalto) !important;
  border-color: var(--cobalto) !important;
  color: var(--blanco) !important;
}

/* Secundarios: borde, sin relleno. */
.woocommerce a.button:not(.alt):not(.checkout-button):not(.dobleve-btn-primary),
.woocommerce button.button:not(.alt):not(.dobleve-btn-primary),
.woocommerce input.button:not(.alt) {
  background: transparent !important;
  border: 1px solid var(--tiza) !important;
  border-radius: 0 !important;
  color: var(--dv-texto-fuerte, #0B0B0C) !important;
  font: 600 12.5px/1 'Montserrat', sans-serif !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}

.woocommerce a.button:not(.alt):not(.checkout-button):not(.dobleve-btn-primary):hover,
.woocommerce button.button:not(.alt):not(.dobleve-btn-primary):hover,
.woocommerce input.button:not(.alt):hover {
  border-color: var(--dv-texto-fuerte, #0B0B0C) !important;
  color: var(--dv-texto-fuerte, #0B0B0C) !important;
}

/* Un boton deshabilitado tiene que verse deshabilitado. */
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: .45 !important;
  cursor: not-allowed;
}

/* ============================================================
 * CHECKOUT
 * ============================================================
 * El resumen del pedido quedaba DEBAJO de todo el formulario, y la
 * columna derecha se usaba solo para las notas del pedido. Eso deja
 * al cliente completando datos sin ver nunca cuanto va a pagar.
 *
 * Con el resumen al costado y fijo al hacer scroll, el total esta
 * siempre a la vista. Es el patron estandar de las tiendas que
 * convierten bien, y es el del prototipo.
 *
 * Todo esto es solo CSS sobre el markup que ya genera WooCommerce:
 * no se toca ninguna plantilla del checkout. Si algo se viera raro,
 * borras este bloque y vuelve al orden anterior.
 */

@media (min-width: 900px) {

  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  /* Los datos ocupan la columna izquierda, las dos filas. */
  .woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Adentro de esa columna, todo va apilado: si no, WooCommerce
     vuelve a partirlo en dos y quedan cuatro columnas. */
  .woocommerce-checkout form.checkout #customer_details.col2-set {
    display: block;
  }

  .woocommerce-checkout form.checkout #customer_details .col-1,
  .woocommerce-checkout form.checkout #customer_details .col-2 {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout form.checkout #customer_details .col-2 {
    margin-top: 28px;
  }

  .woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 24px;
  }
}

/* El boton de pagar es la accion mas importante del sitio.
   Estaba chico y alineado a la derecha. */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
  display: block !important;
  width: 100% !important;
  min-height: 56px;
  margin-top: 8px;
  padding: 18px 24px !important;
  font-size: 14px !important;
  letter-spacing: .08em;
}

/* Un poco de aire y jerarquia en el resumen. */
.woocommerce-checkout #order_review_heading {
  margin-bottom: 16px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  margin-bottom: 20px;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 17px;
  font-weight: 700;
  color: var(--dv-texto-fuerte, #0B0B0C);
}

/* =========================
   Checkout: salidas para corregir el pedido
========================= */
.woocommerce-checkout .dv-volver-carrito{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--cobalto,#1A32C1); text-decoration:none;
  margin:0 0 22px;
}
.woocommerce-checkout .dv-volver-carrito::before{ content:'\2190'; font-size:16px; }
.woocommerce-checkout .dv-volver-carrito:hover{ text-decoration:underline; }

.woocommerce-checkout #order_review .dv-quitar{
  display:block; margin-top:6px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--dv-texto,#6B6B72); text-decoration:none;
  border-bottom:1px solid currentColor; width:fit-content;
}
.woocommerce-checkout #order_review .dv-quitar:hover{ color:#B42318; }
.woocommerce-checkout #order_review .dv-sin-stock{
  display:block; margin-top:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#B42318;
}

/* ==========================================================================
   CAMBIOS, RECETA POR WHATSAPP Y ARREPENTIMIENTO  (v2.16.0)
   ========================================================================== */

/* --- Bloque de política en la ficha de producto --- */
.dv-cambios {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--borde, #E6E6EA);
  border-radius: 10px;
  background: #FAFAFC;
}
.dv-cambios__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dv-cambios__lista li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dv-texto, #6B6B72);
}
.dv-cambios__lista li:last-child { margin-bottom: 0; }
.dv-cambios__lista li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cobalto, #1A32C1);
  font-weight: 700;
}
.dv-cambios__lista strong {
  color: var(--dv-texto-fuerte, #0B0B0C);
  font-weight: 600;
}
.dv-cambios__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cobalto, #1A32C1) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- "¿Tenés receta?" --- */
.dv-receta { margin: 12px 0 0; }
.dv-receta__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid #CFE8D6;
  border-radius: 10px;
  background: #F2FBF5;
  color: #14532D !important;
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.dv-receta__link:hover {
  background: #E6F7EC;
  border-color: #A7D7B6;
}
.dv-receta__icono {
  flex: 0 0 auto;
  display: inline-flex;
  color: #128C4A;
}
.dv-receta__link strong {
  display: block;
  color: #0B3D22;
  font-weight: 650;
}

/* --- Aviso de receta en la página de gracias --- */
.dv-gracias-receta {
  margin: 0 0 32px;
  padding: 24px 26px;
  border-left: 4px solid var(--cobalto, #1A32C1);
  border-radius: 10px;
  background: #F4F6FF;
}
.dv-gracias-receta__titulo {
  margin: 0 0 8px !important;
  font-size: 19px;
  line-height: 1.25;
  color: var(--dv-texto-fuerte, #0B0B0C);
}
.dv-gracias-receta__texto {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dv-texto, #6B6B72);
  max-width: 60ch;
}
.dv-gracias-receta__btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  background: var(--cobalto, #1A32C1);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
}
.dv-gracias-receta__btn:hover { background: #142794; color: #fff !important; }
.dv-gracias-receta__nota {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: #8A8A92;
}

/* --- Formulario de arrepentimiento --- */
.dv-arr { max-width: 560px; }
.dv-arr__intro {
  margin: 0 0 26px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #FAFAFC;
  border: 1px solid var(--borde, #E6E6EA);
  font-size: 14px;
  line-height: 1.6;
  color: var(--dv-texto, #6B6B72);
}
.dv-arr__campo { margin: 0 0 16px; }
.dv-arr__campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dv-texto-fuerte, #0B0B0C);
}
.dv-arr__campo input,
.dv-arr__campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #D8D8DE;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
.dv-arr__campo input:focus,
.dv-arr__campo textarea:focus {
  outline: none;
  border-color: var(--cobalto, #1A32C1);
  box-shadow: 0 0 0 3px rgba(26, 50, 193, .12);
}
.dv-arr__trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.dv-arr__enviar button {
  padding: 14px 30px;
  border: 0;
  border-radius: 8px;
  background: var(--dv-texto-fuerte, #0B0B0C);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.dv-arr__enviar button:hover { background: var(--cobalto, #1A32C1); }
.dv-arr__error {
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: 8px;
  background: #FEF3F2;
  border-left: 4px solid #B42318;
  color: #912018;
  font-size: 14px;
}
.dv-arr--ok {
  padding: 26px 28px;
  border-radius: 10px;
  background: #ECFDF3;
  border-left: 4px solid #0E8F5A;
}
.dv-arr--ok h2 { margin: 0 0 10px !important; font-size: 20px; color: #05603A; }
.dv-arr--ok p { font-size: 14.5px; line-height: 1.6; color: #14532D; }
.dv-arr__codigo {
  margin: 6px 0 16px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #05603A;
}

@media (max-width: 768px) {
  .dv-gracias-receta { padding: 20px; }
  .dv-gracias-receta__btn { display: block; text-align: center; }
}

/* ==========================================================================
   MEDIDAS Y DETALLES DEL ARMAZÓN  (v2.17.0)
   ========================================================================== */

.dv-medidas {
  margin: 20px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--borde, #E6E6EA);
  border-radius: 10px;
  background: #fff;
}
.dv-medidas__titulo {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dv-texto-fuerte, #0B0B0C);
}
.dv-medidas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0;
  margin: 0;
  background: #FAFAFC;
  border: 1px solid var(--borde, #E6E6EA);
  border-radius: 8px;
  overflow: hidden;
}
.dv-medidas__grid > div {
  margin: 0;
  padding: 11px 13px;
  background: #FAFAFC;
  border-right: 1px solid var(--borde, #E6E6EA);
  border-bottom: 1px solid var(--borde, #E6E6EA);
}
.dv-medidas__grid dt {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9A9AA2;
  font-weight: 600;
}
.dv-medidas__grid dd {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--dv-texto-fuerte, #0B0B0C);
  font-variant-numeric: tabular-nums;
}
.dv-medidas__ayuda {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8A8A92;
}
.dv-medidas__ayuda strong { color: var(--dv-texto, #6B6B72); font-weight: 650; }