/* Beijing Guowang industrial blue-gray storefront theme. */
:root {
    --body-bg-color: #eef3f6;
    --color-main: #315d7d;
    --color-main-light: #dbe7ee;
    --color-main-hover: #244a66;
    --color-secondary: #91aabd;
    --color-price: #2d6f9f;
    --color-red: #3d6f91;
    --color-yellow: #67869c;
    --color-blue: #527fa0;

    --color-button-primary: #315d7d;
    --color-button-primary-hover: #244a66;
    --color-button-primary-focus: #1d3d55;
    --color-button-primary-active: #1d3d55;
    --color-button-primary-disabled: #9aafbd;
    --color-button-primary-border: #315d7d;
    --color-button-primary-hover-border: #244a66;
    --color-button-primary-focus-border: #1d3d55;
    --color-button-primary-active-border: #1d3d55;
    --color-button-primary-disabled-border: #9aafbd;

    --color-button-secondary: #e5edf2;
    --color-button-secondary-hover: #d6e2e9;
    --color-button-secondary-focus: #c7d6df;
    --color-button-secondary-active: #bacbd6;
    --color-button-secondary-disabled: #edf2f5;
    --color-button-secondary-border: #a8bdca;
    --color-button-secondary-hover-border: #8da8b8;
    --color-button-secondary-focus-border: #7895a7;
    --color-button-secondary-active-border: #7895a7;
    --color-button-secondary-disabled-border: #cbd7de;
    --color-button-secondary-text: #315d7d;
    --color-button-secondary-hover-text: #244a66;
    --color-button-secondary-focus-text: #1d3d55;
    --color-button-secondary-active-text: #1d3d55;
    --color-button-secondary-disabled-text: #8198a7;

    --box-shadow: 0 5px 20px rgba(39, 67, 85, 0.12);
    --box-shadow-sm: 0 2px 8px rgba(39, 67, 85, 0.1);
    --box-shadow-lg: 0 8px 34px rgba(39, 67, 85, 0.15);
}

body {
    color: #263b49;
    background-color: var(--body-bg-color);
}

a,
.am-link,
.am-text-primary {
    color: var(--color-main);
}

a:hover,
a:focus {
    color: var(--color-main-hover);
}

.header-top,
.nav-search,
.nav-table,
.am-footer,
.body-content-footer-container {
    border-color: #d7e1e7;
}

.header-top,
.am-footer,
.footer-nav-content {
    background-color: #e7edf1;
}

.nav-table .active,
.nav-table a:hover,
.mobile-navigation li.active a,
.floor .floor-title::before {
    color: var(--color-main);
    border-color: var(--color-main);
}

.goods-price,
.price,
.sales-price,
.items-price,
.am-text-danger {
    color: var(--color-price) !important;
}

.am-btn-primary,
.am-badge-primary,
.am-progress-bar {
    background-color: var(--color-main);
    border-color: var(--color-main);
}

.am-btn-primary:hover,
.am-btn-primary:focus,
.am-btn-primary:active {
    background-color: var(--color-main-hover);
    border-color: var(--color-main-hover);
}

.goods-list .goods-items,
.floor .goods-list,
.am-panel,
.am-modal-dialog,
.cart-content,
.order-base {
    border-color: #dbe4e9;
}

::selection {
    color: #fff;
    background: var(--color-main);
}

.online-service-widget { position: fixed; right: 2.4rem; bottom: 3rem; z-index: 1100; }
.online-service-trigger { display: flex; align-items: center; gap: 0.7rem; min-height: 4.8rem; padding: 0 1.6rem; color: #fff; background: linear-gradient(135deg, #315d7d, #244a66); border: 0; border-radius: 2.6rem; box-shadow: 0 1rem 2.6rem rgba(36, 74, 102, 0.28); cursor: pointer; }
.online-service-trigger i { font-size: 2rem; }
.online-service-panel { position: absolute; right: 0; bottom: 6rem; width: 31rem; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(1.2rem) scale(0.97); transform-origin: bottom right; background: #fff; border: 0.1rem solid #d6e1e7; border-radius: 1.4rem; box-shadow: 0 1.8rem 5rem rgba(31, 57, 74, 0.2); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; }
.online-service-widget.is-open .online-service-panel { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
.online-service-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.8rem 2rem; color: #fff; background: linear-gradient(135deg, #315d7d, #527f9e); }
.online-service-header strong { font-size: 1.8rem; }
.online-service-header p { margin: 0.4rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: 1.2rem; }
.online-service-close { padding: 0; color: rgba(255, 255, 255, 0.8); font-size: 2.6rem; line-height: 1; background: transparent; border: 0; cursor: pointer; }
.online-service-body { padding: 1.2rem; }
.online-service-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; color: #294252; border-radius: 0.9rem; }
.online-service-item:hover { color: #244a66; background: #edf3f6; }
.online-service-item i { width: 4rem; height: 4rem; color: #315d7d; font-size: 2rem; line-height: 4rem; text-align: center; background: #e2ebf0; border-radius: 50%; }
.online-service-item span, .online-service-item small { display: block; }
.online-service-item small { margin-top: 0.2rem; color: #78909e; }
.online-service-primary { color: #fff; background: #315d7d; }
.online-service-primary:hover { color: #fff; background: #244a66; }
.online-service-primary i { color: #fff; background: rgba(255, 255, 255, 0.16); }
.online-service-primary small { color: rgba(255, 255, 255, 0.72); }
.online-service-empty { margin: 0; padding: 1.2rem; color: #78909e; text-align: center; }

@media only screen and (max-width: 640px) {
    .online-service-widget { right: 1.2rem; bottom: 7.5rem; }
    .online-service-trigger { width: 4.8rem; padding: 0; justify-content: center; }
    .online-service-trigger span { display: none; }
    .online-service-panel { width: calc(100vw - 2.4rem); max-width: 34rem; }
}