/* Energetic customer-facing visual layer. Trainer pages keep their focused UI. */
body:not(.trainer-user) {
    --yp-navy: #102a43;
    --yp-blue: #176b87;
    --yp-teal: #20a39e;
    --yp-mint: #79ded2;
    --yp-coral: #ff6f61;
    --yp-yellow: #ffc857;
    --yp-paper: #f6fbfa;
    --yp-line: #dcebe8;
    --yp-shadow: 0 20px 55px rgba(16, 42, 67, .1);
    background:
        radial-gradient(circle at 8% 9%, rgba(121, 222, 210, .16), transparent 25rem),
        radial-gradient(circle at 92% 24%, rgba(255, 111, 97, .1), transparent 25rem),
        var(--yp-paper);
}

body:not(.trainer-user) main { position: relative }

body:not(.trainer-user) ::selection {
    color: #fff;
    background: var(--yp-coral)
}

body:not(.trainer-user) .navbar {
    border-bottom: 1px solid rgba(32, 163, 158, .12);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 30px rgba(16, 42, 67, .06);
    backdrop-filter: blur(18px) saturate(150%)
}

body:not(.trainer-user) .navbar.is-scrolled {
    border-color: rgba(32, 163, 158, .2);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 14px 40px rgba(16, 42, 67, .12)
}

body:not(.trainer-user) .navbar-brand {
    transition: transform .25s ease, filter .25s ease
}

body:not(.trainer-user) .navbar-brand:hover {
    filter: drop-shadow(0 7px 14px rgba(32, 163, 158, .2));
    transform: translateY(-2px) rotate(-1deg)
}

body:not(.trainer-user) .navbar-menu>li>a {
    position: relative;
    border-radius: 11px;
    transition: color .22s ease, background .22s ease, transform .22s ease
}

body:not(.trainer-user) .navbar-menu>li>a:after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 3px;
    width: 0;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--yp-teal), var(--yp-coral));
    transform: translateX(50%);
    transition: width .25s ease
}

body:not(.trainer-user) .navbar-menu>li>a:hover {
    color: var(--yp-blue);
    background: rgba(32, 163, 158, .07);
    transform: translateY(-1px)
}

body:not(.trainer-user) .navbar-menu>li>a:hover:after { width: 22px }

body:not(.trainer-user) .theme-toggle,
body:not(.trainer-user) .mobile-menu-toggle {
    border-color: var(--yp-line);
    color: var(--yp-blue);
    background: linear-gradient(145deg, #fff, #ecf8f6);
    box-shadow: 0 7px 18px rgba(16, 42, 67, .08)
}

body:not(.trainer-user) .page-header-unified {
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 200, 87, .32), transparent 20rem),
        radial-gradient(circle at 85% 70%, rgba(121, 222, 210, .3), transparent 22rem),
        linear-gradient(125deg, #102a43 0%, #176b87 52%, #20a39e 100%)
}

body:not(.trainer-user) .page-header-unified:after {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -85px;
    width: 210px;
    height: 210px;
    border: 32px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    z-index: -1
}

body:not(.trainer-user) .page-header-text h1 {
    letter-spacing: -.035em;
    text-shadow: 0 8px 28px rgba(4, 24, 38, .32)
}

body:not(.trainer-user) .page-header-text h1 i {
    color: var(--yp-yellow);
    filter: drop-shadow(0 5px 15px rgba(255, 200, 87, .32))
}

body:not(.trainer-user) .stat-badge {
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px)
}

body:not(.trainer-user) .breadcrumb-wrapper {
    border: 0;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 7px 24px rgba(16, 42, 67, .045);
    backdrop-filter: blur(12px)
}

body:not(.trainer-user) :is(.product-card, .product-card-modern, .landing-product-card, .blog-post-card, .knowledge-card, .cart-item, .sidebar-widget, .filter-card, .auth-card, .profile-card) {
    border: 1px solid rgba(32, 163, 158, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 34px rgba(16, 42, 67, .075);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

body:not(.trainer-user) :is(.product-card, .product-card-modern, .landing-product-card, .blog-post-card, .knowledge-card):hover {
    border-color: rgba(32, 163, 158, .34);
    box-shadow: 0 24px 55px rgba(16, 42, 67, .14);
    transform: translateY(-7px)
}

body:not(.trainer-user) :is(.product-card, .product-card-modern, .landing-product-card, .blog-post-card, .knowledge-card) img {
    transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .35s ease
}

body:not(.trainer-user) :is(.product-card, .product-card-modern, .landing-product-card, .blog-post-card, .knowledge-card):hover img {
    filter: saturate(1.08) contrast(1.02);
    transform: scale(1.055)
}

body:not(.trainer-user) :is(.section-title, .section-heading h2, .blog-section-heading h2, .shop-heading h2) {
    color: var(--yp-navy);
    letter-spacing: -.035em
}

body:not(.trainer-user) :is(.section-title, .blog-section-heading h2):after {
    content: "";
    width: 46px;
    height: 4px;
    margin-top: 10px;
    display: block;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--yp-coral), var(--yp-yellow))
}

body:not(.trainer-user) :is(.btn-primary, .primary-btn, .checkout-btn, .add-to-cart-btn, button[type="submit"]):not(.theme-toggle):not(.mobile-menu-toggle) {
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--yp-coral), #ff947d);
    box-shadow: 0 12px 26px rgba(255, 111, 97, .24);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease
}

body:not(.trainer-user) :is(.btn-primary, .primary-btn, .checkout-btn, .add-to-cart-btn, button[type="submit"]):not(.theme-toggle):not(.mobile-menu-toggle):hover {
    color: #fff;
    filter: saturate(1.08);
    box-shadow: 0 17px 34px rgba(255, 111, 97, .32);
    transform: translateY(-3px)
}

body:not(.trainer-user) :is(input, select, textarea) {
    border-color: #d8e9e6;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease
}

body:not(.trainer-user) :is(input, select, textarea):focus {
    border-color: var(--yp-teal);
    outline: 0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(32, 163, 158, .12)
}

body:not(.trainer-user) :is(.discount-badge, .sale-badge) {
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, var(--yp-coral), #ff947d);
    box-shadow: 0 8px 18px rgba(255, 111, 97, .23)
}

body:not(.trainer-user) .products-page-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(255,200,87,.35), transparent 16rem),
        radial-gradient(circle at 86% 80%, rgba(121,222,210,.28), transparent 18rem),
        linear-gradient(125deg, var(--yp-navy), var(--yp-blue) 55%, var(--yp-teal));
    box-shadow: 0 18px 45px rgba(16,42,67,.16)
}

body:not(.trainer-user) .products-page-header :is(h1, p, i) { color: #fff }

body:not(.trainer-user) .products-page-header .stat-box {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 17px;
    background: rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter: blur(12px)
}

body:not(.trainer-user) .products-filters-bar {
    border: 1px solid rgba(32,163,158,.14);
    border-radius: 18px;
    background: rgba(255,255,255,.91);
    box-shadow: 0 13px 35px rgba(16,42,67,.08);
    backdrop-filter: blur(12px)
}

body:not(.trainer-user) .filter-card {
    overflow: hidden
}

body:not(.trainer-user) .filter-title {
    color: var(--yp-navy)
}

body:not(.trainer-user) .filter-title i,
body:not(.trainer-user) .product-category-tag { color: var(--yp-teal) }

body:not(.trainer-user) .category-filter-item {
    border-radius: 11px;
    transition: .22s ease
}

body:not(.trainer-user) .category-filter-item:hover,
body:not(.trainer-user) .category-filter-item.active {
    color: var(--yp-blue);
    background: linear-gradient(90deg, rgba(32,163,158,.12), rgba(121,222,210,.05));
    transform: translateX(-3px)
}

body:not(.trainer-user) .product-card-modern {
    overflow: hidden
}

body:not(.trainer-user) .product-card-image {
    background:
        radial-gradient(circle at 50% 55%, rgba(121,222,210,.18), transparent 48%),
        linear-gradient(145deg, #f9fdfc, #edf7f5)
}

body:not(.trainer-user) .product-card-title a {
    color: var(--yp-navy);
    transition: color .2s ease
}

body:not(.trainer-user) .product-card-title a:hover { color: var(--yp-teal) }

body:not(.trainer-user) .price-current,
body:not(.trainer-user) .price-new { color: var(--yp-coral) }

body:not(.trainer-user) .btn-add-to-cart-list {
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--yp-coral), #ff947d);
    box-shadow: 0 10px 22px rgba(255,111,97,.2)
}

body:not(.trainer-user) .badge-featured {
    color: #523900;
    background: linear-gradient(135deg, var(--yp-yellow), #ffe08a)
}

body:not(.trainer-user) .badge-discount {
    color: #fff;
    background: linear-gradient(135deg, var(--yp-coral), #ff947d)
}

body:not(.trainer-user) .coach-section:nth-of-type(even) {
    background-image:
        radial-gradient(circle at 5% 20%, rgba(255,200,87,.09), transparent 20rem),
        radial-gradient(circle at 95% 75%, rgba(255,111,97,.07), transparent 22rem)
}

body:not(.trainer-user) .coach-steps article {
    border-color: rgba(32,163,158,.16);
    box-shadow: 0 14px 38px rgba(16,42,67,.075);
    transition: transform .28s ease, box-shadow .28s ease
}

body:not(.trainer-user) .coach-steps article:hover {
    box-shadow: 0 24px 52px rgba(16,42,67,.13);
    transform: translateY(-7px) rotate(-.4deg)
}

body:not(.trainer-user) .footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 5%, rgba(32, 163, 158, .18), transparent 24rem),
        radial-gradient(circle at 90% 90%, rgba(255, 111, 97, .12), transparent 24rem),
        #0d2638
}

body:not(.trainer-user) .footer-section h3 { color: #fff }

body:not(.trainer-user) .footer-section h3 i,
body:not(.trainer-user) .footer-links a:hover { color: var(--yp-mint) }

body:not(.trainer-user) .contact-icon {
    border: 1px solid rgba(121, 222, 210, .2);
    color: var(--yp-mint);
    background: rgba(121, 222, 210, .08)
}

@media (max-width: 768px) {
    body:not(.trainer-user) .page-header-unified { padding-block: 2.6rem }
    body:not(.trainer-user) .page-header-text h1 { font-size: 2rem }
    body:not(.trainer-user) :is(.product-card, .blog-post-card, .knowledge-card):hover { transform: translateY(-3px) }
}

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