:root, [data-bs-theme="light"] {
    --bd-purple: #380085;
    --bd-violet: #4900ad;
    --bd-accent: #ffe484;
    --bd-violet-rgb: 61, 0, 132;
    --bd-accent-rgb: 255, 228, 132;
    --bd-pink-rgb: 214, 51, 132;
    --bd-teal-rgb: 32, 201, 151;
    --bs-primary-rgb: 30, 0, 204;
    --bd-violet-bg: var(--bd-violet);
    --bd-toc-color: var(--bd-violet);
    --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
    --bd-callout-link: 10, 88, 202;
    --bd-callout-code-color: #ab296a;
    --bd-pre-bg: var(--bs-tertiary-bg);

    --bs-link-color: #380085;
    --bs-link-color-rgb: 56, 0, 133;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #28005f;

    --star-size: 26px;
    --gap: 4px;
}

body{
    font-size: .875rem;
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6{
    line-height: 1.5;
}

.hidden{
    display: none!important;
}

/* Icon */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/* Accordion */
.accordion{
    --bs-accordion-btn-icon-width: 1rem !important;
    --bs-accordion-btn-icon-height: 1rem !important;
    --bs-accordion-border-width: 0;
}
.accordion-button{
    padding-right: 40px;
}
.accordion-button::after{
    position: absolute;
    right: 15px;
}
.accordion-button:not(.collapsed){
    background-color: white;
}

/* Bg */
.bg-light-grey{
    background-color: #f5f5f5!important;
}
.bg-dark-purple{
    background-color: #2f0066!important;
}
.bg-purple-gradient{
    background: #5400c4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #5400c4, #6301be);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #5400c4, #6301be); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-light-green{
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(214, 241, 254) 80.16%, rgb(255, 255, 255) 100%);
    overflow: hidden;
    position: relative;
}
.bg-light-green::before{
    content: '';
    background-image: url("../images/swoosh.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 2000px;
    height: 800px;
    position: absolute;
    top: 200px;
    right: -500px;
}
/* svg bg */
.svg-bg-purple{
    background-color: #3B00A8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%237B00E4'/%3E%3Cstop offset='1' stop-color='%233B00A8'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%235b00c6'/%3E%3Cstop offset='1' stop-color='%233B00A8'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform=''%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.76' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    /*background-attachment: fixed;*/
    background-size: cover;
}
.svg-bg-wintery-sunburst{
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='400' cy='400' r='50%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230EF'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='400' cy='400' r='70%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%230FF'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='800'/%3E%3Cg fill-opacity='.8'%3E%3Cpath fill='url(%23b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}
.svg-bg-yellow{
    background-color: #ffaa00;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffbe00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffc500' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffd914' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe529' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffef3d' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fff852' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffff66' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}
.svg-spectrum-gradient{
    background-color: #8C45F0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%236508d4'/%3E%3Cstop offset='1' stop-color='%236508d4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23cf31e4'/%3E%3Cstop offset='1' stop-color='%23cf31e4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23a10fad'/%3E%3Cstop offset='1' stop-color='%23a10fad' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%238C45F0'/%3E%3Cstop offset='1' stop-color='%238C45F0' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23410083'/%3E%3Cstop offset='1' stop-color='%23410083' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23CD2792'/%3E%3Cstop offset='1' stop-color='%23CD2792' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

/* Button */
.btn-outline-primary{
    --bs-btn-color: #5400c4;
    --bs-btn-border-color: #5400c4;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5400c4;
    --bs-btn-hover-border-color: #5400c4;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5d00d9;
    --bs-btn-active-border-color: #5d00d9;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #af85e7;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #af85e7;
    --bs-gradient: none;
}

/* Btn */
.wish-btn::after{
    content: '';
    width: 20px;
    height: 20px;
}
/* Radio Btn */
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: white;
    border: 1px solid orangered;
    position: relative;
}
.btn-check:checked+.btn::before{
    background-color: orangered;
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20CC%20Attribution.%20Made%20by%20salesforce%3A%20https%3A%2F%2Flightningdesignsystem.com%2F%20--%3E%3Csvg%20fill%3D%22%23ffffff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2052%2052%22%20enable-background%3D%22new%200%200%2052%2052%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M19.1%2C42.5L2.6%2C25.9c-0.6-0.6-0.6-1.6%2C0-2.2l2.2-2.2c0.6-0.6%2C1.6-0.6%2C2.2%2C0L19.4%2C34c0.4%2C0.4%2C1.1%2C0.4%2C1.5%2C0L45.2%2C9.5c0.6-0.6%2C1.6-0.6%2C2.2%2C0l2.2%2C2.2c0.6%2C0.6%2C0.6%2C1.6%2C0%2C2.2L21.3%2C42.5C20.7%2C43.2%2C19.7%2C43.2%2C19.1%2C42.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    border-radius: 0 0 0 .25rem;
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* Text */
.text-truncate-multi-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-truncate-multi-3{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-truncate-multi-4{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mouse */
.help-cursor {
    cursor: help;
}

/* 骨架屏 */
/* 骨架屏懒加载使用方法 (js在public.js) */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
/* 图片加载完显示 */
.lazy-load.loaded {
    opacity: 1;
}
/* 水波纹动画 */
.placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    animation: wave 1.5s infinite linear;
}
/* 水波动画效果 */
@keyframes wave {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
/* 渐变让水波更有层次感 */
.placeholder-wave {
    background-image: linear-gradient(
            90deg,
            #f0f0f0 0%,
            #e0e0e0 50%,
            #f0f0f0 100%
    );
    background-size: 200% 100%;
}
/* End 骨架屏 */

/* 小文字最大显示4行 */
.sm-text-line-4{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(4 * 1rem);
    line-height: 1.4;
}

/* Star Rating */
.rating-wrap{
    display:flex;
    align-items:center;
    gap:10px;
}
.rating-wrap.no-click{
    position: relative;
}
.rating-wrap.no-click::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.rating-wrap.readonly{
    transform: scale(.65);
    transform-origin: left center;
    position: relative;
    left: -3px;
}
.rating-wrap.readonly .stars{
    cursor: default !important;
}
.rating-wrap.readonly .rating-info{
    display: none !important;
}
.stars {
    position: relative;
    user-select: none;
    touch-action: none;
    display:inline-block;
    /* width = 5 * star-size + 4 * gap */
    width: calc(5 * var(--star-size));
    height: var(--star-size);
    cursor: pointer;
}
.stars .back,
.stars .front {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    background-repeat: repeat-x;
    background-size: var(--star-size) 100%;
    background-position: left center;
}
.stars .back {
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23cccccc' d='M12 17.3l6.18 3.73-1.64-7.03L21.5 9.5l-7.11-.62L12 2 9.61 8.88 2.5 9.5l4.96 4.5-1.64 7.03z'/></svg>");
}
.stars .front {
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffd54a' d='M12 17.3l6.18 3.73-1.64-7.03L21.5 9.5l-7.11-.62L12 2 9.61 8.88 2.5 9.5l4.96 4.5-1.64 7.03z'/></svg>");
    width: 0%; /* 通过 JS 动态修改 width 来显示小数颗星 */
    overflow: hidden;
    pointer-events: none; /* 防止遮挡鼠标事件 */
}
/* 4.05/5 之类的文字 */
.rating-info{}
/* 小提示文字 */
.hint{
    color:#e8d6ff;
    font-size:13px;
    margin-top:8px;
}
/* 无障碍 focus 样式（键盘操作可聚焦容器） */
.stars:focus{
    outline: 2px dashed rgba(255,255,255,0.12);
    outline-offset:6px;
}
/* End Star Rating */

/* Dropdown */
/* Dropdown Arrow Size Small */
.dropdown-toggle::after{
    border-top: .25em solid;
    border-right: .25em solid transparent;
    border-bottom: 0;
    border-left: .25em solid transparent;
}

/* Font */
/* Size */
.font-size-xs{
    font-size: .65rem;
}
.font-size-sm{
    font-size: .75rem;
}
.font-size-md{
    font-size: .875rem;
}
.font-size-lg{
    font-size: 1rem;
}

/* Color */
/* Purple */
.color-purple{
    color: #5626bc;
}
.color-lake-blue{
    color: #4ab0de;
}
.color-orange-red{
    color: #f2532f;
}

/* Hover */
.hover-img-scale img{
    transition: transform 0.3s ease;
}
.hover-img-scale:hover img{
    transform: scale(1.1);
}

/* Header */
/* Logo */
.site-logo {
    max-width: 6rem;
}
/* 侧滑菜单 */
/* 所有子菜单默认隐藏（右侧屏幕外） */
.offcanvas-body .list-group, .offcanvas-body .list-group-item{
    position: initial;
}
.offcanvas-body .sub-menu-list-group {
    position: absolute;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10;
    width: 100%;
    height: 100%;
}
/* 子菜单激活状态（滑入） */
.offcanvas-body .sub-menu-list-group.active {
    transform: translateX(0);
    left: 0;
}
/* Back */
.sub-menu-back{}
/* End 侧滑菜单 */
/* Nav Bar */
.bd-navbar::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    content: "";
    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 1));
}
/* Search */
.search-col{
    background-color: #410083;
    position: absolute;
    padding-bottom: 10px;
    top: 100%;
    z-index: 2;
}
.search-wrapper{}
.search-form{
    padding-left: .75rem;
}
.search-product-list{
    min-height: 550px;
    max-height: 550px;
    overflow-y: auto;
}
.search-product-list .search-load-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
}
/* Cart */
.cart-dropdown .cart-number{
    top: 0;
    right: -.5rem;
    padding: 3px 5px;
}
.cart-list-wrap{
    max-height: 305px;
    overflow-y: auto;
}
/* Login Button */
.login-signup button:nth-child(1){
    position: relative;
    padding-right: 10px;
    margin-right: 10px;
}
.login-signup button:nth-child(1)::before{
    background-color: white;
    content: '';
    width: 1px;
    height: 14px;
    position: absolute;
    top: 4px;
    right: -7px;
}
/* User Logged in */
.user-log-in .avatar{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 30px;
    height: 30px;
}

/* Guide */
.home-registration-guide {
    background-color: #4b11c5;
    background-image: linear-gradient(99deg, #4b11c5 39%, #db2e8e 100%);
    color: white;
}
.cover-img{
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
}
.cover-img::before{
    background-image: url("../images/cover.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 -58px;
    content: '';
    display: flex;
    width: 100%;
    height: 196%;
}

/* Swiper js */
/* 页面渲染时产品卡片短暂变大 解决方法 */
.swiper {
    opacity: 0;
    transition: opacity 0.03s ease-in-out;
}
.swiper-initialized {
    opacity: 1;
}

/* Home Carousel image */
.home-big-pic-swiper{
    background-color: transparent;
    width: 100%; /* 整体宽度 */
    padding: 0 0 14px 0;
}
.home-big-pic-swiper .swiper-slide{
    width: 100%;
    transition: transform 0.3s ease;
    position: relative;
}
.home-big-pic-swiper .swiper-slide img{
    min-height: 180px;
    max-height: 180px;
}
/* Swiper 左右按钮样式 */
.swiper-button-next,
.swiper-button-prev {
    width: 50px; /* 按钮大小 */
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8); /* 白色透明 */
    border-radius: 0;
    display: none; /* 默认不显示箭头左右按钮 */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
/* 鼠标悬停时颜色 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1); /* 放大 */
}
/* Swiper 默认的箭头是SVG文件，颜色改成灰色 */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: #333; /* 深灰箭头 */
    font-size: 20px; /* 箭头大小 */
}
/* 按钮定位 */
.swiper-button-prev {
    left: 10px; /* 左侧按钮位置 */
}
.swiper-button-next {
    right: 10px; /* 右侧按钮位置 */
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    display: none!important;
}
/* End Swiper 按钮样式 */
.home-big-pic-swiper .swiper-slide::before{
    background-color: rgba(33, 33, 33, 0.75);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}

/* Sidebar */
.sidebar{
    width: 290px;
}
.form-to-group{}
.form-to-group .form-to-item:not(:last-child){
    position: relative;
}
.form-to-group .form-to-item:not(:last-child)::before{
    background-color: #ccc;
    content: '';
    width: 8px;
    height: 2px;
    position: absolute;
    top: 45%;
    left: calc(100% - 4px);
}

/* tom select */
.ts-control{
    border-radius: 0;
    padding: .375rem .75rem;
    font-size: .875rem;
}
.ts-dropdown{
    border-radius: 0;
}

/* Checks */
.form-check-label{
    padding-left: .375rem;
    max-width: 165px;
}
.form-check-input {
    box-shadow: none !important;
    width: 1.4em;
    height: 1.4em;
    margin-top: 0;
}
.form-check-input:checked{
    background-color: RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important;
    border-color: RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important;
}
.form-check-input:checked[type=checkbox]{
    --bs-form-check-bg-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20MIT.%20Made%20by%20instructure-ui%3A%20https%3A%2F%2Fgithub.com%2Finstructure%2Finstructure-ui%20--%3E%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%201920%201920%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1743.858%20267.012%20710.747%201300.124%20176.005%20765.382%200%20941.387l710.747%20710.871%201209.24-1209.116z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
    background-size: 12px;
}

/* Filtered */
.filtered-bar .checks-container{
    max-height: 420px;
    overflow-y: auto;
}

/* 平板电脑 和 笔记本 (768px 以上) */
@media (min-width: 768px) {
    .home-big-pic-swiper{
        padding: 14px 0;
    }
    .home-big-pic-swiper .swiper-slide {
        width: 40%;
    }
    .home-big-pic-swiper .swiper-slide::before{
        display: block;
    }
    .home-big-pic-swiper .swiper-slide.swiper-slide-active::before{
        display: none!important;
    }
    .home-big-pic-swiper .swiper-slide img{
        min-height: 320px;
        max-height: 320px;
    }
    .home-big-pic-swiper .swiper-button-prev {
        left: 25%; /* 左侧按钮位置 */
    }
    .home-big-pic-swiper .swiper-button-next {
        right: 25%; /* 右侧按钮位置 */
    }

    /* Product */
    .product-swiper .swiper-button-prev{
        left: 0;
    }
    .product-swiper .swiper-button-next{
        right: 0;
    }
    .product-swiper .swiper-button-prev, .product-swiper .swiper-button-next{
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .product-swiper:hover .swiper-button-prev, .product-swiper:hover .swiper-button-next{
        border: 1px solid rgba(0, 0, 0, 0.25);
        box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
        opacity: 1;
    }

    /* Search */
    .search-col{
        background-color: transparent;
        position: initial;
        padding-bottom: initial;
        top: initial;
    }

    .search-form{
        padding-left: 2.5rem;
    }
}
/* 2K 屏幕 (2048px 以上) */
@media (min-width: 2048px) {
    .home-big-pic-swiper .swiper-slide {
        width: 25%;
    }
    .home-big-pic-swiper .swiper-slide.swiper-slide-prev::before, .home-big-pic-swiper .swiper-slide.swiper-slide-active::before, .home-big-pic-swiper .swiper-slide.swiper-slide-next::before{
        display: none!important;
    }
    .home-big-pic-swiper .swiper-slide img{
        min-height: 318px;
        max-height: 318px;
    }
    .home-big-pic-swiper .swiper-button-prev {
        left: 30px; /* 左侧按钮位置 */
    }
    .home-big-pic-swiper .swiper-button-next {
        right: 30px; /* 右侧按钮位置 */
    }
}
/* 4k 屏幕以上 */
@media (min-width: 3948px){
    .home-big-pic-swiper .swiper-slide img{
        min-height: 660px;
        max-height: 660px;
    }
}
/* End Swiper */

/* Product Card */
.product-card .text-truncate-multi-2{
    min-height: calc(2 * 1.55rem);
    line-height: 1.4;
}
.product-card-img-wrap{
    min-height: 195px;
    max-height: 195px;
}
.product-card .add-to-cart{
    transform: translateY(105%);
    transition: transform 0.3s ease;
}
.product-card:hover .add-to-cart{
    transform: translateY(0);
}

/* Other denominations */
.od-wrap .od-card-list-wrap a.active .card{
    border: 1px solid orangered;
    outline: 1px solid orangered;
    background-color: #fff8ef;
}
.od-wrap .od-card-list-wrap a.active .card .card-header{
    border-color: #ffd8aa;
}

/* Sell out */
.sell-out{
    border-radius: .375rem;
    cursor: default;
    pointer-events: none;
    display: block;
    position: relative;
    overflow: hidden;
}
.sell-out::after{
    background-color: rgba(255, 255, 255, 0.75);
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

/* Text description */
.text-description {
}
.text-description-content {
    position: relative;
    overflow: hidden;
}
/* 折叠状态下的样式 */
.text-description-content.collapsed {
    max-height: 10em;
}
/* 文字末尾的渐变遮罩 */
.text-description-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* 防止遮罩拦截点击事件 */
}
.show-more-btn {
    display: none; /* 默认隐藏 */
}
.show-more-btn.visible {
    display: flex; /* 需要显示时通过JS添加此class */
}
.show-more-btn::after {
    content: '▼';
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s;
}
.show-more-btn.expanded::after {
    content: '▲';
}

/* Wish Button */
.heart-icon{
    background-image: url("../images/heart1.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
}
.wish-btn{
    width: 48px;
    height: 64px;
    background: #e0e0e0;
    flex-direction: column;
    transition: background-color 0.3s ease;
}
.wish-btn:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 13px solid #f5f5f5;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
}
.wish-btn:hover{
    background-color: #ffe8e8;
}
.wish-btn.active{
    background-color: #ffe8e8;
    color: #f32043;
}
.wish-btn.active .heart-icon{
    background-image: url("../images/heart2.svg");
}

/* Step Line */
.stepper-item{
    width: 33.3333333%;
}
.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #999;
    width: 100%;
    top: 12px;
    left: -50%;
    z-index: 2;
}
.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #999;
    width: 100%;
    top: 12px;
    left: 50%;
    z-index: 2;
}
.stepper-item .step-counter {
    background-color: #999;
    z-index: 5;
    width: 24px;
    height: 24px;
}
.stepper-item.active {
    font-weight: bold;
}
.stepper-item.completed .step-counter {
    background-color: #37c29a;
}
.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #37c29a;
    width: 100%;
    top: 12px;
    left: 50%;
    z-index: 3;
}
.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}
/* End Step Line */

/* Price Info Fixed at the bottom */
.phone-fixed-bottom{
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.6);
    bottom: 0;
    position: fixed;
    z-index: 999;
    padding: 0;
}

/* Page */
.pagination .page-link{
    font-size: .875rem;
}
.regional-query-list{
    max-height: 280px;
    overflow-y: auto;
}
.page-content img{
    min-width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto !important;
    width: 100% !important;
}

/* Footer */
/* Payment logo */
.pay-logo{
    width: 70px;
    height: 35px;
}
.pay-logo-card{
    width: 100%;
    height: 30px;
}

/* News */
.news-card{}
.news-card .news-pic{
    min-height: 170px;
}
.news-card .news-pic::before {
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
}
.news-card .news-body{}

/* 大屏 */
@media (min-width: 768px) {
    /* Logo */
    .site-logo{
        max-width: 10.5rem;
    }

    /* swiper js */
    /* PC或者大屏显示 左右箭头翻页按钮 */
    .swiper-button-next, .swiper-button-prev{
        display: flex;
    }

    /* Product Card */
    .product-card-img-wrap{
        min-height: 335px;
        max-height: 335px;
    }

    /* Price Info Fixed at the bottom */
    .phone-fixed-bottom{
        box-shadow: initial;
        bottom: initial;
        position: initial;
        z-index: initial;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .regional-query-list{
        max-height: 580px;
        overflow-y: auto;
    }

    /* Page */
    .page-content img{
        min-width: 70%;
        max-width: 70%;
        min-height: auto;
        height: auto !important;
        width: initial !important;
    }

    /* footer */
    .pay-logo{
        height: 45px;
    }
}


/* 特殊情况 手机样式 */
@media (max-width: 767.98px) {
    .mobile-sticky-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
    .fs-1 {
        font-size: 1rem !important;
    }
    .fs-4 {
        font-size: 1rem !important;
    }
    .fs-6 {
        font-size: .875rem !important;
    }

    .font-size-md{
        font-size: .75rem !important;
    }
}