/* =============================================================================
   GLOBAL — :is(dialog, body) ensures rules apply on page AND in modal
   ============================================================================= */

/* Card Main */
:is(dialog, body) .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;
}

/* Header */
:is(dialog, body) .product.detail header{
all:unset !important;
grid-area:header;
float:left;
width:100%;
margin:0;
padding:0;
}

:is(dialog, body) .product.detail header .item_number{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
}

:is(dialog, body) .product.detail header .item_number p{
font-size:var(--fs-xs);
margin:0;
padding:0;
}

:is(dialog, body) .product.detail header .headline{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
}

:is(dialog, body) .product.detail h2{
clear:both;
float:left;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-l);
}

/* Main */
:is(dialog, body) .product.detail main{
grid-area:main;
margin:0 !important;
padding:0 !important;
}

/* Content */
:is(dialog, body) .product.detail .content{
float:left;
width:100%;
margin:0 !important;
padding:0 !important;
}


/* =============================================================================
   Media Wrapper
   ============================================================================= */

:is(dialog, body) .product.detail .media-wrapper{
grid-area:media;
background:url('/assets/img/database/type/1/media/bg.svg') no-repeat center calc(100% - 1rem);
overflow:hidden;
position:relative;
}

:is(dialog, body) .product.detail .media-wrapper::before,
:is(dialog, body) .product.detail .media-wrapper::after{
content:'';
position:absolute;
top:0;
width:3rem;
height:100%;
z-index:2;
}

:is(dialog, body) .product.detail .media-wrapper::before{
left:0;
background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

:is(dialog, body) .product.detail .media-wrapper::after{
right:0;
background:linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

:is(dialog, body) .product.detail .media-wrapper .media{
float:left;
width:100%;
opacity:1;
margin:0;
padding:0;
}

/* Media Background Variants */
:is(dialog, body) .product.detail .media-wrapper .media_background_1{
background:url('/assets/img/database/type/1/media/img/bg_1.svg') no-repeat bottom center;
}

:is(dialog, body) .product.detail .media-wrapper .media_background_2{
background:url('/assets/img/database/type/1/media/img/bg_2.svg') no-repeat bottom center;
}

:is(dialog, body) .product.detail .media-wrapper .media_background_3{
background:url('/assets/img/database/type/1/media/img/bg_2.svg') no-repeat bottom center;
}


/* =============================================================================
   IMG Swipe Slider
   ============================================================================= */

:is(dialog, body) .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;
cursor:grab;
}

:is(dialog, body) .product.detail .media-wrapper .media_content_wrapper:active{
cursor:grabbing;
}

:is(dialog, body) .product.detail .media-wrapper .media_content_wrapper::-webkit-scrollbar{
display:none;
}

:is(dialog, body) .product.detail .media-wrapper .media_content_wrapper .media{
flex:0 0 100%;
scroll-snap-align:center;
scroll-snap-stop:always;
user-select:none;
-webkit-user-drag:none;
}

:is(dialog, body) .product.detail .media-wrapper .media_content_wrapper .media img{
pointer-events:none;
-webkit-user-drag:none;
}


/* =============================================================================
   Media Indicators
   ============================================================================= */

:is(dialog, body) .product.detail .media-wrapper .media-indicators{
display:flex;
justify-content:center;
align-items:center;
gap:.35rem;
margin-top:1rem;
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button{
position:relative;
width:.35rem;
height:.35rem;
padding:0;
border:1px solid transparent;
border-radius:50%;
background:var(--bgr-gray-400);
cursor:pointer;
overflow:hidden;
transition:width 250ms ease-in, background 250ms ease-in;
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button span{
display:none;
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button.pre,
:is(dialog, body) .product.detail .media-wrapper .media-indicators button.next{
width:1rem;
height:1rem;
background:none;
border:none;
border-radius:0;
overflow:visible;
font-size:0;
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button.pre::before,
:is(dialog, body) .product.detail .media-wrapper .media-indicators button.next::before{
content:'';
display:block;
width:100%;
height:100%;
background-color:var(--bgr-gray-600);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button.pre::before{
-webkit-mask-image:url('/assets/img/icon/chevron-left.svg');
mask-image:url('/assets/img/icon/chevron-left.svg');
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button.next::before{
-webkit-mask-image:url('/assets/img/icon/chevron-right.svg');
mask-image:url('/assets/img/icon/chevron-right.svg');
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button.pre:hover::before,
:is(dialog, body) .product.detail .media-wrapper .media-indicators button.next:hover::before{
opacity:.7;
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button.is-active{
width:1.35rem;
border:var(--bgr-gray-500) 1px solid;
background:var(--bgr-gray-600);
border-radius:var(--brd-radius-15);
}

:is(dialog, body) .product.detail .media-wrapper .media-indicators button::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:0;
height:100%;
background:currentColor;
opacity:.5;
pointer-events:none;
}

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

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


/* =============================================================================
   Overview Wrapper
   ============================================================================= */

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

:is(dialog, body) .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:.15rem;
padding:0;
}

:is(dialog, body) .product.detail .overview-wrapper img{
float:left;
width:100%;
height:auto;
margin:0;
padding:0;
}

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

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

:is(dialog, body) .product.detail .overview-wrapper i{
display:block;
width:.75rem;
height:.75rem;
margin:0;
padding:0;
background:url('/assets/img/icon/file-dark.svg') no-repeat bottom left;
}


/* =============================================================================
   Footer
   ============================================================================= */

:is(dialog, body) .product.detail footer{
all:unset !important;
grid-area:footer;
float:left;
width:100%;
margin:0;
padding:0;
display:flex;
justify-content:space-between;
border-radius:0;
background:var(--bgr-gray-300) !important;
}

:is(dialog, body) .product.detail footer .box .product_order_availability p{
float:left;
width:auto;
margin:0;
padding:0;
}

:is(dialog, body) .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%;
}

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

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

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

:is(dialog, body) .product.detail footer .box .bookmark_wrapper p{
float:left;
width:auto;
margin:0;
padding:0;
}

:is(dialog, body) .product.detail footer .box .bookmark_total_wrapper p{
float:left;
width:auto;
margin:0;
padding:0;
}


/* =============================================================================
   Tab
   ============================================================================= */

:is(dialog, body) .product.detail #tab_wrapper{
float:left;
width:100%;
margin:0;
padding:0;
}

:is(dialog, body) .product.detail #tab_wrapper .tab{
float:left;
width:100%;
margin:0 0 .5rem 0;
}

:is(dialog, body) .product.detail #tab_wrapper .tab_content{
float:left;
width:100%;
max-height: 26rem;
overflow:auto;
scrollbar-width:thin;
}

/* =============================================================================
   MOBILE (max-width: 45rem)
   ============================================================================= */
@media screen and (max-width:45rem){

:is(dialog, body) .product.detail #tab_wrapper .tab_content{
max-height: 18.5rem;
}


}




/* =============================================================================
   Card (Tab Content)
   ============================================================================= */

:is(dialog, body) .product.detail .card{
display:none;
margin:0 !important;
padding:0 .75rem 0 0 !important;
border:none !important;
border-radius:0 !important;
}

:is(dialog, body) .product.detail .card.show,
:is(dialog, body) .product.detail .card:first-of-type:not(.hide){
display:block;
}

:is(dialog, body) .product.detail .card ul{
float:left !important;
width:100% !important;
margin:0 0 .5rem 0 !important;
padding:0 !important;
list-style:none !important;
}

:is(dialog, body) .product.detail .card li{
float:left !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
border-bottom:var(--brd-gray-400) 1px solid !important;
}

:is(dialog, body) .product.detail .card li:before{
display:none !important;
}

:is(dialog, body) .product.detail .card p{
float:left;
width:100%;
margin:.5rem 0 .25rem 0;
padding:.15rem;
border-bottom:var(--brd-gray-400) 1px solid;
}

:is(dialog, body) .product.detail .card li .item{
float:left;
width:100%;
margin:.15rem 0;
padding:.1rem .15rem;
}

:is(dialog, body) .product.detail .card li .item:hover{
background:var(--bgr-gray-300);
border-radius:var(--brd-radius-15);
}

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

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

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


/* =============================================================================
   MOBILE (max-width: 45rem)
   ============================================================================= */
@media screen and (max-width:45rem){

.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:.75rem;
padding:0;
}

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

.product.detail footer .box:last-child{
clear:both;
float:left;
width:calc(100% - 1rem);
margin:.5rem .5rem 0 .5rem;
padding:.5rem;
}

.product.detail footer .box:last-of-type{
clear:both;
float:left;
width:calc(100% - 1rem);
margin:0 .5rem .5rem .5rem;
padding:.5rem;
}

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

}


/* =============================================================================
   TABLET PORTRAIT (45rem – 79.5rem, portrait)
   ============================================================================= */
@media screen and (min-width:45rem) and (max-width:79.5rem) and (orientation:portrait){

.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;
}

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

.product.detail footer .box:last-child{
clear:both;
float:left;
width:calc(100% - 1rem);
margin:.5rem .5rem 0 .5rem;
padding:.5rem;
}

.product.detail footer .box:last-of-type{
clear:both;
float:left;
width:calc(100% - 1rem);
margin:0 .5rem .5rem .5rem;
padding:.5rem;
}

}


/* =============================================================================
   TABLET LANDSCAPE (45rem – 79.5rem, landscape)
   ============================================================================= */
@media screen and (min-width:45rem) and (max-width:79.5rem) and (orientation:landscape){

.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:.75rem;
}

.product.detail .media-wrapper{
min-width:26rem;
margin:0 auto;
}

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

.product.detail footer .box:last-of-type{
clear:both;
float:right;
width:auto;
margin:0 .5rem .5rem .5rem;
padding:.5rem;
}

}


/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@media screen and (min-width:79.5rem){

.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.8fr 3fr;
grid-column-gap:1.5rem;
}

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

.product.detail footer .box:last-of-type{
clear:both;
float:right;
width:auto;
margin:0 .5rem .5rem .5rem;
padding:.5rem;
}

}