/*
 * Previews del personalizador en carrito clásico y Cart Block.
 * Regla central: el WebP puede medir 1080x1350, pero su tamaño intrínseco
 * nunca debe gobernar el layout del carrito.
 */
.pzd-cart-preview-group,
.pzd-cart-block-previews{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  max-width:100%!important;
}

.pzd-cart-preview,
.pzd-cart-block-preview{
  margin:0!important;
  display:block!important;
  flex:0 0 auto!important;
  overflow:hidden!important;
  border:1px solid #e4e4e7!important;
  border-radius:8px!important;
  background:#f7f7f8!important;
}

/* Dos caras: suficientemente grandes para revisar diseño, sin romper el carrito. */
.pzd-cart-preview img,
.pzd-cart-block-preview img{
  display:block!important;
  width:150px!important;
  max-width:150px!important;
  min-width:0!important;
  height:188px!important;
  max-height:188px!important;
  aspect-ratio:4/5!important;
  object-fit:contain!important;
  background:#f7f7f8!important;
}

/* Una sola cara puede aprovechar un poco más de espacio. */
.pzd-cart-block-previews-single .pzd-cart-block-preview img,
.pzd-cart-preview-group:has(.pzd-cart-preview:only-child) .pzd-cart-preview img{
  width:190px!important;
  max-width:190px!important;
  height:238px!important;
  max-height:238px!important;
}

/*
 * WooCommerce Blocks. No alteramos las columnas internas del bloque: la regla
 * antigua max-width:none era la que permitía a la preview de 1080px crecer de
 * forma desproporcionada. Aquí sólo acotamos la celda visual.
 */
.wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-cart-item__image{
  box-sizing:border-box!important;
  min-width:0!important;
  width:330px!important;
  max-width:330px!important;
  overflow:visible!important;
}

.wc-block-cart-items__row.pzd-personalized-cart-row.pzd-one-preview .wc-block-cart-item__image{
  width:210px!important;
  max-width:210px!important;
}

.wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-cart-item__image > img,
.wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-cart-item__image > a > img,
.wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-image img{
  width:190px!important;
  max-width:190px!important;
  height:238px!important;
  max-height:238px!important;
  object-fit:contain!important;
}

.wc-block-cart-items__row.pzd-personalized-cart-row.pzd-two-previews .wc-block-cart-item__image > img,
.wc-block-cart-items__row.pzd-personalized-cart-row.pzd-two-previews .wc-block-cart-item__image > a > img,
.wc-block-cart-items__row.pzd-personalized-cart-row.pzd-two-previews .wc-block-components-product-image img{
  width:150px!important;
  max-width:150px!important;
  height:188px!important;
  max-height:188px!important;
}

/* Evita que reglas genéricas del tema conviertan el grupo en una imagen fluida. */
.wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews,
.wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-preview{
  max-width:100%!important;
}

@media (max-width:781px){
  /*
   * En móvil WooCommerce mantiene por defecto la geometría de las columnas
   * imagen/producto/total pensada para una miniatura pequeña. Como nuestros
   * diseños pueden mostrar dos caras, hacemos que SOLAMENTE las filas de
   * Personalizado pasen a una pila vertical. No alteramos el resto del carrito.
   */
  .wc-block-cart-items__row.pzd-personalized-cart-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "pzd-image"
      "pzd-product"
      "pzd-total"!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .wc-block-cart-items__row.pzd-personalized-cart-row > .wc-block-cart-item__image{
    grid-area:pzd-image!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .wc-block-cart-items__row.pzd-personalized-cart-row > .wc-block-cart-item__product{
    grid-area:pzd-product!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
  }

  .wc-block-cart-items__row.pzd-personalized-cart-row > .wc-block-cart-item__total{
    grid-area:pzd-total!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
    text-align:left!important;
  }

  /* El grupo de vistas usa el ancho disponible, nunca el tamaño 1080x1350. */
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews,
  .pzd-cart-preview-group{
    display:grid!important;
    gap:8px!important;
    width:100%!important;
    max-width:340px!important;
    min-width:0!important;
    margin:0!important;
    align-items:start!important;
  }

  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-double,
  .pzd-cart-preview-group:has(.pzd-cart-preview:nth-child(2)){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-single,
  .pzd-cart-preview-group:has(.pzd-cart-preview:only-child){
    grid-template-columns:minmax(0,1fr)!important;
    max-width:170px!important;
  }

  .pzd-cart-preview,
  .pzd-cart-block-preview{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .pzd-cart-preview img,
  .pzd-cart-block-preview img,
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-cart-item__image > img,
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-cart-item__image > a > img,
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-image img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:4/5!important;
    object-fit:contain!important;
    box-sizing:border-box!important;
  }

  /* Woo puede añadir márgenes/anchos a wrappers de imagen intermedios. */
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-image,
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-image > a{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  /* Evita desbordamientos de textos largos dentro del producto personalizado. */
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-name,
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-metadata,
  .wc-block-cart-items__row.pzd-personalized-cart-row .wc-block-components-product-details{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
}

@media (max-width:420px){
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews,
  .pzd-cart-preview-group{
    max-width:100%!important;
  }

  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-single,
  .pzd-cart-preview-group:has(.pzd-cart-preview:only-child){
    max-width:150px!important;
  }
}

/* Selector de talla editable por línea. La cantidad vuelve a ser el control
 * nativo de WooCommerce porque cada línea representa una talla concreta. */
.pzd-cart-size-editor{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:10px 0!important;
  font-size:14px!important;
}
.pzd-cart-size-editor>span{font-weight:500!important;}
.pzd-cart-size-editor select{
  min-width:92px!important;
  height:42px!important;
  padding:0 34px 0 12px!important;
  border:1px solid #cfcfd4!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#111!important;
  font:inherit!important;
}
.pzd-cart-size-editor.is-loading{opacity:.6!important;}
.pzd-cart-size-editor select:disabled{cursor:wait!important;}
.pzd-hide-static-size{display:none!important;}

@media (max-width:781px){
  .pzd-cart-size-editor{margin:10px 0 12px!important;}
  .pzd-cart-size-editor select{min-width:110px!important;}
}

/* La referencia del diseño es el título principal y abre el configurador. */
.pzd-cart-design-link{
  color:inherit!important;
  text-decoration:none!important;
  font-weight:600!important;
}
.pzd-cart-design-link:hover,
.pzd-cart-design-link:focus{
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
.pzd-hide-static-design{display:none!important;}


/* 0.3.16 · Una sola cara: el mockup ocupa el centro de su celda en carrito. */
.pzd-cart-preview-group:has(.pzd-cart-preview:only-child),
.pzd-cart-block-previews-single{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.pzd-cart-preview-group:has(.pzd-cart-preview:only-child) .pzd-cart-preview,
.pzd-cart-block-previews-single .pzd-cart-block-preview{
  margin-left:auto!important;
  margin-right:auto!important;
}
.wc-block-cart-items__row.pzd-personalized-cart-row.pzd-one-preview .wc-block-cart-item__image{
  text-align:center!important;
}
@media (max-width:781px){
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-single,
  .pzd-cart-preview-group:has(.pzd-cart-preview:only-child){
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* 0.3.20 — coherencia entre Cart Block y Mini-Cart Block. */
.pzd-cart-preview-group-single,
.pzd-cart-block-previews-single{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* El header del tema usa un z-index deliberadamente muy alto. El overlay del
 * Mini-Cart debe quedar por encima sin alterar el stacking del resto del sitio. */
.wc-block-mini-cart > .wc-block-components-drawer__screen-overlay,
.wc-block-mini-cart .wc-block-components-drawer__screen-overlay{
  z-index:2147483600!important;
}
.wc-block-mini-cart__drawer{
  z-index:2147483601!important;
}

/* Store API entrega la preview del diseño como imagen de producto. Una sola
 * cara debe quedar centrada dentro de la celda en cualquier ancho de drawer. */
.wc-block-mini-cart__drawer .pzd-personalized-store-item .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .pzd-personalized-store-item .wc-block-components-product-image{
  text-align:center!important;
}
.wc-block-mini-cart__drawer .pzd-personalized-store-item .wc-block-cart-item__image > a,
.wc-block-mini-cart__drawer .pzd-personalized-store-item .wc-block-components-product-image > a{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  width:100%!important;
}
.wc-block-mini-cart__drawer .pzd-personalized-store-item .wc-block-cart-item__image img,
.wc-block-mini-cart__drawer .pzd-personalized-store-item .wc-block-components-product-image img{
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
  object-fit:contain!important;
}

@media (max-width:781px){
  /* En el carrito completo, una única preview ocupa una columna estrecha pero
   * centrada. Antes el max-width era correcto pero margin:0 la dejaba a la izquierda. */
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-single,
  .pzd-cart-preview-group-single,
  .pzd-cart-preview-group:has(.pzd-cart-preview:only-child){
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* 0.3.21 — centrado robusto en Cart Block móvil y Mini-Cart. */
@media (max-width:781px){
  .wc-block-cart-items__row.pzd-personalized-cart-row > .wc-block-cart-item__image{
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews,
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-single,
  .wc-block-cart-items__row.pzd-personalized-cart-row .pzd-cart-block-previews-double{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
.wc-block-mini-cart__drawer .wc-block-cart-items__row.pzd-personalized-store-item.pzd-one-preview .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .wc-block-cart-items__row.pzd-personalized-store-item.pzd-one-preview .wc-block-components-product-image{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
}


/* 0.3.22 — remates de Cart Block / Mini-Cart.
 * Woo Blocks puede pintar el producto puente y nuestro título personalizado a
 * la vez. El JS elimina el enlace puente; esta regla evita un frame de
 * parpadeo si Woo vuelve a montarlo antes de que actúe el observer. */
.wc-block-mini-cart__drawer .pzd-personalized-store-item a:not(.pzd-cart-design-link).wc-block-components-product-name{
  display:none!important;
}

@media (max-width:781px){
  /* No dependemos exclusivamente de que pzd-personalized-cart-row haya sido
   * aplicada antes del primer layout. La presencia de nuestro enlace identifica
   * de forma inequívoca una fila Personalizado en navegadores actuales. */
  .wc-block-cart-items__row:has(.pzd-cart-design-link) > .wc-block-cart-item__image,
  .wc-block-cart-items__row .wc-block-cart-item__image.pzd-single-preview-cell{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    align-items:flex-start!important;
    justify-self:stretch!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  .wc-block-cart-items__row:has(.pzd-cart-design-link) > .wc-block-cart-item__image > *,
  .wc-block-cart-items__row .wc-block-cart-item__image.pzd-single-preview-cell > *{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .wc-block-cart-items__row:has(.pzd-cart-design-link) .pzd-cart-block-previews-single,
  .wc-block-cart-items__row .pzd-single-preview-cell .pzd-cart-block-previews-single{
    width:min(170px,100%)!important;
    max-width:170px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-content:center!important;
    justify-items:center!important;
  }
}


/* Bloqueo visual de checkout cuando el carrito contiene diseños vencidos. */
.pzd-checkout-blocked{
  opacity:.48!important;
  cursor:not-allowed!important;
  filter:grayscale(.35)!important;
}
.pzd-invalid-cart-warning{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:10px 12px!important;
  border:1px solid #d63638!important;
  border-radius:7px!important;
  background:#fcf0f1!important;
  color:#8a2424!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:600!important;
}