/*
 * CSS front
 *
 * @author Difadi.com	<soporte@difadi.com>
 * @license Comercial
 * @copyright 2025 Difadi.com
*/
:root {
    --dfdmakita-font-primary: #232323;
    --dfdmakita-color-primary: #19a62c; 
    --dfdmakita-font-secondary: #f7f7f7;
    --dfdmakita-padding: 15px;
    --dfdmakita-margin: 50px;
    --dfdmakita-margin: 50px;
}
/*GENERAL*/
#dfdmakita-panel a:hover
{
    color:var(--dfdmakita-font-primary);
}
#dfdmakita-panel>div
{
    margin: var(--dfdmakita-margin) 0;
}
#dfdmakita-panel>div div.container
{
    padding: var(--dfdmakita-padding) 0;
}
#dfdmakita-panel>div h2,
#dfdmakita-panel>div h1
{
    font-size: 24px;
    font-weight: 600;
    text-align: left;
}
/*BANNER*/
#dfdmakita-panel #dfdmakita-banner
{
    margin-top: 0;
}
#dfdmakita-panel #dfdmakita-banner img
{
    width: 100%;
    height: auto;
}
#dfdmakita-panel #dfdmakita-banner #dfdmakita-banner-desktop
{
    display: block;
}
#dfdmakita-panel #dfdmakita-banner #dfdmakita-banner-mobile
{
    display: none;
}
/*PASOS*/
#dfdmakita-panel #dfdmakita-steps h1,
#dfdmakita-panel #dfdmakita-steps>span
{
    text-align: center;
}
#dfdmakita-panel #dfdmakita-steps>span
{
    display: block;
    padding: var(--dfdmakita-padding) 0;
}
#dfdmakita-panel #dfdmakita-steps span.dfdmakita-step
{
    display: block;
    font-weight: 800;
    font-size: 20px;
    padding: var(--dfdmakita-padding) 0;
}
#dfdmakita-panel #dfdmakita-steps span.dfdmakita-step strong
{
    color: var(--dfdmakita-color-primary);
}
#dfdmakita-panel #dfdmakita-steps svg
{
    height: 40px;
    width: 40px;
}
/*PRODUCTOS*/
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper
{
    max-width: 1440px;
}
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper .thumbnail-container
{
    margin-bottom: 0;
}
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper .product-title-makita
{
    padding: var(--dfdmakita-padding) 0;
}
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper .product-title-makita a
{
    color: var(--dfdmakita-font-primary);
    text-transform: capitalize;
}
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper .bx-controls-direction a
{
    padding: 6px 0 0 0;
    width: 35px !important;
    height: 35px !important;
    background: #fff;
    border: 1px solid #dcdcdc;
    z-index: 99;
}
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper .bx-controls-direction .bx-prev::before
{
    font-family: "Material Icons";
    content: "\E5CB" !important;
    color: #dcdcdc !important;
    font-size: 28px;
}
#dfdmakita-panel #dfdmakita-products .products .bx-wrapper .bx-controls-direction .bx-next::before
{
    font-family: "Material Icons";
    content: "\E5CC" !important;
    color: #dcdcdc !important;
    font-size: 28px;
}
/*CATEGORÍAS*/
#dfdmakita-panel #dfdmakita-categories img
{
    width: 100%;
    height: auto;
}
#dfdmakita-panel #dfdmakita-categories .row>div 
{
    position: relative;
}
#dfdmakita-panel #dfdmakita-categories a span
{
    text-transform: uppercase;
    color: var(--dfdmakita-font-secondary);
    font-weight: 800;
    font-size: 24px;
    text-align: center;
    z-index: 1;
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; 
    padding: var(--dfdmakita-padding);
}
/*FAQS*/
#dfdmakita-panel #dfdmakita-faq #dfdmakita-faq-text p
{
    font-size: 24px;
    line-height: 22px;
    font-weight: 800;
    color: var(--dfdmakita-font-primary);
}
#dfdmakita-panel #dfdmakita-faq .accordion-title
{
    font-weight: 600;
    border: 1px solid var(--dfdmakita-color-primary);
    padding: var(--dfdmakita-padding);
}

@media( max-width: 768px )
{
    /*GENERAL*/
    #dfdmakita-panel>div
    {
        margin: calc(var(--dfdmakita-margin)/2) 0;
    }
    /*BANNER*/
    #dfdmakita-panel #dfdmakita-banner #dfdmakita-banner-desktop
    {
        display: none;
    }
    #dfdmakita-panel #dfdmakita-banner #dfdmakita-banner-mobile
    {
        display: block;
    }
    /*PASOS*/
    #dfdmakita-panel #dfdmakita-steps div.row>div
    {
        padding: var(--dfdmakita-padding);
    }
    #dfdmakita-panel #dfdmakita-steps div.row>div:last-of-type
    {
        padding-bottom: 0;
    }
    /*CATEGORIES*/
    #dfdmakita-panel #dfdmakita-categories img
    {
        padding: var(--dfdmakita-padding) 0;
    }
    #dfdmakita-panel #dfdmakita-categories img#dfdmakita-banner-makita
    {
        padding-top: 0;
    }
}