/* shared */


.smartshop h1{
    font-size:20px;
    display:inline-block;
    padding:16px 32px 0 32px;
    margin-bottom:4px;
    font-weight:500;
}

.smartshop h2{
    font-size:18px;
    display:inline-block;
    padding:16px 32px;
    font-weight:500;
}

div.logout{
    padding:16px;
    text-align:right;
}

.description_units{
    font-size:16px;
    display:flex;
    flex-flow: row nowrap;
    align-items:center;
    justify-content:space-around;
    position:absolute;
    bottom:0;
    left:0;
    padding: 8px;
}
.smartshop_message {
    font-size:85%;
}

.description_units>*{
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
}

.cartarea {
    width:100%;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
    margin:16px 32px 48px 32px;
}
.cartarea>.buttons{
    width:100%;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
}

.cartarea>.buttons>div {
    margin:0;
    height:88px;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
    width:140px;
    margin:0 8px;
    font-size:18px;
    font-weight:500;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.cartarea>.buttons>div.price {
    background-color:rgba(238,189,33,.7);
}
.cartarea>.buttons>div.addtocart {
    background-color:rgba(121,161,188,.7);
    transition:all .2s;
    cursor:pointer;
}

.cartarea>.buttons>div>span {
        display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    height:100%;
    padding:8px;
}
.cartarea>.buttons>p {
        font-weight:600;
        margin:0;
        text-align:center;
}


.addtocart:hover {
    background-color:rgba(86,136,169,.7);
}

/* product */

.smartshop.product {
    position:relative;
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    justify-content:center;
    width:100%;
}

.smartshop.product image{

    padding:8px;
    margin:0;
    width:100%;
    display:flex;
    flex-flow: row wrap;
    align-items:center;
    justify-content:center;

}

.smartshop.product img{
    padding:0;
    margin:0;
    width:100%;
    max-width:800px;
    height:auto;
	max-height:90vh;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.smartshop.product .infos{
    width:100%;
    padding:8px;
    margin:0;
    width:100%;
    display:flex;
    flex-flow: column nowrap;
    align-items:center;
    justify-content:center;
}

.smartshop.product .infos .description{
    width:100%;
    position:relative;
    padding:16px 32px 48px 16px;
    background-color:#eee;
}

.smartshop.product .infos .description>span{
    display:block;
    margin-bottom:8px;
}

.smartshop.product .infos .description>*{
    width:100%;
}

.smartshop.product .bottom {
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
}




.smartshop.product a{
    text-decoration:none;
    color:#333;
}

.smartshop.product a:hover{
    color:#000;
}



/* category products */

.smartshop.categoryproduct {
    position:relative;
    display:flex;
    flex-flow: row wrap;
    align-items:center;
    justify-content:space-around;
}

.smartshop.categoryproduct>figure{
    position:relative;
    display:inline-block;
    padding:8px;
    margin:0 0 32px 0;
}

.smartshop.categoryproduct>figure img{
    max-width:100%;
    width:auto;
    height:auto;
}

.smartshop.categoryproduct>figure figcaption{
    max-width:100%;
	text-align:center;
}



.smartshop.categoryproduct a:hover{
    color:#000;
}

.smartshop.categoryproduct .figbottom{
    width:50%;
    display:block;
    margin-left:25%;
        border-top: solid 1px #eee;
}


/* serieproducts module */

aside.module.serieproduct {
    position:relative;
    margin:48px 16px;
    padding:8px;

        display:flex;
        flex-flow:column nowrap;
            justify-content:center;
    align-items:center;
}

aside.module.serieproduct h2{
    position:relative;
    width:100%;
    text-align:center;
}

ul.smartshop.serieproduct {
    list-style-type: none;
    position:relative;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:650px;
    background-color:rgba(82,83,52,.5);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding-top: 8px;
}

ul.smartshop.serieproduct>li{
    width: 155px;
    margin:8px;
    padding:0
}

ul.smartshop.serieproduct>li>figure{
    position:relative;
    display:block;
    width:100%;
}

ul.smartshop.serieproduct>li>figure{
    position:relative;
    display:block;
    width:100%;
}

ul.smartshop.serieproduct>li>figure picture{
    position:relative;
    width:100%;
}

ul.smartshop.serieproduct>li>figure picture>img{
    position:relative;
    width:100%;
    height:auto;
}

ul.smartshop.serieproduct>li>figure figcaption{
    position:relative;
    width:100%;
}

ul.smartshop.serieproduct>li>figure figcaption h3{
    font-size:13px;
    font-weight:400;
}

/*  ORDER */



.tabs.smartshop.order .tabtitles {
    display:flex;
    flex-flow: column nowrap;
}

.tabs.smartshop.order .tabtitles>.tabtitle {
    width:100%;
    height:64px;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    background-color: rgba(0, 0, 0, 0.03);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
    box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, -2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.02) inset;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-bottom: solid 5px #006898;
    cursor:default;
    opacity:.6;
    user-select: none;
}

.tabs.smartshop.order .tabtitles>.tabtitle[data-validated="true"] {
    cursor:pointer;
    opacity:.9;
}

.tabs.smartshop.order .tabtitles>.tabtitle[data-selected="true"] {
    cursor:default;
    opacity:1;
    border-bottom-color: #bd8f35;
}


.tabs.smartshop.order .tabentries {
    border: solid 1px rgba(0, 0, 0, 0.1);
}

.tabs.smartshop.order .tabentries>.tabentry {
    display:none;
}

.tabs.smartshop.order .tabentries>.tabentry[data-selected="true"] {
    display:block;
}

.tabs.smartshop.order .tabentries>.tabentry>.content {
    padding:16px;
}

.tabs.smartshop.order .tabentry .bottom{
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    justify-content: flex-end;
    width:100%;

}

.tabs.smartshop.order .tabentry .bottom>.nextstep{
    display:block;
    margin:8px;
    padding:4px 8px;
    background-color: rgba(0, 0, 0, 0.03);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
    box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, -2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.02) inset;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-bottom: solid 5px #006898;
    cursor:default;
    opacity:.6;
}

.tabs.smartshop.order .tabentry .bottom>.nextstep[data-enabled="true"]{
    cursor:pointer;
    opacity:1;
    user-select: none;
}


.tabs.smartshop.order .tabentry .productlist{
    position:relative;
    display:flex;
    flex-flow:column nowrap;
    width:100%;
}

.tabs.smartshop.order .tabentry .productlist>.entry{
    position:relative;
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    margin:8px;
    user-select: none;

}

.tabs.smartshop.order .tabentry .productlist>.entry img.product{
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin:0 16px;
}

.tabs.smartshop.order .tabentry .productlist>.entry>span.name{
    width:300px;
}

.tabs.smartshop.order .tabentry .productlist>.entry>span.name>a{
    color:#444;
    cursor:pointer;
}

.tabs.smartshop.order .tabentry .productlist>.entry>span.price{
    width:90px;
    text-align:center;
}

.tabs.smartshop.order .tabentry .productlist>.entry>span.removefromorder{
    width:16px;
    cursor:pointer;
}

.tabs.smartshop.order .billingaddress, .tabs.smartshop.order .deliveryaddress{
    position:relative;
    margin:24px;
}

.tabs.smartshop.order .tabentry .total{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:center;
    font-size:110%;
    font-weight:500;
    padding:8px;
    user-select: none;
}


.tabs.smartshop.order .order.customer{
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
    justify-content:flex-start;
    padding:8px;
}

.tabs.smartshop.order .order.customer>p{
    border-bottom:solid 1px #ddd;
    font-size:110%;
    font-weight:500;
}


/* customer */

.smartshop.customer .boxes{
    position:relative;
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;
    align-items:center;
    width:100%;
}

.smartshop.customer .boxes>.box{
    position:relative;
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;
    align-items:center;
    width:400px;
    max-width:100%;
    margin:8px 4px;
    padding:16px;
    border:solid 1px #ccc;
    border-radius:8px;
}

.smartshop.customer .boxes>.box>p{
    font-weight:500;
    text-align:center;
}

.smartshop.customer form{
    position:relative;
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;
    align-items:center;
    width:100%;
}


.smartshop.customer form>.entries{
    position:relative;
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-start;
    align-items:center;
    width:400px;
    max-width:100%;
    margin:8px 4px;
    padding:8px;
}


.smartshop.customer form>.entries>.entry{
    position:relative;
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    margin:0 4px;
    padding:4px;
}

.smartshop.customer form>.entries>.entry>label, .smartshop.customer form>.entries>.entry>input, .smartshop.login form>.entries>.entry>label, .smartshop.login form>.entries>.entry>input{
    width:100%;
}

.smartshop.customer form>.entry{
    margin:8px;
}

.lastlogin{
    list-style-type:none;
}

/* custormer address */

ul.customeraddress {
    position:relative;
    display:flex;
    flex-flow: column nowrap;
    list-style-type:none;
}

ul.customeraddress>li {
    width:100%;
    display:flex;
    flex-flow: row wrap;
    justify-content:flex-start;
    align-items:center;   
}

ul.customeraddress>li>.name {
    width:300px;
    max-width:100%;
    display:block;
    margin:0 4px;
}

ul.customeraddress>li>.default {
    width:270px;
    max-width:100%;
    display:block;
    margin:0 4px;
}

ul.customeraddress>li>.delete {
    width:24px;
    display:block;
        padding:0 4px;
}

.customeraddress li>a:hover{
    color:#ccc;
    
}

/* custormer orders */

ul.orders {
    position:relative;
    display:flex;
    flex-flow: column nowrap;
    list-style-type:none;
}

ul.orders li {
    width:100%;
    display:flex;
    flex-flow: row wrap;
    justify-content:flex-start;
    align-items:center;  
    position:relative;
    height:80;
}

ul.orders li>.date {
    width:300px;
    max-width:100%;
    display:block;
    margin:0 4px;
}

ul.orders li>.total {
    width:100px;
    max-width:100%;
    display:block;
    margin:0 4px;
    text-align:center;
}

ul.orders li>.item {
    width:150px;
    max-width:100%;
    display:flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items:center; 
    margin:0 4px;
}

ul.orders li>.item>img {
    width:70px;
    height:auto;
}

ul.orders li>.item>.pname {
    font-size:11px;
    max-width:100%;
    text-align:center;
}
ul.orders li>a:hover{
    color:#ccc;
    
}

@media (min-width: 450px) {
    .smartshop.product image, .smartshop.product infos{
        width:45%;
    }
}

@media (min-width: 576px) {
    .cartarea>.buttons>div {
        font-size:20px;
    }
}

@media (min-width: 768px) {
    .smartshop.categoryproduct>figure img{
        max-width:380px;
    }
	.smartshop.categoryproduct>figure figcaption{
		max-width:380px;
	}
    .tabs.smartshop.order .tabtitles {
        flex-flow: row nowrap;
    }
}