/* Status > New */
.foreground.status .keyvisual .status,
.foreground.detail .keyvisual .status{
z-index:2;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}

.foreground.status .keyvisual .status p{
font-family:var(--asset-bold-font-family);
color:var(--dark-font-color);
font-size:var(--m-font-size);
font-weight:bold;
text-transform:uppercase;
}

.foreground.status .keyvisual .status.new{
background:rgba(255,255,255,.8);
}


.foreground.detail .keyvisual .status p{
font-family:var(--asset-bold-font-family);
color:var(--light-font-color);
font-size:var(--l-font-size);
font-weight:bold;
text-transform:uppercase;
}

.foreground.detail .keyvisual .status.new{
background:var(--dark-background-color);
}



/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#database{
float:left;
width:100%;
display:grid;
grid-template-columns:auto;
grid-gap:0;
grid-template-areas:
"filter"
"filter_activ"
"listing";
}

#listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:center;
flex-wrap:wrap;
width:100%;
}

#listing > article{
float:left;
width:18rem;
min-width:13rem;
margin:1rem .5rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

.foreground.status .keyvisual{
float:left;
width:18rem;
height:26rem;
}

}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

#database{
float:left;
width:100%;
display:grid;
grid-template-columns:auto;
grid-gap:0;
grid-template-areas:
"filter"
"filter_activ"
"listing";
}

#listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:center;
flex-wrap:wrap;
width:100%;
}

#listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .5rem 1rem .5rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

.foreground.status .keyvisual{
float:left;
width:15rem;
height:23rem;
}

}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

#database{
float:left;
width:100%;
display:grid;
grid-template-columns:16rem auto;
grid-gap:0;
grid-template-areas:
"filter listing";
}

#listing{
grid-area:listing;
display:flex;
justify-content:left;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
}

#listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

.foreground.status .keyvisual{
float:left;
width:15rem;
height:23rem;
}


}

/* Desktop View */
@media screen and (min-width: 79.5rem){

#database{
float:left;
width:100%;
border:0px #FF00FF solid;
display:grid;
grid-template-columns:16rem auto;
grid-gap:0;
grid-template-areas:
"filter listing";
}

#listing{
grid-area:listing;
display:flex;
justify-content:left;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
}

#listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

.foreground.status .keyvisual{
float:left;
width:15rem;
height:23rem;
}


}



.foreground.status{
display:block;
margin:0;
padding:0;
background:var(--base-background-color);
position:relative;
}

.foreground.status .img{
position:relative;
float:left;
width:100%;
height:100%;
}

.foreground.status .keyvisual{
position:relative;
top:0;
left:0;
background:url('/asset/img/database/media/bg.svg') no-repeat bottom center;
}

.foreground.status .keyvisual .status-wrapper{
position:absolute;
bottom:3.95rem;
right:.5rem;
z-index:20;
}

.foreground.status .keyvisual .status-wrapper .status{
width:3.5rem;
height:3.5rem;
}

.foreground.status .keyvisual .feature-main-wrapper{
position:absolute;
top:.5rem;
left:.5rem;
border:0px #FF6600 solid;
z-index:20;
}

.foreground.status .keyvisual .feature-main-wrapper .icon{
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
border-radius:50%;
background:var(--base-background-color);
border:var(--base-border-color) 1px solid;
}

.foreground.status .keyvisual .feature-wrapper{
position:absolute;
bottom:4.25rem;
left:.5rem;
border:0px #FF6600 solid;
z-index:2;
}

.foreground.status .keyvisual .feature-wrapper .icon{
width:2.5rem;
height:2.5rem;
margin:.5rem 0 0 0;
padding:0;
border-radius:50%;
background:rgba(255,255,255,.8);
border:var(--base-border-color) 0px solid;
}

.foreground.status .keyvisual figure picture{
border:0px #FF0000 solid;
float:left;
width:100%;
height:100%;
margin:0;
padding:0;
}

.foreground.status .keyvisual figure picture.pos_1{
position:absolute;
top:.25rem;
left:-4.25rem;
z-index:1;
}

.foreground.status .keyvisual figure picture.pos_2{
position:absolute;
top:.5rem;
left:-2.25rem;
z-index:2;
}

.foreground.status .keyvisual figure picture.pos_3{
position:absolute;
top:.75rem;
left:0;
z-index:3;
}

.foreground.status .keyvisual figure picture.pos_4{
position:absolute;
top:.5rem;
left:2.25rem;
z-index:2;
}

.foreground.status .keyvisual figure picture.pos_5{
position:absolute;
top:.25rem;
left:4.25rem;
z-index:1;
}


.foreground.status .keyvisual figure picture img{
opacity:0;
}

/* Small Beckground */
.foreground.status .keyvisual figure .media_background_1{
border:0px #FF0000 solid;
background:url('/asset/img/database/media/img/bg_1.svg') no-repeat bottom center;
}

/* Default Beckground */
.foreground.status .keyvisual figure .media_background_2{
border:0px #00FF00 solid;
background:url('/asset/img/database/media/img/bg_2.svg') no-repeat bottom center;
}

/* Big Beckground */
.foreground.status .keyvisual figure .media_background_3{
border:0px #0000FF solid;
background:url('/asset/img/database/media/img/bg_2.svg') no-repeat bottom center;
}


.foreground.status .keyvisual .group-wrapper{
display:flex;
justify-content:center;
align-content:flex-start;
border:0px #FF00FF solid;
width:100%;
overflow:hidden;
height:3rem;
position:absolute;
bottom:0;
left:0
}


.foreground.status .keyvisual .group-wrapper .icon{
float:left;
position:relative;
width:2.5rem;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
margin:0 .15rem;
padding:0;
overflow:hidden;
}

.foreground.status .keyvisual .group-wrapper .icon img{
width:100%;
height:auto;
object-fit:fill;
object-position:center center;
}

.foreground.status .keyvisual .overview-wrapper{
display:flex;
justify-content:center;
align-content:flex-start;
border:0px #00FF00 solid;
width:100%;
overflow:hidden;
height:3rem;
position:absolute;
bottom:0;
left:0;
z-index:20
}

.foreground.status .keyvisual .overview-wrapper .icon{
float:left;
position:relative;
width:2.5rem;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
margin:0 .15rem;
padding:0;
}

.foreground.status .keyvisual .overview-wrapper img{
float:left;
width:100%;
height:auto;
margin:0;
padding:0;
}

.foreground.status .product{
float:left;
width:100%;
border:0px #FFFF00 solid;
margin:0;
padding:0;
}


foreground.status .addition{
display:block;
width:100%;
margin:.25rem 0;
padding:0;
}

.foreground.status .addition ul{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}

.foreground.status .addition li{
float:left;
width:100%;
margin:0;
padding:.15rem .15rem 0 .15rem;
border-bottom:var(--base-border-color) 1px solid;
font-size:var(--xs-font-size);
}

.foreground.status .addition li .label{
float:left;
width:auto;
}

.foreground.status .addition li .value{
float:right;
width:auto;
}





/*
.foreground.status .stock-wrapper{
display:block;
width:100%;
margin:.25rem 0;
padding:0;
}

.foreground.status .stock-wrapper ul{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}

.foreground.status .stock-wrapper li{
float:left;
width:100%;
margin:0;
padding:.15rem .15rem 0 .15rem;
border-bottom:var(--base-border-color) 1px solid;
font-size:var(--xs-font-size);
}

.foreground.status .stock-wrapper li:hover{
background:var(--middle-background-color);
}

.foreground.status .stock-wrapper li .label{
float:left;
width:auto;
}

.foreground.status .stock-wrapper li .value{
float:right;
width:auto;
}

.foreground.status .stock-wrapper li .value .status{
display:inline-block;
position:relative;
top:2px;
right:4px;
width:.75rem;
height:.75rem;
border-radius:50%;
}


.foreground.status .stock-wrapper li .value .status_265{
background:var(--active-background-color);
border:var(--light-border-color) 1px solid;
}

.foreground.status .stock-wrapper li .value .status_266{
background:var(--pending-background-color);
border:var(--light-border-color) 1px solid;
}

.foreground.status .stock-wrapper li .value .status_267{
background:var(--alert-background-color);
border:var(--light-border-color) 1px solid;
}
*/

li .value .status{
display:inline-block;
position:relative;
top:2px;
right:4px;
width:.75rem;
height:.75rem;
border-radius:50%;
}

li .value .status_265{
background:var(--active-background-color);
border:var(--light-border-color) 1px solid;
}

li .value .status_266{
background:var(--pending-background-color);
border:var(--light-border-color) 1px solid;
}

li .value .status_267{
background:var(--alert-background-color);
border:var(--light-border-color) 1px solid;
}



/*
.foreground.status .product .title{
float:left;
width:100%;
border:0px #FF00FF solid;
text-align:center;
margin:0;
padding:0;
}

.foreground.status .product .title .item.number{
border:0px #FF00FF solid;
margin:0;
padding:0;
}

.foreground.status .product .title .item.number p{
font-size:var(--s-font-size);
margin:0;
padding:0;
}


.foreground.status .product .title .headline{
float:left;
width:100%;
border:0px #00FFFF solid;
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
}

.foreground.status .product .title .headline h3{
font-size:var(--s-font-size);
margin:0;
padding:0;
}

.foreground.status .product .title .headline .ol{
font-size:var(--s-font-size);
margin:0;
padding:0;
}

.foreground.status .product .title .headline .hl,
.foreground.status .product .title .headline .sl{
font-size:var(--m-font-size);
font-weight:bold;
margin:0;
padding:0;
}
*/

/* Quickbuy Button
.foreground.status .quickbuy{
float:left;
width:100%;
}

.foreground.status .quickbuy p{
margin:0;
padding:.25rem 0;
display:flex;
justify-content:center;
align-items:center;
}

.foreground.status .quickbuy .preview{
display:inline-block;
width:1rem;
height:1rem;
margin:0 .15rem 0 0;
background:url('/asset/img/basket/btn/quickbuy/icon/on.svg') no-repeat center left;
}

.foreground.status .link_overlay{
all:revert;
float:left;
width:auto;
height:1.5rem;
text-align:center;
color:var(--base-font-color);
margin:0;
padding:0;
background:transparent;
border:0;
border-radius:0;
cursor:pointer;
}
*/

.foreground.status .asset{
float:left;
width:100%;
margin:.25rem 0 0 0;
padding:0;
display:flex;
justify-content:space-between;
align-items:center;
border:0;
}

.foreground.status .asset .left{
display:block;
}

.foreground.status .asset .right{
display:flex;
justify-content:flex-end;
align-items:center;
}

.foreground.status .asset .left .quickbuy.icon{
float:left;
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
}

.btn_overlay.icon{
display:block;
margin:0;
padding:0;
width:1.75rem;
height:1.75rem;
border:0;
}

.btn_overlay.icon,
.btn_overlay.icon.update,
.btn_overlay.icon.update:hover{
background:url('/asset/img/basket/btn/quickbuy/icon/off.svg') no-repeat center center;
}

.btn_overlay.icon:hover{
background:url('/asset/img/basket/btn/quickbuy/icon/hover.svg') no-repeat center center;
}

.btn_overlay.icon.on{
background:url('/asset/img/basket/btn/quickbuy/icon/on.svg') no-repeat center center;
}

.btn_overlay.icon span,
.btn_overlay.icon strong{
display:none;
}



.foreground.status .asset .right .link.icon{
float:right;
width:2.5rem;
height:2.5rem;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
}


.btn_link.icon{
display:block;
margin:0;
padding:0;
width:1.75rem;
height:1.75rem;
}

.btn_link.icon,
.btn_link.icon.update,
.btn_link.icon.update:hover{
background:url('/asset/img/basket/btn/off.svg') no-repeat center center;
}

.btn_link.icon:hover{
background:url('/asset/img/basket/btn/hover.svg') no-repeat center center;
}

.btn_link.icon.on{
background:url('/asset/img/basket/btn/on.svg') no-repeat center center;
}

.btn_link.icon span,
.btn_link.icon strong{
display:none;
}




/*
.foreground.status .link{
float:left;
width:100%;
border-radius:.25rem;
background:var(--button-background-color);
}

.foreground.status .link:hover{
background:var(--button-hover-background-color);
}


.foreground.status .link p{
margin:0;
padding:.25rem 0;
display:flex;
justify-content:center;
align-items:center;
}

.foreground.status .link .link_intern,
.foreground.status .link .link_intern:hover{
display:inline-block;
margin:.25rem 0 0 0;
padding:0;
font-family:var(--bold-font-family);
color:var(--button-font-color);
text-transform:none;
}


.foreground.status .link .bag{
display:inline-block;
width:1.75rem;
height:1.75rem;
background:url('/asset/img/basket/btn/add.svg') no-repeat center left;
}

*/


/* Detail */

/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

.foreground.detail{
display:grid;
grid-template-rows:minmax(0,auto);
grid-template-areas:
"keyvisual"
"product"
"basket";
grid-column-gap:0;
border:0px #FF0000 solid;
}

.foreground.detail .keyvisual .img{
position:relative;
top:0;
left:0;
border:0px #FF6600 solid;
}

.foreground.detail #display{
float:left;
width:100%;
min-height:22rem;
position:relative;
top:0;
left:0
}

}


/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

.foreground.detail{
display:grid;
grid-template-rows:minmax(0,auto) minmax(0,auto);
grid-template-areas:
"keyvisual product"
"basket basket";
grid-template-columns:1.65fr 2.25fr;
grid-column-gap:.5rem;
border:0px #FF0000 solid;
}

.foreground.detail .keyvisual .img{
position:relative;
top:0;
left:0;
border:0px #FF6600 solid;
}

.foreground.detail #display{
float:left;
width:100%;
min-height:23rem;
position:relative;
top:0;
left:0;
border:0px #FF6600 solid;
}


}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

.foreground.detail{
display:grid;
grid-template-rows:minmax(0,auto) minmax(0,auto);
grid-template-areas:
"keyvisual product"
"keyvisual basket";
grid-template-columns:1.75fr 2.35fr;
grid-column-gap:.75rem;
border:0px #00FF00 solid;
}

.foreground.detail .keyvisual .img{
position:relative;
top:0;
left:0;
border:0px #FF6600 solid;
}


.foreground.detail #display{
float:left;
width:100%;
min-height:24rem;
position:relative;
top:0;
left:0;
border:0px #FF6600 solid;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.foreground.detail{
display:grid;
grid-template-rows:minmax(0,auto) minmax(0,auto);
grid-template-areas:
"keyvisual product"
"keyvisual basket";
grid-template-columns:1.25fr 2.25fr;
grid-column-gap:6rem;
}

.foreground.detail .keyvisual .img{
position:relative;
top:0;
left:0;
border:0px #FF6600 solid;
}

.foreground.detail #display{
float:left;
width:100%;
min-height:28rem;
position:relative;
top:0;
left:0
}

}


.foreground.detail .product{
grid-area:product;
}

.foreground.detail .item.number{
float:left;
width:auto;
padding:0;
margin:0;
border:0px #0FFFF0 solid;
}

.foreground.detail .item.number p{
float:left;
width:100%;
padding:0;
margin:0;
font-size:var(--s-font-size);
}

.foreground.detail .title{
float:left;
width:100%;
padding:0;
margin:0 0 .35rem 0;
}

.foreground.detail .headline .ol{
margin:0 0 0 0;
padding:0;
color:var(--base-font-color);
font-size:var(--m-font-size);
font-family:var(--bold-font-family);
}

.foreground.detail .headline .hl{
margin:0 0 .15rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--xxl-font-size);
font-family:var(--bold-font-family);
}

.foreground.detail .headline .sl{
margin:.5rem 0 .15rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--l-font-size);
font-family:var(--bold-font-family);
}


/* Bookmark > Mobile View */
@media screen and (max-width: 45rem){

.foreground.detail .addition-footer-wrapper .bookmark-wrapper{
float:left;
width:100%;
display:flex;
justify-content:center;
align-items:center;
padding:.5rem 0;
}

.foreground.detail .btn_bookmark.icon{
display:block;
margin:0;
padding:0;
width:2.75rem;
height:2.75rem;
border:0;
}

}



p{
margin:0;
padding:.5em 0;
color:var(--base-font-color);
font-size:var(--m-font-size);
}

.foreground.detail .card{
display:none;
width:100%;
position:absolute;
top:0;
left:0
}

.foreground.detail .card:first-child{
display:block;
}





/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

:root{
--feature-main-wrapper-top:.75rem;
--feature-main-wrapper-left:0;

--feature-main-wrapper-width:3.75rem;
--feature-main-wrapper-height:3.75rem;

--feature-wrapper-bottom:4.75rem;
--feature-wrapper-left:0;

--feature-wrapper-width:3.75rem;
--feature-wrapper-height:3.75rem;

--status-wrapper-bottom:3.75rem;
--status-wrapper-right:.75rem;

--status-wrapper-width:3.75rem;
--status-wrapper-height:3.75rem;;
}

}



/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

:root{
--feature-main-wrapper-top:0rem;
--feature-main-wrapper-left:0;

--feature-main-wrapper-width:3.75rem;
--feature-main-wrapper-height:3.75rem;

--feature-wrapper-bottom:3.75rem;
--feature-wrapper-left:0;

--feature-wrapper-width:3.75rem;
--feature-wrapper-height:3.75rem;

--status-wrapper-bottom:3.75rem;
--status-wrapper-right:.75rem;

--status-wrapper-width:3.75rem;
--status-wrapper-height:3.75rem;
}

}


/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

:root{
--feature-main-wrapper-top:0rem;
--feature-main-wrapper-left:0;

--feature-main-wrapper-width:4.5rem;
--feature-main-wrapper-height:4.5rem;

--feature-wrapper-bottom:3.75rem;
--feature-wrapper-left:0;

--feature-wrapper-width:4.5rem;
--feature-wrapper-height:4.5rem;

--status-wrapper-bottom:3.75rem;
--status-wrapper-right:.75rem;

--status-wrapper-width:4rem;
--status-wrapper-height:4rem;
}

}



/* Desktop View */
@media screen and (min-width: 79.5rem){

:root{
--feature-main-wrapper-top:1rem;
--feature-main-wrapper-left:0;

--feature-main-wrapper-width:4rem;
--feature-main-wrapper-height:4rem;

--feature-wrapper-bottom:4.75rem;
--feature-wrapper-left:0;

--feature-wrapper-width:4rem;
--feature-wrapper-height:4rem;


--status-wrapper-bottom:4.75rem;
--status-wrapper-right:2.75rem;

--status-wrapper-width:4rem;
--status-wrapper-height:4rem;
}

}




.foreground.detail .keyvisual .feature-main-wrapper{
position:absolute;
top:var(--feature-main-wrapper-top);
left:var(--feature-main-wrapper-left);
border:0px #FF00FF solid;
z-index:2;
}

.foreground.detail .keyvisual .feature-main-wrapper .icon{
width:var(--feature-main-wrapper-width);
height:var(--feature-main-wrapper-height);
margin:0;
padding:0;
border-radius:50%;
background:var(--base-background-color);
}

.foreground.detail .keyvisual .feature-wrapper{
position:absolute;
bottom:var(--feature-wrapper-bottom);
left:var(--feature-wrapper-left);
border:0px #FF6600 solid;
z-index:2;
}

.foreground.detail .keyvisual .feature-wrapper .icon{
width:var(--feature-wrapper-width);
height:var(--feature-wrapper-height);
margin:.5rem 0 0 0;
padding:0;
border-radius:50%;
background:var(--base-background-color);
}


.foreground.detail .keyvisual .status-wrapper{
position:absolute;
bottom:var(--status-wrapper-bottom);
right:var(--status-wrapper-right);
border:0px #FF00FF solid;
z-index:20;
}

.foreground.detail .keyvisual .status-wrapper .status{
width:var(--status-wrapper-width);
height:var(--status-wrapper-height);
border:0px #FF00FF solid;
}


.foreground.detail .img{
position:relative;
}



/* Background */
.foreground.detail .keyvisual figure{
border:0px #FFFF00 solid;
z-index:1;
background:url('/asset/img/database/media/detail/bg.svg') no-repeat bottom center;
}

/* Small Beckground */
.foreground.detail .keyvisual figure .media_background_1{
border:0px #FF0000 solid;
background:url('/asset/img/database/media/img/bg_1.svg') no-repeat bottom center;
}

/* Default Beckground */
.foreground.detail .keyvisual figure .media_background_2{
border:0px #00FF00 solid;
background:url('/asset/img/database/media/img/bg_2.svg') no-repeat bottom center;
}

/* Big Beckground */
.foreground.detail .keyvisual figure .media_background_3{
border:0px #0000FF solid;
background:url('/asset/img/database/media/img/bg_3.svg') no-repeat bottom center;
}




.foreground.detail .keyvisual .overview-wrapper,
.foreground.detail .keyvisual .group-wrapper{
float:left;
width:100%;
border:0px #FF00FF solid;
margin:0 0 .5rem 0;
padding:0 0 .25rem 0;
display:flex;
justify-content:center;
align-content:center;
flex-wrap:wrap;
}

.foreground.detail .keyvisual .overview-wrapper .icon,
.foreground.detail .keyvisual .group-wrapper .icon{
float:left;
width:4.5rem;
height:auto;
border:0px #FFFF00 solid;
margin:0 .15rem;
padding:0;
}

.foreground.detail .keyvisual .overview-wrapper .img,
.foreground.detail .keyvisual .group-wrapper .img{
float:left;
width:4.5rem;
border:0px #FFFF00 solid;
}

.foreground.detail .keyvisual .overview-wrapper .img img,
.foreground.detail .keyvisual .group-wrapper .img img{
float:left;
width:100%;
height:auto;
margin:0;
padding:0;
}




.foreground.detail .keyvisual .overview-wrapper .download,
.foreground.detail .keyvisual .group-wrapper .download{
float:left;
width:100%;
}

.foreground.detail .keyvisual .overview-wrapper .download a,
.foreground.detail .keyvisual .group-wrapper .download a{
float:left;
width:100%;
height:auto;
margin:0;
padding:0;
display:flex;
justify-content:center;
align-content:center;
}

.foreground.detail .keyvisual .overview-wrapper i{
display:block;
width:.75rem;
height:.75rem;
margin:0;
padding:0;
background:url('/asset/img/icon/file.svg') no-repeat bottom left;
}




/*
.foreground.detail .keyvisual .overview-wrapper .download,
.foreground.detail .keyvisual .group-wrapper .download{
float:left;
width:4.5rem;
border:0px #FFFF00 solid;
}

.foreground.detail .keyvisual .overview-wrapper .icon .download p{
font-size:var(--xs-font-size);
margin:0;
padding:0;
}

@media screen and (min-width: 45rem){

.foreground.detail .keyvisual .overview-wrapper .icon .download p a:before{
display:inline-block;
content:'';
width:.85em;
height:.7em;
}

.foreground.detail .keyvisual .overview-wrapper .icon .download p a:before{
background:url('/asset/img/icon/file.svg') no-repeat bottom left;
}

}

*/



/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

/*
.foreground.detail .packing-wrapper{
float:left;
width:100%;
display:flex;
margin:.75rem 0 0 0;
justify-content:center;
}

.foreground.detail .packing-wrapper .icon{
width:3.65rem;
height:3.65rem;
margin:0;
padding:0;
border-radius:50%;
background:var(--base-background-color);
border:var(--base-border-color) 1px solid;
}
*/

.foreground.detail .packing-wrapper{
display:none;
}


}


/* Tablet && Desktop View */
@media screen and (min-width: 45rem){

.foreground.detail .packing-wrapper{
float:right;
width:auto;
display:flex;
border:0px #FF00FF solid;
justify-content:flex-end;
}

.foreground.detail .packing-wrapper .icon{
width:2.65rem;
height:2.65rem;
margin:0;
padding:0;
border-radius:50%;
background:var(--base-background-color);
}


}





.foreground.detail .addition{
display:block;
width:100%;
margin:.5rem 0;
padding:0;
}

.foreground.detail .addition ul{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}

.foreground.detail .addition li{
float:left;
width:100%;
margin:0;
padding:.1rem 0;
border-bottom:var(--base-border-color) 1px solid;
}

.foreground.detail .addition li .label{
float:left;
width:auto;
}

.foreground.detail .addition li .value{
float:right;
width:auto;
}




.foreground.detail .get_pdf_file{
float:right;
margin:.1rem 0 .15rem 0;
color:var(--nav-font-color);
font-size:var(--m-font-size);
text-transform:uppercase;
}

.foreground.detail .get_pdf_file:hover{
float:right;
margin:.1rem 0 .15rem 0;
color:var(--base-font-color);
text-transform:uppercase;
}

.foreground.detail .get_pdf_file:before{
display:inline-block;
content:'';
width:1em;
height:.75em;
}

.foreground.detail .get_pdf_file:before{
background:url('/asset/img/icon/file.svg') no-repeat top left;
}

.foreground.detail .btn_basket{
display:flex;
justify-content:center;
align-items:center;
margin:.25rem 0 0 0;
padding:.25rem .5rem .25rem .15rem;
text-transform:none;
}

.foreground.detail .btn_basket span{
display:inline-block;
margin:0;
padding:0;
color:var(--button-font-color);
text-transform:none;
}

.foreground.detail .btn_basket span.icon{
display:inline-block;
width:1.75rem;
height:1.75rem;
background:url('/asset/img/basket/btn/add.svg') no-repeat center left;
}



.foreground.detail .dialog{
grid-area:basket;
}




/* Mobile only */
@media screen and (max-width: 45rem){

/* In Stock */
.foreground.detail .stock-wrapper{
display:flex;
justify-content:center;
align-items:center;
margin:.25rem 0 .75rem 0;
padding:.25rem .5rem .25rem .15rem;
text-transform:none;
}

}

/* Tablet && Desktop View only */
@media screen and (min-width: 45rem){

/* In Stock */
.foreground.detail .stock-wrapper{
float:left;
width:auto;
margin:0;
padding:0;
}

}

.foreground.detail .stock-wrapper p{
float:left;
width:auto;
margin:0;
padding:0;
font-size:var(--m-font-size);
}

.foreground.detail .stock-wrapper .status{
display:inline-block;
position:relative;
top:1px;
width:.75rem;
height:.75rem;
border-radius:50%;
}

.foreground.detail .stock-wrapper .status_265{
background:var(--active-background-color);
border:var(--light-border-color) 1px solid;
}

.foreground.detail .stock-wrapper .status_266{
background:var(--pending-background-color);
border:var(--light-border-color) 1px solid;
}

.foreground.detail .stock-wrapper .status_267{
background:var(--alert-background-color);
border:var(--light-border-color) 1px solid;
}


/* Mobile only */
@media screen and (max-width: 45rem){

.foreground.detail .addition-wrapper{
display:flex;
justify-content:space-between;
align-items:normal;
width:100%;
margin:.5rem 0 0 0;
padding:0;
flex-direction:column-reverse;
}

.foreground.detail .addition-footer-wrapper{
display:flex;
justify-content:space-between;
align-items:normal;
width:100%;
margin:.5rem 0 0 0;
padding:0;
flex-direction:column-reverse;
}

}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

.foreground.detail .addition-wrapper{
display:flex;
justify-content:space-between;
align-items:normal;
width:100%;
margin:.5rem 0 0 0;
padding:0;
flex-direction:column-reverse;
}

.foreground.detail .addition-footer-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin:.5rem 0 0 0;
padding:0;
}

.foreground.detail .pdf-wrapper{
float:left;
width:auto;
margin:0 0 .5rem 0;
padding:0;
}

.foreground.detail .pdf-wrapper p{
float:left;
}

}

/* Tablet && Desktop View only */
@media screen and (min-width: 79.5rem){

.foreground.detail .addition-wrapper{
display:flex;
justify-content:space-between;
align-items:normal;
width:100%;
margin:.5rem 0 0 0;
padding:0;
}

.foreground.detail .addition-footer-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin:.5rem 0 0 0;
padding:0;
}

}

.foreground.detail .pdf-wrapper p{
width:auto;
margin:0;
padding:0;
}