se comporta como bloque para que encaje en el grid */
.variations_form .variations tr {
display: block;
}
/* 4. Cada ocupa todo el ancho de su celda */
.variations_form .variations td {
display: block;
width: 100%;
}
/* 5. Mejora el estilo de los normales */
.variations_form .variations select {
width: 100%;
padding: 0.5rem;
border-radius: 20px;
font-size: 1rem;
}
/* 6. Último atributo (Acabados) debe ocupar todo el ancho, pero SIN tocar su contenido interno */
.variations_form .variations tbody tr:last-child {
grid-column: 1 / -1; /* hace que se extienda a ambas columnas */
}
td.value.yith_wccl_layout_inline {
padding: 0;
}
.woocommerce div.product form.cart .variations select
{
background-color: #fff;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th
{
background-color: #fff;
}
/*Product gallery: Container*/
#productGallery > main {
--thumnails-size: 60px;
--slider-width: 500px;
display: flex;
flex-direction: column-reverse; /* Siempre columna invertida */
align-items: center;
gap: 1rem;
padding: 0 1rem;
& ul {
list-style: none;
padding: 0;
}
}
.mini-text {
font-size: 45px;
color: var(--e-global-color-accent);
}
@media (min-width: 768px) {
#productGallery > main {
--thumnails-size: 80px;
}
}
@media (min-width: 1280px) {
#productGallery > main {
padding: 0 2rem; /* Aumentamos separación lateral */
gap: 3rem; /* Más espacio entre thumbnails y slider */
}
}
/*Product gallery: Thumbnails*/
#productGallery .product-thumbnails {
max-width: 100vw;
flex: none;
& ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: fit-content;
gap: .5rem;
}
& ul li {
cursor: pointer;
width: var(--thumnails-size);
max-width: var(--thumnails-size);
height: var(--thumnails-size);
max-height: var(--thumnails-size);
background: #f4f4f4;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1 / 1;
}
& ul li.swiper-slide-thumb-active img {
filter: brightness(1);
}
& ul li img {
width: 100%;
height: 100%;
filter: brightness(0.8);
&:hover {
filter: brightness(1);
}
}
}
/* Eliminamos el cambio a columna en desktop */
@media (min-width: 1280px) {
#productGallery .product-thumbnails {
& ul {
flex-direction: row;
gap: 0.75rem;
}
}
}
/*Product gallery: Slider*/
#productGallery .product-slider {
aspect-ratio: 1 / 1;
max-width: 100vw;
}
#productGallery .product-slider ul {
width: 100%;
max-width: 100vw;
}
#productGallery .product-slider ul li {
overflow: hidden;
width: 100%;
height: auto;
display: grid;
justify-items: center;
align-items: center;
justify-content: center;
padding: 1rem;
}
#productGallery .product-slider ul li img {
aspect-ratio: 1 / 1;
width: 100%;
height: 100%;
background: #ECECEC;
border-radius: 20px;
}
@media (min-width: 768px) {
#productGallery .product-slider ul li {
padding: 2rem;
}
}
@media (min-width: 1024px) {
#productGallery .product-slider ul {
max-width: var(--slider-width);
}
#productGallery .product-slider ul li {
width: var(--slider-width);
max-height: var(--slider-width);
padding: 0;
}
}
/*Slider gallery: Navigation*/
#productGallery .slider-buttons {
display: none;
--swiper-navigation-size: 20px;
--swiper-navigation-space: 25px;
position: absolute;
width: calc(100% - var(--thumnails-size));
left: var(--thumnails-size);
& .swiper-button-next,
.swiper-button-prev {
top: -14px;
color: #fff;
background: var(--e-global-color-primary);
padding: 1.5rem 0.75rem;
&:hover {
filter: brightness(1.1);
}
&:active {
filter: brightness(1);
}
}
& .swiper-button-next {
right: var(--swiper-navigation-space);
}
& .swiper-button-prev {
left: var(--swiper-navigation-space);
}
}
/* Mostramos botones solo en desktop, sin tocar el layout */
@media (min-width: 1280px) {
#productGallery .slider-buttons {
display: flex;
width: calc(100% - var(--thumnails-size));
left: var(--thumnails-size);
}
}
@media (max-width: 767px) {
#productGallery .product-slider {
aspect-ratio: 1 / 1;
max-width: 84vw;
max-width: 357px; /* este valor sobrescribe el anterior si entra */
}
}
@media (min-width: 768px) and (max-width: 1023px) {
#productGallery .product-slider ul {
width: 100%;
max-width: 47vw;
}
#productGallery > main {
padding: 0;
}
}
/*
* WIDGETS
*/
/*Listas generales*/
#productContent .elementor-widget-text-editor ul {
padding-left: 1rem;
}
/*Galeria de aplicaciones*/
#productContent .aplcations-gallery .elementor-swiper-button {
background-color: var(--e-global-color-accent);
padding: 10px;
border-radius: 50px;
transition: all .2s ease-in-out;
}
#productContent .aplcations-gallery .elementor-swiper-button:hover {
filter: brightness(1.05);
}
#productContent .aplcations-gallery .elementor-swiper-button.swiper-button-disabled {
opacity: 0;
}
#productContent .elementor-swiper-button.elementor-swiper-button-prev {
left: -1.25rem;
}
#productContent .elementor-swiper-button.elementor-swiper-button-next {
right: -1.25rem;
}
#productContent .aplcations-gallery .swiper-slide {
display: grid;
}
#productContent .aplcations-gallery .swiper-slide-image {
width: 100%;
max-height: 350px;
aspect-ratio: 3 / 5;
object-fit: cover;
}
/*Galeria de logos*/
.certifications-gallery img {
filter: brightness(0) saturate(100%) invert(100%) sepia(20%) saturate(0%) hue-rotate(239deg) brightness(112%) contrast(100%);
}
/*
* Widget: Table HTML
*/
@media (min-width: 1px) and (max-width: 1023px) {
table.variations tbody {
display: table-row-group;
}
table.variations tr {
display: table-row;
}
table.variations th,
table.variations td {
display: table-cell;
padding: 8px;
}
}
@media (max-width: 1024px) {
}
/*
* Widget: Titles
* */
.title-featured h2 {
font-weight: 500 !important;
}
.title-featured span {
font-size: 2.5rem;
font-weight: 200;
color: var(--e-global-color-accent);
}
@media (min-width: 768px) {
.title-featured h2 {
font-weight: 400 !important;
}
.title-featured span {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
.title-featured span {
font-size: 48px;
}
}
.title-config p {
font-weight: 200;
font-size: 48px;
}
.color-text{
color: var(--e-global-color-accent);
font-weight: normal;
}
/*
* Uses sectionº
*/
.product-use .uses-card {
aspect-ratio: 5 / 4;
}
.product-use .title-card {
text-wrap: balance;
}
@media (min-width: 1024px) {
.product-use .uses-card {
aspect-ratio: 1 / 1;
}
}
/*Estilos tabla de atributos de producto*/
/* Separa las filas visualmente */
table.woocommerce-product-attributes {
border-collapse: separate;
border-spacing: 0 10px; /* espacio vertical entre filas */
}
/* Estilo forzado para los TH */
table.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
background-color: var(--e-global-color-secondary) !important;
color: #FFFFFF !important;
padding: 8px !important;
font-size: 24px;
font-weight: 600;
text-align: left;
width: 250px;
}
/* Estilo para los TD */
table.woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
border: 1px solid var(--e-global-color-primary);
padding: 8px 0 8px 30px;
width: 517px;
font-size: 18px;
font-style: normal;
}
.strong-title {
font-size: 48px;
font-weight: 200;
}
.italic-title{
font-style: normal;
color: var(--e-global-color-accent);
}
/*Tabla de medidas, calibres, etc.*/
body.admin-bar table{
--sticky-top: calc(119px + 32px);
}
/* Estilo base de la tabla */
.table-product-style {
--sticky-top: 179px;
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
font-size: 18px;
text-align: center;
}
/* Estilo base de los encabezados */
.table-product-style th {
background: white;
position: sticky;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
/* Primera fila del thead (encabezado principal) */
.table-product-style thead tr:first-child th {
background-color: var(--e-global-color-primary);
color: white;
padding: 10px;
z-index: 3;
}
/* Segunda fila del thead */
.table-product-style thead tr:nth-child(2) th {
background-color: var(--e-global-color-secondary);
color: white;
padding: 8px;
border-right: 1px solid white;
top: var(--sticky-top);
z-index: 2;
}
/* Última celda de la segunda fila: sin borde derecho */
.table-product-style thead tr:nth-child(2) th:last-child {
border-right: none;
}
/* Celdas del cuerpo de la tabla */
.table-product-style tbody td {
border: 1px solid var(--e-global-color-primary);;
padding: 5px;
}
/* Alternancia de colores en filas */
.table-product-style tbody tr:nth-child(odd) {
background-color: #F6F6F6;
}
.table-product-style tbody tr:nth-child(even) {
background-color: white;
}
/*Responsivo de tablas*/
@media (min-width: 1px) and (max-width: 1023px) {
.table-product-style thead tr:nth-child(2) th {
top: 0;
}
.tables-section {
max-height: 400px;
}
.tables-section {
overflow-x: auto;
width: 100%;
}
.tables-section table {
border-collapse: collapse;
}
}
.galery-aplications .elementor-image-gallery .gallery-item img {
margin: 0 auto;
height: 330px;
object-fit: cover;
}
.font-size-title{
font-size: 48px;
}
.number-circle{
font-style: normal;
background-color: var(--e-global-color-accent);
padding: 5px 15px;
font-size: 24px;
border-radius: 50px;
color: #fff;
font-weight: 200;
margin-right: 10px;
}
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon span > svg {
fill: none !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-icon span > svg {
fill: none !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-icon span>svg {
height: 40px;
width: 40px;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-icon span {
height: 35px;
width: auto;
}
.elementor-widget-n-accordion .e-n-accordion-item-title {
padding: 20px !important;
border-bottom: 1px solid #000000 !important;
}
.elementor-widget-n-accordion {
--n-accordion-border-color: none;
}
.elementor-widget-n-accordion .e-n-accordion-item-title {
padding: 30px 0 !important;
border: none;
border-bottom: 1px solid #000000 !important;
}
a {
color: #1F2124;
text-decoration: underline;
}
@media (min-width: 1px) and (max-width: 766px){
.elementor-13808 .elementor-element.elementor-element-1380f750 {
height: 780px;
}
.strong-title {
font-size: 35px;
font-weight: 200;
}
/* Contenedor principal */
.elementor-loop-container {
scroll-snap-type: x mandatory;
overflow-x: auto;
display: flex;
gap: 1rem;
scroll-behavior: smooth;
padding: 0 1rem;
}
/* Cada producto ocupa el 100% del viewport */
.elementor-loop-container > .e-loop-item {
flex: 0 0 100%;
scroll-snap-align: start;
box-sizing: border-box;
}
/* Botones */
.slider-controls {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.slider-btn {
background: #ccc;
border: none;
padding: 0.5rem 1rem;
font-size: 1.2rem;
cursor: pointer;
border-radius: 8px;
}
/* Asegura que el Loop se comporte como carrusel */
.elementor-loop-container {
scroll-snap-type: x mandatory;
overflow-x: auto;
display: flex;
gap: 1rem;
scroll-behavior: smooth;
padding: 0 1rem;
}
/* Cada ítem ocupa el 100% del viewport */
.elementor-loop-container > .e-loop-item {
flex: 0 0 100%;
scroll-snap-align: start;
box-sizing: border-box;
}
/* Estilo de botones */
.slider-controls {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 1rem;
}
.slider-btn {
background: #DC9890;
color: #fff;
border: none;
padding: 0.5rem 1rem;
font-size: 1.2rem;
cursor: pointer;
border-radius: 20px;
}
.slider-btn:hover {
background: #74524A;
}
.uses-card {
height:200px;
}
.uses-card svg{
max-width:50px;
}
#productContent .aplcations-gallery .swiper-slide-image {
aspect-ratio: 2 / 3;
max-height: none;
}
}
#reviews.cr-reviews-ajax-reviews .cr-ajax-search, .cr-all-reviews-shortcode .cr-ajax-search {
display: none;
}
.prod-finishes{
box-shadow: 15px 14px 1px rgba(240, 240, 240, 0.9);
aspect-ratio: 1 / 1;
}
.product-tables table,
.product-tables table td,
.product-tables table th {
font-size: 16px;
}
.faq-section h3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.product-distribution{
background-color: #fff!important;
}
@media (width:1280px){
.envio-gratis p{
font-size: 225px !important;
}
.product-distribution:before, .elementor-background-slideshow.swiper:before {
background-position: 500px -50px !important;
}
}
.cr-search-no-reviews{
font-size: 18px;
}/* End custom CSS */