﻿@media all and (min-width: 1137px) {
    /*** GLOBAL STYLES ***/


    .master-wrapper-content {
        width: 100%;
    }

    .inputs label {
        width: 375px;
    }

    .center-2 .inputs label {
        width: 213px;
    }

    .inputs.accept-consent label {
        width: auto;
    }

    /*** NAVIGATION ***/
    .header-menu {
        width: 100%;
    }

    .header-menu>ul>li {
        padding: 0 12px;
    }

    /*** FOOTER ***/
    .footer-lower {
        width: 1200px;
        padding: 25px 20px;
    }

    /*** PRODUCT REVIEWS ***/
    .product-review-item .review-title {
        max-width: 1050px;
    }

    .write-review .review-rating div.name-description {
        margin: 0 5px 0 0;
        min-width: 375px;
    }


    /*** REGISTRATION, LOGIN, ACCOUNT ***/


    .login-page .returning-wrapper input[type="text"],
    .login-page .returning-wrapper input[type="email"],
    .login-page .returning-wrapper input[type="password"] {
        width: 100%;
    }

    .registration-page .vat-note {
        margin-left: 385px;
    }

    .customer-info-page .vat-note,
    .customer-info-page .email-to-revalidate-note {
        margin-left: 225px;
    }

    /*** SHOPPING CART ***/


    .cart-footer .totals {
        width: 360px;
        margin: 0;
    }

    .cart-footer .cart-collaterals {
        width: 760px;
        margin: 0;
    }

    .cart-footer .cart-collaterals .deals {
        float: left;
        width: 360px;
        padding: 20px;
        background: #f8f8f8
    }

    .cart-footer .cart-collaterals .shipping {
        float: right;
        width: 360px;
    }

    .cart-footer .estimate-shipping .inputs label {
        display: inline-block;
        width: 35%;
    }

    .cart-footer .estimate-shipping .inputs input,
    .cart-footer .estimate-shipping .inputs select {
        width: 65%;
    }


    /*** CHECKOUT ***/


    .shipping-method .method-list li,
    .payment-method .method-list li {
        margin: 20px 1%;
    }

    .payment-info .info td:first-child {
        width: 375px !important;
    }

    .payment-info .info td:only-child {
        width: 100% !important;
    }


    /*** FORUM & PROFILE ***/


    .forum-actions .pager,
    .topic-actions .pager {
        max-width: 600px !important;
    }

    .topic-post .post-text {
        width: 930px;
        max-width: 100%;
    }
}


@media all and (min-width: 1138px) {

    /*** GLOBAL STYLES ***/
    /*html {
        zoom: 1;
    }*/
    .master-wrapper-content {
        width: 1200px;
    }

    .header-lower-container {
        max-width: 1200px;
    }
}


@media all and (max-width:780px) {

    .h3,
    h3 {
        font-size: 18px;
    }

    h1 {
        font-size: 16px;
    }

    .m-show {
        display: block;
    }

    .m-show.bottom-menu {
        display: flex;
    }

    .m-hide {
        display: none !important;
    }

    .flex-column .homeitem {
        width: calc(50% - 12px);
    }

    .flex-column .homeitem:nth-child(4n) {
        margin-right: initial;
    }

    .flex-column .homeitem:nth-child(2n) {
        margin-right: 0px;
    }

    .adinfo {
        min-height: 62px;
        padding: 10px;
    }

    .adinfo .title {
        -webkit-line-clamp: 1;
    }

    /*detail page*/
    .nav ul {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .product-main {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .product-main .product-image {
        width: 100%;
    }

    .product-main .product-attributes {
        padding-left: 0px;
    }

    .product-details {
        margin-top: 20px;

    }

    /*我的页面*/
    #layout-container {
        width: 96%;
        flex-direction: column;
        justify-content: flex-start;
    }

    #menu-container {
        width: 100%;
        display: none !important;
    }

    #menu-container .info {
        text-align: left;
        padding-left: 30px;
    }

    #menu-container #menu-list {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    #content-container {
        margin-top: 0px;
        padding: 0px;
        margin-bottom: 20px;
    }

    #content-container .title {
        text-align: center;
        margin-bottom: 10px;
    }

    .product-attrs {
        flex-direction: column;
    }

    .product-attrs .right,
    .product-attrs .left {
        width: 100%;
        text-align: center;
    }

    .product-attrs .left {
        margin-bottom: 10px;
    }

    .header-lower-right {
        position: relative;
        right: initial;
        top: initial;
    }

    .header-lower-right .search-box-button {
        font-size: 0px;
        background-size: 32px;
        background-position: center bottom;
    }

    .header-links ul {
        padding-inline-start: 0px;
        margin-bottom: 0px;
    }

    .header-links a,
    .header-links span {
        line-height: 32px;
    }

    .search-box-button:hover {
        background-size: 32px;
    }

    .header-lower-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-lower-left,
    .header-logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .header-lower {
        padding: 0 0 2em 0;
    }

    .header-menu-mini {
        display: inline-block;
    }

    .header-cart {
        top: 110px;
        right: 20px;
    }

    .search-box input.search-box-text {
        width: 260px;
    }

    /* searchbox; */
    .search-box-container {
        width: 300px;
        margin-left: calc(50% - 150px);
    }


    /* left menu bar */
    .mini-menu-left-bar {
        position: fixed;
        left: 0;
        width: 250px;
        top: 0;
        bottom: 0;
        background-color: #fff;
        border-right: 1px solid #dedede;
        box-shadow: 1px 1px 5px #dedede;
    }

    .mini-menu-left-bar .mini-menu-list {
        margin: 0px;
        padding: 0px;
        text-align: left;
    }

    .mini-menu-left-bar .mini-menu-list li {
        font-size: 16px;
        line-height: 40px;
        padding: 0px 15px;
        border-bottom: 1px solid #333;
        cursor: pointer;
    }

    .mini-menu-left-bar .mini-menu-list li:hover,
    .mini-menu-left-bar .mini-menu-list li:hover a {
        background-color: #741fa2;
        color: #fff;
        text-decoration: none;
    }

    .mini-help {
        text-align: left;
        padding-left: 15px;
        font-size: 20px;
        line-height: 60px;
        background-color: #fff;
        font-weight: bold;
        border-bottom: 1px solid #333;
    }

    .footer-newsletter {
        flex-direction: column;
        padding-bottom: 15px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .swiper {
        height: auto !important;
    }

    .main-container {
        margin: 30px 15px;
    }

    .main-container.login-page {
        flex-direction: column;
        margin: 0px;
    }

    .main-container .login-desc {
        display: none;
    }

    .login-container {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .login-container .login-form {
        width: 90%;
        margin: auto;
        background-color: #fff;
        border: 1px solid #dedede;
        color: #333;
    }

    .login-container a {
        color: #333;
    }

    .login-container input[type="text"],
    .login-container input[type="password"] {
        border: 1px solid #dedede;
    }

    .register {
        width: 100%;
        min-height: auto;
    }

    .register-describe {
        display: none;
    }

    .footer {
        padding-bottom: 61px;
    }

    #menu-container .info {
        border-left: 0px;
        padding-left: 0px;
        display: none;
    }

    #menu-container #menu-list {
        background-color: #741fa2;
        flex-wrap: wrap;
    }

    .menu-item {
        margin-bottom: 0px;
        min-height: 40px;
        width: 33.33%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    .menu-item.active a,
    .menu-item.active {
        background-color: #000;
    }

    .menu-item a {
        color: #fff;
    }

    .menu-item a:hover {
        color: #fff !important;
    }

    #content-container {
        min-height: auto;
    }

    .personal-info input,
    .personal-info textarea {
        width: 100%;
    }

    .product-attrs .attributes .row-item-column {
        align-items: center;
        margin-bottom: 10px;
    }

    .order-container .order-totals {
        padding: 0px;
    }

    .order-container .order-totals table {
        width: 100%;
    }

    .product-attrs .row-item span {
        margin-bottom: 5px;
        display: inline-block;
        padding-left: 5px;
    }

    .time-list {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .time-list .time-row {
        width: 100%;
    }

    .time-list .time-row:first-child {
        margin-bottom: 20px;
    }

    .order-stepper {
        flex-direction: column;
        /* 改为垂直排列 */
        align-items: flex-start;
        padding-left: 50px;
        /* 给左侧线条留出空间 */
        height: 400px;
        /* 给定高度或让内容撑开 */
    }

    .order-stepper .step {
        flex-direction: row;
        /* 圆圈和文字横向排列 */
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 30px;
        /* 节点间的间距 */
    }

    /* 修改垂直模式下的连接线 */
    .order-stepper .step:not(:last-child)::after {
        top: 36px;
        /* 从圆圈下方开始 */
        left: 18px;
        /* 居中于圆圈 */
        width: 2px;
        /* 线条变窄 */
        height: calc(100% - 10px);
        /* 垂直拉长 */
        z-index: 1;
    }

    .order-stepper .circle {
        margin-bottom: 0;
        margin-right: 15px;
        /* 文字移到右边 */
        flex-shrink: 0;
        /* 防止圆圈被挤压 */
    }

    .order-stepper .label {
        text-align: left;
        font-size: 13px;
    }
}