.wdg-producto {
    border: 1px solid #C6E63A !important;
    border-radius: 8px !important;
    overflow: hidden;
    padding: 14px 14px 14px 14px !important;
    }
.comprar {
     border: none !important;
     background-color: #C6E63A !important;
     color: black !important;
     width: 100% !important;
     font-weight: 400 ! important;
}
.fa-shopping-cart {
    display: none !important;
}
.btn-primary {
     border: none !important;
     background-color: #C6E63A !important;
     color: black !important;
     width: 100% !important;
     font-weight: 400 ! important;
     text-transform: uppercase;
    justify-self: self-start !important;
     padding-left: 40px;
     padding-right: 40px;                           
}
.control-precio {
    justify-self: self-start;
}

.form {
        padding: 40px  !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        color: #C6E63A !important;
        width: 70%;
    }
    
.form-title {
        font-size: 30px;
        font-weight: 700;
    }
    
.site-footer {
  color: #000 !important;
}

.site-footer a,
.site-footer .btn-link,
.site-footer span,
.site-footer div {
  color: #000 !important;
}

.wrapper {
    min-height: 0%;
    }
    img.restore-pointer-events:hover {
  opacity: 1;
}

/* ===== Tarjetas de producto: layout en columna, textos a la izquierda ===== */
.wdg-producto .caption .resumen {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: baseline !important;
    justify-items: start !important;
    text-align: left !important;
    row-gap: 6px !important;
}

/* Nombre: segundo en peso, se muestra arriba. Ocupa toda la fila */
.wdg-producto .producto-descripcion {
    order: 1 !important;
    grid-column: 1 / -1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-align: left !important;
}
.wdg-producto .producto-descripcion a,
.wdg-producto .producto-descripcion span {
    text-align: left !important;
}

/* Precio: el de mayor peso, debajo del nombre. Signo pegado al monto */
.wdg-producto h3.precio {
    order: 2 !important;
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    gap: 0 !important;
    white-space: nowrap !important;
}
.wdg-producto h3.precio .precio-final {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    order: 2 !important;
}
.wdg-producto h3.precio .precio-final,
.wdg-producto h3.precio .monto {
    font-size: 26px !important;
    font-weight: 800 !important;
}
.wdg-producto h3.precio .moneda {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 1px 0 0 !important;
}

/* Stock: pill verde con texto blanco y bordes redondeados */
.wdg-producto .producto-stock {
    order: 3 !important;
    grid-column: 1 !important;
    margin: 2px 0 0 0 !important;
    text-align: left !important;
}
.wdg-producto .producto-stock .text-success,
.wdg-producto .producto-stock .text-error {
    display: inline-block;
    background-color: #4CAF50 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
}
.wdg-producto .producto-stock .text-error {
    background-color: #E53935 !important;
}
.wdg-producto .producto-stock .text-success span,
.wdg-producto .producto-stock .text-error span {
    color: #ffffff !important;
}

/* "Colores a eleccion": misma fila que el stock, a su derecha */
.wdg-producto .atributos-a-eleccion {
    order: 4 !important;
    grid-column: 2 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin: 0 0 0 10px !important;
    align-self: center !important;
    color: #666 !important;
}

/* Separacion entre bloque de texto y boton */
.wdg-producto .producto-acciones {
    margin-top: 14px !important;
}

/* ===== Boton dentro del promo "Viaja Ligero" = mismas reglas que "Agregar al carro" ===== */
.teens-button {
    background-color: #C6E63A !important;
    color: black !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
    padding: 10px 40px !important;
}


/* ===== Imagenes de producto: mismo tamano en todas las tarjetas ===== */
.wdg-producto .figure {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}
.wdg-producto img.producto-imagen {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ===== Banner / carrusel: hacerlo responsive ===== */
/* El min-height fijo (563px) hacia que el banner ocupara casi toda la
   pantalla en resoluciones chicas. Lo hacemos proporcional a la imagen. */
.carousel-inner {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1170 / 563 !important;
    max-height: 460px !important;
}
.carousel.carousel-slide,
.carousel .carousel-inner .item,
.carousel .carousel-inner .carousel-item {
    height: 100% !important;
    min-height: 0 !important;
}
.carousel .carousel-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: 100% !important;
}

/* ===== Responsive: ajustes en pantallas chicas ===== */
@media (max-width: 991px) {
    .wdg-producto h3.precio,
    .wdg-producto h3.precio .precio-final,
    .wdg-producto h3.precio .monto {
        font-size: 22px !important;
    }
    .wdg-producto h3.precio .moneda { font-size: 14px !important; }
    .wdg-producto .producto-descripcion { font-size: 15px !important; }
    .wdg-producto .figure { height: auto !important; aspect-ratio: 3 / 4 !important; }
}
@media (max-width: 767px) {
    .wdg-producto h3.precio,
    .wdg-producto h3.precio .precio-final,
    .wdg-producto h3.precio .monto {
        font-size: 20px !important;
    }
    .wdg-producto h3.precio .moneda { font-size: 13px !important; }
    .wdg-producto .producto-descripcion { font-size: 14px !important; }
    .wdg-producto .figure { height: auto !important; aspect-ratio: 3 / 4 !important; }
    .wdg-producto { padding: 12px !important; }
}
@media (max-width: 480px) {
    .wdg-producto h3.precio,
    .wdg-producto h3.precio .precio-final,
    .wdg-producto h3.precio .monto {
        font-size: 18px !important;
    }
    .wdg-producto h3.precio .moneda { font-size: 12px !important; }
    .wdg-producto .caption .resumen { row-gap: 4px !important; }
    .wdg-producto .atributos-a-eleccion { font-size: 11px !important; margin-left: 8px !important; }
}


/* ===== Promos "Viaja Ligero" / "Tu set de viaje": imagen de fondo responsive ===== */
/* El background-size:auto dejaba espacio vacio a la derecha en algunas
   resoluciones. Con cover la imagen siempre llena el contenedor. */
.wdg-caja .position-absolute-cover {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ===== Footer: acortar el indice de paginas ===== */
/* La lista de paginas se mostraba en una sola columna muy larga.
   El submenu de "Productos" (7 items) se reparte en 2 columnas y
   se reducen espacios para que el footer no quede tan alto. */
.site-footer .span3 > ul.unstyled {
    margin-bottom: 0 !important;
}
.site-footer .span3 > ul.unstyled > li {
    margin-bottom: 2px !important;
}
/* Submenu de Productos (Mochilas, Valijas, etc.) en 2 columnas */
.site-footer .span3 ul.unstyled ul.unstyled {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 2px 16px !important;
    margin: 2px 0 4px 0 !important;
}
.site-footer .span3 ul.unstyled ul.unstyled li {
    flex: 0 0 calc(50% - 16px) !important;
    margin-bottom: 2px !important;
    text-align: left !important;
}
.site-footer .span3 ul.unstyled li a,
.site-footer .span3 ul.unstyled li .btn-link {
    line-height: 1.4 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}


/* ===== Header: logo mas pequeno y alineado verticalmente con el menu ===== */
.brand {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
/* Reducir el espacio extra en la parte superior del header */
.navbar-inner .nav {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}
.logo-market {
    height: 44px !important;
    width: auto !important;
    margin: 10px 0 0 0 !important;
    vertical-align: middle !important;
}

/* ===== Precio tachado (descuento): arriba y del tamano del nombre ===== */
.wdg-producto h3.precio .precio-tachado {
    order: 1 !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 1px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #999 !important;
    text-decoration: line-through !important;
    margin: 0 0 1px 0 !important;
}
.wdg-producto h3.precio .precio-tachado .monto,
.wdg-producto h3.precio .precio-tachado .moneda {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #999 !important;
    text-decoration: line-through !important;
}


/* Responsive: precio tachado acompana el tamano del nombre */
@media (max-width: 991px) {
    .wdg-producto h3.precio .precio-tachado,
    .wdg-producto h3.precio .precio-tachado .monto,
    .wdg-producto h3.precio .precio-tachado .moneda {
        font-size: 15px !important;
    }
}
@media (max-width: 767px) {
    .wdg-producto h3.precio .precio-tachado,
    .wdg-producto h3.precio .precio-tachado .monto,
    .wdg-producto h3.precio .precio-tachado .moneda {
        font-size: 14px !important;
    }
}



/* === Fix precio pagina de producto: ANTES arriba del precio actual, alineado a la izquierda === */
.wdg-producto .precio-completo,
.precio-completo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
    margin-top: 10px !important;
}
.wdg-producto .precio-completo .precio-sin-descuento,
.precio-completo .precio-sin-descuento {
    order: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin: 0 0 2px 0 !important;
    vertical-align: baseline !important;
    text-align: left !important;
}
.wdg-producto .precio-completo .precio-final,
.precio-completo .precio-final {
    order: 2 !important;
    display: flex !important;
    align-items: baseline !important;
    text-align: left !important;
    margin: 0 !important;
}
.wdg-producto .precio-completo .subtotal,
.precio-completo .subtotal {
    order: 3 !important;
    text-align: left !important;
    margin: 4px 0 0 0 !important;
}

/* === Alinear Colores y Cantidad a la izquierda (igual que titulo, precio y boton) === */
.wdg-producto .form-horizontal .control-group,
.form-horizontal .control-group {
    margin-left: 0 !important;
}
.wdg-producto .form-horizontal .control-label,
.form-horizontal .control-label {
    float: none !important;
    width: auto !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    display: block !important;
}
.wdg-producto .form-horizontal .controls,
.form-horizontal .controls {
    margin-left: 0 !important;
}