/* Body Beauty site-wide visual system — intentionally loaded after page-level CSS. */

:root {
    --primary: #176b87!important;
    --primary-color: #176b87!important;
    --secondary: #20a39e!important;
    --secondary-color: #20a39e!important;
    --accent: #ff7b67!important;
    --dark: #17324d!important;
    --dark-color: #17324d!important;
    --color-primary: #176b87!important;
    --color-secondary: #20a39e!important;
    --color-text-dark: #17324d!important;
    --gradient-primary: linear-gradient(120deg, #176b87, #20a39e)!important;
    --theme-ink: #17324d;
    --theme-blue: #176b87;
    --theme-teal: #20a39e;
    --theme-coral: #ff7b67;
    --theme-sun: #ffc857;
    --theme-cream: #fffaf2;
    --theme-surface: #ffffff;
    --theme-soft: #edf8f7;
    --theme-line: #dbe9e8;
    --theme-muted: #667b86;
    --theme-shadow: 0 18px 50px rgba(23, 107, 135, .11);
}


/* 2026 polish layer: clearer hierarchy, richer surfaces and calmer motion. */

.topbar {
    position: relative;
    z-index: 1001;
    background: var(--theme-ink);
    color: #eaf5f5;
    font-size: .76rem
}

.topbar-inner {
    width: calc(100% - 40px);
    max-width: 1180px;
    min-height: 34px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.topbar-inner span,
.topbar-highlights {
    display: flex;
    align-items: center;
    gap: .45rem
}

.topbar-highlights {
    gap: 1.25rem;
    color: #bed5db
}

.topbar i {
    color: var(--theme-sun)
}

.navbar.is-scrolled {
    box-shadow: 0 14px 36px rgba(23, 50, 77, .12)!important;
    background: rgba(255, 255, 255, .96)!important
}

.navbar-menu a.active {
    color: var(--theme-blue)!important;
    background: #e5f5f3!important;
    box-shadow: inset 0 -2px 0 var(--theme-teal)
}

.site-canvas {
    position: relative;
    isolation: isolate
}

.site-canvas>:not(.site-ambient) {
    position: relative;
    z-index: 1
}

.site-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: .2
}

.ambient-orb-one {
    width: 420px;
    height: 420px;
    top: 8%;
    right: -260px;
    background: #86d9d1
}

.ambient-orb-two {
    width: 360px;
    height: 360px;
    top: 48%;
    left: -250px;
    background: #ffc7ad
}

.products-page-header {
    background: linear-gradient(125deg, #153f58 0%, var(--theme-blue) 48%, var(--theme-teal) 100%)!important;
    position: relative;
    overflow: hidden
}

.products-page-header::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    left: -80px;
    top: -190px;
    border: 65px solid rgba(255, 255, 255, .07);
    border-radius: 50%
}

.product-card-modern,
.product-card,
.blog-card,
.post-card {
    border: 1px solid rgba(23, 107, 135, .10)!important;
    border-radius: 20px!important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease!important
}

.product-card-modern:hover {
    transform: translateY(-7px);
    border-color: rgba(32, 163, 158, .36)!important;
    box-shadow: 0 22px 55px rgba(23, 50, 77, .14)!important
}

.product-card-image {
    background: linear-gradient(145deg, #f8fcfb, #eaf5f3)!important
}

.product-card-image img {
    transition: transform .45s cubic-bezier(.2, .7, .2, 1)!important
}

.product-card-modern:hover .product-card-image img {
    transform: scale(1.045)
}

.filter-card,
.products-filters-bar,
.sidebar-widget {
    border: 1px solid var(--theme-line)!important;
    border-radius: 18px!important;
    box-shadow: 0 12px 35px rgba(23, 50, 77, .06)!important
}

.alert {
    border: 0!important;
    border-radius: 14px!important;
    box-shadow: 0 12px 30px rgba(23, 50, 77, .08)
}

@media (max-width:768px) {
    .topbar-highlights {
        display: none
    }
    .topbar-inner {
        width: calc(100% - 24px);
        justify-content: center;
        min-height: 31px;
        font-size: .69rem
    }
    .navbar-menu {
        border-top: 1px solid var(--theme-line)!important;
        box-shadow: 0 20px 35px rgba(23, 50, 77, .14)!important
    }
    .navbar-menu a {
        min-height: 46px
    }
}

@media (max-width:480px) {
    .topbar-inner {
        width: calc(100% - 18px)
    }
    .product-card-modern,
    .product-card,
    .blog-card,
    .post-card {
        border-radius: 16px!important
    }
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--theme-cream)!important;
    color: var(--theme-ink)!important;
    overflow-x: hidden
}

body p {
    color: var(--theme-muted)
}

body ::selection {
    background: #bdebe7;
    color: var(--theme-ink)
}

.container {
    max-width: 1180px!important;
    width: calc(100% - 40px)!important;
    margin-inline: auto!important;
    padding-inline: 0!important
}


/* Shared navigation */

.navbar {
    height: 76px!important;
    padding: .65rem 0!important;
    background: rgba(255, 250, 242, .94)!important;
    border-bottom: 1px solid var(--theme-line)!important;
    box-shadow: 0 8px 28px rgba(23, 50, 77, .06)!important;
    backdrop-filter: blur(16px)
}

.navbar-container {
    width: calc(100% - 40px)!important;
    max-width: 1180px!important;
    margin: auto!important;
    padding: 0!important
}

.navbar-brand {
    color: var(--theme-ink)!important;
    font-size: 1.35rem!important;
    gap: .7rem!important;
    white-space: nowrap;
    flex-shrink: 0
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--theme-coral), var(--theme-sun));
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 7px 18px rgba(255, 123, 103, .25)
}

.navbar-menu {
    gap: .35rem!important
}

.navbar-menu a {
    color: var(--theme-ink)!important;
    border-radius: 11px!important;
    font-size: .84rem!important;
    padding: .65rem .8rem!important;
    width: 100% !important;
}

.navbar-menu a:hover {
    color: var(--theme-blue)!important;
    background: #e5f5f3!important
}

.navbar-menu a i {
    color: var(--theme-teal)!important
}

.cart-badge a {
    background: var(--theme-blue)!important;
    color: #fff!important
}

.cart-badge a i {
    color: #fff!important
}

.cart-count {
    background: var(--theme-coral)!important
}

.mobile-menu-toggle {
    color: var(--theme-blue)!important;
    background: var(--theme-soft)!important;
    border-radius: 10px!important
}

.user-menu-toggle {
    background: #e5f5f3!important;
    color: var(--theme-ink)!important
}

.user-avatar {
    background: linear-gradient(135deg, var(--theme-blue), var(--theme-teal))!important
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-dropdown {
    border: 1px solid var(--theme-line)!important;
    border-radius: 16px!important;
    box-shadow: var(--theme-shadow)!important;
    overflow: hidden
}

.user-dropdown a:hover {
    background: var(--theme-soft)!important
}


/* Page framing and headers */

.main-content {
    min-height: 60vh
}

.breadcrumb-wrapper,
.breadcrumb {
    background: #edf8f7!important;
    border: 0!important;
    padding: 1rem 0!important
}

.breadcrumb-nav {
    width: 100%;
    max-width: 1180px;
    min-height: 48px!important;
    padding: 10px 16px!important;
    border: 1px solid #d5e7e3!important;
    border-radius: 12px!important;
    background: #f8fcfb!important;
    box-sizing: border-box
}

.breadcrumb-nav a {
    color: var(--theme-blue)!important
}

.breadcrumb-nav span {
    color: var(--theme-ink)!important
}

.breadcrumb-nav i {
    color: var(--theme-teal)!important
}

.page-header-unified,
.page-header,
.products-header,
.blog-header {
    background: linear-gradient(125deg, #176b87 0%, #20a39e 68%, #6bc8b9 100%)!important;
    box-shadow: none!important;
    position: relative;
    overflow: hidden
}

.page-header-unified:after,
.page-header:after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 200, 87, .18);
    left: -70px;
    top: -130px
}

.page-header-text h1,
.page-header-text p,
.page-header h1 {
    color: #fff!important
}

.stat-badge {
    background: rgba(255, 255, 255, .16)!important;
    border: 1px solid rgba(255, 255, 255, .28)!important;
    border-radius: 18px!important
}

.back-button {
    color: var(--theme-blue)!important;
    border-color: var(--theme-blue)!important;
    background: #fff!important;
    border-radius: 12px!important
}

.back-button:hover {
    background: var(--theme-blue)!important;
    color: #fff!important;
    box-shadow: 0 10px 25px rgba(23, 107, 135, .2)!important
}


/* Universal surfaces */

.card,
.dashboard-card,
.order-card,
.plan-card,
.detail-section,
.order-detail-container,
.summary-card,
.cart-item,
.cart-items-container,
.product-card,
.blog-card,
.post-card,
.sidebar-widget,
.profile-card,
.form-card,
.payment-card,
.exercise-card,
.notification,
.empty-state,
.upload-card,
.plan-container,
.workout-day,
.info-card,
.filter-sidebar,
.products-sidebar {
    background: var(--theme-surface)!important;
    box-shadow: 0 9px 30px rgba(23, 107, 135, .07)!important;
}

.card:hover,
.order-card:hover,
.plan-card:hover,
.product-card:hover,
.blog-card:hover,
.post-card:hover,
.exercise-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow)!important;
    border-color: #afdeda!important
}

.section-title,
.section-header h2,
.dashboard-section h3,
.cart-header h1,
.product-title,
.blog-title,
h1,
h2,
h3,
h4 {
    color: var(--theme-ink)
}

.section-title:after {
    background: linear-gradient(90deg, var(--theme-teal), var(--theme-coral))!important
}

.section-subtitle {
    color: var(--theme-muted)!important
}


/* Buttons and interactions */

.btn,
.btn-primary,
.btn-submit,
.submit-btn,
.auth-btn,
.login-btn,
.register-btn,
.btn-checkout,
.btn-add-cart,
.btn-browse-products,
.btn-create,
.payment-button,
.checkout-btn,
button[type="submit"] {
    border: 0!important;
    border-radius: 12px!important;
    background: linear-gradient(135deg, var(--theme-blue), var(--theme-teal))!important;
    color: #fff!important;
    box-shadow: 0 9px 22px rgba(23, 107, 135, .18)!important;
    transition: transform .2s ease, box-shadow .2s ease!important
}

.btn:hover,
.btn-primary:hover,
.btn-submit:hover,
.submit-btn:hover,
.auth-btn:hover,
.login-btn:hover,
.register-btn:hover,
.btn-checkout:hover,
.btn-add-cart:hover,
.btn-browse-products:hover,
.payment-button:hover,
button[type="submit"]:hover {
    transform: translateY(-2px)!important;
    box-shadow: 0 14px 28px rgba(23, 107, 135, .24)!important
}

.btn-secondary,
.btn-outline,
.btn-continue-shopping,
.back-link {
    background: #e8f6f4!important;
    color: var(--theme-blue)!important;
    border: 1px solid #bce0dc!important;
    box-shadow: none!important
}

.btn-danger,
.btn-remove,
.btn-clear-cart {
    background: #fff1ee!important;
    color: #d85c4d!important;
    border: 1px solid #ffd0c8!important;
    box-shadow: none!important
}

.btn-warning {
    background: var(--theme-sun)!important;
    color: var(--theme-ink)!important
}

.badge,
.product-badge,
.discount-badge {
    background: var(--theme-coral)!important;
    color: #fff!important;
    border-radius: 9px!important
}

.badge-success,
.status-completed {
    background: #dff5eb!important;
    color: #197653!important
}

.badge-warning,
.status-pending {
    background: #fff3d6!important;
    color: #946900!important
}


/* Forms */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.search-input {
    background: #fff!important;
    color: var(--theme-ink)!important;
    border: 1.5px solid #d4e5e3!important;
    border-radius: 12px!important;
    box-shadow: none!important;
    transition: .2s!important
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--theme-teal)!important;
    outline: 0!important;
    box-shadow: 0 0 0 4px rgba(32, 163, 158, .12)!important
}

.form-group label,
.field-label {
    color: var(--theme-ink)!important;
    font-weight: 700!important
}

.input-icon,
.form-icon {
    color: var(--theme-teal)!important
}


/* Products, blog and cart */

.product-image,
.product-gallery,
.blog-image,
.blog-card-image {
    background: linear-gradient(145deg, #f5fbfa, #e8f4f2)!important
}

.price-current,
.price-new,
.total-price,
.total-value,
.product-price {
    color: var(--theme-blue)!important
}

.stars,
.product-rating i {
    color: var(--theme-sun)!important
}

.category-card,
.category-item {
    border-radius: 18px!important;
    border-color: var(--theme-line)!important
}

.category-icon {
    background: var(--theme-soft)!important;
    color: var(--theme-teal)!important
}

.pagination a,
.page-link {
    border-color: var(--theme-line)!important;
    color: var(--theme-blue)!important;
    background: #fff!important;
    border-radius: 10px!important
}

.pagination .active,
.page-item.active .page-link {
    background: var(--theme-blue)!important;
    color: #fff!important
}

.blog-category,
.category-badge,
.tag {
    background: #e1f5f2!important;
    color: var(--theme-blue)!important
}

.cart-table-header,
.summary-header {
    background: #e8f6f4!important;
    color: var(--theme-ink)!important
}

.quantity-controls {
    border-color: var(--theme-line)!important
}

.quantity-controls input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield
}

.quantity-controls input[type="number"]::-webkit-outer-spin-button,
.quantity-controls input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.quantity-selector-box .quantity-controls {
    display: inline-grid!important;
    grid-template-columns: 46px minmax(56px, 68px) 46px;
    align-items: stretch;
    min-height: 48px;
    overflow: hidden;
    border: 1px solid var(--theme-line)!important;
    border-radius: 14px!important;
    background: var(--theme-surface)!important
}

.quantity-selector-box .quantity-controls button {
    width: 46px!important;
    min-width: 46px!important;
    border: 0!important;
    border-radius: 0!important;
    color: var(--theme-blue)!important;
    background: var(--theme-soft)!important;
    font-size: 1.15rem!important;
    cursor: pointer
}

.quantity-selector-box .quantity-controls input {
    width: 100%!important;
    min-width: 0!important;
    border: 0!important;
    border-right: 1px solid var(--theme-line)!important;
    border-left: 1px solid var(--theme-line)!important;
    border-radius: 0!important;
    background: var(--theme-surface)!important;
    color: var(--theme-ink)!important;
    text-align: center!important;
    font-weight: 800
}

.cart-login-alert {
    align-items: center!important;
    gap: 14px!important;
    width: 100%!important;
    min-height: 78px;
    margin: 0!important;
    padding: 16px 18px 16px 54px!important;
    border: 1px solid #b9dfda!important;
    border-right: 5px solid var(--theme-teal)!important;
    border-radius: 16px!important;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f5fbfa 0%, #e5f5f2 100%)!important;
    color: var(--theme-ink)!important;
    box-shadow: 0 16px 42px rgba(23, 107, 135, .18)!important
}

.cart-login-alert > i:first-child {
    color: var(--theme-blue)!important
}

.messages-container.has-cart-login-alert {
    top: 92px!important;
    width: calc(100% - 32px)!important;
    max-width: 780px!important
}

.cart-login-alert__content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.cart-login-alert__content p {
    margin: 0!important;
    color: var(--theme-ink)!important;
    font-size: 1rem!important;
    font-weight: 750!important;
    line-height: 1.8!important;
    text-align: right!important
}

.cart-login-alert__link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(120deg, var(--theme-blue), var(--theme-teal))!important;
    color: #fff!important;
    font-weight: 800;
    text-decoration: none!important;
    box-shadow: 0 7px 18px rgba(23, 107, 135, .2)
}

.cart-login-alert__link i,
.cart-login-alert__link span {
    color: #fff!important
}

.cart-login-alert .alert-close {
    position: absolute!important;
    top: 50%!important;
    left: 12px!important;
    right: auto!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    flex: 0 0 34px!important;
    width: 34px!important;
    min-width: 34px!important;
    max-width: 34px!important;
    height: 34px!important;
    min-height: 34px!important;
    max-height: 34px!important;
    aspect-ratio: 1 / 1;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
    border-radius: 50%!important;
    transform: translateY(-50%)!important;
    line-height: 1!important;
    background: rgba(23, 50, 77, .08)!important;
    color: var(--theme-ink)!important;
    box-sizing: border-box!important
}

.cart-login-alert .alert-close:hover {
    background: rgba(23, 50, 77, .15)!important
}

.cart-login-alert .alert-close i {
    display: block!important;
    width: auto!important;
    height: auto!important;
    margin: 0!important;
    padding: 0!important;
    color: inherit!important;
    font-size: 13px!important;
    line-height: 1!important
}

@media (max-width: 640px) {
    .messages-container.has-cart-login-alert {
        top: 76px!important;
        width: calc(100% - 24px)!important
    }

    .cart-login-alert {
        min-height: 0;
        padding: 14px 14px 14px 50px!important
    }

    .cart-login-alert__content {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px
    }
}

.qty-btn {
    color: var(--theme-blue)!important;
    background: var(--theme-soft)!important
}

.secure-badge,
.shipping-free {
    color: #19805d!important
}

.trust-badge i {
    color: var(--theme-teal)!important
}


/* Authentication, profiles and workout flows */

.login-page,
.register-page,
.auth-page,
.profile-section,
.change-password-page,
.password-reset-page,
.order-form-section,
.payment-section {
    background: linear-gradient(145deg, #fffaf2, #edf8f7)!important
}

.login-container,
.register-container,
.auth-container {
    border-radius: 26px!important;
    overflow: hidden!important;
    box-shadow: var(--theme-shadow)!important;
    background: #fff!important
}

.login-header,
.register-header,
.auth-header,
.profile-header,
.form-header {
    background: linear-gradient(125deg, var(--theme-blue), var(--theme-teal))!important
}

.login-icon,
.register-icon,
.auth-icon {
    background: rgba(255, 255, 255, .17)!important;
    color: #fff!important
}

.progress-step.active .step-circle,
.step.active .step-number {
    background: var(--theme-coral)!important;
    color: #fff!important
}

.progress-line.active {
    background: var(--theme-coral)!important
}

.dashboard-section,
.notifications-section {
    margin-bottom: 2rem
}

.dashboard-section>h3,
.notifications-section>h3 {
    border-right: 4px solid var(--theme-coral);
    padding-right: 15px;
    padding-top: 15px;
}

.notification-icon,
.info-icon {
    background: var(--theme-soft)!important;
    color: var(--theme-teal)!important
}

.info-item {
    background: #f6fbfa!important;
    border: 1px solid var(--theme-line)!important;
    border-radius: 12px!important
}

.photo-item img {
    border-radius: 16px!important
}

.tabs,
.filter-tabs {
    background: #eaf6f4!important;
    border-radius: 14px!important
}

.tab.active,
.filter-tab.active {
    background: var(--theme-blue)!important;
    color: #fff!important
}


/* Footer */

.footer {
    margin-top: 0!important;
    padding-top: 3.2rem!important;
    background: #21475d!important;
    color: #dcebf0!important
}

.footer-wave {
    display: none!important
}

.footer-logo i,
.footer-section h3 i,
.footer-contact i {
    color: var(--theme-sun)!important
}

.footer-logo h3,
.footer-section h3 {
    color: #fff!important
}

.footer-description,
.footer-contact span,
.footer-bottom p {
    color: #c9dce2!important
}

.footer-links a {
    color: #dcebf0!important
}

.footer-links a:hover {
    color: var(--theme-sun)!important;
    padding-right: 6px
}

.social-link {
    background: rgba(255, 255, 255, .1)!important;
    color: #fff!important;
    border: 1px solid rgba(255, 255, 255, .13)!important
}

.social-link:hover {
    background: var(--theme-coral)!important
}

.footer-newsletter {
    background: #1b3d52!important;
    border: 1px solid rgba(255, 255, 255, .1)!important;
    border-radius: 18px!important
}

.newsletter-form input {
    background: #fff!important
}

.newsletter-form button {
    background: var(--theme-coral)!important
}

.footer-bottom {
    border-color: rgba(255, 255, 255, .12)!important
}

.footer-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #c9dce2;
    text-align: center
}

.footer-social-row>span {
    font-size: .8rem;
    font-weight: 700
}

.footer-social-row .social-links {
    justify-content: center
}

.footer-designer a {
    color: var(--theme-sun)!important;
    direction: ltr;
    unicode-bidi: embed
}


/* Homepage palette override: light, energetic, and never black. */

.landing-page {
    --ink: #17324d!important;
    --lime: #ffc857!important;
    --paper: #fffaf2!important;
    --muted: #667b86!important;
    background: #fffaf2!important
}

.landing-hero,
.shop-section {
    background: linear-gradient(135deg, #176b87, #205e78)!important
}

.hero-grid {
    opacity: .55
}

.hero-copy h1,
.shop-heading h2 {
    color: #fff!important
}

.hero-copy h1 em,
.section-heading em,
.manifesto-copy em {
    color: #ffc857!important
}

.hero-orb-one {
    background: rgba(255, 200, 87, .16)!important
}

.hero-orb-two,
.visual-ring {
    border-color: rgba(255, 200, 87, .45)!important
}

.visual-ring:after,
.hero-strip,
.journey-icon,
.manifesto-visual,
.final-cta {
    background: #ffc857!important
}

.product-stage:after {
    background: #17324d!important
}

.float-card {
    background: rgba(23, 50, 77, .9)!important;
    border-color: rgba(255, 255, 255, .22)!important
}

.float-icon {
    background: #ff7b67!important;
    color: #fff!important
}

.journey-card.featured {
    background: #176b87!important
}

.featured .step-no {
    color: #80bec8!important
}

.quick-arrow {
    background: #176b87!important
}

.benefit-list i {
    background: #176b87!important;
    color: #fff!important
}

.landing-btn.primary {
    background: #ff7b67!important;
    color: #fff!important
}

.landing-btn.lime {
    background: #176b87!important;
    color: #fff!important
}

.navbar {
    background: rgba(255, 250, 242, .94)!important
}

.navbar-brand {
    color: var(--theme-ink)!important
}

.footer {
    background: #21475d!important
}

@media(max-width:900px) {
    .navbar-menu {
        background: #fffaf2!important;
        border-top: 1px solid var(--theme-line)!important;
        box-shadow: 0 18px 35px rgba(23, 50, 77, .12)!important
    }
    .navbar-container,
    .container {
        width: calc(100% - 28px)!important
    }
    .page-header-content {
        align-items: stretch!important
    }
    .page-header-stats {
        width: 100%!important
    }
    .cart-layout,
    .product-detail-layout,
    .blog-list-layout {
        grid-template-columns: 1fr!important
    }
    .footer-content {
        grid-template-columns: 1fr 1fr!important
    }
}

@media(max-width:600px) {
    .footer-content {
        grid-template-columns: 1fr!important
    }
    .stat-badge {
        min-width: 0!important
    }
    .page-header-text {
        min-width: 0!important
    }
    .card,
    .dashboard-card,
    .detail-section {
        padding: 1.2rem!important
    }
    .landing-products {
        grid-template-columns: 1fr!important
    }
    .product-media {
        height: 260px!important
    }
}


/* 2026 visual enrichment: shared depth, rhythm and energetic details */

body {
    background: #fffaf2;
    color: var(--theme-ink)
}

.main-content {
    position: relative;
    background: linear-gradient(180deg, #fffaf2 0%, #f7fbfa 48%, #fffaf2 100%)
}

.section:not(.dashboard-content),
section:not(.landing-hero):not(.coach-hero):not(.footer) {
    position: relative
}

.section-header,
.section-title-row {
    position: relative
}

.section-header:before,
.section-title-row:before {
    content: "";
    width: 38px;
    height: 5px;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--theme-coral), var(--theme-sun));
    display: block;
    margin-bottom: 12px
}

.card,
.dashboard-card,
.product-card,
.blog-card,
.post-card,
.profile-card,
.form-card,
.payment-card,
.exercise-card,
.category-card {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease!important
}

.card:before,
.dashboard-card:before,
.profile-card:before,
.form-card:before,
.payment-card:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 72px;
    height: 4px;
    border-radius: 0 0 0 8px;
    background: linear-gradient(90deg, var(--theme-teal), var(--theme-sun))
}

.card i,
.dashboard-card i,
.profile-card i,
.form-card i {
    transition: transform .22s ease
}

.card:hover i,
.dashboard-card:hover i,
.profile-card:hover i {
    transform: scale(1.08)
}

.page-header-unified,
.page-header,
.products-header,
.blog-header {
    min-height: 170px;
    display: flex;
    align-items: center
}

.page-header-unified:before,
.page-header:before,
.products-header:before,
.blog-header:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none
}

.page-header-text h1,
.page-header h1 {
    font-size: clamp(1.9rem, 3.5vw, 3rem)!important;
    line-height: 1.35!important
}

.page-header-text>p,
.page-header>p {
    font-size: .95rem!important;
    line-height: 1.9!important
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
button,
a[class*="btn-"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-weight: 750;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease!important
}

.badge,
.status-badge,
.tag,
.category-badge {
    padding: .42rem .72rem!important;
    font-weight: 750!important;
    letter-spacing: 0!important
}

.empty-state {
    position: relative!important;
    padding: 5.5rem 1.5rem!important;
    background: linear-gradient(145deg, #fff, #f2faf8)!important
}

.empty-state:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border: 1px solid #d7ebe7;
    border-radius: 50%;
    left: 7%;
    top: 15%;
    opacity: .8
}

.empty-icon {
    width: 72px!important;
    height: 72px!important;
    border-radius: 22px!important;
    background: linear-gradient(135deg, #e5f5f2, #fff4d8)!important;
    color: var(--theme-teal)!important;
    box-shadow: 0 10px 24px rgba(23, 107, 135, .1)!important
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    min-height: 48px
}

textarea {
    padding-top: .85rem!important
}

.form-group,
.field-group {
    margin-bottom: 1.15rem
}

@media(max-width:700px) {
    .page-header-unified,
    .page-header,
    .products-header,
    .blog-header {
        min-height: 145px
    }
    .section-header:before,
    .section-title-row:before {
        width: 30px
    }
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    button,
    a[class*="btn-"] {
        min-height: 46px
    }
}


/* ================================================================
   Responsive component system
   Desktop > 1200 | Laptop <= 1200 | Tablet <= 992 | Mobile <= 768
   Small mobile <= 480
   ================================================================ */

@media (max-width:1200px) {
    .container,
    .navbar-container,
    .landing-container {
        width: min(100% - 40px, 1080px)!important
    }
    .products-grid,
    .blog-grid,
    .cards-grid,
    .exercise-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))!important;
        gap: 1.15rem!important
    }
    .page-header-content {
        gap: 2rem!important
    }
    .page-header-stats {
        flex-wrap: wrap!important
    }
    .cart-layout,
    .checkout-layout,
    .product-detail-layout {
        gap: 1.5rem!important
    }
    .footer-content {
        gap: 2rem!important
    }
}

@media (max-width:992px) {
    html {
        font-size: 15.5px
    }
    .container,
    .navbar-container,
    .landing-container {
        width: calc(100% - 32px)!important;
        max-width: none!important
    }
    .products-grid,
    .blog-grid,
    .cards-grid,
    .exercise-grid,
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important
    }
    .page-header-unified,
    .page-header,
    .products-header,
    .blog-header {
        min-height: 165px!important;
        padding: 2.5rem 0!important
    }
    .page-header-content {
        flex-direction: column!important;
        align-items: flex-start!important
    }
    .page-header-actions {
        width: 100%!important
    }
    .page-header-actions>a,
    .page-header-actions>button {
        width: 100%!important
    }
    .cart-layout,
    .checkout-layout,
    .product-detail-layout,
    .blog-list-layout,
    .profile-layout,
    .dashboard-layout,
    .form-layout {
        grid-template-columns: 1fr!important
    }
    .sidebar,
    .products-sidebar,
    .filter-sidebar,
    .cart-summary,
    .checkout-summary {
        position: static!important;
        width: 100%!important;
        max-width: none!important
    }
    .form-row,
    .fields-row,
    .input-row {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important
    }
    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important
    }
    .modal,
    .modal-content,
    .dialog {
        max-width: calc(100vw - 40px)!important
    }
}

@media (max-width:768px) {
    html {
        font-size: 15px
    }
    body {
        overflow-x: hidden
    }
    .container,
    .navbar-container,
    .landing-container {
        width: calc(100% - 24px)!important;
        padding-inline: 0!important
    }
    .section,
    .products-section,
    .blog-section,
    .profile-section,
    .payment-section {
        padding-block: 2.75rem!important
    }
    .page-header-unified,
    .page-header,
    .products-header,
    .blog-header {
        min-height: 145px!important;
        padding: 2rem 0!important
    }
    .page-header-text h1,
    .page-header h1 {
        font-size: clamp(1.65rem, 7vw, 2.25rem)!important
    }
    .page-header-text>p,
    .page-header>p {
        font-size: .86rem!important;
        line-height: 1.8!important
    }
    .products-grid,
    .blog-grid,
    .cards-grid,
    .exercise-grid,
    .category-grid,
    .stats-grid {
        grid-template-columns: 1fr!important;
        gap: 1rem!important
    }
    .card,
    .dashboard-card,
    .order-card,
    .plan-card,
    .product-card,
    .blog-card,
    .form-card,
    .profile-card {
        border-radius: 16px!important
    }
    .card-body,
    .dashboard-card-body,
    .form-card,
    .profile-card {
        padding: 1.15rem!important
    }
    .form-row,
    .fields-row,
    .input-row,
    .auth-row {
        grid-template-columns: 1fr!important;
        gap: .85rem!important
    }
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .form-control {
        width: 100%!important;
        max-width: 100%!important;
        font-size: 16px!important
    }
    .btn-row,
    .form-actions,
    .card-actions,
    .page-actions {
        display: grid!important;
        grid-template-columns: 1fr!important;
        gap: .7rem!important
    }
    .btn-row>a,
    .btn-row>button,
    .form-actions>a,
    .form-actions>button,
    .card-actions>a,
    .card-actions>button,
    .page-actions>a,
    .page-actions>button {
        width: 100%!important
    }
    .table-responsive,
    .orders-table-wrapper,
    .exercise-table-wrapper {
        display: block!important;
        width: 100%!important;
        overflow-x: auto!important;
        -webkit-overflow-scrolling: touch
    }
    .table-responsive table,
    .orders-table,
    .exercise-table {
        min-width: 680px!important
    }
    .tabs,
    .filter-tabs,
    .profile-tabs {
        display: flex!important;
        flex-wrap: nowrap!important;
        overflow-x: auto!important;
        scroll-snap-type: x proximity;
        scrollbar-width: none
    }
    .tabs::-webkit-scrollbar,
    .filter-tabs::-webkit-scrollbar,
    .profile-tabs::-webkit-scrollbar {
        display: none
    }
    .tab,
    .filter-tab,
    .profile-tab {
        flex: 0 0 auto!important;
        white-space: nowrap!important;
        scroll-snap-align: start
    }
    .footer-content {
        grid-template-columns: 1fr!important;
        gap: 1.5rem!important
    }
    .footer {
        padding-top: 2.5rem!important
    }
    .footer-section {
        text-align: right!important
    }
    .messages-container {
        width: 100%!important
    }
    .alert {
        padding: 1rem!important
    }
    .empty-state {
        padding: 3.5rem 1rem!important
    }
    .empty-state:after {
        width: 58px;
        height: 58px
    }
    img,
    video,
    iframe,
    svg {
        max-width: 100%;
        height: auto
    }
    .product-image,
    .blog-image,
    .card-image {
        max-width: 100%!important
    }
}

@media (max-width:480px) {
    html {
        font-size: 14.5px
    }
    .container,
    .navbar-container,
    .landing-container {
        width: calc(100% - 18px)!important
    }
    .navbar-brand {
        font-size: 1.05rem!important
    }
    .brand-mark {
        width: 34px!important;
        height: 34px!important
    }
    .mobile-menu-toggle {
        width: 40px!important;
        height: 40px!important
    }
    .page-header-unified,
    .page-header,
    .products-header,
    .blog-header {
        padding: 1.65rem 0!important
    }
    .page-header-text h1,
    .page-header h1 {
        font-size: 1.65rem!important
    }
    .page-header-text h1 i {
        font-size: 1.25rem!important
    }
    .section-title,
    .section-header h2,
    .page-title {
        font-size: 1.45rem!important
    }
    .section-subtitle,
    .section-header p {
        font-size: .82rem!important
    }
    .card,
    .dashboard-card,
    .order-card,
    .plan-card,
    .product-card,
    .blog-card,
    .form-card,
    .profile-card {
        border-radius: 14px!important
    }
    .card-body,
    .dashboard-card-body,
    .form-card,
    .profile-card {
        padding: 1rem!important
    }
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    button,
    a[class*="btn-"] {
        min-height: 46px!important;
        padding-inline: .85rem!important;
        font-size: .83rem!important
    }
    .badge,
    .status-badge,
    .tag,
    .category-badge {
        font-size: .68rem!important;
        padding: .36rem .58rem!important
    }
    .modal,
    .modal-content,
    .dialog {
        width: calc(100vw - 18px)!important;
        max-width: none!important;
        padding: 1rem!important;
        border-radius: 16px!important
    }
}

@media (max-width:360px) {
    .container,
    .navbar-container,
    .landing-container {
        width: calc(100% - 14px)!important
    }
    .page-header-text h1,
    .page-header h1 {
        font-size: 1.45rem!important
    }
    .card-body,
    .dashboard-card-body,
    .form-card,
    .profile-card {
        padding: .85rem!important
    }
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    button,
    a[class*="btn-"] {
        font-size: .78rem!important
    }
}

@media (hover:none) {
    .card:hover,
    .product-card:hover,
    .blog-card:hover,
    .post-card:hover,
    .exercise-card:hover {
        transform: none!important
    }
    .btn:hover,
    button:hover,
    a[class*="btn-"]:hover {
        transform: none!important
    }
}

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


/* 2026 strength campaign: site-wide alignment with the athlete artwork. */

:root {
    --theme-ink: #10191d;
    --theme-blue: #176f78;
    --theme-teal: #20a39e;
    --theme-coral: #ff6b4a;
    --theme-cream: #f3f5f2;
    --theme-soft: #e9f4f1;
    --theme-line: #d9e2de;
    --theme-muted: #637579;
    --theme-shadow: 0 18px 48px rgba(16, 25, 29, .11);
}

body {
    background: var(--theme-cream)!important
}

.navbar {
    background: rgba(255, 255, 255, .95)!important;
    border-bottom-color: #dce4e0!important
}

.brand-mark {
    border-radius: 7px!important;
    background: var(--theme-coral)!important;
    box-shadow: 0 7px 18px rgba(255, 107, 74, .22)!important
}

.page-header-unified,
.page-header,
.products-header,
.blog-header,
.products-page-header {
    background: linear-gradient(118deg, #10191d 0%, #173a40 58%, #176f78 100%)!important;
}

.btn-primary,
.coach-btn.primary,
a[class*="btn-primary"] {
    background: var(--theme-coral)!important;
    border-color: var(--theme-coral)!important;
    color: #fff!important;
    box-shadow: 0 10px 24px rgba(255, 107, 74, .2)!important;
}

.btn-primary:hover,
.coach-btn.primary:hover,
a[class*="btn-primary"]:hover {
    background: #e95738!important;
    border-color: #e95738!important;
}

.card,
.dashboard-card,
.order-card,
.plan-card,
.product-card-modern,
.product-card,
.blog-card,
.post-card,
.sidebar-widget,
.profile-card {
    border-color: rgba(16, 25, 29, .1)!important;
    box-shadow: 0 12px 34px rgba(16, 25, 29, .07)!important;
}

.product-card-modern:hover,
.product-card:hover,
.blog-card:hover,
.post-card:hover {
    border-color: rgba(32, 163, 158, .35)!important;
    box-shadow: 0 20px 46px rgba(16, 25, 29, .12)!important;
}


/* Joyful Body Beauty UI: bright, energetic, and free of visible black surfaces. */

:root {
    --theme-ink: #174a63;
    --theme-blue: #168aad;
    --theme-teal: #18b7a6;
    --theme-coral: #ff6f61;
    --theme-sun: #ffd166;
    --theme-cream: #f8fcff;
    --theme-surface: #ffffff;
    --theme-soft: #e9fbf8;
    --theme-line: #cdebe7;
    --theme-muted: #53788a;
    --theme-shadow: 0 18px 44px rgba(22, 138, 173, .12);
}

body {
    background: #f8fcff!important;
    color: var(--theme-ink)!important
}

body p {
    color: var(--theme-muted)!important
}

.topbar {
    background: #168aad!important;
    color: #fff!important
}

.topbar-highlights {
    color: #dffbff!important
}

.topbar i {
    color: #ffe08a!important
}

.navbar,
.navbar.is-scrolled {
    background: rgba(255, 255, 255, .97)!important;
    border-bottom: 1px solid #caece8!important;
    box-shadow: 0 10px 30px rgba(22, 138, 173, .1)!important
}

.navbar-brand,
.navbar-menu a,
.user-menu-toggle {
    color: var(--theme-ink)!important
}

.brand-mark {
    background: linear-gradient(135deg, #ff6f61, #ffd166)!important;
    border-radius: 9px!important;
    color: #fff!important;
    box-shadow: 0 8px 20px rgba(255, 111, 97, .25)!important
}

.navbar-menu a:hover,
.navbar-menu a.active {
    background: #e6faf7!important;
    color: #087f8c!important;
    box-shadow: inset 0 -2px 0 #18b7a6!important
}

.cart-badge a {
    background: linear-gradient(135deg, #168aad, #18b7a6)!important;
    box-shadow: 0 8px 20px rgba(22, 138, 173, .2)!important
}

.mobile-menu-toggle,
.user-menu-toggle {
    background: #e9fbf8!important
}

.page-header-unified,
.page-header,
.products-header,
.blog-header,
.products-page-header {
    background: linear-gradient(118deg, #21b6c7 0%, #35c9b5 52%, #ffd166 135%)!important;
    border-bottom: 4px solid rgba(255, 209, 102, .7)!important;
}

.page-header-unified:after,
.page-header:after,
.products-page-header:after {
    background: rgba(255, 255, 255, .18)!important;
    border-color: rgba(255, 255, 255, .24)!important
}

.page-header-text h1,
.page-header-text p,
.page-header h1,
.page-header p,
.products-page-header h1,
.products-page-header p {
    color: #fff!important;
    text-shadow: 0 2px 12px rgba(22, 138, 173, .18)!important
}

.btn-primary,
.coach-btn.primary,
a[class*="btn-primary"] {
    background: linear-gradient(135deg, #ff6f61, #ff8a65)!important;
    border-color: #ff6f61!important;
    color: #fff!important;
    box-shadow: 0 10px 24px rgba(255, 111, 97, .23)!important
}

.btn-primary:hover,
.coach-btn.primary:hover,
a[class*="btn-primary"]:hover {
    background: linear-gradient(135deg, #f65f54, #ff7c59)!important;
    border-color: #f65f54!important;
    box-shadow: 0 14px 28px rgba(255, 111, 97, .3)!important
}

.btn-secondary,
.coach-btn.secondary,
.btn-outline {
    background: #fff!important;
    border-color: #43c8bb!important;
    color: #087f8c!important;
    box-shadow: 0 8px 20px rgba(24, 183, 166, .12)!important
}

.btn-secondary:hover,
.coach-btn.secondary:hover,
.btn-outline:hover {
    background: #e8fbf7!important;
    color: #08727d!important
}

.card,
.dashboard-card,
.order-card,
.plan-card,
.product-card-modern,
.product-card,
.blog-card,
.post-card,
.sidebar-widget,
.profile-card,
.filter-card,
.products-filters-bar,
.form-card,
.bmi-tool {
    background: #fff!important;
    border: 1px solid #d5eee9!important;
    box-shadow: 0 12px 34px rgba(22, 138, 173, .09)!important;
}

.product-card-modern:hover,
.product-card:hover,
.blog-card:hover,
.post-card:hover,
.dashboard-card:hover {
    border-color: #7eddd4!important;
    box-shadow: 0 20px 44px rgba(22, 138, 173, .16)!important;
    transform: translateY(-5px);
}

.product-card-image,
.card-image,
.knowledge-image {
    background: linear-gradient(145deg, #effbff, #eafbf6)!important
}

.badge,
.status-badge,
.tag,
.category-badge {
    background: #e8faf7!important;
    color: #087f8c!important;
    border-color: #bce9e3!important
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control {
    background: #fbfeff!important;
    border-color: #cfe8e5!important;
    color: var(--theme-ink)!important
}

.auth-input input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--theme-ink)!important
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: #2bc3b3!important;
    box-shadow: 0 0 0 4px rgba(43, 195, 179, .12)!important
}

.footer {
    background: #dff8f5!important;
    color: var(--theme-ink)!important;
    border-top: 4px solid #ffd166!important
}

.footer h3,
.footer h4,
.footer-logo,
.footer a,
.footer-contact,
.footer-bottom {
    color: var(--theme-ink)!important
}

.footer p,
.footer-description,
.footer-links a {
    color: #4e7887!important
}

.footer-links a:hover {
    color: #ff6f61!important
}

.footer-bottom {
    border-top-color: #b9e6df!important
}


/* Keep contact details readable on the footer's light background. */

.footer .footer-contact .contact-label {
    color: #426b78!important;
    font-weight: 700!important
}

.footer .footer-contact .contact-info>a,
.footer .footer-contact .contact-info>span:not(.contact-label) {
    color: #17324d!important;
    font-weight: 300!important;
    line-height: 1.8
}

.footer .footer-contact .contact-info>a:hover {
    color: #d94f3d!important
}

body ::selection {
    background: #ffd166!important;
    color: #174a63!important
}

.landing-page,
.coach-home {
    --ink: #174a63!important;
    --ch-ink: #174a63!important;
    --ch-blue: #168aad!important;
    --ch-teal: #18b7a6!important;
    --ch-coral: #ff6f61!important;
    --ch-sun: #ffd166!important;
    --ch-cream: #f8fcff!important;
    --ch-soft: #e9fbf8!important;
    background: #f8fcff!important;
    color: #174a63!important
}

.landing-hero,
.shop-section,
.stories-section {
    background: linear-gradient(120deg, #168aad 0%, #20bfae 58%, #73d9cf 100%)!important
}

.coach-hero {
    background: linear-gradient(135deg, #effcff 0%, #e9fbf8 52%, #fff8df 100%)!important
}

.coach-benefits {
    background: linear-gradient(135deg, #e7faf6, #eef9ff)!important
}

.bmi-section {
    background: #fff9e8!important
}

.today-card,
.journey-card.featured {
    background: linear-gradient(135deg, #168aad, #18b7a6)!important
}

.metric-card.blue {
    background: #168aad!important
}

.metric-card.teal {
    background: #18b7a6!important
}

.metric-card.coral {
    background: #ff6f61!important
}

.metric-card.sun,
.coach-final,
.final-cta,
.manifesto-visual {
    background: #ffd166!important;
    color: #174a63!important
}

.float-card {
    background: rgba(255, 255, 255, .92)!important;
    border-color: #bce9e3!important;
    color: #174a63!important;
    box-shadow: 0 14px 30px rgba(22, 138, 173, .14)!important
}

.product-stage:after {
    background: rgba(22, 138, 173, .18)!important
}

.product-stage img {
    filter: drop-shadow(-16px 24px 20px rgba(22, 138, 173, .2))!important
}

.shop-section .landing-product-info h3 a,
.shop-section .price-row,
.stories-section h2,
.stories-section footer span {
    color: #fff!important
}

.story-grid blockquote {
    background: rgba(255, 255, 255, .16)!important;
    border-color: rgba(255, 255, 255, .3)!important;
    box-shadow: 0 14px 34px rgba(22, 138, 173, .12)!important
}

.story-grid p {
    color: #f4ffff!important
}

.story-grid footer small {
    color: #d9f7f4!important
}

.quick-arrow,
.benefit-list i {
    background: #ff6f61!important;
    color: #fff!important
}

.landing-btn.lime {
    background: #ff6f61!important;
    color: #fff!important
}

.landing-btn.dark-ghost {
    border-color: #168aad!important;
    color: #174a63!important
}

.newsletter-form input {
    background: #fff!important;
    color: #174a63!important
}

.newsletter-form button {
    background: #ff6f61!important;
    color: #fff!important
}


/* Compact page headers */

body .main-content .page-header-unified,
body .main-content .page-header,
body .main-content .products-header,
body .main-content .blog-header,
body .main-content .products-page-header {
    min-height: 128px!important;
    padding: 1.65rem 0!important;
    margin-bottom: 1.6rem!important;
    background: linear-gradient(112deg, #21b6c7 0%, #35c9b5 58%, #8ee2d5 100%)!important;
    border: 0!important;
    border-bottom: 5px solid #ffd166!important;
    box-shadow: 0 12px 28px rgba(22, 138, 173, .13)!important;
    position: relative!important;
    overflow: hidden!important;
    isolation: isolate!important;
}

body .main-content .page-header-unified:before,
body .main-content .page-header:before,
body .main-content .products-header:before,
body .main-content .blog-header:before,
body .main-content .products-page-header:before {
    content: ""!important;
    display: block!important;
    position: absolute!important;
    inset: 0!important;
    z-index: -1!important;
    background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px)!important;
    background-size: 26px 26px!important;
    opacity: .58!important;
    transform: none!important;
}

body .main-content .page-header-unified:after,
body .main-content .page-header:after,
body .main-content .products-header:after,
body .main-content .blog-header:after,
body .main-content .products-page-header:after {
    content: ""!important;
    display: block!important;
    position: absolute!important;
    z-index: -1!important;
    width: 240px!important;
    height: 190px!important;
    left: -55px!important;
    right: auto!important;
    top: -80px!important;
    bottom: auto!important;
    border: 0!important;
    border-radius: 0!important;
    background: rgba(255, 209, 102, .65)!important;
    clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%)!important;
    transform: rotate(-8deg)!important;
    filter: none!important;
    box-shadow: none!important;
}

body .main-content .page-header-content,
body .main-content .products-page-header .header-content {
    min-height: 76px!important;
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 1.5rem!important;
    position: relative!important;
    z-index: 2!important
}

body .main-content .page-header-text h1,
body .main-content .page-header h1,
body .main-content .products-page-header h1 {
    font-size: clamp(1.55rem, 2.8vw, 2.25rem)!important;
    line-height: 1.25!important;
    letter-spacing: 0!important;
    margin: 0 0 .35rem!important;
    color: #fff!important;
    text-shadow: 0 2px 10px rgba(22, 138, 173, .18)!important;
}

body .main-content .page-header-text h1 i,
body .main-content .products-page-header h1 i {
    width: 40px!important;
    height: 40px!important;
    display: inline-grid!important;
    place-items: center!important;
    margin-left: .5rem!important;
    border-radius: 8px!important;
    background: #fff!important;
    color: #ff6f61!important;
    font-size: 1.05rem!important;
    box-shadow: 0 8px 18px rgba(22, 138, 173, .15)!important;
    transform: rotate(-3deg)!important;
}

body .main-content .page-header-text p,
body .main-content .page-header>p,
body .main-content .products-page-header p {
    font-size: .8rem!important;
    line-height: 1.7!important;
    margin: 0!important;
    color: rgba(255, 255, 255, .93)!important;
    max-width: 650px!important
}

body .main-content .page-header-stats,
body .main-content .products-page-header .header-stats {
    display: flex!important;
    align-items: center!important;
    gap: .65rem!important;
    flex-wrap: wrap!important
}

body .main-content .page-header-stats .stat-badge,
body .main-content .products-page-header .stat-box {
    min-width: 112px!important;
    min-height: 54px!important;
    padding: .65rem .85rem!important;
    display: flex!important;
    align-items: center!important;
    gap: .65rem!important;
    border: 1px solid rgba(255, 255, 255, .55)!important;
    border-radius: 8px!important;
    background: rgba(255, 255, 255, .2)!important;
    color: #fff!important;
    box-shadow: 0 8px 18px rgba(22, 138, 173, .1)!important;
    backdrop-filter: blur(10px)!important;
}

body .main-content .page-header-stats .stat-badge i,
body .main-content .products-page-header .stat-box>i {
    font-size: 1.15rem!important;
    color: #fff!important;
    opacity: 1!important
}

body .main-content .stat-badge-content strong,
body .main-content .products-page-header .stat-box strong {
    font-size: 1.05rem!important;
    line-height: 1.15!important;
    margin: 0!important;
    color: #fff!important
}

body .main-content .stat-badge-content span,
body .main-content .products-page-header .stat-box span {
    font-size: .65rem!important;
    color: rgba(255, 255, 255, .86)!important
}

@media(max-width:768px) {
    body .main-content .page-header-unified,
    body .main-content .page-header,
    body .main-content .products-header,
    body .main-content .blog-header,
    body .main-content .products-page-header {
        min-height: 112px!important;
        padding: 1.25rem 0!important;
        margin-bottom: 1.15rem!important
    }
    body .main-content .page-header-content,
    body .main-content .products-page-header .header-content {
        min-height: 0!important;
        gap: .85rem!important;
        align-items: flex-start!important
    }
    body .main-content .page-header-text {
        min-width: 0!important
    }
    body .main-content .page-header-text h1,
    body .main-content .page-header h1,
    body .main-content .products-page-header h1 {
        font-size: 1.45rem!important
    }
    body .main-content .page-header-text h1 i,
    body .main-content .products-page-header h1 i {
        width: 34px!important;
        height: 34px!important;
        font-size: .9rem!important
    }
    body .main-content .page-header-stats,
    body .main-content .products-page-header .header-stats {
        display: grid!important;
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
        width: 100%!important
    }
    body .main-content .page-header-stats .stat-badge,
    body .main-content .products-page-header .stat-box {
        min-width: 0!important;
        min-height: 48px!important;
        padding: .5rem .65rem!important
    }
}

@media(max-width:480px) {
    body .main-content .page-header-stats,
    body .main-content .products-page-header .header-stats {
        display: none!important
    }
    body .main-content .page-header-unified,
    body .main-content .page-header,
    body .main-content .products-header,
    body .main-content .blog-header,
    body .main-content .products-page-header {
        min-height: 94px!important;
        padding: 1rem 0!important
    }
    body .main-content .page-header-text p,
    body .main-content .products-page-header p {
        font-size: .72rem!important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.brand-logo-frame {
    position: relative;
    width: 145px;
    height: 56px;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    background: transparent;
}

.brand-logo {
    position: absolute;
    top: -15px;
    left: -5px;
    width: 155px;
    height: auto;
    max-width: none;
    display: block;
    filter: none;
}

html[data-theme="dark"] .brand-logo {
    filter: none;
}

@media (max-width: 520px) {
    .brand-logo-frame {
        width: 125px;
        height: 48px;
    }

    .brand-logo {
        top: -13px;
        left: -4px;
        width: 134px;
    }
}

.theme-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-line);
    border-radius: 50%;
    background: var(--theme-soft);
    color: var(--theme-ink);
    cursor: pointer;
    font-size: 1.05rem;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.theme-toggle-item {
    display: flex;
    align-items: center;
}

.theme-toggle:hover {
    transform: rotate(12deg) scale(1.05);
    background: var(--theme-blue);
    color: #fff;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-ink: #edf6f7;
    --theme-surface: #162126;
    --theme-soft: #1d3036;
    --theme-line: #32474e;
    --theme-muted: #adc0c5;
    --dark: #edf6f7!important;
    --dark-color: #edf6f7!important;
    --color-text-dark: #edf6f7!important;
    --light-blue-1: #17262c!important;
    --light-blue-2: #20343b!important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-content {
    background: #10181c!important;
    color: #e6eff1!important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.is-scrolled,
html[data-theme="dark"] .navbar-menu,
html[data-theme="dark"] .user-dropdown {
    background: #162126!important;
    color: #edf6f7!important;
    border-color: #32474e!important;
}

html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .navbar-menu a,
html[data-theme="dark"] .user-menu-toggle,
html[data-theme="dark"] .user-dropdown a {
    color: #edf6f7!important;
}

html[data-theme="dark"] .user-menu-toggle,
html[data-theme="dark"] .theme-toggle {
    background: #22363d!important;
    border-color: #3b535b!important;
}

html[data-theme="dark"] .profile-wrapper,
html[data-theme="dark"] .breadcrumb-wrapper,
html[data-theme="dark"] .cart-wrapper,
html[data-theme="dark"] .products-section,
html[data-theme="dark"] .blog-section {
    background: #10181c!important;
    color: #e6eff1!important;
    border-color: #32474e!important;
}

html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .sidebar-card,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .form-section {
    background: #162126!important;
    color: #e6eff1!important;
    border-color: #32474e!important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .form-label {
    color: #edf6f7!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    background: #0f1a1e!important;
    color: #edf6f7!important;
    border-color: #3a5058!important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #81969d!important;
}