/* Shared front-end foundation for pages that use the shileo header. */
:root {
    --shileo-red: #df1f26;
    --shileo-red-dark: #b9151b;
    --shileo-ink: #22252a;
    --shileo-muted: #66707a;
    --shileo-line: #e2e6ea;
    --shileo-surface: #ffffff;
    --shileo-canvas: #f5f7f8;
    --shileo-blue: #31546d;
}

html,
body {
    min-width: 0;
    color: var(--shileo-ink);
    background: var(--shileo-canvas);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

body {
    margin: 0;
}

#header-fixd-content.wrapper.fixed-header {
    padding-top: 0 !important;
    min-height: 0;
}

#header-fixd-content > .page-content {
    box-sizing: border-box;
    min-height: calc(100vh - 210px);
    background: var(--shileo-canvas) !important;
}

#header-fixd-content > .page-content.pc-shop {
    display: block !important;
    padding: 0 0 48px;
}

#header-fixd-content > .page-content > .left-menu {
    width: 240px !important;
    flex: 0 0 240px;
    margin: 32px 0 48px !important;
    background: transparent !important;
}

#header-fixd-content > .page-content > .right-content {
    width: min(960px, calc(100% - 32px)) !important;
    margin: 32px 0 48px !important;
    background: var(--shileo-surface) !important;
}

/* Desktop cart */
.cart-content {
    box-sizing: border-box;
    min-height: calc(100vh - 210px) !important;
    padding: 38px 20px 64px !important;
    background: var(--shileo-canvas) !important;
}

.cart {
    width: min(1200px, 100%) !important;
    margin: 0 auto !important;
}

.shoppingCartFilter {
    margin: 0 0 20px !important;
    padding-left: 14px;
    border-left: 4px solid var(--shileo-red);
    color: var(--shileo-ink) !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.cartTable {
    overflow: hidden;
    border: 1px solid var(--shileo-line);
    border-radius: 8px;
    background: var(--shileo-surface);
    box-shadow: 0 8px 24px rgba(30, 42, 50, .06);
}

.cartTable .tdHead {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: #ffffff;
    background: #182536;
}

.cartTable .tdHead > div {
    box-sizing: border-box;
    padding: 13px 15px !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 800;
}

.cartTable .tdHead > div:first-child { width: 180px !important; }
.cartTable .tdHead .goodsName { width: 380px !important; }
.cartTable .tdHead .goodsPrice,
.cartTable .tdHead .goodsNum,
.cartTable .tdHead .deleteGoods { width: 210px !important; }

.cartTable .shoppingCart {
    background: var(--shileo-surface);
}

.cartTable .storeCart {
    border-top: 1px solid var(--shileo-line);
}

.cartTable .storeCart:first-child {
    border-top: 0;
}

.cartTable .store {
    box-sizing: border-box;
    min-height: 45px;
    padding: 13px 18px !important;
    border-bottom: 1px solid #edf0f2 !important;
    color: var(--shileo-blue);
    background: #f8fafb !important;
    font-size: 13px;
    font-weight: 800;
}

.cartTable .goodListItem {
    border-bottom: 1px solid #edf0f2 !important;
    background: #ffffff !important;
}

.cartTable .deleteGoods a,
.cartTable .shop-href-primary:hover {
    color: var(--shileo-red) !important;
}

.cartTable .operateBox {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 76px;
    height: auto !important;
    padding: 16px 20px !important;
    border-top: 1px solid var(--shileo-line) !important;
    background: #ffffff !important;
}

.cartTable .operateBox .priceInfo {
    width: auto !important;
    margin-right: 22px !important;
    color: var(--shileo-muted);
    font-size: 13px;
}

.cartTable .operateBox .totalPrice,
.cartTable .operateBox .selectGoodsPrice {
    color: var(--shileo-red) !important;
    font-size: 22px;
    font-weight: 900;
}

.cartTable .operateBox .operateButtonBox a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 138px !important;
    min-height: 42px;
    height: auto !important;
    border: 0 !important;
    border-radius: 4px;
    color: #ffffff !important;
    background: var(--shileo-red) !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.cartTable .operateBox .operateButtonBox a:hover {
    background: var(--shileo-red-dark) !important;
}

.noShoppingCart {
    box-sizing: border-box;
    width: min(560px, 100%) !important;
    min-height: 240px;
    margin: 42px auto 0 !important;
    padding: 34px;
    border: 1px solid var(--shileo-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(30, 42, 50, .06);
    text-align: center;
}

.noShoppingCart img {
    float: none !important;
    width: 105px !important;
    height: 98px !important;
    object-fit: contain;
}

.noShoppingCart span {
    float: none !important;
    margin: 9px 0 0 !important;
    color: var(--shileo-muted);
    font-weight: 700 !important;
}

.noShoppingCart a {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 138px !important;
    height: 42px !important;
    margin: 22px 0 0 !important;
    border-radius: 4px;
    background: var(--shileo-red) !important;
    font-weight: 800;
    text-decoration: none;
}

/* Desktop login */
.loginBigBox {
    box-sizing: border-box;
    min-height: calc(100vh - 210px);
    padding: 52px 20px 72px !important;
    background: var(--shileo-canvas) !important;
}

.login-big-box-background,
.loginCenter .adImgBox,
.loginCenter > div[style*="width: 8%"] {
    display: none !important;
}

.loginCenter {
    display: block !important;
    width: min(480px, 100%) !important;
    height: auto !important;
    margin: 0 auto !important;
}

.loginCenter form {
    display: block;
    padding: 0 !important;
}

.loginForm {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 470px;
    margin: 0 !important;
    padding: 42px 44px !important;
    border: 1px solid var(--shileo-line);
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(30, 42, 50, .08);
}

.loginFormCenter {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
}

.titleName {
    margin-bottom: 28px;
    color: var(--shileo-ink);
    font-size: 24px !important;
    font-weight: 900 !important;
}

.loginAccount {
    margin-bottom: 15px;
}

.loginAccount .userAccountInput {
    position: relative;
}

.loginAccount .userAccountInput > span {
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 18px !important;
    height: 18px;
    transform: translateY(-50%);
}

.loginAccount .userAccountInput > span img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.loginAccount input.userName,
.loginAccount .userName {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px 0 44px !important;
    border: 1px solid #cfd8dd !important;
    border-radius: 4px !important;
    color: var(--shileo-ink);
    background: #ffffff !important;
    text-indent: 0 !important;
}

.loginAccount input:focus {
    border-color: var(--shileo-blue) !important;
    box-shadow: 0 0 0 3px rgba(49, 84, 109, .1);
}

.forgetPassword {
    color: var(--shileo-blue) !important;
    font-size: 13px;
}

.rightLogin {
    margin: 22px 0 0 !important;
}

.loginNow {
    box-sizing: border-box;
    width: 100% !important;
    height: 46px !important;
    border-radius: 4px !important;
    background: var(--shileo-red) !important;
    font-size: 15px !important;
    font-weight: 800;
}

.loginNow:hover {
    background: var(--shileo-red-dark) !important;
}

.register {
    margin-top: 28px !important;
    color: var(--shileo-muted);
    text-align: center;
    font-size: 13px;
}

.register a {
    color: var(--shileo-red) !important;
    font-weight: 800;
}

/* Desktop registration uses a legacy two-column shell. Keep the form flow,
   but give it the same centered surface as the login page. */
.con_zhuce {
    box-sizing: border-box;
    min-height: calc(100vh - 210px) !important;
    margin: 0 !important;
    padding: 52px 20px 72px !important;
    background: var(--shileo-canvas) !important;
}

.con_zhuce .login-big-box-background,
.con_zhuce .con_top_left {
    display: none !important;
}

.con_zhuce .con_top_main,
.con_zhuce .con_top {
    box-sizing: border-box;
    width: min(480px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
}

.con_zhuce .con_top_right {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 470px;
    margin: 0 !important;
    padding: 42px 44px !important;
    float: none !important;
    border: 1px solid var(--shileo-line);
    border-radius: 8px;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(30, 42, 50, .08);
}

.con_zhuce .con_top_right ul {
    box-sizing: border-box;
    width: 100% !important;
    padding: 0 !important;
}

.con_zhuce #logo_img {
    margin: 0 0 28px !important;
    padding: 0 !important;
    color: var(--shileo-ink) !important;
    font-size: 24px !important;
    font-weight: 900;
}

.con_zhuce #phone_email,
.con_zhuce #password_li,
.con_zhuce .con_top_right ul li input,
.con_zhuce #formUser ul li input {
    box-sizing: border-box !important;
    width: 100% !important;
}

.con_zhuce #phone_email,
.con_zhuce #password_li {
    left: 0 !important;
    margin: 0 0 14px !important;
}

.con_zhuce #phone_email .flew-row {
    display: flex !important;
    width: 100% !important;
}

.con_zhuce #phone_email .flew-row > span {
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

.con_zhuce #phone_email .form-group {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

.con_zhuce #phone_email .form-control {
    float: none !important;
    width: 100% !important;
}

.con_zhuce .con_top_right ul li {
    height: auto !important;
    margin-bottom: 14px !important;
}

.con_zhuce #register {
    box-sizing: border-box;
    width: 100% !important;
    height: 46px !important;
    margin: 22px 0 0 !important;
    border: 0 !important;
    border-radius: 4px;
    background: var(--shileo-red) !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 800;
}

.con_zhuce .send_verification {
    margin-left: 10px !important;
    border-color: var(--shileo-blue) !important;
    border-radius: 4px !important;
    color: var(--shileo-blue) !important;
}

.con_zhuce #agreement {
    box-sizing: border-box;
    width: 100% !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    color: var(--shileo-muted);
    text-align: center;
}

.con_zhuce .field-agree .checkbox {
    justify-content: center;
}

.con_zhuce .logon_mode_div,
.con_zhuce .line_mode_div {
    width: 100% !important;
    padding-bottom: 0 !important;
}

/* Legacy form controls inside the now-shared page shell. */
#header-fixd-content > .page-content input[type="submit"],
#header-fixd-content > .page-content input[type="button"],
#header-fixd-content > .page-content button.public_button,
#header-fixd-content > .page-content .submit_button,
#header-fixd-content > .page-content .weui-btn-red,
#header-fixd-content > .page-content .go-check-btn {
    border-color: var(--shileo-red) !important;
    background: var(--shileo-red) !important;
}

#header-fixd-content > .page-content a[style*="#FF8C1D"],
#header-fixd-content > .page-content [style*="#FF8C1D"],
#header-fixd-content > .page-content [style*="#FE4D04"],
#header-fixd-content > .page-content [style*="#ec5151"] {
    color: var(--shileo-red) !important;
}

@media screen and (max-width: 900px) {
    .weui-btn-red,
    .go-check-btn,
    .register_btn_box .btn_register {
        border-color: var(--shileo-red) !important;
        background: var(--shileo-red) !important;
    }
}

@media screen and (max-width: 900px) {
    #header-fixd-content > .page-content > .left-menu,
    #header-fixd-content > .page-content > .right-content {
        width: calc(100% - 20px) !important;
        margin: 16px auto !important;
    }

    html,
    body {
        min-width: 0 !important;
    }

    #header-fixd-content > .page-content:not(.pc-shop) {
        display: block !important;
    }

    .cart-content {
        padding: 26px 10px 48px !important;
    }

    .cartTable {
        overflow-x: auto;
    }

    .cartTable .tdHead,
    .cartTable .goodListItem {
        min-width: 980px;
    }

    .loginBigBox {
        padding: 28px 14px 48px !important;
    }

    .loginCenter,
    .loginCenter form,
    .loginForm,
    .con_zhuce,
    .con_zhuce .con_top_main,
    .con_zhuce .con_top {
        width: 100% !important;
        max-width: 100% !important;
    }

    .loginForm {
        padding: 32px 24px !important;
    }

    .con_zhuce {
        padding: 28px 14px 48px !important;
    }

    .con_zhuce .con_top_right {
        min-height: 0;
        padding: 32px 20px !important;
    }

    .con_zhuce li.show_validation.float_left {
        display: inline-flex !important;
        float: none !important;
        width: 110px !important;
        margin: 0 !important;
        vertical-align: top;
    }

    .con_zhuce li.show_validation.float_left .form-control {
        margin-left: 0 !important;
    }

    .con_zhuce .yanzheng.show_validation {
        display: inline-flex !important;
        float: none !important;
        width: 170px !important;
        margin: 0 0 14px 10px !important;
        vertical-align: top;
    }
}