@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&family=Rubik:wght@500;600;700;800&display=swap');

:root {
    --uipro-primary: #075E56;
    --uipro-primary-strong: #064E3B;
    --uipro-primary-soft: #DCEFEA;
    --uipro-secondary: #0F172A;
    --uipro-accent: #0F766E;
    --uipro-accent-strong: #075E56;
    --uipro-accent-soft: #E7F4F1;
    --uipro-bg: #F8FAFC;
    --uipro-surface: #FFFFFF;
    --uipro-surface-2: #F8FAFC;
    --uipro-text: #0F172A;
    --uipro-heading: #0F172A;
    --uipro-muted: #64748B;
    --uipro-border: #BFD4CF;
    --uipro-border-soft: #E2E8F0;
    --uipro-danger: #DC2626;
    --uipro-warning: #B45309;
    --uipro-ring: rgba(7, 94, 86, .2);
    --uipro-radius: 8px;
    --uipro-radius-lg: 8px;
    --uipro-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --uipro-shadow: 0 16px 40px rgba(15, 23, 42, .10);
    --uipro-shadow-hover: 0 22px 50px rgba(15, 23, 42, .14);
    --acg-primary: var(--uipro-primary);
    --acg-secondary: var(--uipro-secondary);
    --acg-danger: var(--uipro-accent);
    --acg-text-strong: var(--uipro-text);
    --acg-text-muted: var(--uipro-muted);
    --acg-card-bg: var(--uipro-surface);
    --acg-border: var(--uipro-border-soft);
}

html,
body {
    overflow-x: hidden;
}

body {
    color: var(--uipro-text);
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(241, 245, 249, .98)) !important;
    background-attachment: fixed !important;
}

h1, h2, h3, h4, h5, h6,
.panel-title,
.goods-title,
.auth-title,
.content-header,
.navbar-acg .navbar-brand {
    font-family: 'Rubik', 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

a,
button,
.chip,
.sku,
.pay,
.shared-button,
.optional-card {
    cursor: pointer;
}

.form-control,
.layui-input,
input,
select,
textarea {
    font-size: 16px;
}

.form-control:focus,
.layui-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--uipro-primary) !important;
    box-shadow: 0 0 0 3px var(--uipro-ring) !important;
    outline: 0;
}

.btn-primary,
.btn-gradient,
.layui-btn-pink,
.payButton {
    border: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-accent)) !important;
    box-shadow: 0 10px 22px rgba(7, 94, 86, .18) !important;
}

.btn-primary:hover,
.btn-gradient:hover,
.layui-btn-pink:hover,
.payButton:hover {
    filter: brightness(1.02);
    transform: translateY(-1px);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-ghost {
    color: var(--uipro-primary) !important;
    border: 1px solid var(--uipro-border) !important;
    background: #fff !important;
}

.navbar-acg {
    padding: 12px 0;
    border-bottom: 1px solid var(--uipro-border-soft);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
}

.navbar-acg .navbar-brand span {
    color: var(--uipro-heading) !important;
}

.navbar-acg .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .6rem .9rem !important;
    border-radius: 999px;
    color: #334155;
    font-weight: 700;
    transition: background-color .2s ease, color .2s ease;
}

.navbar-acg .nav-link:hover,
.navbar-acg .nav-link.active {
    color: var(--uipro-primary);
    background: var(--uipro-primary-soft);
}

.brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(5, 150, 105, .18);
}

.search-input .input-group {
    min-height: 44px;
}

.search-input .input-group-text,
.search-input .form-control {
    height: 44px;
    border-color: var(--uipro-border-soft);
    background: var(--uipro-surface);
}

.search-input .input-group-text {
    color: var(--uipro-primary);
}

.shop-hero {
    display: block;
    margin-bottom: 10px;
}

.shop-hero-copy,
.shop-trust-panel,
.panel,
.acg-card,
.auth-card,
.fly-user-main > .fly-panel,
.fly-user-main > .layui-nav {
    border: 1px solid var(--uipro-border-soft);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--uipro-shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shop-hero-copy {
    position: relative;
    overflow: hidden;
    border-radius: var(--uipro-radius-lg);
    padding: clamp(20px, 3.2vw, 30px);
}

.shop-hero-copy::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--uipro-primary), var(--uipro-secondary));
}

.hero-kicker,
.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--uipro-primary-strong);
    background: var(--uipro-primary-soft);
    font-weight: 800;
}

.shop-hero h1 {
    max-width: 860px;
    margin: 14px 0 8px;
    color: var(--uipro-heading);
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    font-weight: 800;
}

.shop-hero h1 strong {
    color: var(--uipro-primary);
}

.shop-hero p {
    max-width: 820px;
    margin: 0;
    color: #334155;
    font-size: 1rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hero-actions .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--uipro-radius);
    padding: 0 18px;
    font-weight: 800;
}

.hero-actions .btn-primary {
    min-width: 172px;
    box-shadow: 0 14px 28px rgba(7, 94, 86, .2) !important;
}

.conversion-trust-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius-lg);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--uipro-shadow-sm);
    overflow-x: auto;
    scrollbar-width: thin;
}

.conversion-trust-strip > div {
    flex: 1 0 0;
    min-width: 0;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-right: 1px solid var(--uipro-border-soft);
    border-radius: 0;
    color: var(--uipro-heading);
    background: transparent;
    font-weight: 800;
    white-space: nowrap;
}

.conversion-trust-strip > div:last-child {
    border-right: 0;
}

.conversion-trust-strip i {
    color: var(--uipro-primary);
    font-size: .96rem;
}

.positive-notice-panel .panel-body {
    padding: 16px;
}

.positive-notice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.positive-notice-grid > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 14px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: #F8FAFC;
}

.positive-notice-grid i {
    grid-row: span 2;
    color: var(--uipro-primary);
    margin-top: 2px;
}

.positive-notice-grid strong {
    color: var(--uipro-heading);
    font-weight: 900;
}

.positive-notice-grid span {
    color: var(--uipro-muted);
    font-size: .92rem;
}

.purchase-notes-section {
    margin: 10px 0 4px;
}

.b2b-process-section {
    margin: 14px 0 0;
}

.b2b-process-section details {
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius-lg);
    background: #fff;
    box-shadow: var(--uipro-shadow-sm);
    overflow: hidden;
}

.b2b-process-section summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    color: var(--uipro-heading);
    font-weight: 900;
    cursor: pointer;
}

.b2b-process-section .positive-notice-grid {
    padding: 16px;
    border-top: 1px solid var(--uipro-border-soft);
}

.purchase-notes-section details {
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius-lg);
    background: #fff;
    box-shadow: var(--uipro-shadow-sm);
    overflow: hidden;
}

.purchase-notes-section summary {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    color: var(--uipro-heading);
    font-weight: 900;
    cursor: pointer;
}

.purchase-notes-content {
    padding: 16px 18px;
    border-top: 1px solid var(--uipro-border-soft);
    color: #334155;
    line-height: 1.7;
}

.shop-trust-panel {
    border-radius: var(--uipro-radius-lg);
    padding: 16px;
}

.trust-grid {
    display: grid;
    gap: 12px;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: var(--uipro-surface-2);
}

.trust-item i {
    color: var(--uipro-primary);
    font-size: 1.05rem;
    margin-top: 2px;
}

.trust-item strong {
    display: block;
    color: var(--uipro-heading);
    font-weight: 800;
}

.trust-item span {
    display: block;
    color: var(--uipro-muted);
    font-size: .9rem;
}

.panel {
    border-radius: var(--uipro-radius-lg);
    overflow: hidden;
}

.panel + .panel {
    margin-top: 18px;
}

.panel-header {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid var(--uipro-border-soft);
    box-shadow: none;
    background: linear-gradient(180deg, #fff, #F8FAFC);
}

.panel-header .icon {
    width: 34px;
    height: 34px;
    color: var(--uipro-primary);
    background: var(--uipro-primary-soft);
}

.panel-title {
    color: var(--uipro-heading);
    font-size: 1.08rem;
    font-weight: 800;
}

.panel-body {
    padding: 18px;
    color: #1E293B;
}

.chip-list,
.sku-list,
.pay-list {
    gap: 10px;
}

.chip,
.sku {
    min-height: 40px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 999px;
    color: #334155;
    background: #fff;
    box-shadow: none;
    font-weight: 800;
}

.chip.is-primary,
.sku.is-primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-secondary));
    box-shadow: 0 10px 20px rgba(5, 150, 105, .18);
}

.chip .chip-icon {
    border: 1px solid rgba(255, 255, 255, .7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.chip .chip-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.acg-card {
    border-radius: var(--uipro-radius-lg);
    box-shadow: var(--uipro-shadow-sm);
    overflow: hidden;
    border: 1px solid var(--uipro-border-soft);
}

.acg-card.soldout {
    filter: none;
    background: #F8FAFC;
    border-color: #E5E7EB;
    box-shadow: none;
}

.acg-card.soldout:hover {
    transform: none;
    box-shadow: none;
}

.item-list > [class*="col-"] {
    display: flex;
}

.item-list > [class*="col-"] .acg-card {
    width: 100%;
}

.acg-thumb {
    height: 112px;
    background-color: #F1F5F9;
}

.commerce-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px;
    background: linear-gradient(135deg, #F8FAFC, #FFFFFF) !important;
}

.thumb-badge {
    display: none !important;
}

.thumb-badge-muted {
    display: none !important;
}

.thumb-logo {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    overflow: hidden;
    flex: 0 0 auto;
}

.thumb-logo svg {
    width: 34px;
    height: 34px;
    display: block;
}

.thumb-logo-gemini {
    background: #FFFFFF;
    color: inherit;
}

.thumb-logo-chatgpt {
    background: #FFFFFF;
    color: inherit;
}

.thumb-logo-claude {
    background: #FFFFFF;
    color: inherit;
}

.thumb-logo-ai {
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-secondary));
    color: #fff;
}

.thumb-logo-ai svg path {
    fill: currentColor;
}

.acg-card.soldout .commerce-thumb {
    background: linear-gradient(135deg, #F8FAFC, #FFFFFF 48%, #F1F5F9) !important;
}

.acg-card.soldout .thumb-badge {
    color: #FFFFFF;
    background: #9CA3AF;
    box-shadow: none;
}

.acg-card.soldout .thumb-logo {
    background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: none;
    opacity: 1;
}

.acg-card.soldout .thumb-logo svg path {
    opacity: 1;
}

.acg-card.soldout .commerce-thumb strong,
.acg-card.soldout .goods-title,
.acg-card.soldout .commerce-brand-name {
    color: #475569;
}

.acg-card.soldout .commerce-thumb > span:not(.thumb-badge),
.acg-card.soldout .stat-bottom,
.acg-card.soldout .delivery-note {
    color: #64748B;
}

.commerce-thumb strong {
    max-width: 100%;
    color: var(--uipro-heading);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.1;
}

.commerce-thumb > span:not(.thumb-badge) {
    color: var(--uipro-muted);
    font-weight: 800;
}

.commerce-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.commerce-brand-name {
    color: var(--uipro-heading);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.acg-card > .p-3 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 16px !important;
}

.acg-card > .p-3 .stat-row {
    margin-top: auto;
}

.goods-title {
    min-height: 2.6em;
    color: var(--uipro-text);
    font-size: 1.02rem;
    font-weight: 800;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.sold-proof,
.tags,
.card-original-price,
.compare-price,
.card-urgency-row,
.card-countdown {
    display: none !important;
}

.price {
    color: var(--uipro-primary);
    font-family: 'Rubik', sans-serif;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 900;
}

.price .unit {
    color: var(--uipro-primary);
    font-size: .92rem;
}

.price-suffix {
    color: var(--uipro-muted);
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .82rem;
    font-weight: 800;
}

.acg-card.soldout .price,
.acg-card.soldout .price .unit {
    color: #64748B;
}

.stat-bottom {
    color: var(--uipro-muted);
    font-size: .92rem;
}

.stock-left {
    color: var(--uipro-accent-strong);
    font-weight: 900;
}

.acg-card.soldout .stock-left {
    color: #64748B;
}

.card-restock-note {
    display: none !important;
}

.commerce-card-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.card-action-row {
    min-height: 44px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 10px;
    padding-top: 4px;
    border-top: 0;
}

.delivery-note {
    color: var(--uipro-primary-strong);
    font-size: .88rem;
    font-weight: 800;
}

.buy-chip {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--uipro-radius);
    color: #fff;
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-accent));
    box-shadow: 0 10px 22px rgba(7, 94, 86, .18);
    font-weight: 800;
}

.acg-card.soldout .buy-chip,
.buy-chip.is-disabled {
    color: #6B7280;
    background: #F3F4F6;
    border: 1px dashed #D1D5DB;
    box-shadow: none;
}

.stock-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 900;
    white-space: nowrap;
}

.stock-state.is-in {
    color: var(--uipro-primary-strong);
    background: var(--uipro-primary-soft);
}

.stock-state.is-out {
    color: #64748B;
    background: #F1F5F9;
}

.acg-card.soldout .badge-soft,
.acg-card.soldout .badge-soft-success,
.acg-card.soldout .badge-soft-warning,
.acg-card.soldout .badge-soft-primary,
.acg-card.soldout .badge-soft-info,
.acg-card.soldout .badge-soft-danger {
    color: #64748B;
    background: #F1F5F9;
    border-color: #E5E7EB;
    box-shadow: none;
}

.soldout-ribbon {
    display: none !important;
}

.badge-soft {
    padding: .28rem .58rem;
    border-radius: 999px;
    font-weight: 800;
}

.badge-soft-primary {
    color: #1D4ED8;
    background: #DBEAFE;
    border-color: #BFDBFE;
}

.badge-soft-success {
    color: var(--uipro-primary-strong);
    background: var(--uipro-primary-soft);
    border-color: var(--uipro-border);
}

.badge-soft-danger {
    color: var(--uipro-danger);
    background: #FEE2E2;
    border-color: #FECACA;
}

.badge-soft-info {
    color: #0369A1;
    background: #E0F2FE;
    border-color: #BAE6FD;
}

.badge-soft-warning,
.sku .badge-money,
.sku .badge-moeny {
    color: #9A3412;
    background: var(--uipro-accent-soft);
    border-color: #FDBA74;
    box-shadow: none;
}

.soldout-ribbon {
    background: linear-gradient(90deg, #94A3B8, #64748B);
    box-shadow: 0 10px 22px rgba(100, 116, 139, .25);
}

.product-title {
    color: var(--uipro-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.12;
    font-weight: 800;
}

.product-rating-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 8px 0 12px;
    color: var(--uipro-muted);
    font-weight: 800;
}

.product-rating-line .stars,
.review-card span {
    color: #F59E0B;
    letter-spacing: 0;
}

.product-rating-line strong {
    color: var(--uipro-heading);
}

.product-summary {
    color: var(--uipro-muted);
    line-height: 1.65;
}

.product-purchase-card {
    height: 100%;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius-lg);
    background: var(--uipro-surface);
    box-shadow: var(--uipro-shadow-sm);
}

.product-conversion-panel .panel-body {
    padding: 20px;
}

.product-infographic {
    position: relative;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius-lg);
    background:
        radial-gradient(circle at 85% 10%, rgba(234, 88, 12, .20), transparent 30%),
        radial-gradient(circle at 12% 90%, rgba(16, 185, 129, .20), transparent 32%),
        linear-gradient(135deg, #FFFFFF, #F0FDF4 54%, #FFF7ED);
    box-shadow: var(--uipro-shadow);
    overflow: hidden;
}

.product-infographic::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(5, 150, 105, .22);
    border-radius: 18px;
    pointer-events: none;
}

.product-media-card {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius-lg);
    background: #fff;
    box-shadow: var(--uipro-shadow);
    overflow: visible;
}

.product-media-card .product-cover {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
    background: #F8FAFC;
}

.product-conversion-panel .row {
    align-items: flex-start;
}

.product-conversion-panel .product-media-card {
    align-self: flex-start;
    height: auto !important;
}

.product-media-card.has-brand-visual {
    min-height: 460px;
    justify-content: center;
    background:
        linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 46%, #ECFDF5 100%);
}

.product-cover[hidden] {
    display: none !important;
}

.product-brand-visual {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    min-height: 420px;
    padding: clamp(18px, 4vw, 34px);
    border: 1px solid var(--uipro-border-soft);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .96)),
        linear-gradient(135deg, rgba(5, 150, 105, .08), rgba(14, 165, 233, .08));
}

.product-brand-visual-inner {
    width: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 22px;
    text-align: center;
}

.product-brand-mark {
    width: 104px;
    height: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .10);
}

.product-brand-mark svg {
    width: 72px;
    height: 72px;
    display: block;
}

.product-brand-kicker,
.product-brand-visual strong,
.product-brand-visual p {
    display: block;
}

.product-brand-kicker {
    margin-bottom: 10px;
    color: var(--uipro-primary-strong);
    font-size: .88rem;
    font-weight: 900;
}

.product-brand-visual strong {
    color: var(--uipro-heading);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    font-weight: 900;
}

.product-brand-visual p {
    margin: 12px 0 0;
    color: var(--uipro-muted);
    font-weight: 800;
}

.product-media-overlay {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 18px;
    background: #F8FAFC;
    box-shadow: none;
    backdrop-filter: none;
}

.product-media-overlay > div {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 12px;
    color: var(--uipro-primary-strong);
    background: var(--uipro-primary-soft);
    font-weight: 900;
}

.product-media-overlay i {
    color: var(--uipro-primary);
}

.infographic-brand,
.infographic-foot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--uipro-heading);
    font-weight: 900;
}

.infographic-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(5, 150, 105, .18);
}

.infographic-title {
    position: relative;
    color: var(--uipro-heading);
    font-family: 'Rubik', sans-serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
    font-weight: 900;
}

.infographic-price {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--uipro-accent);
    font-family: 'Rubik', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 900;
}

.infographic-price span,
.saving-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: #fff;
    background: var(--uipro-accent);
    font-family: 'Nunito Sans', sans-serif;
    font-size: .86rem;
    font-weight: 900;
}

.infographic-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.infographic-grid > div {
    padding: 14px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.infographic-grid i {
    color: var(--uipro-primary);
    font-size: 1.2rem;
}

.infographic-grid strong,
.infographic-grid span {
    display: block;
}

.infographic-grid strong {
    margin-top: 8px;
    color: var(--uipro-heading);
    font-weight: 900;
}

.infographic-grid span {
    color: var(--uipro-muted);
    font-size: .9rem;
}

.infographic-foot {
    flex-wrap: wrap;
}

.infographic-foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--uipro-primary-strong);
}

.product-trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 18px;
}

.product-price-row .price {
    font-size: clamp(2.3rem, 5vw, 3rem);
    font-weight: 900;
}

.compare-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-bottom: 6px;
}

.stock-urgency {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--uipro-radius);
    font-weight: 900;
}

.stock-urgency {
    margin: -2px 0 14px;
    color: var(--uipro-primary-strong);
    background: var(--uipro-primary-soft);
    border: 1px solid rgba(5, 150, 105, .18);
}

.stock-urgency.is-out {
    color: #6B7280;
    background: #F3F4F6;
    border: 1px dashed #D1D5DB;
}

.key-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: #F8FAFC;
}

.key-benefits div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1E293B;
    font-weight: 900;
}

.key-benefits i {
    color: var(--uipro-primary);
}

.product-attributes-wrap {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: #F8FAFC;
}

.product-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.product-section-heading strong {
    color: var(--uipro-heading);
    font-size: 1rem;
    font-weight: 900;
}

.product-section-heading span {
    color: var(--uipro-muted);
    font-size: .84rem;
    font-weight: 800;
}

.product-attributes-table {
    display: grid;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.attribute-row {
    display: grid;
    grid-template-columns: minmax(112px, .9fr) minmax(0, 1.6fr);
    min-height: 44px;
    border-bottom: 1px solid var(--uipro-border-soft);
}

.attribute-row:last-child {
    border-bottom: 0;
}

.attribute-row span,
.attribute-row strong {
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

.attribute-row span {
    color: #64748B;
    background: #F8FAFC;
    border-right: 1px solid var(--uipro-border-soft);
    font-weight: 800;
}

.attribute-row strong {
    color: var(--uipro-heading);
    font-weight: 900;
}

.product-trust-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    border-radius: var(--uipro-radius);
    color: var(--uipro-primary-strong);
    background: var(--uipro-primary-soft);
    font-weight: 800;
    text-align: center;
}

.acg-cover {
    border-radius: var(--uipro-radius-lg);
    border: 1px solid var(--uipro-border-soft);
    box-shadow: var(--uipro-shadow-sm);
}

.item-cover {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: contain;
    border-radius: inherit;
}

.vstack label {
    color: #334155;
    font-weight: 800;
}

.vstack .form-control,
.optional-card {
    min-height: 46px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 12px;
    color: var(--uipro-text);
    background: #fff;
}

.input-group.qty-group {
    width: 172px;
    min-height: 48px;
    gap: 10px;
    border: 1px solid var(--uipro-border-soft);
    background: #fff;
    box-shadow: none;
}

.input-group.qty-group > button {
    width: 36px;
    height: 34px;
    background: var(--uipro-primary);
    box-shadow: none;
}

.buy-now-button {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--uipro-primary-strong), var(--uipro-secondary));
    box-shadow: 0 18px 36px rgba(5, 150, 105, .22);
    font-size: 1.15rem;
    font-weight: 900;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.buy-now-button strong {
    font-family: 'Rubik', sans-serif;
    font-size: 1.28rem;
}

.buy-now-button:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, .22);
}

.purchase-trust-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    color: var(--uipro-muted);
    font-size: .88rem;
    font-weight: 800;
}

.purchase-trust-line i {
    color: var(--uipro-primary);
}

.input-group.qty-group > input[type="number"] {
    color: var(--uipro-heading);
}

.cash-pay {
    border: 1px solid var(--uipro-border);
    background: linear-gradient(180deg, #fff, #F0FDF4);
    box-shadow: var(--uipro-shadow-sm);
}

.purchase-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
}

.purchase-modal[hidden] {
    display: none !important;
}

.purchase-modal.is-open {
    display: block;
}

body.purchase-modal-open {
    overflow: hidden;
}

.purchase-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.purchase-modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100dvh - 36px);
    overflow: auto;
    transform: translate(-50%, -50%);
    border-radius: var(--uipro-radius-lg);
    border: 1px solid var(--uipro-border-soft);
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
}

.purchase-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--uipro-border-soft);
}

.purchase-modal-header strong,
.purchase-modal-header span {
    display: block;
}

.purchase-modal-header strong {
    color: var(--uipro-heading);
    font-size: 1.25rem;
    font-weight: 900;
}

.purchase-modal-header span {
    color: var(--uipro-muted);
    font-size: .92rem;
}

.purchase-modal-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 999px;
    background: #fff;
    color: var(--uipro-heading);
}

.purchase-modal-body {
    padding: 18px;
}

.deferred-fields {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.captcha-group {
    width: min(320px, 100%);
    min-height: 48px;
    align-items: stretch;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 12px;
    background: #F8FAFC;
    overflow: hidden;
}

.captcha-group .form-control {
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.captcha-group .input-group-append {
    display: flex;
}

.captcha-img {
    width: 112px;
    height: 48px !important;
    min-height: 48px;
    padding: 4px 8px !important;
    border: 0 !important;
    border-left: 1px solid var(--uipro-border-soft) !important;
    border-radius: 0 12px 12px 0 !important;
    background: #F1F5F9 !important;
    object-fit: cover;
    filter: grayscale(.2) saturate(.7) contrast(.98);
    cursor: pointer;
}

.cash-pay .form-label {
    color: var(--uipro-heading);
}

.cash-pay .form-label i {
    background: var(--uipro-primary);
    box-shadow: none;
}

.pay-list .pay {
    min-height: 44px;
    border: 1px solid var(--uipro-border-soft);
    background: #fff;
    box-shadow: none;
}

.pay-list .pay:hover,
.pay-list .pay.is-primary,
.pay-list .pay.active,
.pay-list .pay.selected {
    color: #fff;
    background: var(--uipro-primary);
    border-color: var(--uipro-primary);
}

.pay-list .pay:hover span,
.pay-list .pay.is-primary span,
.pay-list .pay.active span,
.pay-list .pay.selected span {
    color: #fff;
}

.modal-pay-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--uipro-primary-strong), var(--uipro-secondary));
    box-shadow: 0 16px 32px rgba(5, 150, 105, .22);
    font-size: 1.05rem;
    font-weight: 900;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.modal-pay-submit strong {
    font-family: 'Rubik', sans-serif;
    font-size: 1.16rem;
}

.modal-pay-submit:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.modal-pay-submit:disabled,
.modal-pay-submit.is-loading {
    opacity: .72;
    cursor: wait;
}

.item-detail .panel-body {
    font-size: 1rem;
    line-height: 1.72;
}

.detail-b2b-notes {
    max-width: 880px;
}

.detail-b2b-notes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.detail-b2b-notes li {
    position: relative;
    padding: 12px 14px 12px 36px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 12px;
    color: #334155;
    background: #fff;
    font-weight: 700;
}

.detail-b2b-notes li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--uipro-primary);
}

.detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-tab {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: 999px;
    color: #334155;
    background: #fff;
    font-weight: 900;
}

.detail-tab.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-secondary));
}

.detail-tab-panel {
    display: none;
}

.detail-tab-panel.is-active {
    display: block;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.review-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: #fff;
    box-shadow: var(--uipro-shadow-sm);
}

.review-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-secondary));
    font-weight: 900;
}

.review-user {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.review-card strong {
    color: var(--uipro-heading);
    font-weight: 900;
}

.review-user small {
    color: var(--uipro-muted);
    font-size: .82rem;
}

.review-stars {
    margin-left: auto;
    color: #F59E0B;
    font-size: .92rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.review-card p {
    margin: 0;
    color: #334155;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-list details {
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: #fff;
    box-shadow: var(--uipro-shadow-sm);
    overflow: hidden;
}

.faq-list summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    color: var(--uipro-heading);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--uipro-primary);
    background: var(--uipro-primary-soft);
    font-weight: 900;
}

.faq-list details[open] summary::after {
    content: "-";
}

.faq-list p {
    margin: 0;
    padding: 0 16px 16px;
    color: #334155;
    border-top: 1px solid var(--uipro-border-soft);
    padding-top: 14px;
}

.query-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.query-form-row .query-input-wrap {
    flex: 1 1 320px;
    max-width: 520px;
}

.query-form-row .btn {
    min-height: 46px;
    border-radius: 999px;
    font-weight: 800;
}

.order-item,
.card-section,
.goods-section {
    border-color: var(--uipro-border-soft) !important;
    border-radius: var(--uipro-radius-lg) !important;
    background: #fff !important;
    box-shadow: var(--uipro-shadow-sm) !important;
}

.status-badge.status-paid,
.shipment-badge.shipment-paid {
    color: var(--uipro-primary-strong) !important;
    background: var(--uipro-primary-soft) !important;
}

.status-badge.status-pending,
.shipment-badge.shipment-waiting {
    color: #9A3412 !important;
    background: var(--uipro-accent-soft) !important;
}

footer {
    color: var(--uipro-muted);
    text-align: center;
    padding: 18px;
}

.auth-wrapper {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 14% 12%, rgba(16, 185, 129, .14), transparent 34%),
        linear-gradient(180deg, rgba(236, 253, 245, .96), rgba(248, 250, 252, .98)) !important;
}

.auth-wrapper::before,
.auth-wrapper::after {
    display: none !important;
}

.auth-card {
    max-width: 460px;
    padding: 30px;
    color: var(--uipro-text);
    border-radius: var(--uipro-radius-lg);
}

.auth-title {
    margin: 0 0 8px;
    color: var(--uipro-heading);
    font-size: 1.8rem;
    text-align: center;
    font-weight: 800;
}

.auth-subtitle {
    color: var(--uipro-muted);
    text-align: center;
}

.brand-icon {
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(5, 150, 105, .18);
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    min-height: 52px;
    color: var(--uipro-text);
    background: #fff;
    border: 1px solid var(--uipro-border-soft);
}

.form-floating > label {
    color: var(--uipro-muted);
}

.text-link {
    color: var(--uipro-primary);
    font-weight: 800;
}

.form-check {
    color: #334155;
}

.form-check input[type="checkbox"] {
    border-color: var(--uipro-border);
}

.form-check input[type="checkbox"]:checked {
    background: var(--uipro-primary);
    border-color: var(--uipro-primary);
    box-shadow: 0 2px 8px rgba(5, 150, 105, .22);
}

.image-code {
    height: 52px;
    border-color: var(--uipro-border);
    opacity: 1;
}

.bg-content {
    background: rgba(236, 253, 245, .88) !important;
}

.fly-header {
    border-bottom: 1px solid var(--uipro-border-soft);
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}

.fly-logo .user-logo-title,
.user-level,
.content-header {
    color: var(--uipro-heading) !important;
}

.fly-mobile-shop-link {
    background: var(--uipro-primary) !important;
    box-shadow: 0 10px 22px rgba(5, 150, 105, .22) !important;
}

.fly-user-main > .layui-nav,
.fly-user-main > .fly-panel {
    border-radius: var(--uipro-radius-lg);
}

.layui-nav .layui-nav-item a {
    color: #334155 !important;
    font-weight: 800;
}

.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this > a:hover,
.layui-nav-tree > .layui-nav-item > a:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--uipro-primary), var(--uipro-secondary)) !important;
}

.content-header {
    height: auto;
    min-height: 44px;
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--uipro-border-soft);
    font-weight: 800;
}

.elem-quote,
.elem-tips {
    color: var(--uipro-heading);
    border-left-color: var(--uipro-primary);
    background: var(--uipro-primary-soft);
}

.card-data .layui-card,
.layui-table,
.card-views {
    border: 1px solid var(--uipro-border-soft);
    border-radius: var(--uipro-radius);
    background: #fff !important;
    box-shadow: var(--uipro-shadow-sm);
}

.card-data .layui-card-header {
    color: #334155;
    font-weight: 800;
}

.card-data .layui-card-body {
    color: var(--uipro-primary-strong);
    font-family: 'Rubik', sans-serif;
}

.form-header {
    color: var(--uipro-heading);
    font-weight: 800;
}

.more-table td {
    color: #334155;
}

.acg-badge-light-success,
.layui-bg-green {
    color: var(--uipro-primary-strong) !important;
    background: var(--uipro-primary-soft) !important;
}

.page-item.active .page-link {
    background-color: var(--uipro-primary);
    border-color: var(--uipro-primary);
}

@media (hover: hover) and (pointer: fine) {
    .acg-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--uipro-shadow-hover);
    }

    .chip:hover,
    .sku:hover,
    .pay:hover {
        transform: translateY(-1px);
    }
}

@media (max-width: 991.98px) {
    .positive-notice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-infographic,
    .product-media-card,
    .product-media-card .product-cover {
        min-height: 420px;
    }

    .product-media-card,
    .product-media-card .product-cover {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 14px;
    }

    .navbar-acg .container {
        position: relative;
    }

    .user-login-box {
        right: 58px;
    }

    .user-login-box .btn {
        min-height: 34px;
        padding: .25rem .55rem;
    }

    .shop-hero-copy,
    .shop-trust-panel,
    .panel-body {
        padding: 16px;
    }

    .shop-hero h1 {
        font-size: 1.8rem;
    }

    .shop-hero p {
        line-height: 1.5;
    }

    .positive-notice-grid,
    .infographic-grid,
    .key-benefits {
        grid-template-columns: 1fr;
    }

    .conversion-trust-strip > div {
        flex: 0 0 auto;
        min-width: 112px;
        justify-content: flex-start;
        padding: 0 12px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .trust-grid,
    .product-trust-row {
        grid-template-columns: 1fr;
    }

    .acg-thumb {
        height: 156px;
    }

    .item-cover {
        min-height: 240px;
    }

    .product-media-card,
    .product-media-card .product-cover {
        min-height: 320px;
    }

    .product-media-card,
    .product-media-card .product-cover {
        min-height: 0;
    }

    .product-media-card.has-brand-visual,
    .product-brand-visual {
        min-height: 320px;
    }

    .product-brand-mark {
        width: 82px;
        height: 82px;
        border-radius: 20px;
    }

    .product-brand-mark svg {
        width: 58px;
        height: 58px;
    }

    .product-media-overlay {
        left: auto;
        right: auto;
        bottom: auto;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }

    .product-media-overlay > div {
        min-height: 36px;
        padding: 0 8px;
        font-size: .84rem;
    }

    .product-infographic {
        min-height: auto;
        padding: 20px;
    }

    .product-infographic::before {
        inset: 10px;
    }

    .infographic-title {
        font-size: 2rem;
    }

    .infographic-price {
        font-size: 2.1rem;
    }

    .product-price-row .price {
        font-size: 2.4rem;
    }

    .purchase-modal-dialog {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 88dvh;
        border-radius: 20px 20px 0 0;
        transform: none;
    }

    .query-form-row .query-input-wrap,
    .query-form-row .btn {
        flex-basis: 100%;
        max-width: none;
        width: 100%;
    }

    .auth-card {
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}