`: 1 px de alto con `margin:32px 0 31px`, o sea 64 px muertos que solo existen de `lg` para arriba. Con la barra lateral de categorias al lado el efecto es que la columna izquierda arranca en 555 px y la primera tarjeta en 654: 99 px de desnivel entre las dos columnas, que es justo lo que se ve como «descuadrado» en escritorio. Se anula solo aqui, donde hay rejilla de productos al lado. */ #order-standard_cart .main-content > .space-32{ display:none !important; } #order-standard_cart .products > .row.row-eq-height{ display:grid !important; grid-template-columns:repeat(1, minmax(0,1fr)); /* en una sola columna NO se igualan: no hay nada al lado con lo que cuadrar y lo unico que se consigue es alargar el scroll */ grid-auto-rows:auto; gap:22px; margin:0 !important; } @media (min-width:600px){ #order-standard_cart .products > .row.row-eq-height{ grid-template-columns:repeat(2, minmax(0,1fr)); } } /* `grid-auto-rows` se queda en `auto` A PROPOSITO. Con `1fr` todas las filas de la pagina se igualan a la mas alta de TODAS, y aqui los once planes van de 895 a 1236 px: las tarjetas cortas quedaban con cientos de pixeles muertos debajo. Se probo en produccion y se veia peor que el descuadre que venia a arreglar. Con `auto` cada fila toma su altura y `stretch` —el valor por defecto de grid— iguala las tarjetas DENTRO de esa fila, que es lo que se ve de un vistazo. Lo que alinea el interior no es esto, sino el JS que iguala titulo, precio y descripcion fila por fila. */ @media (min-width:1200px){ #order-standard_cart .products > .row.row-eq-height{ grid-template-columns:repeat(3, minmax(0,1fr)); } } #order-standard_cart .products > .row.row-eq-height > [class*="col-"]{ width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; display:flex; } #order-standard_cart .products > .row.row-eq-height > [class*="col-"] > .cros-pricing-table{ width:100%; height:100%; display:flex; flex-direction:column; /* Croster le da `margin-top:35px` para separar las tarjetas cuando iban en flex. Con `gap` ese margen sobra, y ademas hundia la primera fila: sumado al `margin:10px` de `.products` dejaba la tarjeta 45 px por debajo de la barra lateral de categorias. */ margin-top:0 !important; } #order-standard_cart .products{ margin-top:0 !important } /* ── EL MENU DE CATEGORIAS DE MOVIL Y TABLET ─────────────────── Por debajo de `lg` la barra lateral se esconde y Croster la sustituye por `.TM-categories-options`: un ` NO tienen asociado —comprobado—, asi que es la unica forma de marcarlos; cambiarle las medidas encoge la zona pulsable. */ #order-standard_cart .icheckbox_square-blue, #order-standard_cart .iradio_square-blue{ width:18px !important; height:18px !important; background:var(--nb-paper) !important; border:1.5px solid var(--nb-line-2) !important; border-radius:5px !important; position:relative; vertical-align:middle; cursor:pointer; transition:border-color 0.2s ease, box-shadow 0.2s ease; } #order-standard_cart .iradio_square-blue{ border-radius:50% !important } /* fuera el cuadrado macizo del tema, en los dos estados */ #order-standard_cart .icheckbox_square-blue:before, #order-standard_cart .iradio_square-blue:before{ content:none !important } /* iCheck marca el hover con una CLASE, no con `:hover`: el raton esta sobre la capa `ins`, no sobre el

que pinta la caja. */ #order-standard_cart .icheckbox_square-blue.hover, #order-standard_cart .iradio_square-blue.hover{ border-color:var(--nb-violet) !important; box-shadow:0 0 0 3px rgba(123,92,246,0.14) !important; } #order-standard_cart .icheckbox_square-blue.checked:before{ content:"\f00c" !important; font-family:"Font Awesome 5 Free","Font Awesome 5 Pro","FontAwesome" !important; font-weight:900 !important; font-size:11px !important; line-height:1 !important; color:var(--nb-ink) !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } #order-standard_cart .iradio_square-blue.checked:before{ content:"" !important; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%; background:var(--nb-ink) !important; transform:translate(-50%,-50%); } #order-standard_cart .icheckbox_square-blue.disabled, #order-standard_cart .iradio_square-blue.disabled{ opacity:0.45; cursor:default; } /* El texto que acompana a la casilla lo pinta Croster en su tinta. */ #order-standard_cart .cros-checkbox, #order-standard_cart .cros-checkbox span{ color:var(--nb-ink-2) !important; font-family:var(--nb-ff-b) !important; } /* ── lo ultimo que quedaba de Croster en esta pantalla ──────── Tras el barrido quedaban cuatro cosas, todas de color: .sub-heading:before #211b65 el separador con etiqueta .TM-card #d5dce5 el borde de las dos cajas i.fa-shopping-cart:before #8f1faf el carrito del sumario El icono del sumario es el mismo caso que las casillas: un glifo de Font Awesome que el tema tine de morado. Aqui basta con cambiarle el color, porque el glifo si se dibuja bien. */ #order-standard_cart .sub-heading:before, #order-standard_cart .sub-heading:after{ color:var(--nb-ink-3) !important; border-color:var(--nb-line) !important; } #order-standard_cart .TM-card, #order-standard_cart .product-configurable-options, #order-standard_cart .field-container{ border-color:var(--nb-line) !important; } #order-standard_cart .cartsummary i, #order-standard_cart .order-summary i, #order-standard_cart .summary-container-outer i, #order-standard_cart .cartsummary i:before, #order-standard_cart .order-summary i:before{ color:var(--nb-violet-aa) !important; } /* PERO NO LOS QUE VAN DENTRO DE UN BOTON, Y ESTE FALLO SE VEIA. La regla de arriba se escribio para UN icono —el carrito del sumario— y casa con TODOS los `` que haya ahi dentro. El boton «Continuar» vive en ese mismo sumario y lleva una flecha `fa-arrow-circle-right`: se quedaba en morado #6B48F2 sobre un degradado que ya es morado, asi que el circulo desaparecia contra el fondo y solo se adivinaba una mancha al lado del texto. Es la misma trampa de siempre: un selector escrito para un caso que se lleva por delante a sus vecinos. Dentro de un boton el icono no tiene color propio, hereda el del boton —blanco— y entonces el circulo se ve blanco con la flecha recortada en el degradado, que es como debe leerse. */ #order-standard_cart .cartsummary .btn i, #order-standard_cart .order-summary .btn i, #order-standard_cart .summary-container-outer .btn i, #order-standard_cart .cartsummary .btn i:before, #order-standard_cart .order-summary .btn i:before, #order-standard_cart .btn i, #order-standard_cart .btn i:before{ color:inherit !important; } /* ── el deslizador de IP adicionales ────────────────────────── Es ion.rangeSlider (clases `irs-*`), y venia entero con los dos colores de Croster: la barra y el asa en #8f1faf, los numeros de la regla y sus marcas en #211b65, y el globo del maximo en un negro #101010 que no esta en ninguna paleta. `.irs-bar` no se tine con `background-color`: el tema lo pinta con `linear-gradient(#8f1faf, #8f1faf)`, o sea una IMAGEN. Hay que pisar `background-image`, o el color se queda debajo y no se ve el cambio. */ #order-standard_cart .irs-line{ background:var(--nb-line) !important; background-image:none !important; border:0 !important; border-radius:999px !important; height:6px !important; } #order-standard_cart .irs-bar{ background:var(--nb-grad) !important; background-image:var(--nb-grad) !important; border:0 !important; border-radius:999px !important; height:6px !important; } #order-standard_cart .irs-handle{ background:var(--nb-paper) !important; background-image:none !important; border:2px solid var(--nb-violet) !important; border-radius:50% !important; width:20px !important; height:20px !important; box-shadow:0 2px 6px rgba(123,92,246,0.28) !important; cursor:grab; } #order-standard_cart .irs-handle:active{cursor:grabbing} #order-standard_cart .irs-handle.state_hover, #order-standard_cart .irs-handle:hover{ background:var(--nb-paper) !important; box-shadow:0 2px 10px rgba(123,92,246,0.45) !important; } /* el globo del valor elegido */ #order-standard_cart .irs-single, #order-standard_cart .irs-from, #order-standard_cart .irs-to{ background:var(--nb-violet-aa) !important; background-image:none !important; color:#FFFFFF !important; border-radius:7px !important; font-family:var(--nb-ff-d) !important; font-weight:600 !important; font-size:0.78rem !important; padding:2px 7px !important; } /* Los extremos son solo referencia: en gris, no compitiendo con el valor elegido, que es el dato que de verdad importa. */ #order-standard_cart .irs-min, #order-standard_cart .irs-max{ background:var(--nb-paper-2) !important; background-image:none !important; color:var(--nb-ink-3) !important; border-radius:6px !important; font-family:var(--nb-ff-b) !important; font-size:0.74rem !important; } #order-standard_cart .irs-grid-text{ color:var(--nb-ink-3) !important; font-family:var(--nb-ff-b) !important; font-size:0.72rem !important; } #order-standard_cart .irs-grid-pol{background:var(--nb-line-2) !important} /* ── los ultimos textos con la tinta de Croster ─────────────── `.promo-title` es el nombre del producto en la cabecera plegable —«Servidores VPS - VPS VS10XS»—, y no lo alcanza la regla de `h1..h4` porque es un `` dentro del `
`, y el color se declara sobre el propio span. */ #order-standard_cart .promo-title, #order-standard_cart .card-header .promo-title{ color:var(--nb-ink) !important; font-family:var(--nb-ff-d) !important; } /* El cuerpo de la descripcion del producto y las dos filas del sumario («Instalacion:», «Mensual:») heredaban #211b65. */ #order-standard_cart .panel-body, #order-standard_cart .summary-totals .pull-left, #order-standard_cart .summary-totals .pull-right, #order-standard_cart .summary-totals .float-left, #order-standard_cart .summary-totals .float-right{ color:var(--nb-ink-2) !important; } /* ── el recorte del degradado va el ultimo, para que ninguna regla de arriba pueda pisarlo con el atajo `background` ── */ #order-standard_cart .btn-primary, #order-standard_cart .view-cart-gateway-checkout .btn-primary, #order-standard_cart .view-cart-items-header, #order-standard_cart .irs-bar{ background-clip:padding-box; -webkit-background-clip:padding-box; } /* y la tienda, con el mismo criterio. El degradado sobre TEXTO —`.cost`— no entra aqui: `background-clip:text` es justo lo que hay que conservar. */ .store-order-container .btn-primary, .store-promoted-product .btn-primary, .store-order-container .nav-tabs .nav-item.active > .nav-link, .store-order-container .nav-tabs .nav-link.active{ background-clip:padding-box; -webkit-background-clip:padding-box; } @media (max-width:991px){ #order-standard_cart .summary-container-outer{margin-top:20px} } @media (prefers-reduced-motion:reduce){ #order-standard_cart *{transition:none !important} }