/*Detail*/
.product.detail .card main{
min-height:var(--product-main-min-height);
height:var(--product-main-height);
}

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

.product.detail .card main{
min-height:var(--product-main-min-height);
height:var(--product-main-height);
}

}


/*Bookmark view*/
.bookmark .product.detail{
float:left;
width:calc(25% - .5rem);
max-width:25rem;
margin:.25rem;
padding:0;
}


/*Global Detail view*/
.product.detail header{
all:unset !important;
float:left;
width:100%;
margin:0;
padding:0;
/*outline:#0FF000 1px solid;*/
}

.product.detail header .item_number{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
/*outline:#0FF000 1px solid;*/
}

.product.detail header .item_numberp{
font-size:var(--fs-xs);
margin:0;
padding:0;
/*outline:#0FF000 1px solid;*/
}

.product.detail header .headline{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
/*outline:#0FF000 1px solid;*/
}

.product.detail h2{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
/*outline:#0FF000 1px solid;*/
}

.product.detail main{
margin:0 !important;
padding:0 !important;
/*outline:#0000FF 1px solid !important;*/
}


.product.detail .content{
float:left;
width:100%;
margin:0 !important;
padding:0 !important;
}

.product.detail .media-wrapper{
background:url('/assets/img/database/media/bg.svg') no-repeat bottom center;
}



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

/*Grid*/
.product.detail .grid{
display:grid;
grid-column-gap:0;
grid-template-columns:auto;
grid-template-rows:auto 8rem 4rem 22rem auto;
grid-template-areas:
"media"
"media_overview"
"header"
"main"
"footer";
}

.product.detail{
float:left;
width:calc(100% - 1.5rem);
margin:0.75rem;
pedding:0;
/*outline:#ff0080 1px solid !important;*/
}

.product.detail footer .box:last-of-type{
clear:both;
float:left;
width:calc(100% - 1rem);
margin:0 .5rem .5rem .5rem !important;
padding:.5rem !important;
/*outline:#008ff0 1px solid !important;*/
}

}

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

/*Grid*/
.product.detail .grid{
display:grid;
grid-column-gap:0;
grid-template-columns:auto;
grid-template-rows:auto 8rem 4rem 22rem auto;
grid-template-areas:
"media"
"media_overview"
"header"
"main"
"footer";
}

.product.detail .media-wrapper{
width:75%;
max-width:32rem;
margin:0 auto;
/*outline:#0000FF 1px solid !important;*/
}

.product.detail footer .box:last-of-type{
clear:both;
float:left;
width:calc(100% - 1rem);
margin:0 .5rem .5rem .5rem !important;
padding:.5rem !important;
/*outline:#008ff0 1px solid !important;*/
}

}

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

/* Grid */
.product.detail .grid{
display:grid;
grid-template-rows:4rem minmax(20rem,auto) minmax(0,12rem) 8rem;
grid-template-areas:
"media header"
"media main"
"media footer"
"media_overview footer";
grid-template-columns:1.5fr 3fr;
grid-column-gap:0;
}

.product.detail footer .box:last-of-type{
clear:both;
float:right;
width:auto;
margin:0 .5rem .5rem .5rem !important;
padding:.5rem !important;
/*outline:#0000FF 1px solid !important;*/
}

.product.detail .media-wrapper{
min-width:26rem;
margin:0 auto;
/*outline:#0FF000 1px solid !important;*/
}

}

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

/* Grid */
.product.detail .grid{
display:grid;
grid-template-rows:5rem minmax(18rem,auto) 12rem 8rem;
grid-template-areas:
"media header"
"media main"
"media footer"
"media_overview .";
grid-template-columns:1.5fr 3fr;
grid-column-gap:1.5rem;
}

.product.detail footer .box:last-of-type{
clear:both;
float:right;
width:auto;
margin:0 .5rem .5rem .5rem !important;
padding:.5rem !important;
/*outline:#0000FF 1px solid !important;*/
}


}


.product.detail .media-wrapper{
grid-area:media;
background:url('/assets/img/database/media/bg.svg') no-repeat bottom center;
overflow:hidden;
position:relative;
}

.product.detail .media-wrapper .media{
float:left;
width:100%;
opacity:1;
margin:0;
padding:0;
}

/*Small Background */
.product.detail .media-wrapper .media_background_1{
background:url('/assets/img/database/media/img/bg_1.svg') no-repeat bottom center;
}

/*Default Background */
.product.detail .media-wrapper .media_background_2{
background:url('/assets/img/database/media/img/bg_2.svg') no-repeat bottom center;
}

/* Big Background */
.product.detail .media-wrapper .media_background_3{
background:url('/assets/img/database/media/img/bg_2.svg') no-repeat bottom center;
}


/* IMG swipe slider */
.product.detail .media-wrapper .media_content_wrapper{
display:flex;
flex-direction:row;
margin:0;
padding:0;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior:smooth;
scrollbar-width:none;
}

.product.detail .media-wrapper .media_content_wrapper::-webkit-scrollbar{
display:none;
}

.product.detail .media-wrapper .media_content_wrapper .media{
flex:0 0 100%;
scroll-snap-align:center;
scroll-snap-stop:always;
}

.product.detail .media-wrapper .media-indicators{
display:flex;
justify-content:center;
gap:.5rem;
margin-top:1rem;
}

.product.detail .media-wrapper .media-indicators button.pre{
width:.35rem;
height:.35rem;
padding:0;
border:0;
border-radius:50%;
background:#bbb;
cursor:pointer;
outline:1px #FF0000 solid;
}

.product.detail .media-wrapper .media-indicators button.next{
width:.35rem;
height:.35rem;
padding:0;
border:0;
border-radius:50%;
background:#bbb;
cursor:pointer;
outline:1px #0000FF solid;
}



.product.detail .media-wrapper .media-indicators button.pos{
position:relative;
width:.35rem;
height:.35rem;
padding:0;
border:0;
border-radius:50%;
background:#bbb;
cursor:pointer;
}

.product.detail .media-wrapper .media-indicators button span{
display:none;
}

.product.detail .media-wrapper .media-indicators button.is-active{
background:#222;
}

.product.detail .media-wrapper .media-indicators button.pos{
overflow:hidden;
}

.product.detail .media-wrapper .media-indicators button.pos::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:0%;
height:40%;
background:currentColor;
opacity:.5;
pointer-events:none;
}

.product.detail .media-wrapper .media-indicators button.pos.progress-run::after{
animation:cms-slider-progress var(--autoplay-delay,4s) linear forwards;
}

@keyframes cms-slider-progress{
from{width:0%;}
to{width:100%;}
}

.product.detail .media-wrapper .media_content_wrapper{
cursor:grab;
}

.product.detail .media-wrapper .media_content_wrapper:active{
cursor:grabbing;
}

.product.detail .media-wrapper .media_content_wrapper .media{
user-select:none;
-webkit-user-drag:none;
}

.product.detail .media-wrapper .media_content_wrapper .media img{
pointer-events:none;
-webkit-user-drag:none;
}


.product:not(.detail) .card figure img{
filter:var(--drop-shadow-default);
}

.product.detail .overview-wrapper{
grid-area:media_overview;
display:flex;
justify-content:center;
align-content:flex-start;
position:relative;
z-index:20;
}

.product.detail .overview-wrapper .icon{
float:left;
position:relative;
min-width:3rem;
width:100%;
max-width:4rem;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin:0.15rem;
padding:0;
}

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

.product.detail .overview-wrapper .download,
.product.detail .group-wrapper .download{
clear:both;
float:left;
width:100%;
}

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

.product.detail .overview-wrapper i{
display:block;
width:.75rem;
height:.75rem;
margin:0;
padding:0;
background-color:currentColor;
-webkit-mask-image:url('/assets/img/icon/file.svg');
mask-image:url('/assets/img/icon/file.svg');
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:bottom left;
mask-position:bottom left;
-webkit-mask-size:contain;
mask-size:contain;
}




.product.detail header{
grid-area:header;
margin:0;
padding:0;
}

.product.detail main{
grid-area:main;
margin:0;
padding:0;
}

.quickview .product.detail footer,
.product.detail footer{
all:unset !important;
grid-area:footer;
float:left;
width:100%;
margin:0;
padding:0;
/*outline:#FF0000 1px solid !important;*/
display:flex;
justify-content:space-between;
border-radius:0;
background:var(--bgr-gray-300) !important;
}


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

.product.detail footer .box:first-of-type{
all:unset !important;
clear:both !important;
float:lef !important;
width:calc(100% - 2rem) !important;
margin:.5rem .5rem 0 .5rem !important;
padding:.5rem !important;
/*outline:#FF0000 1px solid !important;*/
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
}

.product.detail footer .box:last-child{
clear:both;
float:left !important;
width:calc(100% - 1rem) !important;
margin:.5rem .5rem 0 .5rem !important;
padding:.5rem !important;
/*outline:#FF0000 1px solid !important;*/
}

.product.detail footer .box.one-child{
float:left;
margin:0;
padding:0;
}

}

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

.product.detail footer .box:first-of-type{
all:unset !important;
clear:both !important;
float:left !important;
width:calc(100% - 2rem)!important;
margin:.5rem .5rem 0 .5rem !important;
padding:.5rem !important;
/*outline:#FF0000 1px solid !important;*/
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
}

.product.detail footer .box:last-child{
clear:both;
float:left !important;
width:calc(100% - 1rem) !important;
margin:.5rem .5rem 0 .5rem !important;
padding:.5rem !important;
/*outline:#FF0000 1px solid !important;*/
}

}

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

.product.detail footer .box:first-of-type{
all:unset !important;
clear:both !important;
float:left !important;
width:calc(100% - 2rem)!important;
margin:.5rem .5rem 0 .5rem !important;
padding:.5rem !important;
/*outline:#FF0000 1px solid !important;*/
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
}

}

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

.product.detail footer .box:first-of-type{
all:unset !important;
clear:both !important;
float:left !important;
width:calc(100% - 2rem)!important;
margin:.5rem .5rem 0 .5rem !important;
padding:.5rem !important;
/*outline:#FF0000 1px solid !important;*/
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
}

}




.product.detail footer .box .product_order_availability{
/*outline:#0FF000 1px solid;*/
}

.product.detail footer .box .product_order_availability p{
float:left;
width:auto;
margin:0;
padding:0;
}

.product.detail footer .box .product_order_availability .status{
display:inline-block;
position:relative;
top:1px;
right:4px;
margin:0 0 0 .5rem;
width:.75rem;
height:.75rem;
border-radius:50%;
}

.product.detail footer .box .product_order_availability .status_265{
background:var(--status-succes-background-color);
border:var(--status-succes-border-color) 1px solid;
}

.product.detail footer .box .product_order_availability .status_266{
background:var(--status-pending-background-color);
border:var(--status-pending-border-color) 1px solid;
}

.product.detail footer .box .product_order_availability .status_267{
background:var(--status-alert-background-color);
border:var(--status-alert-border-color) 1px solid;
}

.product.detail footer .box .bookmark_wrapper{
/*outline:#0FF000 1px solid;*/
}

.product.detail footer .box. bookmark_wrapper p{
float:left;
width:auto;
margin:0;
padding:0;
}

.product.detail footer .box. bookmark_total_wrapper{
/*outline:#0FF000 1px solid;*/
}

.product.detail footer .box. bookmark_total_wrapper p{
float:left;
width:auto;
margin:0;
padding:0;
}


/*Tab*/
.product.detail #tab_wrapper{
position:relative;
margin:0;
padding:0;
}

.product.detail #tab_wrapper .tab{
float:left;
width:100%;
margin:0 0 .5rem 0;
}

.product.detail #tab_wrapper .tab_content{
float:left;
width:100%;
height:12rem;
position:absolute;
top:4rem;
left:0;
overflow:auto;
scrollbar-width:thin;
}

.product.detail #tab_wrapper .tab_content{
height:18rem;
}

/* Only the preview modal */
dialog .product.detail #tab_wrapper .tab_content{
height:11rem;
}

.product.detail .card{
visibility:hidden;
margin:0 !important;
padding:0 .75rem 0 0!important;
border:none !important;
border-radius:0 !important;
}

.product.detail .card:first-of-type{
visibility:visible;
}


.product.detail .card ul{
float:left;
width:100%;
margin:0 0 .5rem 0;
padding:0;
list-style:none;
}

.product.detail .card li{
float:left;
width:100%;
margin:0;
padding:.15rem .15rem 0 .15rem;
border-bottom:var(--brd-gray-400) 1px solid;
}

.product.detail .card li:before{
display:none;
}

.product.detail .card li .label{
float:left;
width:auto;
font-size:var(--fs-p);
}

.product.detail .card li .value{
float:right;
width:auto;
font-size:var(--fs-p);
}