* {
    box-sizing: border-box;
}

:root {
    --theme-width: 1360px;
    --theme-padding: 40px;
    --theme-radius: 8px;

    --dark-main: #1b1326;
    --dark-top: #0f0b15;
    --dark-border: #2b203c;
    --dark-muted: #c6c6dd;

    --red: #e01a2b;
    --primary: #13bfa6;
    --primary-dark: #0f766e;

    --text: #111;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f7f7fb;
    --card: #fff;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

a {
    color: inherit;
    text-decoration: none;
}

.site-topbar {
    height: 40px;
    background: var(--dark-top);
    color: var(--dark-muted);
    border-bottom: 1px solid var(--dark-border);
    font-size: 13px;
}

.theme-container {
    max-width: var(--theme-width);
    margin: 0 auto;
    padding-left: var(--theme-padding);
    padding-right: var(--theme-padding);
}

.topbar-inner {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
}

.topbar-notice {
    color: #fff;
}

.site-header-main {
    background: var(--dark-main);
    color: #fff;
    border-bottom: 1px solid var(--dark-border);
}

.header-main-inner {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand-logo {
    width: 180px;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #fff;
    flex: 0 0 auto;
}

.brand-logo span {
    color: var(--primary);
}

.header-search {
    flex: 1;
    height: 46px;
    display: flex;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    max-width: 640px;
}

.header-search input {
    flex: 1;
    border: 0;
    outline: none;
    padding: 0 20px;
    font-size: 14px;
}

.header-search button {
    width: 112px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.header-action-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
}

.header-action {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--dark-muted);
    line-height: 1.2;
    white-space: nowrap;
}

.header-action b {
    color: #fff;
    font-size: 14px;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-switch a {
    min-width: 32px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--dark-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.lang-switch a.active {
    background: var(--primary);
    color: #fff;
}

.site-navbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.navbar-inner {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.category-button {
    width: 320px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 900;
    border-right: 1px solid var(--border);
    flex: 0 0 auto;
}

.category-button-icon {
    width: 22px;
    height: 16px;
    position: relative;
}

.category-button-icon::before,
.category-button-icon::after,
.category-button-icon span {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #111;
}

.category-button-icon::before {
    top: 0;
}

.category-button-icon span {
    top: 7px;
}

.category-button-icon::after {
    bottom: 0;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 17px;
    font-weight: 800;
}

.primary-nav a:hover {
    color: var(--primary-dark);
}

.page-container {
    max-width: var(--theme-width);
    margin: 0 auto;
    padding: 30px var(--theme-padding) 0;
}

.section {
    margin-top: 40px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-title {
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
    font-weight: 900;
    letter-spacing: -.5px;
}

.section-link {
    color: var(--primary-dark);
    font-weight: 800;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    background: #fff;
    border-radius: var(--theme-radius);
    border: 1px solid #edf0f3;
    overflow: hidden;
    position: relative;
    transition: transform .16s ease, box-shadow .16s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.product-thumb {
    height: 260px;
    background: #f7f7fb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.sale-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    height: 28px;
    padding: 0 10px;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
    z-index: 3;
}

.product-actions {
    position: absolute;
    right: 14px;
    top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(8px);
    transition: all .18s ease;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.action-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    font-size: 15px;
}

.product-body {
    padding: 16px;
}

.product-category {
    font-size: 12px;
    color: #9f9fa9;
    margin-bottom: 8px;
    font-weight: 700;
}

.product-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    min-height: 42px;
}

.product-meta {
    margin-top: 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.product-cart {
    margin-top: 14px;
}

.product-cart span {
    display: inline-flex;
    height: 34px;
    padding: 0 16px;
    align-items: center;
    border-radius: 999px;
    background: var(--dark-main);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.site-footer {
    margin-top: 60px;
    background: var(--dark-top);
    color: var(--dark-muted);
    border-top: 1px solid var(--dark-border);
}

.footer-inner {
    max-width: var(--theme-width);
    margin: 0 auto;
    padding: 44px var(--theme-padding);
    line-height: 1.8;
}

@media (max-width: 1100px) {
    :root {
        --theme-padding: 28px;
    }

    .category-button {
        width: 260px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    :root {
        --theme-padding: 18px;
    }

    .site-topbar {
        display: none;
    }

    .header-main-inner {
        height: auto;
        padding-top: 16px;
        padding-bottom: 16px;
        flex-wrap: wrap;
    }

    .brand-logo {
        width: 100%;
    }

    .header-search {
        max-width: none;
        width: 100%;
        order: 3;
    }

    .header-action-group {
        width: 100%;
        justify-content: space-between;
    }

    .navbar-inner {
        height: auto;
        padding: 12px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .category-button {
        width: 100%;
        height: auto;
        border-right: 0;
    }

    .primary-nav {
        width: 100%;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .product-thumb {
        height: 240px;
    }
}

/* =====================================
   CaspiaSupply header layout
   ===================================== */

.site-container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-topbar {
    background: #0f0b15;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}

.topbar-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.topbar-left,
.topbar-right {
    white-space: nowrap;
    opacity: .96;
}

.site-header-main {
    background: #1b1326;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-main-inner {
    min-height: 78px;
    display: grid;
    grid-template-columns: 210px 34px minmax(360px, 1fr) auto;
    align-items: center;
    gap: 22px;
}

.site-brand {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    letter-spacing: -1px;
}

.site-brand-mark {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.site-brand-name {
    font-size: 30px;
    line-height: 1;
}

.site-brand-dot {
    font-size: 34px;
    color: #13c7b7;
    line-height: 1;
    margin-left: -4px;
}

.site-menu-toggle {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.site-menu-toggle span {
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 99px;
    display: block;
}

.site-search {
    height: 46px;
    background: #ffffff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.site-search input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: none;
    padding: 0 18px;
    font-size: 14px;
    color: #111827;
}

.site-search button {
    width: 112px;
    height: 100%;
    border: 0;
    background: #13c7b7;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.header-service-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-action {
    min-width: 88px;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.quick-action small {
    font-size: 11px;
    color: rgba(255,255,255,.72);
    font-weight: 700;
}

.quick-action strong {
    margin-top: 4px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 900;
}

.language-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 2px;
}

.language-pills a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.language-pills a.active {
    background: #13c7b7;
    color: #ffffff;
}

.site-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.nav-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
}

.category-menu-btn {
    width: 340px;
    min-height: 58px;
    padding: 0 18px;
    color: #111827;
    text-decoration: none;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.category-menu-icon {
    width: 22px;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
}

.category-menu-icon i {
    display: block;
    width: 22px;
    height: 2px;
    background: #111827;
    border-radius: 99px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-links a {
    min-height: 58px;
    padding: 0 24px;
    color: #111827;
    text-decoration: none;
    font-weight: 850;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.nav-links a:hover,
.category-menu-btn:hover {
    background: #f8fafc;
}

@media (max-width: 980px) {
    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 8px;
        padding-bottom: 8px;
        gap: 4px;
    }

    .topbar-left,
    .topbar-right {
        white-space: normal;
    }

    .header-main-inner {
        grid-template-columns: 1fr 34px;
        gap: 14px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .site-search {
        grid-column: 1 / -1;
        order: 3;
    }

    .header-service-actions {
        grid-column: 1 / -1;
        order: 4;
        flex-wrap: wrap;
    }

    .nav-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .category-menu-btn {
        width: 100%;
    }

    .nav-links {
        overflow-x: auto;
    }

    .nav-links a {
        white-space: nowrap;
        padding: 0 18px;
    }
}

@media (max-width: 560px) {
    .site-container {
        padding: 0 14px;
    }

    .site-brand-name {
        font-size: 24px;
    }

    .site-brand-mark {
        width: 26px;
        height: 26px;
        font-size: 17px;
    }

    .site-search button {
        width: 86px;
    }

    .quick-action {
        min-width: 76px;
    }
}

/* =====================================
   CaspiaSupply image logo
   ===================================== */

.site-brand {
    gap: 12px;
}

.site-brand-logo-wrap {
    width: 72px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    filter: drop-shadow(0 10px 18px rgba(255, 255, 255, .12));
}

.site-brand-logo-img {
    width: 72px;
    height: auto;
    display: block;
    object-fit: contain;
}

.site-brand-name {
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1px;
}

.site-brand-dot {
    display: none !important;
}

.site-brand-mark {
    display: none !important;
}

@media (max-width: 560px) {
    .site-brand-logo-wrap {
        width: 56px;
        height: 46px;
    }

    .site-brand-logo-img {
        width: 56px;
    }

    .site-brand-name {
        font-size: 23px;
    }
}

/* =====================================
   Remove unused header menu toggle
   ===================================== */

.site-menu-toggle {
    display: none !important;
}

/* 删除菜单按钮后，header 改成：logo / search / actions */
.header-main-inner {
    grid-template-columns: 290px minmax(360px, 1fr) auto !important;
}

/* logo 区域稍微放宽，避免 CaspiaSupply 被挤 */
.site-brand {
    min-width: 270px;
}

@media (max-width: 980px) {
    .header-main-inner {
        grid-template-columns: 1fr !important;
    }

    .site-brand {
        min-width: 0;
    }
}

/* =====================================
   Footer v2 - Digimart style for CaspiaSupply
   ===================================== */

.footer-v2 {
    position: relative;
    background: #0f0b15;
    color: #ffffff;
    margin-top: 0;
}

.footer-contact-strip {
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: #0f0b15;
}

.footer-contact-grid {
    min-height: 138px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 36px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.footer-contact-icon {
    width: 34px;
    height: 34px;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .95;
    flex: 0 0 auto;
}

.footer-contact-item strong {
    display: block;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.4px;
}

.footer-contact-item span {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
    line-height: 1.45;
}

.footer-main {
    background: #0f0b15;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.footer-main-grid {
    padding-top: 52px;
    padding-bottom: 52px;
    display: grid;
    grid-template-columns: 1.25fr .85fr .85fr .85fr .85fr;
    gap: 54px;
}

.footer-brand-name {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.8px;
    margin-bottom: 12px;
}

.footer-brand-col p {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 14px;
    max-width: 330px;
}

.footer-work-time {
    color: #ffffff !important;
    font-weight: 800;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #0f0b15;
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-links-col h4 {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.footer-links-col .footer-subtitle {
    margin-top: 38px;
}

.footer-links-col a {
    display: block;
    color: rgba(255,255,255,.86);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 14px;
    font-weight: 650;
}

.footer-links-col a:hover {
    color: #13c7b7;
}

.footer-bottom {
    background: #0f0b15;
}

.footer-bottom-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
}

.footer-bottom-inner span {
    margin-left: 4px;
}

.footer-payments {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .2px;
    white-space: nowrap;
}

.footer-backtop {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #ffffff;
    color: #0f0b15;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

@media (max-width: 1120px) {
    .footer-contact-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .footer-main-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }

    .footer-brand-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .footer-contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-main-grid {
        grid-template-columns: 1fr 1fr;
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 460px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
    }

    .footer-contact-item strong {
        font-size: 18px;
    }

    .footer-backtop {
        right: 14px;
        bottom: 14px;
    }
}

/* =====================================
   Footer SVG icon refinement
   ===================================== */

.footer-contact-icon {
    width: 34px;
    height: 34px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .96;
    flex: 0 0 auto;
}

.footer-contact-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #0f0b15;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.footer-socials a svg {
    width: 18px;
    height: 18px;
    display: block;
}

.footer-socials a:hover {
    background: #13c7b7;
    color: #ffffff;
    transform: translateY(-1px);
}

/* =====================================
   Footer top/bottom area contrast
   ===================================== */

/* 顶部联系方式区域：比主体 Footer 稍微浅一点 */
.footer-v2 .footer-contact-strip {
    background: #17111f !important;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* 底部版权区域：同样用浅一点的深灰紫 */
.footer-v2 .footer-bottom {
    background: #17111f !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* 中间主体保持更深，形成层次 */
.footer-v2 .footer-main {
    background: #0f0b15 !important;
}

/* 底部版权条文字稍微提亮一点 */
.footer-v2 .footer-bottom-inner {
    color: rgba(255,255,255,.88);
}

/* 右侧 LCL / OEM 标签保持白色突出 */
.footer-v2 .footer-payments {
    color: #ffffff;
}

/* =====================================
   Navbar v2 with image dropdown
   ===================================== */

.nav-v2 {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 80;
}

.nav-v2-inner {
    min-height: 58px;
    display: flex;
    align-items: stretch;
}

.nav-v2 .category-menu-btn {
    width: 320px;
    min-height: 58px;
    padding: 0 20px;
    color: #111827;
    text-decoration: none;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    background: #ffffff;
}

.nav-v2-links {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.nav-v2 .nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.nav-v2 .nav-link {
    min-height: 58px;
    padding: 0 23px;
    color: #111827;
    text-decoration: none;
    font-size: 16px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.nav-v2 .nav-link:hover,
.nav-v2 .has-dropdown:hover .nav-link,
.nav-v2 .category-menu-btn:hover {
    background: #f8fafc;
}

.nav-caret {
    width: 8px;
    height: 8px;
    border-right: 1.8px solid #111827;
    border-bottom: 1.8px solid #111827;
    transform: rotate(45deg) translateY(-2px);
    display: inline-block;
    transition: transform .18s ease;
}

.nav-v2 .has-dropdown:hover .nav-caret {
    transform: rotate(225deg) translateY(-1px);
}

.nav-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 560px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16);
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .18s ease;
    z-index: 120;
}

.nav-v2 .has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dd-card {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: #111827;
    padding: 10px;
    border-radius: 12px;
    transition: all .18s ease;
}

.nav-dd-card:hover {
    background: #f8fafc;
    transform: translateX(3px);
}

.nav-dd-card img {
    width: 86px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.nav-dd-card strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #111827;
    margin-bottom: 5px;
}

.nav-dd-card em {
    display: block;
    font-style: normal;
    font-size: 12px;
    line-height: 1.55;
    color: #6b7280;
}

@media (max-width: 980px) {
    .nav-v2-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-v2 .category-menu-btn {
        width: 100%;
    }

    .nav-v2-links {
        overflow-x: auto;
        align-items: stretch;
    }

    .nav-v2 .nav-link {
        padding: 0 18px;
    }

    .nav-dropdown {
        display: none;
    }

    .nav-v2 .has-dropdown:hover .nav-dropdown {
        display: none;
    }
}

/* =====================================
   Nav optimization: no category + action buttons + mega dropdown
   ===================================== */

/* 顶部右侧改成语言切换说明 */
.header-language-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    white-space: nowrap;
}

.header-language-title {
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 800;
}

.header-language-switch .language-pills {
    margin-left: 0;
}

/* 菜单栏整体 */
.nav-v2-inner {
    min-height: 58px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

/* 去掉左侧全部分类后，不再预留宽度 */
.nav-v2 .category-menu-btn {
    display: none !important;
}

.nav-v2-links {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.nav-v2 .nav-link {
    min-height: 58px;
    padding: 0 22px;
    color: #111827;
    text-decoration: none;
    font-size: 16px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

/* 菜单栏右侧按钮 */
.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-action-btn {
    height: 42px;
    min-width: 96px;
    padding: 0 16px;
    border-radius: 8px;
    background: #0f0b15;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
    box-shadow: 0 8px 20px rgba(15, 11, 21, .10);
}

.nav-action-btn small {
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 800;
}

.nav-action-btn strong {
    margin-top: 4px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
}

.nav-action-btn:hover {
    background: #13c7b7;
}

/* 下拉菜单改成图2那种卡片横排 */
.nav-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 780px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .16);
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .18s ease;
    z-index: 120;
}

.nav-dropdown-right {
    left: auto;
    right: 0;
}

.nav-v2 .has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dd-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #111827;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
    transition: all .18s ease;
    min-height: 210px;
}

.nav-dd-card:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}

.nav-dd-card img {
    width: 100%;
    height: 92px;
    object-fit: contain;
    border-radius: 12px;
    background: #ffffff;
    margin-bottom: 12px;
}

.nav-dd-card strong {
    display: block;
    font-size: 15px;
    font-weight: 950;
    color: #111827;
    margin-bottom: 6px;
}

.nav-dd-card em {
    display: block;
    font-style: normal;
    font-size: 12px;
    line-height: 1.55;
    color: #6b7280;
}

/* 顶部 header 布局稍微优化，语言切换区域放右侧 */
.header-main-inner {
    grid-template-columns: 290px minmax(360px, 1fr) auto !important;
}

/* 移动端 */
@media (max-width: 980px) {
    .header-main-inner {
        grid-template-columns: 1fr !important;
    }

    .header-language-switch {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .nav-v2-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-v2-links {
        overflow-x: auto;
    }

    .nav-actions {
        margin-left: 0;
        padding: 10px 0 14px;
    }

    .nav-dropdown {
        display: none;
    }

    .nav-v2 .has-dropdown:hover .nav-dropdown {
        display: none;
    }
}

/* =====================================
   Mega dropdown full-width style
   Like Digimart category panel
   ===================================== */

/* nav 本身作为下拉面板的定位基准 */
.nav-v2 {
    position: relative !important;
    z-index: 120;
}

/* 关键：让 dropdown 不再跟随单个菜单项定位 */
.nav-v2 .nav-item {
    position: static !important;
}

/* 菜单项保持正常 */
.nav-v2 .has-dropdown {
    position: static !important;
}

/* 整屏白色大面板 */
.nav-v2 .nav-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background: #ffffff !important;
    border: 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08) !important;

    padding: 34px 0 34px !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 16px !important;

    opacity: 0;
    visibility: hidden;
    transform: translateY(0) !important;
    transition: opacity .16s ease, visibility .16s ease !important;

    z-index: 160 !important;
}

/* hover 时展开整条面板 */
.nav-v2 .has-dropdown:hover .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
}

/* OEM 右侧对齐取消，全部统一全宽 */
.nav-dropdown-right {
    left: 0 !important;
    right: 0 !important;
}

/* 卡片改成图2那种竖向分类卡 */
.nav-v2 .nav-dd-card {
    width: 180px !important;
    height: 220px !important;
    min-height: 220px !important;

    padding: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #f8f8f9 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;
    text-decoration: none !important;
    color: #111827 !important;

    overflow: hidden !important;
    transition: all .18s ease !important;
}

/* hover 效果轻一点 */
.nav-v2 .nav-dd-card:hover {
    background: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .10) !important;
}

/* 图片区域 */
.nav-v2 .nav-dd-card img {
    width: 100% !important;
    height: 118px !important;
    object-fit: contain !important;
    padding: 18px 18px 10px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* 标题 */
.nav-v2 .nav-dd-card strong {
    display: block !important;
    width: 100% !important;
    padding: 0 12px !important;
    margin: 4px 0 0 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    color: #111827 !important;
}

/* 描述改成两行以内，更像图2下面的小字 */
.nav-v2 .nav-dd-card em {
    display: block !important;
    width: 100% !important;
    padding: 0 14px !important;
    margin-top: 8px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #8a8f98 !important;
    font-style: normal !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 下拉面板下方留出空间感 */
.nav-v2 .nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #e5e7eb;
}

/* 菜单栏本身不要被遮挡 */
.nav-v2-inner {
    position: relative;
    z-index: 2;
}

/* 移动端不展开 mega dropdown */
@media (max-width: 980px) {
    .nav-v2 .nav-dropdown {
        display: none !important;
    }

    .nav-v2 .has-dropdown:hover .nav-dropdown {
        display: none !important;
    }
}

/* =====================================
   Mega dropdown flicker fix
   防止不同菜单切换时白色下拉面板闪黑
   ===================================== */

/* 菜单栏区域保持白底，避免切换瞬间露出深色背景 */
.nav-v2,
.nav-v2-inner {
    background: #ffffff !important;
}

/* 下拉面板显示/隐藏不要再做明显渐变，避免切换黑一下 */
.nav-v2 .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    /* 关键：隐藏稍微延迟，切换菜单时不会瞬间消失 */
    transition:
        opacity .06s linear,
        visibility 0s linear .12s !important;

    background: #ffffff !important;
    will-change: opacity;
}

/* hover 时立即显示 */
.nav-v2 .has-dropdown:hover .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        opacity .03s linear,
        visibility 0s linear 0s !important;
}

/* 给有下拉的菜单项增加一个透明缓冲区，鼠标从菜单移到下拉层时不容易断开 */
.nav-v2 .has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 12px;
    background: transparent;
    z-index: 170;
}

/* 因为前面曾经把 nav-item 设置成 static，这里给有下拉项恢复相对定位，只用于缓冲区 */
.nav-v2 .nav-item.has-dropdown {
    position: relative !important;
}

/* 但下拉面板仍然按整屏定位 */
.nav-v2 .nav-item.has-dropdown .nav-dropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 用 CSS 变量方式稳定下拉面板位置，避免 fixed 后跑位 */
.nav-v2 .nav-dropdown {
    top: var(--caspia-nav-dropdown-top, 170px) !important;
}

/* 如果 fixed 定位在不同屏幕下偏差，下面用默认高度兜底 */
@media (min-width: 981px) {
    .nav-v2 .nav-dropdown {
        top: 170px !important;
    }
}

/* 移动端继续禁用下拉 */
@media (max-width: 980px) {
    .nav-v2 .nav-dropdown {
        display: none !important;
    }
}

/* fallback: keep absolute dropdown positioning */
.nav-v2 .nav-item.has-dropdown {
    position: static !important;
}

.nav-v2 .nav-item.has-dropdown .nav-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* =====================================
   Mega dropdown active-state fix
   避免菜单切换时跳回旧菜单
   ===================================== */

/* 去掉之前的透明缓冲区，避免旧菜单继续抢鼠标 */
.nav-v2 .has-dropdown::after {
    display: none !important;
    content: none !important;
}

/* 下拉项恢复 static，面板按整条 nav 定位 */
.nav-v2 .nav-item,
.nav-v2 .nav-item.has-dropdown,
.nav-v2 .has-dropdown {
    position: static !important;
}

/* 默认全部下拉隐藏 */
.nav-v2 .nav-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition: opacity .06s linear, visibility 0s linear .06s !important;

    background: #ffffff !important;
    z-index: 160 !important;
}

/* 禁用旧的 hover 显示逻辑 */
.nav-v2 .has-dropdown:hover .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 只允许 JS 激活的菜单显示 */
.nav-v2 .has-dropdown.is-active .nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .04s linear, visibility 0s linear 0s !important;
}

/* 激活菜单的文字背景 */
.nav-v2 .has-dropdown.is-active .nav-link {
    background: #f8fafc !important;
}

/* 激活时箭头方向 */
.nav-v2 .has-dropdown.is-active .nav-caret {
    transform: rotate(225deg) translateY(-1px) !important;
}

/* 保证整条菜单区域是白底，切换时不会露黑 */
.nav-v2,
.nav-v2-inner {
    background: #ffffff !important;
}

/* 移动端不启用大下拉 */
@media (max-width: 980px) {
    .nav-v2 .nav-dropdown,
    .nav-v2 .has-dropdown.is-active .nav-dropdown {
        display: none !important;
    }
}

/* =====================================
   Header language switch v2
   ===================================== */

/* 顶部布局：缩短搜索栏，给右侧语言区更多空间 */
.header-main-inner {
    grid-template-columns: 280px minmax(420px, 620px) auto !important;
    justify-content: center;
    column-gap: 26px;
}

/* 搜索栏缩短一点 */
.site-search {
    max-width: 620px !important;
    width: 100% !important;
    justify-self: center;
}

/* 语言切换区域 */
.lang-switch-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    white-space: nowrap;
}

/* 滚动文字容器 */
.language-rolling-title {
    position: relative;
    width: 118px;
    height: 24px;
    overflow: hidden;
    color: rgba(255,255,255,.92);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1px;
}

/* 四种语言轮播 */
.language-rolling-title span {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    opacity: 0;
    transform: translateY(12px);
    animation: caspiaLangRoll 8s infinite;
}

.language-rolling-title span:nth-child(1) {
    animation-delay: 0s;
}

.language-rolling-title span:nth-child(2) {
    animation-delay: 2s;
}

.language-rolling-title span:nth-child(3) {
    animation-delay: 4s;
}

.language-rolling-title span:nth-child(4) {
    animation-delay: 6s;
}

@keyframes caspiaLangRoll {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    8% {
        opacity: 1;
        transform: translateY(-50%);
    }

    22% {
        opacity: 1;
        transform: translateY(-50%);
    }

    30% {
        opacity: 0;
        transform: translateY(-22px);
    }

    100% {
        opacity: 0;
        transform: translateY(-22px);
    }
}

/* 语言胶囊按钮 */
.language-pills-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-pills-v2 a {
    width: 58px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    text-decoration: none;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.10);
    transition: all .18s ease;
}

.language-pills-v2 a strong {
    display: block;
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
    color: #ffffff;
}

.language-pills-v2 a em {
    display: block;
    max-width: 48px;
    font-size: 9px;
    line-height: 1;
    font-style: normal;
    font-weight: 750;
    color: rgba(255,255,255,.72);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.language-pills-v2 a:hover {
    background: rgba(19,199,183,.22) !important;
    border-color: rgba(19,199,183,.65);
    transform: translateY(-1px);
}

.language-pills-v2 a.active {
    background: #13c7b7 !important;
    color: #ffffff !important;
    border-color: #13c7b7;
    box-shadow: 0 10px 22px rgba(19,199,183,.25);
}

.language-pills-v2 a.active em {
    color: rgba(255,255,255,.95);
}

/* 适配窄屏 */
@media (max-width: 1180px) {
    .header-main-inner {
        grid-template-columns: 260px minmax(360px, 560px) auto !important;
        column-gap: 18px;
    }

    .site-search {
        max-width: 560px !important;
    }

    .language-rolling-title {
        width: 105px;
    }

    .language-pills-v2 a {
        width: 52px !important;
    }
}

@media (max-width: 980px) {
    .header-main-inner {
        grid-template-columns: 1fr !important;
    }

    .site-search {
        max-width: none !important;
        justify-self: stretch;
    }

    .lang-switch-v2 {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    .language-rolling-title {
        width: 100%;
        height: 24px;
    }

    .language-pills-v2 {
        flex-wrap: wrap;
    }

    .language-pills-v2 a {
        width: 56px !important;
        height: 42px !important;
    }
}

/* =====================================
   Global container width refinement
   ===================================== */

.site-container {
    max-width: 1360px !important;
    width: 100% !important;
}

@media (min-width: 1440px) {
    .site-container {
        max-width: 1400px !important;
    }
}

/* =====================================
   Chat launcher position + gold glow + horizontal scrollbar fix
   联系客服上移 + 金色外发光 + 去掉横向滚动条
   ===================================== */

/* 1. 全站禁止横向溢出，去掉底部横向滚动条 */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* 防止部分 100vw / vmax 背景导致横向撑开 */
body {
    position: relative;
}

/* 2. 联系客服按钮整体上移，避免挡住返回顶部按钮和底部版权区域 */
.caca-chat-launcher,
.caca-chat-widget,
.caca-chat-pill,
.caca-chat-button,
#cacaChatLauncher {
    bottom: 92px !important;
    right: 24px !important;
    z-index: 9999 !important;
}

/* 3. 聊天按钮增加金色外发光，黑色底部也能看清楚 */
.caca-chat-launcher,
.caca-chat-pill,
.caca-chat-button,
#cacaChatLauncher {
    box-shadow:
        0 0 0 1px rgba(255, 214, 102, .18),
        0 0 18px rgba(255, 193, 7, .38),
        0 0 36px rgba(255, 171, 0, .22),
        0 16px 34px rgba(0, 0, 0, .28) !important;
}

/* 外层柔和呼吸光 */
.caca-chat-launcher::before,
.caca-chat-pill::before,
.caca-chat-button::before,
#cacaChatLauncher::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    background: radial-gradient(
        circle,
        rgba(255, 214, 102, .38) 0%,
        rgba(255, 193, 7, .22) 36%,
        rgba(255, 193, 7, 0) 72%
    );
    filter: blur(10px);
    opacity: .88;
    pointer-events: none;
    z-index: -1;
    animation: caspiaChatGoldPulse 2.8s ease-in-out infinite;
}

/* 确保按钮可以承载伪元素 */
.caca-chat-launcher,
.caca-chat-pill,
.caca-chat-button,
#cacaChatLauncher {
    position: fixed !important;
}

/* 宠物脸也稍微上移并保持层级 */
.caca-chat-pet,
.caca-pet,
.caca-chat-face {
    z-index: 10000 !important;
}

/* 金色呼吸动画 */
@keyframes caspiaChatGoldPulse {
    0%, 100% {
        opacity: .48;
        transform: scale(.96);
    }

    50% {
        opacity: .95;
        transform: scale(1.06);
    }
}

/* 4. Footer 返回顶部按钮和聊天按钮错开 */
.footer-backtop {
    right: 22px !important;
    bottom: 22px !important;
    z-index: 9990 !important;
}

/* 5. 修复可能造成横向滚动条的全宽区域 */
.nav-v2 .nav-dropdown,
.footer-v2,
.site-footer,
.footer-contact-strip,
.footer-main,
.footer-bottom {
    max-width: 100vw !important;
}

/* 如果之前有 100vw 面板，用 100% 限制可视宽度 */
.nav-v2 .nav-dropdown {
    overflow-x: hidden !important;
}

/* 6. 窄屏时联系客服再上移一点，避免和系统底部栏冲突 */
@media (max-width: 680px) {
    .caca-chat-launcher,
    .caca-chat-widget,
    .caca-chat-pill,
    .caca-chat-button,
    #cacaChatLauncher {
        bottom: 108px !important;
        right: 16px !important;
    }
}

/* =====================================
   Chat panel above launcher + product reference card
   聊天框上移 + 商品引用演示卡片
   ===================================== */

/* 聊天弹窗固定到按钮上方，避免被 Need help 按钮遮挡 */
.caca-chat-window,
.caca-chat-panel,
.caca-chat-box,
.caca-chat-dialog,
.caca-chat-popup,
#cacaChatWindow,
#cacaChatPanel,
[class*="caca-chat"][class*="window"],
[class*="caca-chat"][class*="panel"],
[class*="caca-chat"][class*="dialog"],
[class*="caca-chat"][class*="popup"] {
    right: 24px !important;
    bottom: 168px !important;
    z-index: 9998 !important;
    max-height: min(560px, calc(100vh - 210px)) !important;
}

/* 联系客服按钮继续在下方，但不盖住弹窗 */
.caca-chat-launcher,
.caca-chat-pill,
.caca-chat-button,
#cacaChatLauncher {
    bottom: 82px !important;
    right: 24px !important;
    z-index: 9999 !important;
}

/* 商品引用卡片 */
.caca-chat-product-ref {
    margin: 10px 12px 8px;
    padding: 12px 13px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(19,199,183,.32);
    box-shadow: 0 10px 28px rgba(15, 11, 21, .12);
    color: #15111f;
    font-size: 12px;
}

.caca-chat-product-ref-label {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(19,199,183,.12);
    color: #0b9f95;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 8px;
}

.caca-chat-product-ref-name {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
    color: #100b18;
    margin-bottom: 6px;
}

.caca-chat-product-ref-meta {
    color: #6f6a7b;
    line-height: 1.55;
    margin-bottom: 8px;
}

.caca-chat-product-ref-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #161126;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 680px) {
    .caca-chat-window,
    .caca-chat-panel,
    .caca-chat-box,
    .caca-chat-dialog,
    .caca-chat-popup,
    #cacaChatWindow,
    #cacaChatPanel,
    [class*="caca-chat"][class*="window"],
    [class*="caca-chat"][class*="panel"],
    [class*="caca-chat"][class*="dialog"],
    [class*="caca-chat"][class*="popup"] {
        right: 12px !important;
        left: 12px !important;
        bottom: 150px !important;
        width: auto !important;
        max-height: calc(100vh - 180px) !important;
    }

    .caca-chat-launcher,
    .caca-chat-pill,
    .caca-chat-button,
    #cacaChatLauncher {
        right: 16px !important;
        bottom: 82px !important;
    }
}

/* =====================================
   Chat product reference as message + pretty scrollbar
   商品引用作为聊天记录显示 + 美化滚动条
   ===================================== */

/* 商品引用作为一条聊天消息 */
.caca-chat-ref-message {
    display: flex;
    justify-content: flex-start;
    margin: 12px 14px;
    max-width: 86%;
}

.caca-chat-ref-message .caca-chat-product-ref {
    width: 100%;
    margin: 0 !important;
    padding: 12px 13px 13px !important;
    border-radius: 16px 16px 16px 6px !important;
    background: #ffffff !important;
    border: 1px solid rgba(19,199,183,.35) !important;
    box-shadow: 0 10px 26px rgba(15, 11, 21, .10) !important;
}

.caca-chat-generated-messages {
    overflow-y: auto;
    max-height: 100%;
}

/* 引用商品小标签 */
.caca-chat-product-ref-label {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(19,199,183,.12);
    color: #0b9f95;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 8px;
}

.caca-chat-product-ref-name {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
    color: #100b18;
    margin-bottom: 6px;
}

.caca-chat-product-ref-meta {
    color: #6f6a7b;
    line-height: 1.55;
    margin-bottom: 8px;
    font-size: 12px;
}

.caca-chat-product-ref-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #161126;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

/* 美化聊天框内部滚动条：Firefox */
.caca-chat-window,
.caca-chat-panel,
.caca-chat-box,
.caca-chat-dialog,
.caca-chat-popup,
#cacaChatWindow,
#cacaChatPanel,
[class*="caca-chat"][class*="window"],
[class*="caca-chat"][class*="panel"],
[class*="caca-chat"][class*="dialog"],
[class*="caca-chat"][class*="popup"],
.caca-chat-generated-messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(19,199,183,.85) rgba(15,11,21,.08);
}

/* 美化聊天框内部滚动条：Chrome / Edge */
.caca-chat-window::-webkit-scrollbar,
.caca-chat-panel::-webkit-scrollbar,
.caca-chat-box::-webkit-scrollbar,
.caca-chat-dialog::-webkit-scrollbar,
.caca-chat-popup::-webkit-scrollbar,
#cacaChatWindow::-webkit-scrollbar,
#cacaChatPanel::-webkit-scrollbar,
[class*="caca-chat"][class*="window"]::-webkit-scrollbar,
[class*="caca-chat"][class*="panel"]::-webkit-scrollbar,
[class*="caca-chat"][class*="dialog"]::-webkit-scrollbar,
[class*="caca-chat"][class*="popup"]::-webkit-scrollbar,
.caca-chat-generated-messages::-webkit-scrollbar {
    width: 8px;
}

.caca-chat-window::-webkit-scrollbar-track,
.caca-chat-panel::-webkit-scrollbar-track,
.caca-chat-box::-webkit-scrollbar-track,
.caca-chat-dialog::-webkit-scrollbar-track,
.caca-chat-popup::-webkit-scrollbar-track,
#cacaChatWindow::-webkit-scrollbar-track,
#cacaChatPanel::-webkit-scrollbar-track,
[class*="caca-chat"][class*="window"]::-webkit-scrollbar-track,
[class*="caca-chat"][class*="panel"]::-webkit-scrollbar-track,
[class*="caca-chat"][class*="dialog"]::-webkit-scrollbar-track,
[class*="caca-chat"][class*="popup"]::-webkit-scrollbar-track,
.caca-chat-generated-messages::-webkit-scrollbar-track {
    background: rgba(15,11,21,.06);
    border-radius: 999px;
}

.caca-chat-window::-webkit-scrollbar-thumb,
.caca-chat-panel::-webkit-scrollbar-thumb,
.caca-chat-box::-webkit-scrollbar-thumb,
.caca-chat-dialog::-webkit-scrollbar-thumb,
.caca-chat-popup::-webkit-scrollbar-thumb,
#cacaChatWindow::-webkit-scrollbar-thumb,
#cacaChatPanel::-webkit-scrollbar-thumb,
[class*="caca-chat"][class*="window"]::-webkit-scrollbar-thumb,
[class*="caca-chat"][class*="panel"]::-webkit-scrollbar-thumb,
[class*="caca-chat"][class*="dialog"]::-webkit-scrollbar-thumb,
[class*="caca-chat"][class*="popup"]::-webkit-scrollbar-thumb,
.caca-chat-generated-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #13c7b7, #0e8f87);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.55);
}

.caca-chat-window::-webkit-scrollbar-thumb:hover,
.caca-chat-panel::-webkit-scrollbar-thumb:hover,
.caca-chat-box::-webkit-scrollbar-thumb:hover,
.caca-chat-dialog::-webkit-scrollbar-thumb:hover,
.caca-chat-popup::-webkit-scrollbar-thumb:hover,
#cacaChatWindow::-webkit-scrollbar-thumb:hover,
#cacaChatPanel::-webkit-scrollbar-thumb:hover,
[class*="caca-chat"][class*="window"]::-webkit-scrollbar-thumb:hover,
[class*="caca-chat"][class*="panel"]::-webkit-scrollbar-thumb:hover,
[class*="caca-chat"][class*="dialog"]::-webkit-scrollbar-thumb:hover,
[class*="caca-chat"][class*="popup"]::-webkit-scrollbar-thumb:hover,
.caca-chat-generated-messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #16dfcf, #0b7771);
}