.sas-woocommerce-notices,
.back-button-container,
.sas-product-main-container,
.sas-product-purchase-container,
.sas-product-features-container{
    max-width:1140px;
    margin:0 auto;
}

.sas-product-main-container{
    display:flex;
    gap:40px;
}

/* Diseño del botón de "Volver atrás" */
.back-button-container .sas-back-button {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    background: #0a0a0a;
    border: 1px solid #555;
    border-radius: 25px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 20px;
    margin-bottom: 25px;
    gap: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sas-back-button-icon {
    display: flex;
    align-items: center;
}

.sas-back-button-icon svg {
    width: 20px;
    height: 20px;
}

.back-button-container .sas-back-button:hover {
    background: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}

/* Diseño de imagen del producto y miniaturas */
.sas-product-image{
    margin-bottom:10px;
}

.sas-main-product-image{
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
}

.sas-product-gallery{
    display:flex;
    gap:10px;
    justify-content:flex-start;
    align-items:center;
}

.sas-gallery-image{
    width:85px;
    height:85px;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;
}

.sas-gallery-image{
    border:3px solid transparent;
    transition:all .2s ease;
}

.sas-gallery-image.active{
    border-color:#CC0000;
}

.sas-gallery-image:not(.active):hover{
    border-color:#424242;
}


/* Diseño de la información del producto */
.sas-product-image-container, .sas-product-information-container{
    width:100%;
}

.sas-product-label{
    font-size:18px;
    font-weight:600;
    color:#cc0000;
}

.sas-product-title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.sas-product-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.sas-product-title{
    margin:0px;
    font-size:40px;
    font-weight:600;
    color:#ffffff;
    flex:1;
}

.sas-product-title-row .sas-price-button,
.sas-product-title-row .sas-share-button{
    display:flex;
    align-items:center;
    background: #0A0A0A;
    color:#ffffff;
    border: 1px solid #1A1A1A;
    border-radius:12px;
    cursor:pointer;
    white-space:nowrap;
    font-weight: 600;
    font-size: 16px;
    gap: 5px;
    
        transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.sas-product-title-row .sas-price-button:hover,
.sas-product-title-row .sas-share-button:hover{
    background: #0A0A0A;
    border-color:#ffffff;
}

.sas-price-button-icon,
.sas-share-button-icon{
    display:flex;
    align-items:center;
}

.sas-price-button-icon svg{
    width:18px;
    height:18px;
    transform:rotate(90deg);
}

.sas-share-button-icon svg{
    width:18px;
    height:18px;
}

.sas-product-sku{
    color: #7A7A7A;
    font-size: 16px;
}

.sas-product-category a{
    color:#ffffff;
    text-decoration:none;
    font-size:18px;
    transition:color .2s ease;
    border-bottom: 5px;
}

.sas-product-category a:hover{
    color:#cc0000;
}


/*Diseño de tabla de atributos */
.sas-product-attributes {
    margin-top:8px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #555;
}

.sas-attributes-table {
    width: 100%;
    border-collapse: collapse;
}

.sas-attributes-table td,
.sas-attributes-table th {
    border-left: none;
    border-right: none;
    border-top: none;
}

.sas-attributes-table tr:last-child td,
.sas-attributes-table tr:last-child th {
    border-bottom: none;
}

.sas-attributes-table {
    margin-block-end: 0;
}

.sas-attr-label,
.sas-attr-value {
    text-align: left;
    color: #ffffff;
    padding: 10px 10px;
}

.sas-attr-label {
    border-right: 1px solid hsla(0, 0%, 50%, .502) !important;
}


.sas-attributes-table th {
    background-color: #0A0A0A !important;
}
.sas-attributes-table td{
    background-color: #1A1A1A !important;
}


/*Tabla de agregar al carrito*/
.sas-product-purchase-container{
    margin-top:30px;
    background:#0A0A0A;
    border:1px solid #555;
    border-radius:12px;
    overflow:hidden;
}

.sas-purchase-top-row{
    display:flex;
}

.sas-quantity-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.sas-quantity-cart-container,
.sas-net-price-container,
.sas-sale-price-container{
    flex:1;
    padding:20px;
}

.sas-net-price-container,
.sas-sale-price-container {
    position: relative;
}

.sas-net-price-container::before,
.sas-sale-price-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Esto lo centra verticalmente a la perfección */
    
    /* Aquí controlas el diseño del divisor */
    height: 75%;          /* Modifica este porcentaje para hacerlo más corto o largo */
    width: 1px;           /* El grosor del divisor */
    background-color: #555; /* El color de tu línea */
}

.sas-purchase-title{
    color:#ffffff;
    font-size:16px;
    font-weight:600;
    margin-bottom:15px;
}

.sas-quantity-controls{
    display:flex;
    align-items:center;
    gap:0;
}

.sas-quantity-input::-webkit-outer-spin-button,
.sas-quantity-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.sas-quantity-input{
    appearance:textfield;
}

.sas-qty-minus,
.sas-qty-plus,
.sas-quantity-input{
    height:42px;
    background:transparent;
    color:#ffffff;
}

.sas-product-purchase-container .sas-qty-minus,
.sas-product-purchase-container .sas-qty-plus{
    width:42px;
    height:42px;

    background:transparent;
    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:16px;
    cursor:pointer;
    
    border:1px solid #555;
    border-radius:0;
}

.sas-product-purchase-container .sas-quantity-input{
    height:42px;
    width:50px;
    background:transparent;
    color:#ffffff;
    border-color: #555;
    text-align:center;
    font-size:16px;
    border-top:1px solid #555;
    border-bottom:1px solid #555;
    border-left:none;
    border-right:none;
    border-radius:0;
    box-shadow:none;
    outline:none;
    padding:0;    
}

/* Bordes exteriores */
.sas-product-purchase-container .sas-qty-minus{
    border-radius:12px 0 0 12px;
}

.sas-product-purchase-container .sas-qty-plus{
    border-radius:0 12px 12px 0;
}

.sas-product-purchase-container .sas-qty-minus:hover,
.sas-product-purchase-container .sas-qty-plus:hover{
    color: #000000;
}

.sas-product-purchase-container .sas-add-to-cart-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:42px;
    padding:0 5px;
    background:#CC0000;
    color:#ffffff;
    border:1px solid #cc0000;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.sas-product-purchase-container .sas-add-to-cart-button:hover{
    border:1px solid #ffffff;
    background:#CC0000;
}

.sas-cart-icon{
    display:flex;
    align-items:center;
}

.sas-cart-icon svg{
    width:22px;
    height:22px;
}

.sas-net-price,
.sas-sale-price{
    font-size:28px;
    font-weight:700;
    line-height:1;
}

.sas-net-price{
    color:#ffffff;
}

.sas-sale-price{
    color:#CC0000;
}

.sas-net-price-discount,
.sas-sale-price-note{
    margin-top:10px;

    color:#B0B0B0;
    font-size:14px;
}

/*Calculadora*/
.sas-purchase-calculator-container{
    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px;
}

.sas-purchase-calculator-container::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:95%;

    height:1px;

    background:#555;

    transform:translateX(-50%);
}

.sas-calculator-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.sas-product-purchase-container .sas-calculator-label{
    display:block;
    white-space:nowrap;
    color:#ffffff;
    font-size:14px;
}


.sas-product-purchase-container .sas-calculator-item input{
    width:100px;
    height:36px;

    text-align:center;

    background:transparent;
    color:#ffffff;

    border:1px solid #555;
    border-radius:8px;
}

.sas-calculator-amount{
    white-space:nowrap;
    color:#7A7A7A;
}

.sas-calculator-item input::-webkit-outer-spin-button,
.sas-calculator-item input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.sas-calculator-item input{
    appearance:textfield;
}


/* Tarjetas de características */
.sas-product-features-container{
    margin-top:30px;
}

.sas-product-features-cards-container{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    background: #0A0A0A;
    border:1px solid #555;
    border-radius:12px;
}

.sas-feature-content{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.sas-feature-card{
    position: relative;
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:20px;
}

.sas-feature-icon{
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;
}

.sas-feature-icon svg{
    width:42px;
    height:42px;

    color:#CC0000;
}

.sas-feature-title{
    color:#FFFFFF;

    font-size:16px;
    font-weight:600;
    line-height:1.2;
}

.sas-feature-description{
    color:#B0B0B0;

    font-size:14px;
    line-height:1.5;
}

.sas-feature-card:not(:first-child)::after{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Esto lo centra verticalmente a la perfección */
    
    /* Aquí controlas el diseño del divisor */
    height: 75%;          /* Modifica este porcentaje para hacerlo más corto o largo */
    width: 1px;           /* El grosor del divisor */
    background-color: #555; /* El color de tu línea */
}


/* Lightbox */
.sas-lightbox{
    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.92);

    z-index:9999;
}

.sas-lightbox.active .sas-lightbox-close,
.sas-lightbox.active .sas-lightbox-prev,
.sas-lightbox.active .sas-lightbox-next {
    z-index: 10000;
    position: relative;
}

.sas-lightbox.active{
    display:flex;
}

/* Contenedor principal */

.sas-lightbox-content{
    width:100%;
    max-width:1140px;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* Imagen */

.sas-lightbox-image{
    max-width:500px;
    max-height:500px;

    width:100%;
    height:auto;

    object-fit:contain;

    user-select:none;
}

/* Botón cerrar */

.sas-lightbox.active .sas-lightbox-close{
    position:absolute;

    top:-60px;
    right:0;

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    background:rgba(255,255,255,.08);

    border:1px solid #555;
    border-radius:50%;

    color:#FFFFFF;

    cursor:pointer;

    transition:all .3s ease;
}

.sas-lightbox.active .sas-lightbox-close:hover{
    background:#CC0000;
    border-color:#CC0000;
}

.sas-lightbox-close svg{
    width:20px;
    height:20px;
}

/* Flechas */

.sas-lightbox.active .sas-lightbox-prev,
.sas-lightbox.active .sas-lightbox-next{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    padding:0;

    background:rgba(255,255,255,.08);

    border:1px solid #555;
    border-radius:50%;

    color:#FFFFFF;

    cursor:pointer;

    transition:all .3s ease;
}

.sas-lightbox.active .sas-lightbox-prev:hover,
.sas-lightbox.active .sas-lightbox-next:hover{
    background:#CC0000;
    border-color:#CC0000;
}

.sas-lightbox-prev svg,
.sas-lightbox-next svg{
    width:24px;
    height:24px;
}

/* Imagen principal */

.sas-main-product-image{
    cursor:pointer;
}

/* Zoom */
.sas-lightbox-image{
    cursor: zoom-in;
    transition: transform .15s ease;
    will-change: transform;
    user-select:none;
    touch-action:none;
}

.sas-lightbox.zoomed .sas-lightbox-image{
    cursor: grab;
}

.sas-lightbox-image{
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}

/* Responsive */
@media (max-width: 768px){
    
    /* Botón Volver atrás */
    .back-button-container{
        max-width:none;
        padding:0 10px;
    }

    /* Contenedor principal con titulos e imagenes */
    .sas-product-main-container{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .sas-product-title-row{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:8px;
        width:100%;
    }

    .sas-product-title{
        flex:1;
        min-width:0;
        margin:0;
        font-size:28px;
        line-height:1.15;
        overflow-wrap:anywhere;
    }

    .sas-product-actions{
        display:flex;
        align-items:center;
        gap:4px;
        flex-shrink:0;
    }

    .sas-product-title-row .sas-price-button,
    .sas-product-title-row .sas-share-button{
        display:flex;
        align-items:center;
        justify-content:center;
        padding:6px 8px;
        font-size:13px;
        gap:4px;
        border-radius:10px;
        white-space:nowrap;
    }

    .sas-product-title-row .sas-price-button svg,
    .sas-product-title-row .sas-share-button svg{
        width:16px;
        height:16px;
    }

    /* Contenedor de Agregar al carrito */
    .sas-purchase-top-row{
        flex-direction:column;
    }

    .sas-quantity-cart-container,
    .sas-net-price-container,
    .sas-sale-price-container{
        width:100%;
        padding:20px;
        box-sizing:border-box;
    }
    
    .sas-purchase-calculator-container::before {
        display: none;
    }
    
    .sas-net-price-container,
    .sas-sale-price-container,
    .sas-purchase-calculator-container{
        position:relative;
    }
    
    .sas-net-price-container::before,
    .sas-sale-price-container::before,
    .sas-purchase-calculator-container::after{
        content:"";
    
        position:absolute;
    
        top:0;
        left:50%;
    
        width:90%;
    
        height:1px;
    
        background:#555;
    
        transform:translateX(-50%);
    }


    .sas-quantity-row{
        flex-direction:column;
        align-items:stretch;
        gap:15px;
    }

    .sas-quantity-controls{
        justify-content:center;
    }

    .sas-product-purchase-container .sas-add-to-cart-button{
        width:100%;
    }

    .sas-purchase-calculator-container{
        flex-direction:column;
        align-items:stretch;
        gap:15px;
    }

    .sas-calculator-item{
        display:flex;
        align-items:center;
        gap:10px;
    }

    .sas-product-purchase-container .sas-calculator-label{
        width:110px;     
        flex-shrink:0;
    }

    .sas-product-purchase-container .sas-calculator-item input{
        width:80px;
        flex-shrink:0;
    }

    .sas-calculator-amount{
        flex:1;
        text-align:right;
    }
    
    /* Tarjetas de productos */
    .sas-product-features-cards-container{
        grid-template-columns:1fr;
        gap:0;
    }

    .sas-feature-card{
        position:relative;
    }
    
    .sas-feature-card:not(:first-child)::after{
        display: none;
    }

    .sas-feature-card:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 90%;
        height: 1px;
        background: #555;
        transform: translateX(-50%);
    }

    .sas-feature-icon{
        flex-shrink:0;
    }

    .sas-feature-icon svg{
        width:22px;
        height:22px;
    }

    .sas-feature-content{
        flex:1;
        min-width:0;
    }

    .sas-feature-title{
        font-size:15px;
        font-weight:600;
        margin-bottom:4px;
        line-height:1.2;
    }

    .sas-feature-description{
        font-size:13px;
        line-height:1.4;
        color:#B0B0B0;
    }


    /* Lightbox de imagenes */
    .sas-lightbox-content{
        position:relative;
        width:100%;
        height:100%;
        padding:20px;
        box-sizing:border-box;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:16px;
    }

    /* IMAGEN */
    .sas-lightbox-image{
        max-width:100%;
        max-height:80vh;
    }

    /* BOTÓN CERRAR */
    .sas-lightbox.active .sas-lightbox-close{
        top:15px;
        right:15px;
        width:44px;
        height:44px;
    }

    .sas-lightbox-close svg{
        width:18px;
        height:18px;
    }

    .sas-lightbox.active .sas-lightbox-prev,
    .sas-lightbox.active .sas-lightbox-next{
        position:static !important;
        top:auto;
        left:auto;
        right:auto;
        transform:none;

        width:48px;
        height:48px;
    }

    .sas-lightbox-content{
        align-items:center;
    }

    .sas-lightbox-content .sas-lightbox-prev,
    .sas-lightbox-content .sas-lightbox-next{
        display:inline-flex;
    }

    .sas-lightbox-prev svg,
    .sas-lightbox-next svg{
        width:20px;
        height:20px;
    }
}