/*
Theme Name:         SW Maxshop child
Theme URI:          http://wp.smartaddons.com/themes/sw_maxshop/
Description:        A child theme of SW Maxshop
Author:             Magentech
Template:      			sw_maxshop
Author URI:         http://magentech.com/
Version:            2.3.2
License:            GNU General Public License v2 or later
*/
:root {
    --primary-color: #333;
    --thumb-size: 100px;
}

@import url("../sw_maxshop/style.css");
/* =Theme customization starts here  */
.products-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Aspect ratio 1:1 */
    overflow: hidden;
}

.products-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Añadir fuente Lato (si no está ya cargada en el tema) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* CSS para la calculadora - Estilos específicos */
.custom-calculator {
    margin: 10px 0;
    padding: 20px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    font-family: 'Lato', sans-serif;
    text-align: center;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}

/* Botón Calcular - Estilos forzados */
.custom-calculator button[type="button"] {
    width: 200px !important;
    padding: 12px 20px !important;
    margin: 15px auto !important; 
    background: #ea3a3c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    display: block !important;
    transition: background 0.3s !important;
    position: relative;
    box-shadow: none !important;
    line-height: normal !important;
}

/* Alineación para contenedores hijos (si hay elementos inline) */
.custom-calculator > * {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Input - Reset de estilos heredados */
.custom-calculator input#area_total {
    width: 100% !important;
    max-width: 250px !important;
    padding: 10px !important;
    margin: 0 auto 15px auto !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    font-family: 'Lato', sans-serif !important;
    box-shadow: none !important;
    text-align: center;
}

/* Resultado - Prevenir desbordamiento */
#resultado {
    clear: both; /* Limpia flotantes */
    margin-top: 15px;
}

/* ========== GALERÍA PRINCIPAL ========== */
.wc-product-gallery-square {
    --square-size: min(90vw, 700px);
    max-width: var(--square-size);
    margin: 0 auto;
}

.square-image-box {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 12px;
}

.square-image-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* ========== MINIATURAS ========== */
.thumbnail-gallery-square {
    --thumb-size: 80px;
    max-width: min(90vw, 700px);
    margin: 20px auto 0;
}

.square-thumb-box {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.square-thumb-box:hover {
    border-color: #ddd;
}

.thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== SWIPER ========== */
.main-swiper {
    width: 100%;
    position: relative;
}

.main-swiper .swiper-slide {
    width: 100%;
    height: auto;
}

.thumb-swiper .swiper-slide {
    width: var(--thumb-size);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
    color: #333;
    background: rgba(255,255,255,0.8);
    padding: 15px;
    border-radius: 50%;
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    .thumbnail-gallery-square {
        --thumb-size: 60px;
    }
    
    .square-image-box {
        border-radius: 8px;
    }
}

<img 
   src="imagen-600x600.webp" 
   width="600" 
   height="600" 
   style="object-fit: contain; background: #fff"
>