.search_bar {
     background-color: rgb(52, 52, 52);
     height: 40px;
     width: 250px;
     font-size: 1rem;
     margin-left: 0px;
     margin-right: 0px;
     border-radius: 18px;
     border: none;
     color: white;
     box-shadow: 0px 0px 0px 1px rgb(255, 255, 255);
     padding-left: 30px;
     background-image: url('../imagenes/logos/search.png');
     background-size: 16px 16px;
     background-repeat: no-repeat;
     background-position: 8px center;
     font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }


 #loadingAnim {
     position: fixed;
     background-color: #5a5a5a8a;
     width: 100%;
     height: 200%;
     z-index: 15;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     user-select: none;
 }

 hr2 {
     width: 95% !important;
     border: 2px solid #f3af61 !important;
     border-radius: 2px !important;
     margin-bottom: 20px !important;
     margin-top: 15px !important;
     justify-self: center;
     display: flex;
 }

 #vermas {
     font-size: 15px;
     margin-top: 5px;
     margin-bottom: 5px;
     color: #f08f35;
     text-decoration: underline;
     width: -webkit-fill-available;
 }

 #vermas:hover {
     text-decoration: underline;
     color: #b06826;
     cursor: pointer;
 }

 #selectModelosCont {
     display: flex;
     flex-direction: column;
     text-align: center;
 }

 #selectLabel {
     font-size: 12px;
     margin-top: 10px;
 }

 #custom_select {
     margin-left: 5px;
     width: 95%;
     padding: 5px 0px;
     border: 1px solid #d0d5dd;
     border-radius: 8px;
     background-size: 16px;
     font-size: 15px;
     color: #111;
     cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;

 }

 #custom_select:hover {
     border-color: #b7bcc6;
 }

 #custom_select:focus {
     border-color: #3576f0;
     box-shadow: 0 0 0 3px rgba(53, 118, 240, 0.25);
     outline: none;
 }

 #custom_select:disabled {
     opacity: .6;
     cursor: not-allowed;
 }

 #loadingAnimGif {
     position: fixed;
     width: 130px;
     height: 130px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .textContainer {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-bottom: 6px;
 }

 #leftContainer {
     display: flex;
     flex-direction: column;
     width: auto;
 }

 .producto {

     box-sizing: border-box;
     width: 90%;
     justify-self: center;
     padding: 5px;
     background: rgb(255, 255, 255);
     border-radius: 4px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0px 0px 6px 1px #bbbbbb;
 }


 #contUnidades {
     display: flex;
     flex-direction: column;
 }

 #prodDataContainer {
     display: flex;
     flex-direction: column-reverse;
     justify-content: space-between;
 }

 #pPrecioLista {
     font-size: 15px;
 }

 #precioContainer {
     display: flex;
     flex-direction: row;
     align-self: center;
     align-items: center;
     width: 100%;
     text-align-last: center;
     justify-content: center;
 }

 p2 {
     font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

     text-decoration: none;
     color: #3d3d3dc7;
     text-align: center;
     font-size: 10px;
     width: 90%;
     justify-self: center;
 }

 .producto:hover {
     box-shadow: 0px 0px 0px 1.5px orange;
 }

 #prod-info-text {
     margin-left: 0px;
     margin-top: 0px;
     width: -webkit-fill-available;
 }

 #prod-info-udisp {
     display: inline;
     margin-left: 0px;
     font-size: 15px;
     margin-top: 10px;
     text-align: center;
     width: -webkit-fill-available;
 }

 #prod-info-udisp-dis {
     display: none;
 }

 #prod-info-price {
     margin-left: 0px;
     margin-top: 0px;
     margin-bottom: 5px;
     font-weight: bold;
     font-family: 'Montserrat';
     font-size: 25px;
     width: -webkit-fill-available;
     color: rgb(53, 53, 53);
     text-wrap: nowrap;
 }

 #prod-info-off {
     font-size: 12px;
     margin: 0px;
     width: -webkit-fill-available;
     color: green;
     text-wrap: nowrap;
 }

 #prod-info-efect {
     font-size: 20px;
     margin: 0px;
     width: -webkit-fill-available;
     color: green;
     text-wrap: nowrap;
 }

 #prod-info-marca {
     width: 90px;
     height: auto;
     margin-top: 10px;
     margin-left: auto;
     margin-bottom: 15px;
     margin-right: auto;
 }

 #contUnidadesBtnCarrito {
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
     margin-top: 10px;
     gap: 10px;
     justify-content: center;
 }

 #prod-info-efect-block {
     display: flex;
     flex-direction: column;
     margin-top: 0px;
     height: 50px;
     margin-left: 5px;
     border-radius: 5px;
     padding: 3px;
     background: #00ff001c;
     justify-content: space-evenly;
     box-shadow: 0px 0px 0px 1px yellowgreen;
 }



 #prod-info-title {
     text-align: center;
     margin-top: 0;
     margin-left: 0;
     height: auto;
     white-space: normal;
     word-break: break-word;
     overflow-wrap: break-word;
     border-radius: 2px;
     width: -webkit-fill-available;
     padding: 5px;
     position: relative;
 }

 #prod-info-title span {
     display: inline-block;
     white-space: normal;
     word-break: break-word;
     overflow-wrap: break-word;

     transition: transform 0.15s ease;
     will-change: transform;
     font-size: 15px;
     height: max-content;
     margin-bottom: 15px;
 }

 #container {
     display: flex;
     flex-direction: column;
     padding: 5px;
     justify-content: space-between;
 }

 #title-cat {
     align-self: center;
     margin-left: 0px;
     width: auto;
     font-size: 20px;
     font-weight: bold;
     text-decoration: underline;
     text-underline-offset: 5px;
     font-family: 'Montserrat', sans-serif;
     margin-bottom: 20px;
     margin-top: 5px;
 }

 #leftSection {

     background-color: rgb(255, 255, 255);
     display: flex;
     box-shadow: 0px 0px 5px 1px rgb(158, 158, 158);
     border-radius: 5px;
     margin-bottom: 10px;
     flex-direction: column;
 }

 #categoriaActual {
     display: flex;
     transition: all 1s ease;
     max-width: 150px;
     background-color: #e5e3dd;
     margin-left: 5px;
     border-radius: 4px;
     font-size: 20px;
     place-items: center;
     color: #686868;
     font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     justify-content: space-between;
     transition: all 1s ease;
 }

 /* Cuando está deshabilitado */
 #categoriaActual.disabled {
     background-color: transparent !important;
     cursor: default !important;
     pointer-events: none !important;
     color: #68686800 !important;
 }

 /* Hover solo si no tiene la clase disabled */
 #categoriaActual:not(.disabled):hover {
     cursor: default;
 }


 #leftFilterContainer {
     width: 100%;
     margin-right: 20px;
     text-align: -webkit-center;
 }

 .carousel-container {
     position: relative;
     width: 100%;
     height: 220px;
     margin-top: -30px;
     aspect-ratio: 1 / 1;
     background-color: white;
     overflow: hidden;
     border-radius: 4px;
 }

 .carousel-inner {
     display: flex;
     transition: transform 0.5s ease;
     width: 100%;
     height: 100%;
     will-change: transform;
 }

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     will-change: transform;
     background-color: rgba(255, 255, 255, 0.3);
     border: none;
     font-size: 24px;
     cursor: pointer;
     border-radius: 50%;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s;
 }

 .carousel-btn:hover {
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 0px 0px 0.5px gray;
 }

 .carousel-btn.prev {
     color: rgba(0, 0, 0, 0.5);
 }

 .carousel-btn.next {
     color: rgba(0, 0, 0, 0.5);
     right: 0px;
 }

 .producto-img {
     width: 100%;
     height: 100%;
     flex-shrink: 0;
     object-fit: contain;
     transition: opacity 0.3s ease;
     opacity: 1;
 }


 .producto-info {
     display: flex;
     justify-content: center;
     width: 100%;
     text-align-last: center;
     flex-direction: column;
     align-items: center;
 }

 .producto-img.loading {
     opacity: 0;
 }


 .filtros {
     display: flex;
     flex-direction: row;
     width: -webkit-fill-available;
     justify-items: center;
     overflow: auto;
 }

 .filter-text.pressed {
     color: orange;
     font-weight: bold;
     text-decoration: underline;
     text-underline-offset: 5px
 }

 .filtros p1 {
     text-wrap: nowrap;
     display: flex;
     flex-direction: column;
     border-right: ridge;
     font-family: 'Montserrat', sans-serif;
     user-select: none;
     font-size: 15px;
     align-self: center;
     cursor: pointer;
     align-items: center;
     width: auto;
     padding: 3px;
     margin-bottom: 5px;
     color: rgb(0, 0, 0);
 }

 .filtros p1 .pressed {
     color: orange;
     text-decoration: underline;
     text-underline-offset: 5px;
 }

 .filter-text:hover {
     color: orange;
     text-decoration: underline;
     text-underline-offset: 5px
 }

 :root {
     --font-heading: 'Oswald', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }

 .producto .texto {
     width: 500px;
 }

 #containerSelecUnidad {
     display: flex;
     justify-content: center;
 }

 #containerSelecUnidadDis {
     display: none;
 }

 #prod-unidad-btn-minus {
     width: 30px;
     height: 30px;
     background-color: darkslategray;
     border-radius: 0px;
     color: white;
     font-size: 20px;
     border-bottom-left-radius: 4px;
     border-top-left-radius: 4px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px darkslategray;
     user-select: none;
 }

 #prod-unidad-btn-add {
     width: 30px;
     height: 30px;
     background-color: darkslategray;
     border-radius: 0px;
     color: white;
     font-size: 20px;
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px darkslategray;
     user-select: none;
 }

 #prod-unidad-btn-add-dis {
     width: 30px;
     height: 30px;
     background-color: rgb(126 126 126);
     border-radius: 0px;
     color: white;
     font-size: 20px;
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px rgb(126 126 126);
     user-select: none;
 }

 #prod-info-envio-cont {
     display: flex;
     width: 95%;
     text-wrap: nowrap;
     height: auto;
     flex-direction: row;
     justify-content: center;
     align-content: center;
     align-items: center;
 }

 #prod-info-envio {
     width: auto;
     margin-left: 10px;
     font-size: 12px;
     height: auto;
     padding: 0px;
     margin-top: 5px;
     margin-bottom: 5px;
 }

 #prod-info-envio-img {
     width: 70px;
     height: 10px;
     margin-top: 5px;
     margin-left: 5px;
     margin-bottom: 5px;
 }

 #prod-unidad-btn-add {
     width: 30px;
     height: 30px;
     background-color: rgb(255, 255, 255);
     border-radius: 0px;
     color: rgb(255, 129, 56);
     font-size: 20px;
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px rgb(255, 129, 56);
     user-select: none;

 }

 #prod-unidad-btn-add:hover {
     background-color: rgb(255, 129, 56);
     outline: none;
     color: white;
     cursor: pointer;
 }

 #prod-unidad-btn-add-dis {
     width: 30px;
     height: 30px;
     background-color: rgb(186, 186, 186);
     border-radius: 0px;
     color: gray;
     font-size: 20px;
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px rgb(126 126 126);
     user-select: none;
 }

 #prod-unidad-btn-minus {
     width: 30px;
     height: 30px;
     background-color: rgb(255, 255, 255);
     border-radius: 0px;
     color: rgb(255, 129, 56);
     font-size: 20px;
     border-bottom-left-radius: 4px;
     border-top-left-radius: 4px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px rgb(255, 129, 56);
     user-select: none;
 }

 #prod-unidad-btn-minus-dis {
     width: 30px;
     height: 30px;
     border-bottom-left-radius: 4px;
     border-top-left-radius: 4px;
     background-color: rgb(186, 186, 186);
     color: gray;
     font-size: 20px;
     border: none;
     outline: none;
     box-shadow: 0px 0px 0px 1px rgb(126 126 126);
     user-select: none;
     cursor: default;
 }

 #prod-unidad-btn-minus:hover {
     background-color: rgb(255, 129, 56);
     outline: none;
     color: white;
     cursor: pointer;
 }

 #prod-unidad-text {
     user-select: none;
     font-family: 'Montserrat', sans-serif;
     width: 35px;
     height: 30px;
     background-color: rgb(255, 255, 255);
     box-shadow: 0px 0px 0px 1px #cbcbcb;
     border-radius: 0px;
     color: rgb(44, 44, 44);
     font-size: 15px;
     display: flex;
     text-align: center;
     align-content: center;
     align-items: center;
     justify-content: center;
 }

 #add_product {
     font-family: 'Montserrat', sans-serif;
     user-select: none;
     font-size: 18px;
     /* padding: 7px; */
     padding-top: 5px;
     padding-right: 10px;
     padding-left: 10px;
     padding-bottom: 5px;
     border-radius: 4px;
     cursor: pointer;
     margin-top: 0px;
     margin-bottom: 0px;
     color: rgb(255, 129, 56);
     box-shadow: 0px 0px 0px 1px rgb(255, 129, 56);
     text-align-last: center;
     background-color: white;
 }

 #add_product:hover {
     background-color: rgb(255, 129, 56);
     color: white;
 }

 .producto .descripcion .texto h1 {
     z-index: 5;
     position: relative;
     justify-self: center;
     font-family: var(--font-heading);
     font-weight: 700;
     letter-spacing: 0.02em;
     text-transform: uppercase;
     margin: 0 0 .0rem;
     line-height: 1.5;
     color: #3d3d3dc7;
     display: block;
     white-space: nowrap;
     overflow: hidden;
     font-size: 70px;
     line-height: 1.2;
     margin: 0;
 }

 .producto .texto li {
     margin-left: 25px;
     font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     margin: 0.6rem 0 0;
     color: #1d1d1dc7;
     line-height: 1;
     font-size: 18px;
 }

 .producto .imagen img {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     max-width: 700px;
     height: auto;
     border-radius: 8px;
     object-fit: cover;
     display: block;
     position: relative;
     z-index: 0;
     margin: 0;
 }

 #noStock {
     color: white;
     padding: 10px;
     background-color: red;
     text-align: center;
     width: auto;
     font-size: 20px;
     border-radius: 4px;
     margin-top: auto;
     margin-bottom: 0px;
 }


 @media (max-width: 800px) {
     .producto {
         flex-direction: column;
         text-align: center;
         height: auto;
         justify-self: center;
     }

     .producto .imagen img {
         max-width: 100%;
         height: auto;
     }

     .carousel-fade {
         height: 300px;
     }

     .carousel-fade img {
         height: 100%;
     }

     .producto .imagen::after {
         display: none;
     }
 }

 #br {
     height: 33.48px;
 }

 #brHeader {
     height: 30px;
 }

 #gridColumnChanger {
     display: none;
 }

 #productosContainer {
     width: -webkit-fill-available;

     display: grid;
     grid-template-columns: repeat(1, minmax(170px, 1fr));
     grid-auto-rows: auto;
     gap: 10px;
     justify-content: space-around;
     align-items: stretch;
 }

 #prod-info-title span {
     display: flex;
     white-space: wrap;
     will-change: transform;
     justify-content: center;
 }

 #prod-info-title.hover span {
     animation: scrollText linear infinite;
 }

 @keyframes scrollText {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(var(--scroll-distance));
     }
 }

 #ajustes {
     box-shadow: 0px 0px 5px 1px gray;
     display: flex;
     padding: 10px;
     align-items: center;
     height: 30px;
     width: -webkit-fill-available;
     background-color: white;
     justify-content: space-between;
 }

 #precSinImp {
     font-size: 13px;
     text-wrap: wrap;
     margin-top: 0px;
     width: 100%;
     text-align: center;
     background: antiquewhite;
     padding: 2px;
     margin-left: 10px;
     border-radius: 5px;
     color: rgb(136, 91, 51);
     box-shadow: 0px 0px 0px 1px sandybrown;
 }

 #precioSinImpValue {
     margin-top: 5px;
     font-weight: bold;
     font-size: 15px;
 }