/* Homepage mint glass — match shop pages. Visual only. */
html body.sct-home-container {
    max-width: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    --home-mint: #159b70;
    --home-mint-deep: #0e966b;
    --home-mint-text: #263b37;
    --home-mint-muted: #718780;
    --home-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(211, 240, 226, 0.68));
    --home-glass-border: rgba(255, 255, 255, 0.9);
    --home-glass-shadow: 0 12px 28px rgba(55, 95, 87, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.76);
    color: var(--home-mint-text);
    background-color: #eaf7f3 !important;
    background-image: url("/static/mobile/images/site-bg-mint.png?v=20261030-mint2") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

html body.sct-home-container.theme-blue {
    background-color: #eaf7f3 !important;
    background-image: url("/static/mobile/images/site-bg-mint.png?v=20261030-mint2") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

.sct-home-container .sct-header-main,
.sct-home-container .home-shortcut-placeholder,
.sct-home-container .home-category-nav,
.sct-home-container .home-product-display,
.sct-home-container .sct-notice-bar,
.sct-home-container .sct-business-card,
.sct-home-container .home-glass-welcome {
    position: relative;
    z-index: 2;
}

.sct-home-container .sct-header-main {
    margin: calc(8px + env(safe-area-inset-top)) 14px 0 !important;
    padding: 6px 10px 6px 8px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    color: #285047 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.98) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(64, 130, 112, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
}

.sct-home-container .sct-logo-area {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    width: 100%;
    min-height: 40px;
}

.sct-home-container .sct-logo-area > img,
.sct-home-container .home-ui-logo {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin-right: 0 !important;
    object-fit: contain;
    border-radius: 10px;
}

.sct-home-container .sct-logo-area .text-box {
    flex: 1;
    min-width: 0;
}

.sct-home-container .sct-logo-area .text-box h1 {
    margin: 0 !important;
    color: #1f4d40 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-shadow: none !important;
}

.sct-home-container .sct-logo-area .text-box p {
    margin: 1px 0 0 !important;
    color: #7e9b92 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.sct-home-container .home-header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: #5f8f84;
}

.sct-home-container .home-header-tool {
    position: relative;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: inherit;
    text-decoration: none;
}

.sct-home-container .home-ui-tool-icon {
    display: none !important;
}

.sct-home-container .home-header-tool svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sct-home-container .home-header-tool i {
    position: absolute;
    top: 1px;
    right: 0;
    width: 7px;
    height: 7px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #ff3b30;
}

.sct-home-container #slider {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding-bottom: 18px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 16px 32px rgba(55, 95, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.sct-home-container #slider .mui-slider-item img {
    border-radius: 22px;
}

.sct-home-container #slider .mui-slider-indicator .mui-indicator {
    background: rgba(20, 131, 95, 0.28) !important;
    box-shadow: none !important;
}

.sct-home-container #slider .mui-slider-indicator .mui-indicator.mui-active {
    background: linear-gradient(90deg, #46c99a, #10966b) !important;
}

.sct-home-container .home-shortcut-placeholder {
    width: 92%;
    margin: 0 auto 12px;
    padding: 14px 10px 12px;
    border-radius: 22px;
    background: var(--home-glass);
    border: 1px solid var(--home-glass-border);
    box-shadow: var(--home-glass-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.sct-home-container .home-shortcut-label {
    color: #35584e !important;
    font-weight: 700;
}

.sct-home-container .home-category-nav {
    position: relative !important;
    width: 92% !important;
    margin: 0 auto 12px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(20, 120, 90, 0.08) !important;
    box-shadow: 0 8px 20px rgba(40, 100, 80, 0.08) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible !important;
}

.sct-home-container .home-category-item {
    color: #35584e !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sct-home-container .home-category-item.is-active,
.sct-home-container .home-category-item:active,
.sct-home-container .home-category-item:focus,
.sct-home-container .home-category-item:focus-visible {
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.sct-home-container .home-category-item.is-active::after {
    display: none !important;
    content: none !important;
}

.sct-home-container .home-category-item.is-active::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(170, 235, 205, 0.95) 0%, rgba(110, 210, 165, 0.9) 45%, rgba(70, 185, 140, 0.88) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(90, 190, 145, 0.4),
        0 0 14px rgba(110, 210, 165, 0.22),
        inset 0 1px 0 rgba(245, 255, 250, 0.95),
        inset 0 -16px 22px rgba(40, 140, 100, 0.16) !important;
    pointer-events: none !important;
}

.sct-home-container .home-category-item.is-active .home-category-label {
    color: #146b4d !important;
}

.sct-home-container .home-product-display {
    margin: 14px 10px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid var(--home-glass-border) !important;
    background: var(--home-glass) !important;
    box-shadow: var(--home-glass-shadow) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.sct-home-container .home-product-display-title {
    color: #304a42 !important;
}

.sct-home-container .home-product-display-title:not(.has-icon)::before {
    background: linear-gradient(135deg, #27bd88, #0e966b) !important;
}

.sct-home-container .home-product-display-more {
    color: #718780 !important;
}

.sct-home-container .home-product-display-item {
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.82);
    color: #304a42 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.sct-home-container .home-glass-welcome {
    width: 92%;
    margin: 15px auto;
    position: relative;
    z-index: 10;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(211, 240, 226, 0.62));
    box-shadow: 0 16px 34px rgba(55, 95, 87, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sct-home-container .home-glass-welcome-banner {
    background: linear-gradient(135deg, rgba(201, 239, 222, 0.92) 0%, rgba(186, 232, 214, 0.78) 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 0 !important;
}

.sct-home-container .home-glass-welcome-banner h3 {
    color: #1f4d40 !important;
}

.sct-home-container .home-glass-welcome-banner p {
    color: #4f7f70 !important;
}

.sct-home-container .home-glass-welcome-banner button {
    background: linear-gradient(135deg, #27bd88 0%, #0e966b 100%) !important;
    box-shadow: 0 8px 18px rgba(20, 151, 108, 0.28) !important;
}

.sct-home-container .home-glass-welcome-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.sct-home-container .home-glass-welcome-body h3 {
    color: #2d4b42 !important;
}

.sct-home-container .home-glass-live {
    color: #14835f !important;
    background: rgba(35, 166, 118, 0.14) !important;
}

.sct-home-container .home-glass-faq {
    background: rgba(255, 255, 255, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.78);
}

.sct-home-container .home-glass-faq div:first-child {
    color: #14835f !important;
}

.sct-home-container .sct-notice-bar {
    width: 92% !important;
    margin: 16px auto 0 !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
    background: var(--home-glass) !important;
    border: 1px solid var(--home-glass-border) !important;
    box-shadow: var(--home-glass-shadow) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.sct-home-container .home-glass-notice-icon {
    background: rgba(35, 166, 118, 0.12) !important;
}

.sct-home-container .home-glass-notice-icon .mui-icon {
    color: #159b70 !important;
}

.sct-home-container .sct-notice-bar li {
    color: #527168 !important;
}

.sct-home-container .sct-section-title {
    color: #285047;
    padding-left: 4px !important;
}

.sct-home-container .sct-business-card {
    background: var(--home-glass) !important;
    border: 1px solid var(--home-glass-border);
    box-shadow: var(--home-glass-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.sct-home-container .sct-business-card > div {
    background: transparent !important;
}

.sct-home-container .sct-business-tag {
    background: linear-gradient(135deg, #27bd88 0%, #0e966b 100%) !important;
    color: #fff !important;
}

.sct-home-container .sct-grid-container {
    background: transparent !important;
}

.sct-home-container .sct-grid-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(218, 241, 228, 0.78)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(55, 95, 87, 0.07) !important;
}

.sct-home-container .sct-grid-item p,
.sct-home-container .sct-video-item p {
    color: #304a42 !important;
}

.sct-home-container .home-electricity-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(211, 240, 226, 0.7)) !important;
    box-shadow: 0 16px 34px rgba(55, 95, 87, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sct-home-container .home-electricity-header {
    background: linear-gradient(135deg, rgba(39, 189, 136, 0.92) 0%, rgba(14, 150, 107, 0.92) 100%) !important;
}

.sct-home-container .home-electricity-account-row button {
    background: rgba(35, 166, 118, 0.12) !important;
    color: #14835f !important;
}

.sct-home-container .home-electricity-amount.is-selected,
.sct-home-container .home-electricity-amount.active,
.sct-home-container .home-electricity-other-amount.is-selected,
.sct-home-container .home-electricity-other-amount.active {
    border-color: #10b167 !important;
    background: #fff !important;
    color: #14835f !important;
}

.sct-home-container .home-electricity-submit,
.sct-home-container .home-electricity-picker-done {
    background: linear-gradient(135deg, #27bd88 0%, #0e966b 100%) !important;
    box-shadow: 0 8px 18px rgba(20, 151, 108, 0.22);
}

.sct-home-container .home-service-benefits {
    border: 1px solid rgba(255, 255, 255, 0.84);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(211, 240, 226, 0.55)) !important;
    box-shadow: 0 8px 20px rgba(55, 95, 87, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sct-home-container .home-service-benefits > div {
    color: #176f54 !important;
}

.sct-home-container .home-electricity-picker-sheet {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(226, 245, 235, 0.97)) !important;
    border: 1px solid rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sct-home-container .home-phone-recharge .home-phone-module {
    filter: saturate(1.05);
}

.sct-home-container nav.mui-bar-tab.sct-tabbar,
.sct-home-container .sct-tabbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 99999 !important;
    height: calc(54px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e5e5e5 !important;
    box-shadow: none !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    box-sizing: border-box !important;
}

.sct-home-container .sct-tabbar .mui-tab-item {
    height: 54px !important;
    padding: 7px 0 6px !important;
    gap: 4px !important;
    justify-content: center !important;
}

.sct-home-container .sct-tabbar .mui-tab-item .mui-icon,
.sct-home-container .sct-tabbar .mui-tab-item .sct-bottom-nav-icon-wrap {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    background-image: none !important;
    flex: 0 0 24px !important;
}

.sct-home-container .sct-tabbar .mui-icon img.sct-bottom-nav-icon,
.sct-home-container .sct-bottom-nav-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
    object-fit: contain !important;
}

.sct-home-container .sct-tabbar .mui-tab-item.mui-active .sct-bottom-nav-icon-wrap {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.sct-home-container .sct-tabbar .mui-tab-label {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    transform: none !important;
}

.sct-home-container .sct-tabbar .mui-tab-item.mui-active {
    color: #14835f !important;
}

.sct-home-container .sct-tabbar .sct-force-badge,
.sct-home-container .sct-tabbar .sct-unread-badge,
.sct-home-container .sct-tabbar #chat-unread-dot {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    left: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    background: #ff3b30 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    border: 1.5px solid #fff !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.sct-home-container .sct-pwa-guide-card {
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(226, 245, 235, 0.96));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}