/*------------------------------------------------------------------
[ Logo de texto ]*/
.logo-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-family: Poppins-Bold;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.5px;
  margin: 0;
  text-transform: none;
  white-space: nowrap;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.logo-text .logo-text-1 {
  color: #333333;
}

.logo-text .logo-text-2 {
  color: #717fe0;
}

.logo:hover .logo-text .logo-text-1 {
  color: #717fe0;
}

.logo:hover .logo-text .logo-text-2 {
  color: #333333;
}

/* Punto decorativo al final, tipo marca */
.logo-text .logo-text-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-radius: 50%;
  background-color: #717fe0;
}

@media (max-width: 991px) {
  .logo-text {
    font-size: 24px;
  }
}

/*------------------------------------------------------------------
[ Footer de la tienda ]*/

/* Los iconos de pago ya no son enlaces: se atenuan y se realzan al pasar. */
.footer-pay-icon {
  opacity: 0.55;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.footer-pay-icon:hover {
  opacity: 1;
}

/* Separa el bloque legal de las columnas superiores. */
footer .stext-107.txt-center {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}

/*------------------------------------------------------------------
[ Banner de categorias del home ]*/

/* La portada se guarda a 1920x930 porque el slider la pinta a sangre, pero el
   banner se diseno a 1200x809 (mas alto). Se recorta a esa proporcion en vez de
   dejar que la imagen ancha achate el bloque y apriete el texto superpuesto. */
.block1 img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 809;
  object-fit: cover;
  display: block;
}

/*------------------------------------------------------------------
[ Tarjetas de producto ]*/

/* Las imagenes se suben a 1200x1486, siempre la misma proporcion. Reservar el
   hueco evita que la grilla salte cuando terminan de cargar. */
.block2-pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 1486;
  object-fit: cover;
  display: block;
}

/* Los nombres varian de una a dos lineas y descuadraban los precios dentro de
   una misma fila. Se recortan a dos lineas y se reserva esa altura siempre. */
.block2-txt-child1 .js-name-b2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}

/* La galeria de la ficha lleva width/height en el HTML para reservar el hueco
   antes de que cargue. util.css solo fija el ancho, asi que sin esto el atributo
   height quedaria como alto fijo y deformaria la imagen. */
.wrap-pic-w img {
  height: auto;
}

/* El banner de categorias de la home (.block1) reusa .wrap-pic-w, pero ahi si hace
   falta recortar a una relacion fija en vez de dejar que el alto flote segun la
   imagen: sin esto, una portada con una proporcion distinta a 1920x930 (el tamano al
   que Category::savePortada() ya recorta todo, pero el navegador no lo sabe) deforma
   la altura de esa tarjeta puntual y desalinea la fila con las otras dos. Mismo
   patron que .block2-pic img (miniaturas de producto) unas lineas mas arriba. Va
   despues de .wrap-pic-w img a proposito: misma especificidad, gana el que viene
   ultimo en el archivo. */
.block1 img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 930;
  object-fit: cover;
  display: block;
}

/*------------------------------------------------------------------
[ Disponibilidad en la ficha de producto ]*/

.stock-in {
  color: #00ad5f;
}

.stock-out {
  color: #e65540;
}

/* El boton deshabilitado no debe competir con el de compra: se apaga en vez de
   usar el fondo oscuro del tema, que resultaba mas llamativo que el activo. */
.btn-stock-out {
  background-color: #e6e6e6;
  color: #888;
  cursor: not-allowed;
}

/*------------------------------------------------------------------
[ Mini-carrito: cantidad y quitar ]*/

/* El stepper del tema (.wrap-num-product) mide 140px de ancho fijo, pensado para
   la ficha de producto: no entra en la columna angosta del carrito desplegable
   junto a la miniatura. Este es un widget propio, compacto, solo para esta lista.
   Los botones centran un icono zmdi (no texto), por eso usan flex en vez del
   truco de line-height, que estaba calibrado para un caracter y no para un
   glifo de icono. El relleno solido en hover es el mismo tratamiento que
   .hov-btn3 usa en el resto del sitio, para que se sientan del mismo sistema. */
.header-cart-item-qty {
  gap: 8px;
}

.cart-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  font-size: 11px;
  color: #888;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.cart-qty-btn:hover {
  background-color: #717fe0;
  border-color: #717fe0;
  color: #fff;
}

.cart-qty-value {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  color: #333;
}

/* El overlay de "quitar" sobre la miniatura ya lo trae el tema
   (.header-cart-item-img::after en main.css), pero ahi arranca en opacity:0 y
   depende de :hover para aparecer. En touch no hay :hover: el tap igual dispara
   el click y borraria el producto sin haber mostrado nunca el aviso. Se deja
   siempre visible, tenue, y se intensifica en hover/focus en vez de aparecer
   de la nada. */
.header-cart-item-img::after {
  opacity: 0.45;
}

.header-cart-item-img:hover::after {
  opacity: 1;
}

/*------------------------------------------------------------------
[ Pagina de carrito /cart/cart ]*/

/* Mismo gesto que el mini-carrito (overlay + X para quitar), pero como clase
   propia: .header-cart-item-img viene dimensionada para la miniatura de 60px
   del drawer, no para la columna-1 de la tabla completa (133px). Aqui el icono
   es un <i> real en vez del glifo por CSS, para no depender de una fuente
   distinta (Linearicons) solo para esto. */
.cart-table-img {
  position: relative;
  width: 90px;
  cursor: pointer;
}

.cart-table-img img {
  width: 100%;
  display: block;
}

.cart-table-img-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 18px;
  opacity: 0.45;
  transition: opacity 0.2s;
}

.cart-table-img:hover .cart-table-img-overlay {
  opacity: 1;
}

/* La tabla del tema no trae su propio estilo de boton +/-: reutiliza
   .wrap-num-product de la ficha de producto, que a los 145px de la columna-4
   le entra justo (a diferencia del drawer angosto del mini-carrito, donde ese
   mismo widget de 140px no cabia y hizo falta uno compacto aparte). */
.table-shopping-cart .wrap-num-product {
  margin: 0 auto;
}

/* Los botones +/- de esta tabla usan clases propias (cart-num-down/up), no
   btn-num-product-down/up: esas las engancha main.js de forma directa al cargar
   la pagina, y dejarian de responder en cuanto la tabla se reemplace tras un
   cambio sin recarga. Se duplican aqui las mismas medidas que ya traian en
   main.css para que se vean identicas. */
.cart-num-down,
.cart-num-up {
  width: 45px;
  height: 100%;
  cursor: pointer;
}

/*------------------------------------------------------------------
[ Catalogo /store ]*/

/* El tema no trae un <select> propio del storefront (select2 es del panel
   admin), asi que el filtro de categoria y el orden toman solo el estilo
   minimo para calzar con el texto stext-106 de su label. Ancho fijo para que
   el recuadro no cambie de tamano segun cuan larga sea la opcion elegida. */
.store-select {
  width: 200px;
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 10px;
  background-color: #fff;
}

/*------------------------------------------------------------------
[ Checkout /cart/checkout ]*/

/* El tema no trae un formulario propio para fondo claro (.wrap-input1/.input1 del
   footer son para el fondo oscuro). Estilo minimo, consistente con .store-select,
   para los campos del formulario de facturacion. */
.checkout-field {
  margin-bottom: 18px;
}

.checkout-field label {
  display: block;
  font-family: Poppins-Regular;
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}

.checkout-field input,
.checkout-field select {
  width: 100%;
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #333;
  /* util.css trae un reset global (input, textarea, label { border: none; }) para
     todo el sitio, pensado para su propio patron de "borde en el div envolvente,
     input transparente adentro" (.bor8). Esta clase lo pisa con su propio borde
     directo en el input. Fondo #f7f7f7 (el mismo gris que ya usa .num-product en
     el tema) en vez de blanco puro: un borde claro sobre fondo blanco se pierde
     sin importar cuanto se oscurezca, porque no hay contraste de superficie, solo
     de linea. Con relleno gris, el input se distingue de la pagina aunque el
     borde fuera invisible.  */
  border: 1px solid #767676;
  border-radius: 3px;
  padding: 10px 12px;
  background-color: #f7f7f7;
}

.checkout-field input:focus,
.checkout-field select:focus {
  outline: none;
  border-color: #717fe0;
  background-color: #fff;
}

/* select2 reemplaza el <select> nativo (state/city) por su propio widget, asi que las
   reglas de arriba dejan de aplicarse visualmente: esto repite el mismo look (borde,
   radio, alto, relleno) sobre las clases que select2 arma en su lugar. */
.checkout-field .select2-container--default .select2-selection--single {
  height: 42px;
  border: 1px solid #767676;
  border-radius: 3px;
  background-color: #f7f7f7;
}

.checkout-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  padding-left: 12px;
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #333;
}

.checkout-field .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
  right: 8px;
}

.checkout-field .select2-container--default.select2-container--open .select2-selection--single,
.checkout-field .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #717fe0;
  background-color: #fff;
}

.checkout-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #767676;
}

.checkout-field .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: not-allowed;
}

/* Metodos de pago como tarjetas seleccionables (radio real por debajo, escondido)
   en vez de un <select> perdido entre el resto de los campos: el pago queda al
   lado del total, que es donde el cliente lo espera ver. */
.checkout-payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.checkout-payment-option {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  min-height: 90px;
  padding: 18px 12px;
  border: 2px solid #e1e1e1;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.checkout-payment-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-payment-option i {
  font-size: 24px;
  color: #717fe0;
}

/* :has() cubre navegadores modernos; is-selected (via JS) es el respaldo para
   los que no lo soporten todavia. */
.checkout-payment-option:has(input:checked),
.checkout-payment-option.is-selected {
  border-color: #717fe0;
  background-color: rgba(113, 127, 224, 0.06);
  box-shadow: 0 3px 10px rgba(113, 127, 224, 0.15);
}

.checkout-payment-option span {
  font-family: Poppins-Medium, Poppins-Regular;
  font-size: 14px;
  color: #333;
}

.checkout-payment-icon {
  height: 22px;
  padding: 9px 18px;
  background-color: #eef4fc;
  border-radius: 4px;
}

/* Aviso mientras Shipping Address esta incompleto (ver isShippingAddressComplete()
   en functions.js): texto discreto, no un error, todavia no se hizo nada mal. */
#paymentMethodPlaceholder {
  font-family: Poppins-Regular;
  font-style: italic;
  color: #999;
  background-color: #f7f7f7;
  border: 1px dashed #ccc;
  border-radius: 4px;
  padding: 14px 16px;
}

/* Mismo patron visual que .checkout-payment-option (tarjeta seleccionable, radio
   escondido debajo), para el tipo de direccion (House/Apartment). Clase propia y
   no reusar la de pago: son dos grupos de opciones sin relacion entre si, y
   compartir el nombre hubiera sido confuso mas adelante. Borde #767676, no #ccc:
   el mas claro ya se reporto como poco visible en los inputs de esta misma pagina. */
.checkout-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkout-option {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #767676;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.checkout-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-option:has(input:checked),
.checkout-option.is-selected {
  border-color: #717fe0;
  background-color: rgba(113, 127, 224, 0.06);
}

.checkout-option span {
  font-family: Poppins-Regular;
  font-size: 14px;
  color: #333;
}