/* ===================================================================
   GENIE COLLECTION PREMIUM
   Base Framework v1.0
   Platform : Zid
   Theme    : Soft
   =================================================================== */


/*==================================================
=                    VARIABLES                     =
==================================================*/

:root{

    /* Brand */

    --gc-primary:#111111;

    --gc-secondary:#C7A25A;

    --gc-secondary-hover:#B89045;

    --gc-white:#ffffff;

    --gc-bg:#fafafa;

    --gc-border:#ECECEC;

    --gc-text:#202020;

    --gc-text-light:#6E6E6E;

    --gc-danger:#D63939;

    --gc-success:#2E7D32;



    /* Radius */

    --gc-radius-xs:8px;

    --gc-radius-sm:12px;

    --gc-radius-md:18px;

    --gc-radius-lg:24px;



    /* Shadow */

    --gc-shadow-sm:0 6px 18px rgba(0,0,0,.05);

    --gc-shadow-md:0 12px 30px rgba(0,0,0,.08);

    --gc-shadow-lg:0 18px 45px rgba(0,0,0,.12);



    /* Transition */

    --gc-transition:.30s ease;



}



/*==================================================
=                 GLOBAL COLORS                    =
==================================================*/

body{

    background:var(--gc-white);

    color:var(--gc-text);

}



/*==================================================
=                 LINKS                            =
==================================================*/

a{

    transition:var(--gc-transition);

}

a:hover{

    color:var(--gc-secondary);

}



/*==================================================
=                 IMAGES                           =
==================================================*/

img{

    transition:transform .35s ease;

}



/*==================================================
=                 BUTTONS                          =
==================================================*/

.btn,

button,

input[type="submit"],

input[type="button"]{

    transition:all .30s ease;

}



/*==================================================
=                 FORM ELEMENTS                    =
==================================================*/

input,

textarea,

select{

    transition:border-color .30s ease,

               box-shadow .30s ease;

}

input:focus,

textarea:focus,

select:focus{

    outline:none;

}



/*==================================================
=                 CARDS                            =
==================================================*/

.product-item,

.category-item,

.collection-item{

    transition:

        box-shadow .30s ease,

        border-color .30s ease,

        transform .30s ease;

}



/*==================================================
=                 SECTION SPACING                  =
==================================================*/

section{

    position:relative;

}



/*==================================================
=                 UTILITIES                        =
==================================================*/

.gc-radius{

    border-radius:var(--gc-radius-md);

}

.gc-shadow{

    box-shadow:var(--gc-shadow-sm);

}

.gc-transition{

    transition:var(--gc-transition);

}

.gc-border{

    border:1px solid var(--gc-border);

}



/*==================================================
=                 ANIMATION                        =
==================================================*/

@keyframes gcFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.gc-fade{

    animation:gcFade .5s ease;

}