/* ========================================
   Tour Page Styles 
   ======================================== */

/* Category Show */
.cate-show {
    display: block
}

.cate-show img {
    width: 100%
}

/* Products Grid */
.prods {
    width: 82.5rem;
    margin: 0 auto;
    margin-bottom: 2rem
}

.block-header .block-title2 {
    padding: 2rem 0rem
}

.block-header .block-intro {
    padding: 0rem 1rem;
    margin-bottom: 1rem
}

.prods:after {
    display: block;
    content: "";
    clear: both;
    height: 0px;
    visibility: hidden
}

.prods > .prod {
    float: left;
    width: 33.33333333%
}

/* Product Card */
.prod-inner {
    margin: 1rem;
    padding: 1rem;
    border-radius: .25rem;
    background-color: #f9f9f9
}

.prods > .prod:hover .prod-inner {
    background-color: rgba(254, 248, 236, .3);
    box-shadow: 0 0 .25rem .005rem #c60
}

/* Product Image */
.prod-img {
    display: inline-block;
    width: 23.5rem;
    height: 17.625rem;
    overflow: hidden
}

.prod-img img {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: all .6s
}

.prods > .prod:hover .prod-img img {
    transform: scale(1.125);
    transition: all .6s
}

/* Product Name */
.prod-name {
    display: -webkit-box;
    font-size: 1.125rem;
    line-height: 1.6rem;
    height: 3.2rem;
    margin: 1rem 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Product Cities */
.prod-cities {
    display: -webkit-box;
    color: #686868;
    font-size: .85rem;
    line-height: 1.4rem;
    height: 2.8rem;
    margin: 1rem 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Date Selector */
.date-selector {
    position: relative;
    display: block;
    height: 2rem;
    line-height: 2rem;
    font-size: .85rem;
    padding: 0rem .5rem;
    margin-top: 1.5rem;
    border: 1px solid #d8d8d8
}

.date-option .to-date {
    display: inline-block;
    width: 80%;
    color: #666
}

.date-option .date-menu-trigger {
    position: absolute;
    height: 2rem;
    top: 0rem;
    right: .5rem;
    cursor: pointer;
    transform: rotate(0);
    transition: transform .6s
}

.date-option .date-menu-trigger i.maxicon {
    color: #666
}

.date-option .date-menu-trigger.date-menu-active {
    transform: rotate(180deg);
    transition: transform .6s
}

/* Date Dropdown Menu */
dl.date-option-dropmenu {
    position: absolute;
    left: 0;
    z-index: 100;
    display: none;
    width: 100%;
    min-height: 8rem;
    max-height: 16rem;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    overflow-y: auto;
    scrollbar-color: #e8e8e8;
    scrollbar-width: thin
}

dl.date-dropmenu-active {
    display: block
}

dl.date-option-dropmenu dd {
    display: block;
    height: 2rem;
    line-height: 2rem;
    font-size: .85rem;
    padding: 0rem .5rem
}

dl.date-option-dropmenu dd:hover {
    background-color: #f8f8f8
}

/* Product Bottom */
.prod-bottom {
    display: block;
    margin: 1.5rem 0
}

.prod-bottom .prod-price {
    font-size: 1.25rem;
    color: #c00
}

.prod-bottom .prod-view {
    display: block;
    padding: .25rem 2rem;
    border: 1px solid #d8d8d8;
    border-radius: 2rem;
    background: none
}

.prod-bottom .prod-view:hover {
    color: #fff;
    background-color: #f90;
    border: 1px solid #ff9900
}

/* View Box */
.prods .viewbox:before {
    display: block;
    content: "";
    clear: both;
    height: 0rem;
    visibility: hidden
}

.viewbox {
    padding-top: 1.8rem;
    padding-bottom: 3rem
}

/* View All Button */
.view-all-btn {
    display: inline-block;
    padding: .5rem 3rem;
    border-radius: 6rem;
    border: 1px solid #ff6633
}

.view-all-btn:hover {
    color: #fff;
    background-color: #f90;
    border: 1px solid #ff9900
}

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

/* Max Width 1200px */
@media (max-width: 1200px) {
    .prods {
        width: 100% !important
    }
}

/* Max Width 992px */
@media (max-width: 992px) {
    .prods {
        width: 100% !important
    }
    
    .prods > .prod {
        width: 50% !important
    }
    
    .prods > .prod .prod-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3
    }
    
    .prods > .prod .prod-img img {
        object-fit: cover
    }
}

/* Max Width 768px */
@media (max-width: 768px) {
    .prods {
        width: 100% !important
    }
    
    .prods > .prod {
        width: 100% !important;
        float: none
    }
    
    .prods > .prod .prod-inner {
        margin: .5rem;
        padding: .75rem
    }
    
    .prods > .prod .prod-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3
    }
    
    .prods > .prod .prod-name {
        font-size: 1rem;
        height: auto;
        -webkit-line-clamp: 2
    }
    
    .prods > .prod .prod-cities {
        font-size: .8rem;
        height: auto;
        -webkit-line-clamp: 1
    }
    
    .prods .block-header .block-title2 {
        font-size: 1.25rem;
        padding: 1rem 0
    }
    
    .prods .block-header .block-intro {
        font-size: .875rem;
        line-height: 1.4
    }
    
    .viewbox {
        padding-top: 1rem;
        padding-bottom: 2rem
    }
    
    .view-all-btn {
        padding: .4rem 2rem;
        font-size: .875rem
    }
}