/*==== Specification Common ====*/

.wdt-specifications-holder .swiper-slide { cursor: grab; }

.wdt-content-item .wdt-specification-block .wdt-content-detail-group > div:not(:last-child) {
    margin-bottom: clamp(0.9375rem, 0.8819rem + 0.3067vw, 1.25rem); /*20px - 15px*/ }

.wdt-content-item .wdt-specification-block .wdt-content-image > span > img, 
.wdt-content-item .wdt-specification-block .wdt-content-image > a > img { 
    width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Specification Title */

.wdt-content-item .wdt-specification-block .wdt-content-title h5,
.wdt-content-item .wdt-specification-block .wdt-content-title h5 a { 
    font-size: clamp(1.5rem, 1.4333rem + 0.3681vw, 1.875rem); /*30px - 24px*/ font-weight: var(--wdtFontWeight_Ext); transition: var(--wdt-Livi-Transition); }

 .wdt-content-item .wdt-specification-block:hover .wdt-content-title h5,
.wdt-content-item .wdt-specification-block:hover .wdt-content-title h5 a {color: var(--wdtAccentTxtColor);}


/* Specification Items */

.wdt-content-item .wdt-specification-block .wdt-content-detail-group .wdt-content-spec-group > .wdt-content-spec-items { 
    display: flex; gap: 10px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; }

.wdt-content-item .wdt-specification-block .wdt-content-detail-group .wdt-content-spec-group > .wdt-content-spec-items:not(:last-child) {
    border-bottom: 1px solid rgba(var(--wdtBorderColorRgb), 0.3); 
    padding-bottom: clamp(0.5rem, 0.4778rem + 0.1227vw, 0.625rem); /*10px - 8px*/ 
    margin-bottom: clamp(0.5rem, 0.4778rem + 0.1227vw, 0.625rem); /*10px - 8px*/ }

.wdt-content-item .wdt-specification-block .wdt-content-detail-group .wdt-content-spec-group .wdt-content-spec-items span,
.wdt-content-item .wdt-specification-block .wdt-content-detail-group .wdt-content-spec-group .wdt-content-spec-details {
    font-family: var(--wdtFontTypo_Base); font-size: var(--wdtFontSize_Base); color: var(--wdtBodyTxtColor); 
    -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); }

.wdt-content-item .wdt-specification-block:hover .wdt-content-detail-group .wdt-content-spec-group .wdt-content-spec-items span,
.wdt-content-item .wdt-specification-block:hover .wdt-content-detail-group .wdt-content-spec-group .wdt-content-spec-details {
    color: var(--wdtAccentTxtColor); }

.wdt-content-item .wdt-specification-block .wdt-content-detail-group .wdt-content-spec-group > .wdt-content-spec-items > span { 
    position: relative; display: inline-flex; align-items: baseline; justify-content: center; }

.wdt-content-item .wdt-specification-block { display: flex; align-items: center; 
    gap: clamp(1.25rem, 1.1388rem + 0.6135vw, 1.875rem); /*30px - 20px*/ }

.wdt-specifications-holder .wdt-specification-block .wdt-content-image-wrapper .wdt-content-image > a,
.wdt-specifications-holder .wdt-specification-block .wdt-content-image-wrapper .wdt-content-image > span {
    height: 100%; width: 100%; -webkit-border-radius: var(--wdtRadius_3X); border-radius: var(--wdtRadius_3X); }

.wdt-specifications-holder .wdt-specification-block {
    position: relative; background-color: var(--wdtAccentTxtColor); 
    padding:  clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem); /*30px - 20px*/ 
    -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); 
    -webkit-border-radius: var(--wdtRadius_4X); border-radius: var(--wdtRadius_4X); }

.wdt-specifications-holder .wdt-specification-block:hover { background-color: transparent; }

.wdt-content-item .wdt-specification-block .wdt-content-image-wrapper,
.wdt-content-item .wdt-specification-block .wdt-content-detail-group,
.wdt-content-item .wdt-specification-block .wdt-content-image-wrapper .wdt-content-image { z-index: 2; }

.wdt-content-item .wdt-specification-block .wdt-content-image-wrapper { width: 40%; flex: 1; }
.wdt-content-item .wdt-specification-block .wdt-content-detail-group { width: 60%; }

.wdt-specifications-holder .wdt-specification-block::after {
    content: ''; height: 100%; width: 0; position: absolute; right: 0; top: 0; 
    background-color: var(--wdtLinkHoverColor); transition: var(--wdt-Livi-Transition); z-index: 1; opacity: 0; border-radius: inherit; }

.wdt-specifications-holder .wdt-specification-block:hover::after { width: 100%; opacity: 1; right: auto; left: 0; }

.wdt-content-item .wdt-specification-block .wdt-content-detail-group .wdt-content-spec-group > .wdt-content-spec-items > span .wdt-content-spec-details { 
    font-weight: var(--wdtFontWeight_Ext); }


/*==== Custom Arrow Style ====*/

.wdt-specifications-carousel-arrow-style .wdt-specifications-holder .swiper.swiper-horizontal+.wdt-carousel-pagination-wrapper .wdt-carousel-arrow-pagination {
    position: absolute; pointer-events: none; width: 100%; max-width: 1420px; display: flex; justify-content: flex-end; align-items: center; 
    top: -130px; left: 0; right: 0; bottom: auto; margin: auto; }

.wdt-specifications-carousel-arrow-style .wdt-carousel-holder .wdt-carousel-pagination-wrapper .wdt-carousel-arrow-pagination > div { pointer-events: all; }


/*==== Responsive ====*/

@media only screen and (max-width: 1540px) {
    .wdt-specifications-carousel-arrow-style .wdt-specifications-holder .swiper.swiper-horizontal+.wdt-carousel-pagination-wrapper .wdt-carousel-arrow-pagination {
        top: -120px; }
}

@media only screen and (max-width: 1280px) {

    .wdt-specifications-holder .wdt-specification-block { flex-direction: column; align-items: start; }

    .wdt-content-item .wdt-specification-block .wdt-content-image > span > img, 
    .wdt-content-item .wdt-specification-block .wdt-content-image > a > img { width: 100%; height: 100%; }

    .wdt-content-item .wdt-specification-block .wdt-content-image-wrapper,
    .wdt-content-item .wdt-specification-block .wdt-content-detail-group,
    .wdt-content-item .wdt-specification-block .wdt-content-image-wrapper .wdt-content-image { width: 100%; }
    
    .wdt-specifications-carousel-arrow-style .wdt-specifications-holder .swiper.swiper-horizontal+.wdt-carousel-pagination-wrapper .wdt-carousel-arrow-pagination {
        top: -115px; }
}

@media only screen and (max-width: 1024px) {
    .wdt-specifications-carousel-arrow-style .wdt-specifications-holder .swiper.swiper-horizontal+.wdt-carousel-pagination-wrapper .wdt-carousel-arrow-pagination {
        top: -105px; }
}

@media only screen and (max-width: 767px) {
    .wdt-specifications-carousel-arrow-style .wdt-specifications-holder .swiper.swiper-horizontal+.wdt-carousel-pagination-wrapper .wdt-carousel-arrow-pagination {
        position: relative; max-width: 100%; top: 0; justify-content: center; margin-top: 10px; } 
}