:root {
    --yellow: #fcc407;
    --navy: #002653;
    --ink: #222;
    --content: 1170px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden
}

body {
    margin: 0;
    font-family: Roboto,Arial,sans-serif;
    color: #fff;
    line-height: 1.6;
    background: var(--navy);
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

a:hover {
    text-decoration: none;
    color: inherit
}

.site-header {
    height: 80px;
    background: var(--yellow);
    position: relative;
    z-index: 100;
    box-shadow: 0 1px 10px rgba(0,0,0,.25)
}

.header-inner {
    height: 80px;
    display: flex;
    align-items: center;
    margin: auto;
    max-width: 1600px
}

.brand {
    height: 80px;
    display: flex;
    align-items: center;
    background: #f6b300;
    padding: 10px 42px 10px 30px;
    border-radius: 0 48px 48px 0;
    box-shadow: 0 0 10px rgba(0,0,0,.35);
    position: relative;
    z-index: 2
}

.brand img {
    width: 215px;
    height: auto
}

.desktop-menu {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 3px;
    flex: 1;
    padding: 0 28px;
    background: var(--yellow);
    color: #222
}

.desktop-menu a {
    font-size: 15px;
    white-space: nowrap;
    padding: 6px 7px;
    border-bottom: 2px solid transparent
}

.desktop-menu a.active,.desktop-menu a:hover {
    color: #fff;
    border-color: #fff
}

.header-actions {
    display: flex;
    align-items: center;
    padding: 0 30px 0 15px;
    color: #222
}

.search-toggle,.menu-toggle {
    border: 0;
    background: none;
    color: #222;
    font-size: 20px;
    cursor: pointer
}

.menu-toggle {
    display: none;
    width: 38px;
    padding: 4px
}

.menu-toggle span {
    height: 3px;
    background: #222;
    border-radius: 3px;
    display: block;
    margin: 5px 0
}

.mobile-menu {
    display: none
}

.search-box {
    display: none;
    position: absolute;
    right: 20px;
    top: 72px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 5px 14px rgba(0,0,0,.2);
    padding: 7px 16px;
    width: 280px
}

.search-box input {
    border: 0;
    outline: 0;
    width: 235px
}

.page-progress {
    height: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    background: #183885;
    z-index: 300;
    opacity: .35
}

.hero {
    width: 100%;
    background: #f7d448
}

.hero .hero-slide {
    display: block
}

.hero img {
    display: block;
    width: 100%;
    height: auto
}

.hero .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0
}

.owl-theme .owl-dots .owl-dot span {
    background: transparent;
    border: 2px solid #fff;
    width: 15px;
    height: 15px;
    margin: 4px
}

.owl-theme .owl-dots .owl-dot.active span {
    background: #fff
}

.dark-section {
    background-color: var(--navy);
    padding: 70px 0
}

.kol-section {
    background-image: url('../images/zestech/bg-home-2.png');
    background-size: cover;
    background-position: top center;
    padding: 60px 0 72px
}

.container {
    max-width: var(--content)
}

.hidden-heading {
    display: none
}

.kol-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 34px 30px
}

.kol-card {
    min-width: 0
}

.kol-card.large {
    grid-column: span 1
}

.kol-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px
}

.kol-card.large img {
    height: auto
}

.kol-copy h3 {
    font-size: 19px;
    line-height: 1.3;
    color: #fff;
    margin: 12px 0 6px;
    font-weight: 700
}

.kol-copy p {
    font-size: 14px;
    color: #d6e1ec;
    line-height: 1.6;
    margin: 0
}

.achievements-section {
    padding: 70px 0
}

.section-header {
    margin-bottom: 38px
}

.section-header h2,.section-heading h2 {
    color: var(--yellow);
    font-size: 36px;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0;
    font-weight: 900
}

.outline-link {
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 7px 34px;
    text-transform: none;
    color: #fff;
    margin-top: 1rem;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 48px 30px
}

.achievement-card img {
    width: 100%;
    height: auto;
    display: block
}

.achievement-card h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 14px 0 5px;
    font-weight: 700
}

.achievement-card p {
    font-size: 14px;
    color: #d6e1ec;
    margin: 0
}

.register-section {
    height: 570px;
    background: linear-gradient(90deg,rgba(0,38,83,.25),rgba(0,38,83,.25)),url('../images/zestech/bg-home-3.jpg') center/cover no-repeat;
    position: relative
}

.register-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: min(760px,90%)
}

.register-content h2 {
    font-size: 36px;
    margin: 0 0 12px;
    font-weight: 900;
    color: #fff
}

.register-content p {
    font-size: 19px;
    margin: 0 0 30px
}

.yellow-btn {
    background: var(--yellow);
    color: #222;
    padding: 14px 48px;
    border-radius: 35px;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700
}

.news-section {
    background-image: url('../images/zestech/bg-home-4.png');
    background-position: center;
    background-size: cover;
    padding: 100px 0
}

.section-heading {
    margin-bottom: 40px
}

.news-carousel {
    padding-bottom: 20px
}

.news-card {
    padding: 10px;
    background: rgba(0,18,48,.72)!important;
}

.news-card img {
    display: block;
    width: 100%;
    height: auto
}

.news-card .source {
    color: var(--yellow);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    margin-top: 15px
}

.news-card h3 {
    font-size: 20px;
    line-height: 1.35;
    margin: 4px 0 8px
}

.news-card p {
    font-size: 14px;
    color: #d6e1ec;
    line-height: 1.6;
    margin: 0
}

.news-carousel .owl-nav button.owl-prev,.news-carousel .owl-nav button.owl-next {
    color: #fff;
    font-size: 42px;
    position: absolute;
    top: 35%;
    transform: translateY(-50%)
}

.news-carousel .owl-nav button.owl-prev {
    left: -42px
}

.news-carousel .owl-nav button.owl-next {
    right: -42px
}

.partner-section {
    padding: 100px 0;
    background: #002653
}

.partner-section .section-heading {
    text-align: center
}

.brand-carousel {
    padding: 10px 15px
}

.brand-carousel a {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    padding: 15px
}

.brand-carousel img {
    max-width: 90%;
    max-height: 85px;
    width: auto!important;
    object-fit: contain;
    opacity: .95
}

.about-section {
    padding: 90px 0;
    background-image: url('../images/zestech/bg-home.png');
    background-size: cover;
    background-position: center
}

.about-visual img {
    width: 100%;
    max-width: 680px;
    display: block;
    margin: auto
}

.about-copy {
    padding-left: 40px
}

.about-logo {
    width: 180px;
    max-width: 55%;
    margin-bottom: 20px
}

.about-copy h1 {
    font-size: 33px;
    line-height: 1.22;
    text-transform: uppercase;
    margin: 0 0 18px;
    font-weight: 900
}

.about-copy p {
    font-size: 15px;
    text-align: justify;
    color: #e1e8f0
}

.about-copy p a {
    color: var(--yellow)
}

.site-footer {
    background: #050505;
    /* padding: 72px 0 22px; */
    color: #fff
}

.footer-logo {
    width: 92px;
    height: auto;
    margin-bottom: 22px
}

.company {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5;
    color: var(--yellow);
    max-width: 500px;
    margin-bottom: 18px
}

.company strong {
    display: block
}

.footer-info p,.footer-policy a {
    font-size: 14px;
    line-height: 1.7;
    margin: 4px 0;
    color: #ddd
}

.footer-info a,.footer-policy a:hover {
    color: #fff
}

.footer-policy {
    /* padding-left: 60px; */
}

.footer-policy h3 {
    color: var(--yellow);
    font-size: 17px;
    margin: 8px 0 15px
}

.footer-policy>a {
    display: block;
    margin: 6px 0
}

.footer-badges {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px
}

.footer-badges img:first-child {
    width: 110px
}

.footer-badges img:last-child {
    width: 75px;
    height: auto
}

.copyright {
    border-top: 1px solid #333;
    margin-top: 35px;
    padding-top: 18px;
    color: #aaa;
    font-size: 14px;
    text-align: center
}

.copyright a {
    color: #fff
}

.floating-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90
}

.floating-social a {
    display: flex;
    width: 58px;
    height: 58px;
    background: var(--yellow);
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 3px 0;
    font-size: 20px
}

.floating-cta {
    position: fixed;
    bottom: 50px;
    z-index: 110
}

.floating-cta a {
    display: flex;
    align-items: center;
    border-radius: 34px;
    color: #fff;
    font-size: 19px;
    padding: 10px 25px 10px 66px;
    position: relative
}

.floating-cta .cta-icon {
    position: absolute;
    left: -4px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0001a;
    font-size: 22px;
    box-shadow: 0 0 0 9px rgba(255,255,255,.22)
}

.hotline {
    left: 50px
}

.hotline a {
    background: #c0001a
}

.consult {
    right: 50px
}

.consult a {
    background: #0096dc
}

.consult .cta-icon {
    color: #c0001a
}

.back-top {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 115px;
    width: 42px;
    height: 42px;
    border: 0;
    background: #d9ac0c;
    color: #fff;
    border-radius: 50%;
    z-index: 110
}

@media (min-width: 1441px) {
    :root {
        --content:1440px
    }

    .header-inner {
        max-width: 1920px
    }

    .desktop-menu a {
        font-size: 16px
    }
}

@media (min-width: 1200px) and (max-width:1440px) {
    .brand {
        padding-right:30px
    }

    .brand img {
        width: 200px
    }

    .desktop-menu {
        padding: 0 12px
    }

    .desktop-menu a {
        font-size: 14px;
        padding-left: 4px;
        padding-right: 4px
    }

    .header-actions {
        padding-right: 12px
    }
}

@media (max-width: 1199px) {
    :root {
        --content:960px
    }

    .desktop-menu {
        gap: 0;
        padding: 0 10px
    }

    .desktop-menu a {
        font-size: 14px;
        padding-left: 4px;
        padding-right: 4px
    }

    .brand {
        padding-right: 28px
    }

    .header-actions {
        padding-right: 20px
    }

    .kol-card.large img {
        height: auto
    }
}

@media (max-width: 991px) {
    .site-header,.header-inner {
        height:80px
    }

    .brand {
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 10px 0 10px 25px
    }

    .brand img {
        width: 215px
    }

    .desktop-menu {
        display: none
    }

    .header-actions {
        margin-left: auto;
        padding-right: 25px;
        gap: 18px
    }

    .menu-toggle {
        display: block
    }

    .mobile-menu {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: #ffc407;
        padding: 12px 25px;
        box-shadow: 0 4px 10px rgba(0,0,0,.2)
    }

    .mobile-menu.open {
        display: block
    }

    .mobile-menu a {
        display: block;
        color: #222;
        padding: 8px 0;
        border-bottom: 1px solid rgba(0,0,0,.12)
    }

    .search-box {
        right: 70px
    }

    .container {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px
    }

    .kol-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 28px 20px
    }

    .kol-card img,.kol-card.large img {
        height: auto
    }

    .achievement-grid {
        gap: 32px 20px
    }

    .achievement-card img {
        height: auto
    }

    .section-header h2,.section-heading h2 {
        font-size: 30px
    }

    .footer-policy {
        padding-left: 15px
    }
}

@media (max-width: 767px) {
    .site-header,.header-inner {
        height:80px
    }

    .brand img {
        width: 195px
    }

    .hero .owl-dots {
        bottom: 12px
    }

    .kol-section {
        padding: 45px 0 42px
    }

    .container {
        padding-left: 15px;
        padding-right: 15px
    }

    .kol-grid {
        display: block
    }

    .kol-card {
        margin-bottom: 28px
    }

    .kol-card img,.kol-card.large img {
        height: auto;
        max-height: none
    }

    .kol-copy h3 {
        font-size: 18px
    }

    .kol-copy p {
        font-size: 14px
    }

    .achievements-section {
        padding: 52px 0
    }

    .section-header {
        display: block!important;
        margin-bottom: 28px
    }

    .section-header .outline-link {
        margin-top: 14px
    }

    .section-header h2,.section-heading h2 {
        font-size: 23px
    }

    .achievement-grid {
        display: block
    }

    .achievement-card {
        margin-bottom: 34px
    }

    .achievement-card img {
        height: auto
    }

    .achievement-card h3 {
        font-size: 18px
    }

    .register-section {
        height: 430px
    }

    .register-content h2 {
        font-size: 24px
    }

    .register-content p {
        font-size: 16px
    }

    .news-section,.partner-section {
        padding: 60px 0
    }

    .news-card {
        padding: 0
    }

    .news-card img {
        height: auto
    }

    .news-card h3 {
        font-size: 18px
    }

    .news-carousel .owl-nav {
        display: none
    }

    .brand-carousel a {
        height: 100px
    }

    .brand-carousel img {
        max-height: 62px
    }

    .about-section {
        padding: 58px 0
    }

    .about-copy {
        padding: 30px 0 0
    }

    .about-logo {
        width: 145px
    }

    .about-copy h1 {
        font-size: 24px
    }

    .about-copy p {
        font-size: 14px
    }

    .site-footer {
        padding-top: 52px
    }

    .footer-info {
        text-align: center
    }

    .footer-logo {
        margin: 0 auto 18px
    }

    .company {
        margin-left: auto;
        margin-right: auto
    }

    .footer-policy {
        padding: 30px 15px 0
    }

    .floating-social {
        display: none
    }

    .floating-cta {
        bottom: 20px
    }

    .floating-cta a {
        font-size: 15px;
        padding: 8px 12px 8px 45px
    }

    .floating-cta .cta-icon {
        width: 40px;
        height: 40px;
        font-size: 15px;
        box-shadow: 0 0 0 7px rgba(255,255,255,.2)
    }

    .hotline {
        left: 20px;
        display: none;
    }

    .consult {
        right: 10px;
        display: none;
    }

    .back-top {
        display: block
    }
}

@media (max-width: 420px) {
    .brand img {
        width:180px
    }

    .header-actions {
        padding-right: 14px;
        gap: 8px
    }

    .search-box {
        left: 15px;
        right: 15px;
        width: auto
    }

    .search-box input {
        width: calc(100% - 32px)
    }

    .floating-cta a {
        font-size: 13px
    }

    .hotline a {
        padding-right: 8px
    }

    .consult a {
        padding-right: 8px
    }
}

/* Project-owned extensions for product groups and inner pages. */
.np-section {
    padding: 70px 0;
    background: var(--navy);
    color: #fff
}

.np-container {
    width: min(var(--content),calc(100% - 30px));
    margin: 0 auto
}

.np-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 38px
}

.np-heading h2 {
    margin: 0;
    color: var(--yellow);
    font-size: 36px;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase
}

.np-intro {
    margin-top: 10px;
    color: #d6e1ec
}

.np-grid {
    display: grid;
    gap: 30px
}

.np-products {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

.np-product {
    min-width: 0;
    background: rgba(255,255,255,.04);
    padding: 16px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px
}

.np-product-image {
    background: #fff;
    border-radius: 8px;
    overflow: hidden
}

.np-product-image img {
    display: block;
    width: 100%;
    height: auto
}

.np-product h3 {
    font-size: 18px;
    line-height: 1.35;
    margin: 14px 0 10px;
    color: #fff
}

.np-product h3 a:hover {
    color: var(--yellow)
}

.np-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.np-product-bottom strong {
    color: var(--yellow);
    font-size: 17px
}

.np-product-quote {
    font-size: 12px;
    padding: 7px 14px;
    text-transform: none
}

.breadCrumbs {
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 14px 0;
    color: #d6e1ec
}

.breadCrumbs .wrap-content {
    width: min(var(--content),calc(100% - 30px));
    margin: 0 auto
}

.breadCrumbs a {
    color: var(--yellow)
}

.gcp-page #main-content {
    background: var(--navy);
    color: #fff
}

.gcp-page .wrap-content {
    width: min(var(--content),calc(100% - 30px));
    margin: 0 auto
}

.section-title,.gcp-newsroom-title,.newsroom-title {
    color: var(--yellow);
    font-size: 36px;
    line-height: 1.25;
    font-weight: 900;
    text-transform: uppercase
}

.content-detail,.gcp-article {
    color: #e1e8f0;
    font-size: 16px;
    line-height: 1.8
}

.content-detail img,.gcp-article img {
    max-width: 100%;
    height: auto
}

.gcp-list-page,.gcp-newsroom,.gcp-article {
    /* padding: 65px 0; */
}

.gcp-newsroom-filters,.newsroom-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 34px
}

.newsroom-filters a {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 24px;
    padding: 8px 18px;
    color: #fff
}

.newsroom-filters a.active,.newsroom-filters a:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #222
}

.newsroom-grid,.gcp-list-page .row {
    /* margin-top: 20px; */
}

.gcp-newsroom .newsroom-grid .np-card,.gcp-list-page .row>div {
    /* background: rgba(255,255,255,.04); */
    /* border: 1px solid rgba(255,255,255,.1); */
    /* border-radius: 10px; */
    /* padding: 16px; */
}

.gcp-article-image {
    display: block;
    width: 100%;
    max-width: 930px;
    height: auto;
    margin: 24px auto;
    border-radius: 10px
}

.pagination-home {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px
}

.pagination-home a,.pagination-home span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px;
    color: #fff
}

.pagination-home .active,.pagination-home a:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #222
}

.alert-warning {
    background: rgba(252,196,7,.12);
    border: 1px solid rgba(252,196,7,.45);
    color: #fff
}

.inner-header {
    box-shadow: 0 1px 10px rgba(0,0,0,.25)
}

.site-footer .footer-copy {
    color: #ddd;
    margin-bottom: 16px
}

.site-footer .footer-copy img {
    max-width: 100%;
    height: auto
}

@media (max-width: 991px) {
    .np-products {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .np-heading h2,.section-title,.newsroom-title {
        font-size: 30px
    }
}

@media (max-width: 767px) {
    .np-section {
        padding:52px 0
    }

    .np-container,.breadCrumbs .wrap-content,.gcp-page .wrap-content {
        width: calc(100% - 30px)
    }

    .np-section-head {
        display: block;
        margin-bottom: 28px
    }

    .np-section-head .outline-link {
        margin-top: 14px;
        display: none;
    }

    .np-products {
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .np-heading h2,.section-title,.newsroom-title {
        font-size: 23px
    }

    .gcp-list-page,.gcp-newsroom,.gcp-article {
        padding: 45px 0
    }

    .content-detail,.gcp-article {
        font-size: 15px
    }
}

.gcp-video-page .video-card {
    height: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 12px
}

.video-card-image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px
}

.video-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600/338;
    object-fit: cover
}

.video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 32px;
    background: rgba(0,38,83,.28)
}

.video-card h2 {
    font-size: 18px;
    line-height: 1.35;
    margin: 14px 0 4px;
    color: #fff
}

.video-card h2 a:hover {
    color: var(--yellow)
}

/* Keep legacy page CSS from changing the reference header and banner geometry. */
.np-site .site-header {
    height: 80px!important;
    padding: 0!important;
    background: var(--yellow)!important;
    position: relative!important
}

.np-site .header-inner {
    height: 80px!important
}

.np-site .brand {
    width: auto!important;
    height: 80px!important;
    min-height: 0!important;
    flex: 0 0 auto!important;
    background: #f6b300!important;
    box-shadow: 0 0 10px rgba(0,0,0,.35)!important;
    border-radius: 0 48px 48px 0!important;
    padding: 10px 42px 10px 30px!important
}

.np-site .brand img {
    width: 215px!important;
    height: auto!important
}

.np-home .hero {
    min-height: 0!important;
    height: auto!important;
    display: block!important;
    padding: 0!important;
    background: #f7d448!important
}

.np-home .hero-carousel {
    display: block!important;
    height: auto!important
}

.np-home .hero-carousel .owl-stage-outer {
    height: auto!important
}

@media (max-width: 1199px) {
    .np-site .brand {
        padding-right:28px!important
    }

    .np-site .brand img {
        width: 200px!important
    }
}

@media (max-width: 991px) {
    .np-site .site-header,.np-site .header-inner {
        height:80px!important
    }

    .np-site .brand {
        width: auto!important;
        height: 80px!important;
        flex: 0 0 auto!important;
        background: transparent!important;
        box-shadow: none!important;
        border-radius: 0!important;
        padding: 10px 0 10px 25px!important
    }

    .np-site .brand img {
        width: 215px!important;
        max-width: none!important
    }

    .np-home .hero {
        padding: 0!important
    }
}

@media (max-width: 767px) {
    .np-site .brand img {
        width:195px!important
    }
}

@media (max-width: 420px) {
    .np-site .brand img {
        width:180px!important
    }
}

/* Override legacy listing theme so every inner page inherits the homepage palette. */
.np-site:not(.np-home) {
    --navy: #002653;
    --brand-tint: rgba(255,255,255,.08);
    --listing-line: rgba(255,255,255,.16);
    --listing-ink: #fff;
    --listing-muted: #d6e1ec
}

.np-site.gcp-page #main-content {
    background: var(--navy);
    color: #fff
}

.np-site:not(.product-detail-page) .gcp-reference-page,.np-site:not(.product-detail-page) .section-title,.np-site:not(.product-detail-page) .content-detail {
    font-family: Roboto,Arial,sans-serif;
    color: #fff
}

.np-site:not(.product-detail-page) .newsroom-title {
    color: var(--yellow)!important
}

.np-site:not(.product-detail-page) .catalog-sidebar,.np-site:not(.product-detail-page) .catalog-toolbar,.np-site:not(.product-detail-page) .catalog-card,.np-site:not(.product-detail-page) .newsroom-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.16);
    color: #fff
}

.np-site:not(.product-detail-page) .catalog-sidebar h2,.np-site:not(.product-detail-page) .catalog-toolbar,.np-site:not(.product-detail-page) .catalog-card-body,.np-site:not(.product-detail-page) .newsroom-card-body {
    color: #fff
}

.np-site:not(.product-detail-page) .catalog-nav-item,.np-site:not(.product-detail-page) .catalog-card a,.np-site:not(.product-detail-page) .newsroom-card a {
    color: #fff
}

.np-site:not(.product-detail-page) .catalog-nav-item:hover,.np-site:not(.product-detail-page) .catalog-nav-item.active {
    background: var(--yellow);
    color: #222
}

.np-site:not(.product-detail-page) .catalog-card-category,.np-site:not(.product-detail-page) .newsroom-category {
    color: var(--yellow)
}

.np-site:not(.product-detail-page) .catalog-card p,.np-site:not(.product-detail-page) .newsroom-card p,.np-site:not(.product-detail-page) .newsroom-date {
    color: #d6e1ec
}

.np-site:not(.product-detail-page) .catalog-banner {
    background: linear-gradient(110deg,#001a3c,#002653 52%,#00132b)
}

.np-site:not(.product-detail-page) .catalog-empty {
    color: #d6e1ec
}

.product-detail-page #main-content {
    background: var(--navy);
    color: #fff
}

.product-detail-page .grid-pro-detail {
    color: #fff
}

.product-detail-page .right-pro-detail,.product-detail-page .tabs-pro-detail {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.16);
    color: #fff
}

.product-detail-page .title-pro-detail,.product-detail-page .price-new-pro-detail {
    color: var(--yellow)
}

.contact-page #main-content,.gcp-page .wrap-content {
    color: #fff
}

.np-site {
    background: var(--navy)!important;
    color: #fff
}

.np-site .breadCrumbs {
    background: var(--navy)!important;
    color: #d6e1ec;
    border-color: rgba(255,255,255,.12)
}

.np-site .breadCrumbs .breadcrumb-item.active {
    color: #d6e1ec!important
}

.np-site:not(.np-home) .section-title,.np-site:not(.np-home) .gcp-newsroom-title,.np-site:not(.np-home) .newsroom-title {
    color: var(--yellow)!important
}

.np-site .site-footer {
    background: #050505!important;
    color: #fff!important
}

/* Header dropdowns expose the same category tree as the legacy menu. */
.np-site .desktop-menu {
    align-items: stretch!important;
    justify-content: flex-start!important;
    gap: 0!important
}

.np-site .desktop-menu .nav-item {
    position: relative;
    display: flex;
    align-items: center
}

.np-site .desktop-menu .nav-submenu-toggle {
    display: none!important
}

.np-site .desktop-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 80px;
    padding: 6px 17px!important;
    color: #222!important;
    border-bottom: 2px solid transparent!important;
    white-space: nowrap;
    font-size: 16px;
}

.np-site .desktop-menu .nav-link.active,.np-site .desktop-menu .nav-link:hover,.np-site .desktop-menu .nav-item:focus-within>.nav-link {
    color: #fff!important;
    border-bottom-color: #fff!important
}

.np-site .desktop-menu .nav-caret {
    font-size: 11px;
    transition: transform .2s ease
}

.np-site .desktop-menu .nav-item:hover>.nav-link .nav-caret,.np-site .desktop-menu .nav-item:focus-within>.nav-link .nav-caret {
    transform: rotate(180deg)
}

.np-site .desktop-menu .nav-submenu {
    position: absolute;
    z-index: 210;
    top: 100%;
    left: 0;
    display: none;
    min-width: 245px;
    padding: 8px;
    background: #002653;
    border: 1px solid rgba(252,196,7,.45);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 36px rgba(0,0,0,.28)
}

.np-site .desktop-menu .nav-item:hover>.nav-submenu,.np-site .desktop-menu .nav-item:focus-within>.nav-submenu {
    display: block
}

.np-site .desktop-menu .nav-submenu .nav-item {
    display: block;
    width: 100%
}

.np-site .desktop-menu .nav-submenu .nav-link {
    width: 100%;
    height: auto;
    justify-content: space-between;
    padding: 10px 12px!important;
    border: 0!important;
    border-radius: 7px;
    color: #fff!important;
    font-size: 14px
}

.np-site .desktop-menu .nav-submenu .nav-link:hover,.np-site .desktop-menu .nav-submenu .nav-item:focus-within>.nav-link {
    background: rgba(252,196,7,.16)!important;
    color: var(--yellow)!important
}

.np-site .desktop-menu .nav-submenu .nav-caret {
    transform: rotate(-90deg);
    font-size: 10px
}

.np-site .desktop-menu .nav-submenu .nav-item:hover>.nav-link .nav-caret,.np-site .desktop-menu .nav-submenu .nav-item:focus-within>.nav-link .nav-caret {
    transform: rotate(0deg)
}

.np-site .desktop-menu .nav-submenu .nav-item.has-children::after {
    content: "";
    position: absolute;
    z-index: 211;
    top: -8px;
    right: -8px;
    width: 8px;
    height: calc(100% + 16px)
}

.np-site .desktop-menu .nav-submenu .nav-submenu {
    top: -8px;
    left: calc(100% + 8px);
    border-radius: 10px
}

.np-site .nav-submenu-toggle {
    display: none
}

.np-site .mobile-menu .nav-item {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.12)
}

.np-site .mobile-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 0!important;
    border: 0!important;
    color: #222!important;
    font-size: 15px
}

.np-site .mobile-menu .nav-link.active,.np-site .mobile-menu .nav-link:hover {
    color: #002653!important
}

.np-site .mobile-menu .nav-caret {
    display: none
}

.np-site .mobile-menu .nav-submenu-toggle {
    position: absolute;
    top: 2px;
    right: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #222
}

.np-site .mobile-menu .nav-submenu-toggle i {
    transition: transform .2s ease
}

.np-site .mobile-menu .nav-item.open>.nav-submenu-toggle i {
    transform: rotate(180deg)
}

.np-site .mobile-menu .nav-submenu {
    display: none;
    padding: 0 0 5px 14px
}

.np-site .mobile-menu .nav-item.open>.nav-submenu {
    display: block
}

.np-site .mobile-menu .nav-submenu .nav-item {
    border-bottom: 0
}

.np-site .mobile-menu .nav-submenu .nav-link {
    padding: 7px 0!important;
    font-size: 14px
}

@media (min-width: 1200px) and (max-width:1440px) {
    .np-site .desktop-menu .nav-link {
        /* padding-left:7px!important; *//* padding-right:7px!important; *//* font-size:13px; */padding: 0px 20px !important;
    }
}

@media (max-width: 991px) {
    .np-site .desktop-menu {
        display:none!important
    }

    .np-site .mobile-menu .nav-submenu .nav-submenu {
        padding-left: 14px
    }
}

/* Final visual system: homepage, catalog, detail and contact share one palette. */
.np-site .np-product.catalog-product, .np-site .np-product.catalog-product:hover {
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(252,196,7,.22)!important;
    border-radius: 14px!important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18)!important;
    color: #fff!important;
    overflow: hidden;
    transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease
}

.np-site .np-product.catalog-product:hover {
    transform: translateY(-4px);
    border-color: rgba(252,196,7,.62)!important;
    box-shadow: 0 18px 34px rgba(0,0,0,.3)!important
}

.np-site .np-product.catalog-product .np-product-image {
    background: #fff!important;
    border-radius: 10px!important;
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden
}

.np-site .np-product.catalog-product .np-product-image img {
    display: block;
    width: 100%;
    height: auto
}

.np-site .np-product.catalog-product .np-product-tag {
    background: var(--yellow)!important;
    color: #002653!important;
    border-radius: 999px!important;
    font-weight: 700!important;
    padding: 5px 11px!important
}

.np-site .np-product.catalog-product small {
    display: block;
    color: #d6e1ec!important;
    font-size: 12px;
    letter-spacing: .02em
}

.np-site .np-product.catalog-product h3 {
    margin: 10px 0 14px!important;
    min-height: 48px;
    font-size: 18px!important;
    line-height: 1.35!important;
    color: #fff!important
}

.np-site .np-product.catalog-product h3 a {
    color: #fff!important
}

.np-site .np-product.catalog-product h3 a:hover {
    color: var(--yellow)!important
}

.np-site .np-product.catalog-product .np-product-bottom {
    gap: 12px;
    align-items: center
}

.np-site .np-product.catalog-product .np-product-bottom strong {
    color: var(--yellow)!important;
    font-size: 17px!important;
    white-space: nowrap
}

.np-site .np-product.catalog-product .np-add-cart {
    border: 1px solid var(--yellow)!important;
    background: var(--yellow)!important;
    color: #002653!important;
    border-radius: 999px!important;
    font-weight: 800!important;
    padding: 8px 15px!important;
    line-height: 1!important;
    cursor: pointer;
    transition: background .2s ease,color .2s ease,transform .2s ease
}

.np-site .np-product.catalog-product .np-add-cart:hover {
    background: #fff!important;
    border-color: #fff!important;
    color: #002653!important;
    transform: translateY(-1px)
}

/* Product detail: remove legacy red/blue/white controls that conflict with the brand. */
body.product-detail-page #main-content .product-detail-main {
    min-width: 0
}

body.product-detail-page #main-content .catalog-sidebar {
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.14)!important;
    border-radius: 14px!important;
    color: #fff!important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18)!important
}

body.product-detail-page #main-content .catalog-sidebar h2 {
    color: var(--yellow)!important
}

body.product-detail-page #main-content .catalog-sidebar .catalog-nav-item {
    color: #fff!important;
    border-color: rgba(255,255,255,.1)!important
}

body.product-detail-page #main-content .catalog-sidebar .catalog-nav-item:hover, body.product-detail-page #main-content .catalog-sidebar .catalog-nav-item.active {
    background: var(--yellow)!important;
    color: #002653!important
}

body.product-detail-page #main-content .catalog-sidebar .catalog-subcategories {
    border-color: rgba(255,255,255,.12)!important
}

body.product-detail-page #main-content .left-pro-detail, body.product-detail-page #main-content .right-pro-detail, body.product-detail-page #main-content .tabs-pro-detail {
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.14)!important;
    border-radius: 14px!important;
    color: #fff!important
}

body.product-detail-page #main-content .left-pro-detail {
    padding: 18px!important
}

body.product-detail-page #main-content .left-pro-detail .MagicZoom {
    display: block!important;
    border: 0!important;
    border-radius: 10px!important;
    background: #fff!important;
    padding: 0!important;
    overflow: hidden
}

body.product-detail-page #main-content .left-pro-detail .MagicZoom img {
    display: block!important;
    width: 100%!important;
    max-height: 560px!important;
    object-fit: contain!important;
    background: #fff!important
}

body.product-detail-page #main-content .gallery-thumb-pro {
    margin-top: 14px
}

body.product-detail-page #main-content .thumb-pro-detail {
    display: block;
    background: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    overflow: hidden;
    padding: 3px
}

body.product-detail-page #main-content .right-pro-detail {
    padding: 28px!important;
    height: 100%
}

body.product-detail-page #main-content .title-pro-detail, body.product-detail-page #main-content .price-new-pro-detail {
    color: var(--yellow)!important
}

body.product-detail-page #main-content .title-pro-detail {
    font-size: clamp(24px,2.4vw,38px)!important;
    line-height: 1.18!important
}

body.product-detail-page #main-content .right-pro-detail p, body.product-detail-page #main-content .attr-label-pro-detail, body.product-detail-page #main-content .attr-content-pro-detail {
    color: #d6e1ec!important
}

body.product-detail-page #main-content .attr-content-pro-detail[style] {
    color: var(--yellow)!important
}

body.product-detail-page #main-content .price-new-pro-detail {
    font-size: 28px!important;
    font-weight: 800!important
}

body.product-detail-page #main-content .price-old-pro-detail {
    color: #aebdce!important
}

body.product-detail-page #main-content .quantity-pro-detail {
    display: inline-flex!important;
    align-items: center;
    border: 1px solid rgba(255,255,255,.35)!important;
    border-radius: 999px!important;
    overflow: hidden;
    background: transparent!important
}

body.product-detail-page #main-content .quantity-pro-detail span, body.product-detail-page #main-content .quantity-pro-detail input {
    width: 48px!important;
    height: 44px!important;
    display: grid!important;
    place-items: center!important;
    border: 0!important;
    background: transparent!important;
    color: #fff!important;
    text-align: center!important;
    font-size: 18px!important
}

body.product-detail-page #main-content .quantity-pro-detail span {
    cursor: pointer;
    color: var(--yellow)!important;
    font-weight: 800
}

body.product-detail-page #main-content .cart-pro-detail {
    display: flex!important;
    gap: 12px!important;
    margin-top: 20px!important;
    max-width: none!important
}

body.product-detail-page #main-content .cart-pro-detail a {
    flex: 1 1 0!important;
    min-height: 50px!important;
    border-radius: 999px!important;
    border: 1px solid var(--yellow)!important;
    background: var(--yellow)!important;
    color: #002653!important;
    font-weight: 800!important;
    padding: 12px 18px!important
}

body.product-detail-page #main-content .cart-pro-detail a.addnow {
    background: transparent!important;
    color: #fff!important;
    border-color: rgba(255,255,255,.55)!important
}

body.product-detail-page #main-content .cart-pro-detail a:hover {
    background: #fff!important;
    border-color: #fff!important;
    color: #002653!important
}

body.product-detail-page #main-content .tabs-pro-detail {
    margin-top: 24px!important;
    padding: 16px!important
}

body.product-detail-page #main-content .tabs-pro-detail .nav-tabs {
    gap: 10px!important;
    border: 0!important
}

body.product-detail-page #main-content .tabs-pro-detail .nav-link {
    border: 1px solid rgba(255,255,255,.35)!important;
    border-radius: 999px!important;
    background: transparent!important;
    color: #fff!important;
    font-weight: 700!important;
    padding: 11px 18px!important
}

body.product-detail-page #main-content .tabs-pro-detail .nav-link.active {
    background: var(--yellow)!important;
    border-color: var(--yellow)!important;
    color: #002653!important
}

body.product-detail-page #main-content .tabs-pro-detail .tab-content {
    border: 1px solid rgba(255,255,255,.14)!important;
    border-radius: 10px!important;
    background: rgba(0,18,48,.45)!important;
    color: #e1e8f0!important;
    padding: 22px!important
}

body.product-detail-page #main-content .tabs-pro-detail .content-detail {
    color: #e1e8f0!important
}

/* Contact page uses the same dark panels, yellow headings and high-contrast form controls. */
body.contact-page #main-content {
    background: var(--navy)!important
}

body.contact-page #main-content > .section-title {
    margin: 0 auto 36px!important;
    color: var(--yellow)!important;
    font-size: clamp(30px,4vw,52px)!important
}

body.contact-page #contact {
    padding: 0 0 80px!important;
    background: var(--navy)!important
}

body.contact-page #contact .maxwidth {
    width: min(var(--content),calc(100% - 30px));
    margin: 0 auto
}

body.contact-page #contact .eyebrow {
    color: #d6e1ec!important;
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase
}

body.contact-page #contact .section-title {
    color: var(--yellow)!important;
    text-align: left!important;
    font-size: clamp(28px,3.2vw,48px)!important;
    margin: 8px 0 16px!important
}

body.contact-page #contact .np-contact-intro {
    color: #d6e1ec!important;
    max-width: 520px
}

body.contact-page #contact .contact-info {
    display: grid;
    gap: 14px
}

body.contact-page #contact .contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 16px!important;
    background: rgba(255,255,255,.05)!important;
    border: 1px solid rgba(255,255,255,.12)!important;
    border-radius: 12px!important;
    color: #fff!important
}

body.contact-page #contact .contact-item > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--yellow)!important;
    color: #002653!important;
    font-size: 18px
}

body.contact-page #contact .contact-item strong {
    display: block;
    color: #fff!important
}

body.contact-page #contact .contact-item small, body.contact-page #contact .contact-item a {
    display: block;
    color: #d6e1ec!important
}

body.contact-page #contact .contact-panel {
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.16)!important;
    border-radius: 14px!important;
    box-shadow: 0 18px 40px rgba(0,0,0,.2)!important;
    padding: 30px!important;
    color: #fff!important
}

body.contact-page #contact .contact-panel h2 {
    color: var(--yellow)!important;
    margin-top: 0
}

body.contact-page #contact .contact-panel p.text-secondary {
    color: #d6e1ec!important
}

body.contact-page #contact .contact-panel .form-label {
    color: #fff!important;
    font-weight: 700!important;
    letter-spacing: .03em
}

body.contact-page #contact .contact-panel .form-control {
    background: rgba(255,255,255,.07)!important;
    border: 1px solid rgba(255,255,255,.28)!important;
    color: #fff!important;
    border-radius: 9px!important;
    min-height: 48px
}

body.contact-page #contact .contact-panel textarea.form-control {
    min-height: 120px
}

body.contact-page #contact .contact-panel .form-control::placeholder {
    color: #aebdce!important
}

body.contact-page #contact .contact-panel .form-control:focus {
    border-color: var(--yellow)!important;
    box-shadow: 0 0 0 .2rem rgba(252,196,7,.18)!important
}

body.contact-page #contact .contact-panel .btn-main {
    width: 100%;
    border: 1px solid var(--yellow)!important;
    border-radius: 999px!important;
    background: var(--yellow)!important;
    color: #002653!important;
    font-weight: 800!important;
    padding: 13px 20px!important
}

body.contact-page #contact .contact-panel .btn-main:hover {
    background: #fff!important;
    border-color: #fff!important
}

body.contact-page #contact .map-wrap,body.contact-page #contact .maps {
    border-radius: 14px;
    overflow: hidden;
    margin-top: 30px
}

@media (max-width: 767px) {
    body.product-detail-page #main-content .right-pro-detail {
        padding:20px!important
    }

    body.product-detail-page #main-content .cart-pro-detail {
        /* flex-direction: column!important; */
    }

    body.product-detail-page #main-content .cart-pro-detail a {
        width: 100%!important
    }

    body.contact-page #contact .contact-panel {
        padding: 20px!important
    }
}

body.contact-page .site-footer#contact {
    padding: 72px 0 22px!important;
    background: #050505!important
}

/* np-media.css ships a studio palette for the old homepage; the reference homepage stays navy. */
.np-site.np-home {
    --navy: #002653!important;
    background: #002653!important
}

.np-site.np-home .np-section {
    background: #002653!important
}

/* Checkout keeps the homepage palette while preserving the existing cart/payment behavior. */
body.order-page #main-content, body.payment-page #main-content {
    background: var(--navy)!important;
    color: #fff!important
}

body.order-page #main-content {
    padding-top: 42px!important;
    padding-bottom: 72px!important
}

body.order-page .wrap-cart {
    width: min(var(--content),calc(100% - 30px));
    margin: 0 auto;
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.15)!important;
    border-radius: 16px!important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22)!important;
    padding: 28px 24px!important
}

body.order-page .top-cart {
    border-right-color: rgba(255,255,255,.16)!important
}

body.order-page .title-cart {
    color: var(--yellow)!important;
    border-bottom-color: rgba(255,255,255,.16)!important;
    font-size: 18px!important;
    font-weight: 800!important
}

body.order-page .procart-label {
    background: rgba(252,196,7,.14)!important;
    border-color: rgba(252,196,7,.25)!important;
    color: #fff!important;
    font-weight: 700
}

body.order-page .procart {
    background: rgba(255,255,255,.04)!important;
    border-color: rgba(255,255,255,.13)!important;
    color: #fff!important
}

body.order-page .pic-procart img {
    width: 85px!important;
    height: 85px!important;
    max-height: 85px!important;
    object-fit: contain!important;
    background: #fff;
    border-radius: 8px;
    padding: 3px
}

body.order-page .pic-procart .del-procart {
    color: #aebdce!important
}

body.order-page .pic-procart .del-procart:hover {
    color: var(--yellow)!important
}

body.order-page .name-procart a {
    color: #fff!important;
    font-size: 16px!important;
    font-weight: 700
}

body.order-page .name-procart a:hover {
    color: var(--yellow)!important
}

body.order-page .info-procart small {
    color: #aebdce!important
}

body.order-page .quantity-counter-procart {
    border-color: rgba(255,255,255,.3)!important;
    background: rgba(0,18,48,.5)!important
}

body.order-page .counter-procart {
    color: var(--yellow)!important
}

body.order-page .counter-procart:hover {
    color: #fff!important
}

body.order-page .quantity-counter-procart .quantity-procart {
    background: transparent!important;
    color: #fff!important;
    border-color: rgba(255,255,255,.2)!important
}

body.order-page .price-new-cart {
    color: var(--yellow)!important;
    font-weight: 800!important
}

body.order-page .price-old-cart {
    color: #aebdce!important
}

body.order-page .total-procart {
    background: rgba(255,255,255,.06)!important;
    border-color: rgba(255,255,255,.14)!important;
    color: #fff!important
}

body.order-page .total-procart p:last-child {
    color: var(--yellow)!important;
    font-weight: 800!important
}

body.order-page .box-dktt {
    color: #d6e1ec!important
}

body.order-page .box-dktt a {
    color: var(--yellow)!important
}

body.order-page .label-dieukhoan {
    color: #d6e1ec!important
}

body.order-page .section-cart {
    background: rgba(0,18,48,.35)!important
}

body.order-page .payments-label {
    background: rgba(255,255,255,.06)!important;
    border-color: rgba(255,255,255,.2)!important;
    color: #fff!important
}

body.order-page .payments-label:hover {
    background: rgba(252,196,7,.12)!important;
    border-color: rgba(252,196,7,.55)!important
}

body.order-page .payments-label.active {
    background: var(--yellow)!important;
    border-color: var(--yellow)!important;
    color: #002653!important;
    box-shadow: 0 8px 18px rgba(0,0,0,.2)!important
}

body.order-page .payments-info {
    background: rgba(255,255,255,.05)!important;
    border-color: rgba(255,255,255,.16)!important;
    color: #d6e1ec!important
}

body.order-page .form-floating.form-floating-cus>.form-control, body.order-page .form-cart .form-control {
    background: rgba(255,255,255,.07)!important;
    border-color: rgba(255,255,255,.28)!important;
    color: #fff!important;
    border-radius: 10px!important
}

body.order-page .form-cart .form-control::placeholder {
    color: #aebdce!important
}

body.order-page .form-floating.form-floating-cus>label {
    color: #aebdce!important
}

body.order-page .form-floating.form-floating-cus>label {
    opacity: 0!important;
    pointer-events: none!important
}

body.order-page .form-floating.form-floating-cus>.form-control::placeholder {
    color: #aebdce!important;
    opacity: 1!important
}

body.order-page .form-cart .form-control:focus {
    border-color: var(--yellow)!important;
    box-shadow: 0 0 0 .2rem rgba(252,196,7,.18)!important
}

body.order-page .form-cart .select2-container--default .select2-selection--single {
    background: rgba(255,255,255,.07)!important;
    border-color: rgba(255,255,255,.28)!important;
    border-radius: 10px!important
}

body.order-page .form-cart .select2-container--default .select2-selection--single .select2-selection__rendered, body.order-page .form-cart .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #aebdce!important
}

body.order-page .form-cart .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: #aebdce!important
}

body.order-page .form-cart .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--yellow)!important;
    box-shadow: 0 0 0 .2rem rgba(252,196,7,.18)!important
}

body.order-page .select2-dropdown {
    background: #061c3b!important;
    border-color: rgba(255,255,255,.25)!important;
    color: #fff!important
}

body.order-page .select2-search--dropdown .select2-search__field {
    background: rgba(255,255,255,.08)!important;
    border-color: rgba(255,255,255,.25)!important;
    color: #fff!important
}

body.order-page .select2-results__option {
    color: #fff!important
}

body.order-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--yellow)!important;
    color: #002653!important
}

body.order-page .btn-cart {
    background: var(--yellow)!important;
    border-color: var(--yellow)!important;
    color: #002653!important;
    border-radius: 999px!important;
    font-weight: 800!important;
    min-height: 52px!important
}

body.order-page .btn-cart:hover,body.order-page .btn-cart:focus {
    background: #fff!important;
    border-color: #fff!important;
    color: #002653!important;
    box-shadow: 0 8px 18px rgba(0,0,0,.24)!important
}

body.order-page .empty-cart {
    color: #fff!important
}

body.order-page .empty-cart i {
    color: var(--yellow)!important
}

body.order-page .empty-cart p {
    color: #fff!important
}

@media (max-width: 991px) {
    body.order-page .top-cart {
        border-right:0!important;
        border-bottom: 1px solid rgba(255,255,255,.16);
        padding-bottom: 28px;
        margin-bottom: 28px
    }

    body.order-page .bottom-cart {
        padding-top: 0!important
    }
}

@media (max-width: 575px) {
    body.order-page #main-content {
        padding-top:20px!important
    }

    body.order-page .wrap-cart {
        width: calc(100% - 20px);
        padding: 20px 14px!important
    }

    body.order-page .procart {
        padding: 16px 6px!important
    }

    body.order-page .name-procart a {
        font-size: 14px!important
    }

    body.order-page .procart-label {
        font-size: 12px!important
    }
}

/* Payment confirmation uses the same navy/yellow system as checkout and the homepage. */
body.order-page,body.payment-page {
    color: #fff!important
}

body.payment-page #main-content {
    padding-top: 42px!important;
    padding-bottom: 72px!important
}

body.payment-page .sepay-payment {
    width: min(var(--content),calc(100% - 30px));
    padding: 0;
    margin: 0 auto;
    color: #fff;
    --payment-border: rgba(255,255,255,.16);
    --payment-ink: #fff;
    --payment-muted: #d6e1ec;
    --payment-green: var(--yellow)
}

body.payment-page .payment-heading h1 {
    color: var(--yellow)!important
}

body.payment-page .payment-kicker,body.payment-page .payment-card-label {
    color: var(--yellow)!important
}

body.payment-page .payment-heading-note {
    color: #d6e1ec!important
}

body.payment-page .payment-order-chip {
    background: rgba(0,18,48,.72)!important;
    border-color: rgba(252,196,7,.36)!important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18)!important
}

body.payment-page .payment-order-chip span {
    color: #aebdce!important
}

body.payment-page .payment-order-chip strong {
    color: #fff!important
}

body.payment-page .payment-banner {
    background: rgba(0,18,48,.72)!important;
    border-color: rgba(252,196,7,.4)!important;
    color: #fff!important
}

body.payment-page .payment-banner-success,body.payment-page .payment-banner-pending,body.payment-page .payment-banner-warning {
    background: rgba(252,196,7,.1)!important;
    border-color: rgba(252,196,7,.42)!important;
    color: #fff!important
}

body.payment-page .payment-status-icon {
    background: var(--yellow)!important;
    color: #002653!important
}

body.payment-page .payment-banner div span {
    color: #d6e1ec!important;
    opacity: 1!important
}

body.payment-page .payment-card {
    background: rgba(0,18,48,.72)!important;
    border-color: rgba(255,255,255,.16)!important;
    border-radius: 16px!important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22)!important;
    color: #fff!important
}

body.payment-page .payment-card-heading h2 {
    color: #fff!important
}

body.payment-page .payment-card-state,body.payment-page .payment-qr-badge {
    background: var(--yellow)!important;
    color: #002653!important
}

body.payment-page .payment-customer {
    background: rgba(255,255,255,.06)!important
}

body.payment-page .payment-customer span,body.payment-page .payment-transfer-details span,body.payment-page .payment-line small {
    color: #aebdce!important
}

body.payment-page .payment-customer strong,body.payment-page .payment-product strong,body.payment-page .payment-line>strong {
    color: #fff!important
}

body.payment-page .payment-line {
    border-bottom-color: rgba(255,255,255,.14)!important
}

body.payment-page .payment-total {
    color: #fff!important
}

body.payment-page .payment-total strong {
    color: var(--yellow)!important
}

body.payment-page .payment-transaction {
    border-top-color: rgba(255,255,255,.2)!important;
    color: #aebdce!important
}

body.payment-page .payment-transaction strong {
    color: #fff!important
}

body.payment-page .payment-qr {
    background: linear-gradient(160deg,rgba(0,30,63,.98),rgba(0,18,48,.98))!important
}

body.payment-page .payment-qr-lead,body.payment-page .payment-qr-note,body.payment-page .payment-expiry {
    color: #d6e1ec!important
}

body.payment-page .payment-qr-code {
    border-color: rgba(252,196,7,.42)!important;
    background: #fff!important;
    box-shadow: 0 12px 30px rgba(0,0,0,.24)!important
}

body.payment-page .payment-bank-info,body.payment-page .payment-transfer-details div {
    background: rgba(255,255,255,.06)!important;
    border-color: rgba(255,255,255,.16)!important;
    color: #fff!important
}

body.payment-page .payment-bank-info span {
    color: #d6e1ec!important
}

body.payment-page .payment-bank-info b,body.payment-page .payment-transfer-details strong {
    color: var(--yellow)!important
}

body.payment-page .payment-live-status {
    color: var(--yellow)!important
}

body.payment-page .payment-live-status::before {
    background: var(--yellow)!important;
    box-shadow: 0 0 0 5px rgba(252,196,7,.15)!important
}

body.payment-page .payment-check,body.payment-page .payment-next-button {
    background: var(--yellow)!important;
    color: #002653!important;
    border: 1px solid var(--yellow)!important
}

body.payment-page .payment-check:hover,body.payment-page .payment-next-button:hover {
    background: #fff!important;
    border-color: #fff!important;
    color: #002653!important;
    box-shadow: 0 9px 20px rgba(0,0,0,.24)!important
}

body.payment-page .payment-next-step {
    background: linear-gradient(155deg,#001a3c,#002653)!important;
    color: #fff!important
}

body.payment-page .payment-next-icon {
    background: var(--yellow)!important;
    color: #002653!important
}

body.payment-page .payment-next-step .payment-card-label {
    color: var(--yellow)!important
}

body.payment-page .payment-next-step p {
    color: #d6e1ec!important
}

body.payment-page .payment-back-button {
    background: transparent!important;
    border-color: rgba(252,196,7,.7)!important;
    color: var(--yellow)!important
}

body.payment-page .payment-back-button:hover {
    background: var(--yellow)!important;
    color: #002653!important
}

body.payment-page .sepay-payment .btn:focus-visible {
    outline-color: var(--yellow)!important
}

@media (max-width: 575px) {
    body.payment-page #main-content {
        padding-top:20px!important;
        padding-bottom: 48px!important
    }

    body.payment-page .sepay-payment {
        width: calc(100% - 20px)
    }

    body.payment-page .payment-heading h1 {
        font-size: 30px!important
    }
}

@media (max-width: 767px) {
    body.order-page .floating-cta,body.order-page .back-top,body.payment-page .floating-cta,body.payment-page .back-top {
        display:none!important
    }
}

/* Keep the cart reachable beside the vertical social rail on every page. */
.np-site .floating-cart {
    position: fixed;
    right: 0;
    top: calc(50% - 154px);
    z-index: 112;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    border: 1px solid rgba(252,196,7,.78);
    color: var(--yellow);
    box-shadow: 0 8px 20px rgba(0,0,0,.24);
    font-size: 22px;
    transition: background .2s ease,color .2s ease,transform .2s ease
}

.np-site .floating-cart:hover,.np-site .floating-cart:focus-visible {
    background: var(--yellow);
    color: var(--navy);
    transform: translateX(-3px);
    outline: none
}

.np-site .floating-cart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

.np-site .floating-cart-badge {
    position: absolute;
    top: -7px;
    left: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c0001a;
    color: #fff;
    border: 2px solid var(--yellow);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

@media (max-width: 767px) {
    .np-site .floating-cart {
        top:auto;
        right: 10px;
        bottom: 190px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 19px
    }

    .np-site .floating-cart-badge {
        top: -5px;
        left: -5px
    }
}

/* Inner news listings must keep readable text on the navy visual system. */
.np-site:not(.np-home) .gcp-list-page .news-card {
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.16)!important;
    border-radius: 14px!important;
    color: #fff!important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18)!important
}

.np-site:not(.np-home) .gcp-list-page .news-card img {
    display: block;
    width: 100%;
    aspect-ratio: 450/300;
    object-fit: cover
}

.np-site:not(.np-home) .gcp-list-page .news-card .news-body {
    background: transparent!important;
    color: #fff!important;
    padding: 10px 5px!important;
}

.np-site:not(.np-home) .gcp-list-page .news-card .news-body small {
    color: var(--yellow)!important;
    font-size: 13px!important
}

.np-site:not(.np-home) .gcp-list-page .news-card .news-body h3,.np-site:not(.np-home) .gcp-list-page .news-card .news-body h3 a {
    color: #fff!important
}

.np-site:not(.np-home) .gcp-list-page .news-card .news-body h3 a:hover {
    color: var(--yellow)!important
}

.np-site:not(.np-home) .gcp-list-page .news-card .news-body p {
    color: #d6e1ec!important
}

/* Product category counts and toolbar totals need enough contrast against navy panels. */
.np-site:not(.np-home) .catalog-sidebar h2 i,.np-site:not(.np-home) .catalog-toolbar i,.np-site:not(.np-home) .newsroom-list-heading i {
    color: var(--yellow)!important
}

.np-site:not(.np-home) .catalog-nav-item b {
    background: rgba(252,196,7,.16)!important;
    color: var(--yellow)!important;
    min-width: 30px;
    padding: 3px 8px!important;
    line-height: 1.2
}

.np-site:not(.np-home) .catalog-nav-item.active b {
    background: #002653!important;
    color: var(--yellow)!important
}

.np-site:not(.np-home) .catalog-toolbar>span {
    background: rgba(252,196,7,.16)!important;
    color: var(--yellow)!important;
    border: 1px solid rgba(252,196,7,.25)!important
}

.np-site:not(.np-home) .newsroom-list-heading>span {
    color: var(--yellow)!important;
    background: rgba(252,196,7,.12)!important;
    border: 1px solid rgba(252,196,7,.22)!important;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700
}

/* Featured newsroom card keeps the reference white panel while using a stronger brand blue hierarchy. */
.np-site:not(.np-home) .gcp-newsroom .newsroom-featured {
    background: #fff!important;
    border: 1px solid #dfe7f1!important;
    box-shadow: 0 16px 34px rgba(0,20,55,.18)!important;
    color: #172b46!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-image {
    background: #eef4fb!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-image>span {
    background: #002653!important;
    color: #fff!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured .newsroom-date {
    color: #71839a!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured h2,.np-site:not(.np-home) .gcp-newsroom .newsroom-featured h2 a {
    color: #2b63d9!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured h2 a:hover {
    color: #1748ad!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-body>p {
    color: #555a64!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-body .newsroom-card-footer {
    border-top-color: #e6edf5!important;
    color: #52657b!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-body .newsroom-card-footer strong {
    color: #52657b!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-body .newsroom-card-footer a {
    color: #002653!important
}

.np-site:not(.np-home) .gcp-newsroom .newsroom-featured-body .newsroom-card-footer a:hover {
    color: #2b63d9!important
}

/* Keep video and regular news listings as separate card systems. */
.np-site .gcp-video-page .row-video {
    display: grid!important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px!important;
    margin: 24px 0 0!important
}

.np-site .gcp-video-page .row-video>[class*="col-"] {
    width: auto!important;
    max-width: none!important;
    margin: 0!important;
    padding: 0!important;
    background: transparent!important;
    border: 0!important;
    border-radius: 0!important
}

.np-site .gcp-video-page .video-card {
    height: 100%;
    padding: 16px!important;
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.16)!important;
    border-radius: 16px!important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18)!important
}

.np-site .gcp-video-page .video-card-image {
    border-radius: 11px!important;
    background: #061a38!important
}

.np-site .gcp-video-page .video-card h2 {
    margin: 16px 0 2px!important;
    color: #fff!important;
    font-size: 20px!important;
    line-height: 1.35!important
}

.np-site .gcp-video-page .video-card h2 a {
    color: #fff!important
}

.np-site .gcp-video-page .video-card h2 a:hover {
    color: var(--yellow)!important
}

.np-site .gcp-video-page .video-play {
    background: rgba(0,38,83,.26)!important;
    font-size: 38px!important
}

.np-site .gcp-news-list-page .row {
    /* display: grid!important; */
    /* grid-template-columns: repeat(2,minmax(0,1fr)); */
    /* gap: 24px!important; */
    /* margin: 24px 0 0!important; */
}

.np-site .gcp-news-list-page .row>[class*="col-"] {
    /* width: auto!important; */
    /* max-width: none!important; */
    /* margin: 0!important; */
    /* padding: 0!important; */
    /* background: transparent!important; */
    /* border: 0!important; */
    /* border-radius: 0!important; */
}

.np-site .gcp-news-list-page .news-card {
    height: 100%;
    background: rgba(0,18,48,.72)!important;
    border: 1px solid rgba(255,255,255,.16)!important;
    border-radius: 16px!important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18)!important;
    color: #fff!important;
    overflow: hidden
}

.np-site .gcp-news-list-page .news-card img {
    display: block;
    width: 100%;
    aspect-ratio: 450/300;
    object-fit: cover
}

.np-site .gcp-news-list-page .news-card .news-body {
    padding: 24px!important;
    background: transparent!important;
    color: #fff!important
}

.np-site .gcp-news-list-page .news-card .news-body small {
    color: var(--yellow)!important;
    font-size: 14px!important
}

.np-site .gcp-news-list-page .news-card .news-body h3,.np-site .gcp-news-list-page .news-card .news-body h3 a {
    color: #fff!important;
    font-size: 22px!important;
    line-height: 1.35!important
}

.np-site .gcp-news-list-page .news-card .news-body h3 a:hover {
    color: var(--yellow)!important
}

.np-site .gcp-news-list-page .news-card .news-body p {
    color: #d6e1ec!important;
    font-size: 16px!important;
    line-height: 1.65!important
}

@media (max-width: 991px) {
    .np-site .gcp-video-page .row-video {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
}

@media (max-width: 767px) {
    .np-site .gcp-video-page .row-video,.np-site .gcp-news-list-page .row {
        grid-template-columns:1fr!important;
        gap: 20px!important
    }

    .np-site .gcp-video-page .video-card {
        padding: 14px!important
    }

    .np-site .gcp-video-page .video-card h2 {
        font-size: 18px!important
    }

    .np-site .gcp-news-list-page .news-card .news-body {
        padding: 20px!important
    }

    .np-site .gcp-news-list-page .news-card .news-body h3 {
        font-size: 19px!important
    }
}

/* The related-products heading inherits a legacy dark color; keep it visible on navy. */
body.product-detail-page #main-content .title-main, body.product-detail-page #main-content .title-main span {
    color: var(--yellow)!important;
    font-weight: 900!important
}

body.contact-page .floating-cta {
    display: none!important
}

/* Uploaded home-cta artwork already contains its own copy and CTA artwork. */
.register-section-image {
    background-position: center;
    background-size: cover
}

.register-image-link {
    position: absolute;
    inset: 0;
    display: block
}

/* Cart popup follows the shared navy/yellow visual system instead of the legacy light cart skin. */
#popup-cart .modal-dialog {
    width: calc(100% - 24px);
    max-width: 860px;
    margin: 1.5rem auto
}

#popup-cart .modal-content {
    overflow: hidden;
    background: linear-gradient(155deg,#061a38 0%,#002653 100%)!important;
    color: #fff!important;
    border: 1px solid rgba(252,196,7,.35)!important;
    border-radius: 18px!important;
    box-shadow: 0 24px 70px rgba(0,0,0,.42)!important
}

#popup-cart .modal-header {
    padding: 18px 22px 16px!important;
    background: rgba(0,10,30,.24)!important;
    border-bottom: 1px solid rgba(255,255,255,.14)!important
}

#popup-cart .modal-title {
    margin: 0!important;
    color: var(--yellow)!important;
    font-size: 18px!important;
    font-weight: 800!important;
    letter-spacing: .02em;
    text-transform: uppercase
}

#popup-cart .btn-close {
    width: 34px!important;
    height: 34px!important;
    margin: 0!important;
    padding: 0!important;
    border: 1px solid rgba(255,255,255,.28)!important;
    border-radius: 50%!important;
    background-color: transparent!important;
    background-size: 13px!important;
    filter: invert(1)!important;
    opacity: .85!important
}

#popup-cart .btn-close:hover {
    background-color: var(--yellow)!important;
    border-color: var(--yellow)!important;
    filter: none!important;
    opacity: 1!important
}

#popup-cart .modal-body {
    padding: 20px 22px 22px!important
}

#popup-cart .form-cart,#popup-cart .wrap-cart {
    width: 100%!important;
    margin: 0!important;
    padding: 0!important;
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important
}

#popup-cart .top-cart {
    border: 0!important
}

#popup-cart .procart-label {
    margin: 0!important;
    padding: 11px 10px!important;
    background: rgba(252,196,7,.14)!important;
    border: 1px solid rgba(252,196,7,.3)!important;
    border-radius: 10px 10px 0 0!important;
    color: #fff!important;
    font-size: 12px!important;
    font-weight: 800!important;
    letter-spacing: .04em
}

#popup-cart .procart-label .pic-procart,#popup-cart .procart-label .info-procart,#popup-cart .procart-label .quantity-procart,#popup-cart .procart-label .price-procart,#popup-cart .procart-label p {
    color: #fff!important
}

#popup-cart .procart {
    margin: 0!important;
    padding: 16px 10px!important;
    background: rgba(255,255,255,.055)!important;
    border: 1px solid rgba(255,255,255,.14)!important;
    border-top: 0!important;
    color: #fff!important
}

#popup-cart .procart.procart-label {
    background: rgba(252,196,7,.14)!important;
    border-color: rgba(252,196,7,.3)!important
}

#popup-cart .procart:last-child {
    border-radius: 0 0 10px 10px!important
}

#popup-cart .pic-procart img {
    width: 85px!important;
    height: 85px!important;
    max-height: 85px!important;
    object-fit: contain!important;
    background: #fff!important;
    border: 1px solid rgba(255,255,255,.2)!important;
    border-radius: 8px!important;
    padding: 3px!important
}

#popup-cart .pic-procart .del-procart {
    display: block!important;
    margin-top: 7px!important;
    color: #aebdce!important;
    font-size: 12px!important
}

#popup-cart .pic-procart .del-procart:hover {
    color: var(--yellow)!important
}

#popup-cart .name-procart {
    margin: 0 0 4px!important
}

#popup-cart .name-procart a {
    color: #fff!important;
    font-size: 15px!important;
    font-weight: 700!important
}

#popup-cart .name-procart a:hover {
    color: var(--yellow)!important
}

#popup-cart .info-procart small {
    color: #aebdce!important;
    font-size: 12px!important
}

#popup-cart .quantity-counter-procart {
    height: 34px!important;
    border: 1px solid rgba(252,196,7,.6)!important;
    border-radius: 8px!important;
    background: rgba(0,18,48,.7)!important;
    overflow: hidden
}

#popup-cart .counter-procart {
    color: var(--yellow)!important;
    font-size: 20px!important;
    font-weight: 800!important;
    line-height: 30px!important
}

#popup-cart .counter-procart:hover {
    color: #fff!important
}

#popup-cart .quantity-counter-procart .quantity-procart {
    height: 32px!important;
    background: transparent!important;
    border-color: rgba(252,196,7,.35)!important;
    color: #fff!important;
    font-weight: 700!important
}

#popup-cart .price-new-cart {
    color: var(--yellow)!important;
    font-weight: 800!important;
    margin-bottom: 2px!important
}

#popup-cart .price-old-cart {
    color: #9eafc1!important
}

#popup-cart .money-procart {
    margin-top: 14px!important
}

#popup-cart .total-procart {
    padding: 11px 14px!important;
    background: rgba(252,196,7,.1)!important;
    border: 1px solid rgba(252,196,7,.28)!important;
    color: #fff!important
}

#popup-cart .total-procart p {
    margin: 0!important;
    color: #fff!important;
    font-size: 14px!important
}

#popup-cart .total-procart p:last-child {
    color: var(--yellow)!important;
    font-size: 16px!important;
    font-weight: 800!important
}

#popup-cart .modal-footer {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 16px!important;
    margin-top: 16px!important;
    padding: 0!important;
    border: 0!important
}

#popup-cart .buymore-cart {
    color: var(--yellow)!important;
    font-size: 14px!important;
    font-weight: 700!important
}

#popup-cart .buymore-cart:hover {
    color: #fff!important
}

#popup-cart .btn-cart {
    min-height: 46px!important;
    padding: 11px 22px!important;
    border: 1px solid var(--yellow)!important;
    border-radius: 999px!important;
    background: var(--yellow)!important;
    color: #002653!important;
    font-weight: 800!important;
    box-shadow: 0 8px 18px rgba(0,0,0,.2)!important
}

#popup-cart .btn-cart:hover,#popup-cart .btn-cart:focus {
    background: #fff!important;
    border-color: #fff!important;
    color: #002653!important
}

#popup-cart .empty-cart {
    padding: 20px!important;
    color: #fff!important;
    text-align: center
}

#popup-cart .empty-cart i {
    color: var(--yellow)!important;
    font-size: 42px!important
}

#popup-cart .empty-cart p {
    color: #fff!important
}

@media (max-width: 575px) {
    #popup-cart .modal-dialog {
        width:calc(100% - 16px);
        margin: .5rem auto
    }

    #popup-cart .modal-header {
        padding: 14px 16px!important
    }

    #popup-cart .modal-body {
        padding: 14px 12px 16px!important
    }

    #popup-cart .procart-label {
        font-size: 10px!important;
        padding: 9px 5px!important
    }

    #popup-cart .procart {
        padding: 13px 5px!important
    }

    #popup-cart .pic-procart img {
        width: 64px!important;
        height: 64px!important
    }

    #popup-cart .name-procart a {
        font-size: 13px!important
    }

    #popup-cart .quantity-counter-procart {
        height: 31px!important
    }

    #popup-cart .quantity-counter-procart .quantity-procart {
        height: 29px!important
    }

    #popup-cart .modal-footer {
        align-items: stretch!important;
        flex-direction: column-reverse!important;
        gap: 10px!important
    }

    #popup-cart .btn-cart {
        width: 100%!important
    }

    #popup-cart .buymore-cart {
        text-align: center!important
    }
}