﻿

:root {
    --ff-accent: Inter,serif;
    --ff-base: sans-serif;
    --fw-regular: 500;
    --fw-bold: 700;
    --content-padding: 1.5rem;
    --content-spacing: 1rem;
    --clr-accent:#081f5c ;/*#344152*/
    --clr-neutral-900: #42647F;
}


.Product {
/*    display: grid;
    grid-template-columns: minmax(400px,1fr) minmax(300px,1fr);
    gap:1rem;*/

    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    gap:1rem;
    align-items:flex-start;
    justify-content:start;
    
}

.product__image {
    object-fit: cover;
    object-position: 50% 50%;
    aspect-ratio: 1/1;
    height: auto;
    width: minmax(100vw,250rem);
    /*max-width:40vw;*/
    /*max-height: 60vh;
    max-width: 23.3vw;*/
    overflow: scroll;
    border: 2px solid #e3e6e8;
    padding: 0;
    background-color: rgba(0,0,0,.1);
    transition: ease-in-out .7s;
    /*margin-left:-35px;*/

    position: relative;
}
    .product__image:before {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        background-color: #42526C;
        z-index:15;

    }

    .product__image:hover {
        
        background-color: #42526C;
    }

    .product__smaller__images {
        object-fit: contain;
        object-position: 50% 50%;
        aspect-ratio: 2/1;
        height: auto;
        display: inline-block;
        
        /*max-width: 80px;*/
        height: auto; /*45px*/
        border-radius: .2rem;
        background-color: white;
        transition: ease-in-out 1s;
        border: 1px solid #e3e6e8;
    }

    .product__smaller__images:hover,.product__image:hover {
        box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        
    }
    /*media-desktop {
    .product__image {
        margin-left: -35px;
    }
}*/
.product__content {
    display: grid;
    gap: var(--content-spacing);
    padding: var(--content-padding);
    align-items: start;
    justify-content: start;
    min-height: 205px;
    max-height: 405px;
    border-radius: 10px;
    border: 1px solid #42526C;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    /*width:80%;
    max-width:35rem;*/
    overflow-y:auto;
    scroll-behavior: smooth;
    transform:scale(1);
    transition:all .9s;
    background-color:#E7F1FF;
}

    .product__content:hover {
        /*transform:scale(1.1);*/
        background-color:#F9FCFF;
    }

    .product__category {
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: .7125rem;
        font-weight:var(--fw-regular);
    }

.product__title {
    font-size: 1rem;
    color: var(--clr-accent);
    font-weight: var(--fw-bold);
    position: relative;
    height: 24px;
    transition: .25s;
    font-family: Inter;
    color: #072059;
    letter-spacing: .5px;
}
    .product__title:hover .product__title img {
        transform:scale(1.2);
    }

.product__desc {
    font-weight: var(--fw-regular);
    font-size: .8125rem;
    color: var(--clr-accent);
    max-height:30rem;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.product__company {
    font-size: .9125rem;
    font-family: Inter;
    color: #072059; /* var(--clr-neutral-900);*/
    position: absolute;
    bottom: -.8rem;
    left: 0;
}

.product__company_home {
    display:block;
    height:2rem;
    font-size: .8125rem;
    font-family: var(--ff-accent);
    color: var(--clr-neutral-900);    
    letter-spacing: 2px;
    font-weight: 700;
}

    .product__company_home:hover {
        color: #344152;
        text-decoration: none;
    }

    .product__additional_info {
        margin: 0;
        gap: 5px;
        line-height: 1.5;
        letter-spacing: 2px;
        text-transform: capitalize;
        font-size: .8125rem;
        font-weight:600;
        /*    display: grid;
    grid-template-columns:1fr 1fr;*/
    }

.product__price {
    font-size: 1rem;
    color: var(--clr-accent);
    font-weight:var(--fw-regular);
}

.product__price_other {
    font-size: .7125rem;
    color: var(--clr-accent);
    text-decoration: line-through;
}

.flex-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
.main-button {
    cursor: pointer;
    background-color: forestgreen;
    color: #fff;
    transition: linear .3s;
}

    .main-button:hover {
        background-color: darkgreen;
    }
.buttonCart {
    /*text-decoration: line-through;*/
}

.socialButtons {
    display: grid;
    place-content:center;
    place-items:center;
    width: 30px;
    height: 30px;
    padding:5px;
    float:right;
    text-align:center;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12pt;
    border: solid 2px white;    
    box-shadow: 5px 7px 15px rgba(0,0,0,.3);
    margin-bottom: 10px;
}

    .socialButtons:hover {
        text-decoration:none;
    }


.default-card-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    
    padding: 0;
    text-decoration: none;
    position: relative;
    margin: auto 0;
    
    
    line-height: 1.5;
}

.product__image_home {
    object-fit: contain;
    object-position: 50% 50%;
    aspect-ratio: 1/2;
   /* height: auto;
    width:28rem;
    max-height: 20rem;
    max-width: 100%;*/
    overflow: scroll;
    border: 2px solid #e3e6e8;
    padding: 0;
    background-color: rgba(0,0,0,.1);
    transition: ease-in-out 2s;   
    
    height: 119px;
    width: 210px;
}

    .product__image_home:hover {
        transform:scale(1.1);
    }

