@font-face {
    font-family: 'CP Barlow';
    src: url('../fonts/barlow/Barlow-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'CP Barlow';
    src: url('../fonts/barlow/Barlow-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'CP Barlow';
    src: url('../fonts/barlow/Barlow-SemiBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'CP Barlow';
    src: url('../fonts/barlow/Barlow-ExtraBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

body.home,
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home h6,
body.home p,
body.home div,
body.home li,
body.home dt,
body.home dd,
body.home blockquote,
body.home a,
body.home span,
body.home strong,
body.home b,
body.home em,
body.home small,
body.home label,
body.home legend,
body.home select,
body.home option,
body.home textarea,
body.home th,
body.home td,
body.home button,
body.home input {
    font-family: 'CP Barlow', Arial, sans-serif !important;
    letter-spacing: 0;
}

/* One typeface throughout the homepage, with weight providing hierarchy. */
body.home {
    --cp-home-gutter: 20px;
    font-weight: 400;
}

body.home p,
body.home textarea,
body.home input,
body.home select {
    font-weight: 400;
}

body.home strong,
body.home b,
body.home label,
body.home legend {
    font-weight: 700;
}

body.home h1,
body.home h2 {
    font-weight: 800;
}

body.home h3,
body.home h4,
body.home h5,
body.home h6 {
    font-weight: 700;
}

body.home #main > .section {
    width: 100%;
}

body.home #main > .section > .section-content {
    max-width: none;
}

.cp-home-edge {
    width: calc(100% - 2 * var(--cp-home-gutter)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cp-audience-reference {
    max-width: none;
    width: 100% !important;
    margin: 0 auto;
    border-top: 0;
    border-radius: 0;
    overflow: hidden;
}
.cp-audience-reference h1,
.cp-audience-reference h1 span,
.cp-audience-reference h1 strong {
    font-family: 'CP Barlow', Arial, sans-serif !important;
    color: #1b2a4b !important;
    font-weight: 800;
    letter-spacing: 0;
}
.cp-audience-reference h1 { padding: 0 20px; font-size: 34px; line-height: 1.18; }
.cp-audience-reference h1 > span > span:last-child {
    margin-top: 8px;
    font-size: 21px !important;
    line-height: 1.3;
}
.cp-audience-reference h1 > span > span:last-child span {
    color: #4a5578 !important;
    font-weight: 700;
}
.cp-audience-reference .row.cp-audience-row {
    width: calc(100% - 2 * var(--cp-home-gutter));
    max-width: none;
    margin: 0 auto;
    padding: 0 !important;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(27,42,75,.06), 0 10px 24px -14px rgba(27,42,75,.45);
}
.cp-audience-reference .cp-audience-card {
    padding: 0 !important;
    border-left: 1px solid #e9e9f0;
}
.cp-audience-reference .cp-audience-card:first-child { border-left: 0; }
.cp-audience-reference .cp-audience-card > .col-inner,
.cp-audience-reference .cp-audience-card:hover > .col-inner {
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    transform: none;
}
.cp-audience-reference .cp-audience-symbol {
    height: 34px;
    margin-bottom: 24px;
}
.cp-audience-reference .cp-audience-symbol img {
    display: block;
    width: 34px;
    height: 34px;
}
.cp-audience-reference .cp-audience-card h3 {
    font: 800 22px/1.18 'CP Barlow', Arial, sans-serif !important;
    color: #1b2a4b;
    min-height: 52px;
    margin: 0 0 14px;
}
.cp-audience-reference .cp-audience-card p,
.cp-audience-reference .cp-audience-card p span {
    font-family: 'CP Barlow', Arial, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600;
    color: #4a5578 !important;
    line-height: 1.6;
}
.cp-audience-reference .cp-audience-card > .col-inner > p { min-height: 100px; }
@media (min-width: 550px) and (max-width: 849px) {
    .cp-audience-reference .cp-audience-card:nth-child(3) { border-left: 0; }
    .cp-audience-reference .cp-audience-card:nth-child(n+3) { border-top: 1px solid #e9e9f0; }
}
@media (max-width: 549px) {
    .cp-audience-reference { width: 100% !important; }
    .cp-audience-reference h1 { font-size: 25px; }
    .cp-audience-reference h1 > span > span:last-child { font-size: 17px !important; }
    .cp-audience-reference .row.cp-audience-row { width: calc(100% - 2 * var(--cp-home-gutter)); }
    .cp-audience-reference .cp-audience-card { border-left: 0; border-top: 1px solid #e9e9f0; }
    .cp-audience-reference .cp-audience-card:first-child { border-top: 0; }
    .cp-audience-reference .cp-audience-card h3 { min-height: 0; }
    .cp-audience-reference .cp-audience-card > .col-inner > p { min-height: 0; }
}

.cp-top-selling-heading,
.cp-top-selling-heading span,
.cp-top-selling-heading strong,
.cp-new-arrivals-heading,
.cp-new-arrivals-heading span,
.cp-new-arrivals-heading strong,
.cp-trending-categories-heading,
.cp-trending-categories-heading span,
.cp-trending-categories-heading strong,
.cp-brands-heading,
.cp-brands-heading span,
.cp-brands-heading strong {
    font-family: 'CP Barlow', Arial, sans-serif !important;
    font-weight: 800;
    letter-spacing: 0;
}

.cp-top-selling-heading .cp-top-selling-subtitle,
.cp-new-arrivals-heading .cp-new-arrivals-subtitle,
.cp-trending-categories-heading .cp-trending-categories-subtitle,
.cp-brands-heading .cp-brands-subtitle {
    font-weight: 700;
}

.cp-benefits-section .cp-benefits-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: calc(100% - 2 * var(--cp-home-gutter));
    max-width: none;
    margin: 0 auto;
    padding: 14px;
    border-radius: 18px;
    background: #f6f7fa;
    box-shadow: inset 0 1px 3px rgba(27, 42, 75, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

.cp-benefits-strip > .col {
    width: 100%;
    max-width: none;
    padding: 0;
}

.cp-benefits-strip > .col > .col-inner {
    height: 100%;
    min-height: 96px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(27, 42, 75, 0.07), 0 2px 4px -1px rgba(27, 42, 75, 0.06), 0 12px 28px -12px rgba(27, 42, 75, 0.5);
    display: flex;
    align-items: center;
}

.cp-benefits-strip .featured-box {
    width: 100%;
    align-items: center;
}

.cp-benefits-strip .icon-box-img {
    flex: 0 0 64px;
    width: 64px !important;
}

.cp-benefits-strip .icon-inner img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.cp-benefits-strip .icon-box-text {
    min-width: 0;
    padding-left: 14px;
}

.cp-benefits-strip h4,
.cp-benefits-strip h4 span {
    font-family: 'CP Barlow', Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    color: #1b2a4b !important;
}

.cp-benefits-strip h4 > span:last-child:not(:has(br)),
.cp-benefits-strip h4 > span > span:last-child:not(:has(br)) {
    font-size: 16px !important;
    font-weight: 700;
}

/* UX Builder can nest extra spans inside a benefit title. */
body.home .cp-benefits-strip h4 span:has(> br),
body.home .cp-benefits-strip h4 span:has(> br) span {
    font-size: 19px !important;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .cp-benefits-section .cp-benefits-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
    .cp-benefits-section .cp-benefits-strip {
        grid-template-columns: 1fr;
        width: calc(100% - 2 * var(--cp-home-gutter));
        padding: 12px;
    }
}

.cp-category-row {
    width: calc(100% - 2 * var(--cp-home-gutter) + 16px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
}

.cp-platform-section { padding-top: 56px !important; padding-bottom: 24px !important; }
.cp-platform-section + .gap-element { display: none; }
.cp-platform-section .row.cp-platform-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 40px;
    width: calc(100% - 2 * var(--cp-home-gutter));
    max-width: none !important;
    margin: 0 auto;
    padding: 0 !important;
    align-items: center;
}
.cp-platform-row > .col,
.cp-platform-row > .col > .col-inner {
    display: contents;
}
.cp-platform-row > .col > .col-inner > .gap-element { display: none; }
.cp-platform-copy { min-width: 0; padding: 12px 16px; }
.cp-platform-left .cp-platform-copy { grid-column: 1; grid-row: 1; }
.cp-platform-right .cp-platform-image { grid-column: 2; grid-row: 1; }
.cp-platform-left .cp-platform-image { grid-column: 1; grid-row: 2; }
.cp-platform-right .cp-platform-copy { grid-column: 2; grid-row: 2; }
.cp-platform-copy h2 {
    font: 800 56px/1.04 'CP Barlow', Arial, sans-serif;
    color: #0b2545;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}
.cp-platform-right .cp-platform-copy h2 { max-width: 22ch; }
.cp-platform-copy p {
    font: 400 20px/1.5 'CP Barlow', Arial, sans-serif;
    color: #4a5578 !important;
    max-width: 48ch;
    margin: 16px 0 0;
}
.cp-platform-copy .cp-platform-link { margin-top: 20px; }
.cp-platform-link a {
    font-size: 18px;
    font-weight: 700;
    color: #5d1587;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}
.cp-platform-link a:hover { color: #34104e; }
.cp-platform-link a:focus-visible { outline: 2px solid #5d1587; outline-offset: 5px; }
.cp-platform-copy .cp-platform-action { margin-top: 24px; }
.cp-platform-copy .cp-platform-sell-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
}
.cp-platform-image {
    width: 100%;
    height: auto !important;
    padding-top: 0 !important;
    aspect-ratio: 1.4;
    border-radius: 14px;
    overflow: hidden;
}
@media (min-width: 1600px) {
    .cp-platform-copy h2 { font-size: 64px; }
    .cp-platform-copy p { font-size: 22px; }
}
@media (min-width: 850px) and (max-width: 1100px) {
    .cp-platform-copy h2 { font-size: 44px; }
    .cp-platform-copy p { font-size: 18px; }
}
@media (max-width: 849px) {
    .cp-platform-section { padding-top: 40px !important; padding-bottom: 24px !important; }
    .cp-platform-section .row.cp-platform-row {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 2 * var(--cp-home-gutter));
        gap: 22px;
    }
    .cp-platform-copy h2 { font-size: 40px; }
    .cp-platform-copy { padding: 0 4px; }
    .cp-platform-right .cp-platform-image { grid-column: 1; grid-row: 1; }
    .cp-platform-left .cp-platform-copy { grid-column: 1; grid-row: 2; margin-bottom: 14px; }
    .cp-platform-left .cp-platform-image { grid-column: 1; grid-row: 3; }
    .cp-platform-right .cp-platform-copy { grid-column: 1; grid-row: 4; }
}
@media (max-width: 549px) {
    .cp-platform-section .row.cp-platform-row { width: calc(100% - 2 * var(--cp-home-gutter)); }
    .cp-platform-copy h2 { font-size: 36px; line-height: 1.08; }
    .cp-platform-copy p { font-size: 18px; margin-top: 12px; }
    .cp-platform-image { aspect-ratio: 1.25; }
}

.cp-brands-section .cp-brands-carousel {
    width: calc(100% - 2 * var(--cp-home-gutter));
    max-width: none;
    margin: 0 auto;
    overflow: hidden;
}

.cp-brands-carousel .slider { padding: 12px 0 20px; }
.cp-brands-section .cp-brands-carousel .row { padding: 0 0 12px !important; }
.cp-brands-carousel .row > .cp-brand-card { padding: 0 8px !important; }
.cp-brands-section .cp-brand-card > .col-inner {
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    border: 1px solid #f1f1f5;
    box-shadow: 0 2px 3px rgba(27, 42, 75, .04), 0 10px 18px -10px rgba(27, 42, 75, .25);
}
.cp-brands-section .cp-brand-card .banner {
    background-color: #fff !important;
    padding-top: 0 !important;
    height: 120px;
    min-height: 0;
}
.cp-brands-section .cp-brand-card .bg {
    background-size: contain !important;
    background-position: center !important;
}
.cp-brands-section .cp-brand-card p {
    padding: 6px 8px 14px;
    margin: 0;
    font: 800 13px/1.3 'CP Barlow', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
}
.cp-brands-section .cp-brand-card p a { color: #1b2a4b; }
.cp-countries-section {
    width: 100% !important;
    max-width: none;
    margin: 0 auto;
    background: #f6f7fa;
    border-radius: 0;
    overflow: hidden;
}
.cp-countries-section .cp-brands-heading {
    padding: 0 20px;
    font-size: 30px;
    line-height: 1.2;
}
.cp-countries-section .cp-brands-heading span,
.cp-countries-section .cp-brands-heading strong { color: #1b2a4b !important; }
.cp-countries-section .cp-brands-heading .cp-brands-subtitle {
    display: inline-block;
    margin-top: 8px;
    font-size: 21px !important;
    line-height: 1.3;
    color: #4a5578 !important;
}
.cp-countries-section .cp-brand-card .banner {
    margin: 12px 12px 0;
    width: calc(100% - 24px) !important;
    height: auto;
    aspect-ratio: 1.45;
    border-radius: 12px;
    overflow: hidden;
}
.cp-countries-section .cp-brand-card .bg {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.cp-countries-section .cp-brand-card p { padding: 10px 8px 14px; color: #1b2a4b; }
@media (max-width: 549px) {
    .cp-countries-section .cp-brands-heading { font-size: 25px; }
    .cp-countries-section .cp-brands-heading .cp-brands-subtitle { font-size: 17px !important; }
}
.cp-brands-carousel .flickity-prev-next-button {
    width: 38px;
    height: 38px;
    top: 50%;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ece6f3;
    box-shadow: 0 3px 10px rgba(27, 42, 75, .15);
    color: #5d1587;
    opacity: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
    transition: opacity .2s;
}
.cp-brands-carousel .flickity-prev-next-button.previous { left: 4px; }
.cp-brands-carousel .flickity-prev-next-button.next { right: 4px; }
.cp-brands-carousel:hover .flickity-prev-next-button,
.cp-brands-carousel:focus-within .flickity-prev-next-button {
    opacity: 1 !important;
    pointer-events: auto;
}
.cp-brands-carousel .flickity-prev-next-button svg {
    padding: 9px;
    border: 0;
}

body.home .flickity-prev-next-button,
body.home .slider-nav-reveal .flickity-prev-next-button,
body.home .cp-products-nav {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 999px;
    background: #fff !important;
    border: 1px solid #ece6f3 !important;
    box-shadow: 0 3px 12px rgba(27, 42, 75, .16) !important;
    color: #5d1587 !important;
}

body.home .flickity-prev-next-button svg {
    padding: 9px;
}

body.home a.button,
body.home button.button,
body.home .button.primary {
    border-radius: 8px !important;
    background-color: #5d1587 !important;
    color: #fff !important;
    font-family: 'CP Barlow', Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 8px 16px -10px rgba(93, 21, 135, .55);
}

body.home a.button:hover,
body.home button.button:hover,
body.home .button.primary:hover {
    background-color: #4b0f70 !important;
    transform: translateY(-1px);
}

body.home #top-bar {
    background: #11e8e4 !important;
}

body.home .header-main {
    background: #5d1587 !important;
}

body.home .header-main .header-button > .button,
body.home .header-main .nav > li > a {
    color: #fff !important;
}

body.home .header-main .header-button > .button.primary:not(.cp-sell-button) {
    background: #fef100 !important;
    color: #1b1240 !important;
    box-shadow: none;
}

body.home .wide-nav .flex-row {
    align-items: center;
    flex-wrap: nowrap;
}

body.home .wide-nav .flex-left {
    min-width: 0;
    flex: 1 1 auto;
}

body.home .wide-nav .flex-left .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

body.home .wide-nav .flex-left .nav::-webkit-scrollbar {
    display: none;
}

body.home .wide-nav .flex-left .nav > li {
    flex: 0 0 auto;
}

body.home .wide-nav .nav-top-link {
    background: transparent !important;
    color: #1b2a4b !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px;
    font-weight: 800 !important;
}

body.home #header #wide-nav .header-bottom-nav {
    --cp-nav-color: #0b2b45;
}

body.home #header #wide-nav .nav-top-link {
    color: #0b2b45 !important;
}

body.home #header #wide-nav .social-icons a.icon,
body.home #header .mobile-social-icons .social-icons a.icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0b2b45 !important;
}

body.home #header #wide-nav .social-icons a.icon i,
body.home #header #wide-nav .social-icons a.icon i::before,
body.home #header .mobile-social-icons .social-icons a.icon i,
body.home #header .mobile-social-icons .social-icons a.icon i::before {
    color: #0b2b45 !important;
}

body.home #header #wide-nav .social-icons a.icon:focus-visible,
body.home #header .mobile-social-icons .social-icons a.icon:focus-visible {
    outline: 2px solid #0b2b45;
    outline-offset: 3px;
}

body.home [class^="icon-"],
body.home [class*=" icon-"],
body.home [class^="icon-"]::before,
body.home [class*=" icon-"]::before {
    font-family: "fl-icons" !important;
}

body.home .cp-bento-btn-primary {
    background: #fef100 !important;
    color: #1b1240 !important;
}

body.home .cp-bento-btn-secondary {
    background: #fff !important;
    color: #1b2a4b !important;
    border-color: #fff !important;
}

.cp-three-steps-heading {
    padding: 0 20px;
    margin-bottom: 52px;
}
.cp-three-steps-heading h2 {
    margin: 0;
    color: #1b2a4b;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
}
.cp-three-steps-section .row.cp-three-steps-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: calc(100% - 2 * var(--cp-home-gutter));
    max-width: none;
    margin: 0 auto;
}
.cp-three-steps-row::before,
.cp-three-steps-row::after {
    content: none;
}
.cp-three-steps-row > .cp-three-step-card {
    width: 100%;
    max-width: none;
    padding: 0;
}
.cp-three-step-card > .col-inner {
    height: 100%;
    padding: 34px 28px 30px;
    box-shadow: 0 1px 2px rgba(27, 42, 75, .06), 0 10px 24px -14px rgba(27, 42, 75, .45);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.cp-three-step-content .cp-three-step-number {
    margin: 0;
}
.cp-three-step-number span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fef200;
    color: #1b2a4b;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    transition: transform 350ms ease;
}
.cp-three-step-content h3 {
    margin: 22px 0 12px;
    min-height: 2.5em;
    color: #1b2a4b;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}
.cp-three-step-content p:not(.cp-three-step-number) {
    max-width: 340px;
    margin: 0 auto;
    color: #4a5578;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
    .cp-three-step-card:hover > .col-inner {
        transform: translateY(-4px);
        box-shadow: 0 4px 8px rgba(27, 42, 75, .07), 0 20px 36px -16px rgba(27, 42, 75, .55);
    }
    .cp-three-step-card:hover .cp-three-step-number span {
        transform: scale(1.06);
    }
}
@media (max-width: 849px) {
    .cp-three-steps-section .row.cp-three-steps-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        width: calc(100% - 2 * var(--cp-home-gutter));
    }
    .cp-three-steps-heading { margin-bottom: 28px; }
    .cp-three-steps-heading h2 { font-size: 28px; }
    .cp-three-step-card > .col-inner { padding: 28px 22px; }
    .cp-three-step-content h3 { min-height: 0; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-three-step-card > .col-inner,
    .cp-three-step-number span {
        transition: none;
    }
    .cp-three-step-card:hover > .col-inner,
    .cp-three-step-card:hover .cp-three-step-number span {
        transform: none;
    }
}

.cp-category-row > .cp-category-card {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 16px !important;
}

.cp-category-card > .col-inner {
    height: 100%;
    overflow: hidden;
    border: 1px solid #ececf2;
    box-shadow: 0 2px 4px rgba(27, 42, 75, .04), 0 8px 16px -8px rgba(27, 42, 75, .18);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.cp-category-card .banner .bg {
    transition: transform 350ms ease;
}

.cp-category-card:focus-within > .col-inner {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(27, 42, 75, .07), 0 20px 36px -16px rgba(27, 42, 75, .55);
}

.cp-category-card:focus-within .banner .bg {
    transform: scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
    .cp-category-card:hover > .col-inner {
        transform: translateY(-4px);
        box-shadow: 0 4px 8px rgba(27, 42, 75, .07), 0 20px 36px -16px rgba(27, 42, 75, .55);
    }
    .cp-category-card:hover .banner .bg {
        transform: scale(1.04);
    }
    .cp-category-card:hover .cp-category-caption h4 a::after {
        background: #e9d9f5;
        transform: translate(3px, -50%);
    }
}

.cp-category-caption {
    position: relative;
    min-height: 78px;
    padding: 16px 66px 16px 18px;
    background: #fff;
}

.cp-category-caption h4,
.cp-category-caption p {
    font-family: 'CP Barlow', Arial, sans-serif;
    letter-spacing: 0;
    text-align: left;
    margin: 0;
}

.cp-category-caption h4 {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
}

.cp-category-caption h4 a {
    color: #1b2a4b;
}

.cp-category-caption h4 a::after {
    content: '\2192';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5effb;
    color: #5d1587;
    font: 700 20px Arial, sans-serif;
    transition: background-color 180ms ease, transform 180ms ease;
}

.cp-category-caption h4 a:hover::after {
    background: #e9d9f5;
}

.cp-category-card:focus-within .cp-category-caption h4 a::after {
    background: #e9d9f5;
    transform: translate(3px, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .cp-category-card > .col-inner,
    .cp-category-card .banner .bg,
    .cp-category-caption h4 a::after {
        transition: none !important;
    }
    .cp-category-card:is(:hover, :focus-within) > .col-inner,
    .cp-category-card:is(:hover, :focus-within) .banner .bg {
        transform: none;
    }
    .cp-category-card:is(:hover, :focus-within) .cp-category-caption h4 a::after {
        transform: translateY(-50%);
    }
}

.cp-category-caption h4 a:focus-visible {
    outline: 2px solid #5d1587;
    outline-offset: 3px;
}

.cp-category-caption p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    color: #505e80;
}

@media (max-width: 549px) {
    .cp-category-caption {
        padding: 12px 42px 12px 12px;
        min-height: 94px;
    }
    .cp-category-caption h4 { font-size: 16px; }
    .cp-category-caption p { font-size: 13px; }
    .cp-category-caption h4 a::after {
        right: 10px;
        width: 26px;
        height: 26px;
        font-size: 16px;
    }
}

@media (max-width: 549px) {
    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]),
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) {
        min-height: 118px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .row,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .row {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .col,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .col {
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .banner,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .banner {
        min-height: 118px;
        padding-top: 0 !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .banner-inner,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .banner-inner {
        position: relative !important;
        min-height: 118px;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .banner-layers,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .banner-layers {
        position: relative !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 118px;
        padding: 14px 14px 14px 18px;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .text-box.banner-layer,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .text-box.banner-layer {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        transform: none !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .text-box:has(h3),
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .text-box:has(h3) {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .text-box:has(.button),
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .text-box:has(.button) {
        flex: 0 0 auto;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) h3,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) h3 {
        margin: 0 !important;
        max-width: 220px;
        font-size: 15px !important;
        line-height: 1.08 !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) h3 span,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) h3 span {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) h3 br,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) h3 br {
        display: none;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .button,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        border-radius: 8px !important;
        background-color: #5d1587 !important;
        border-color: #5d1587 !important;
        color: #fff !important;
        box-shadow: 0 7px 14px -10px rgba(27, 18, 64, .85);
        line-height: 1 !important;
        white-space: nowrap;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .button span,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .button span {
        font-size: 0 !important;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .button span::after,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .button span::after {
        content: "Catalogue";
        display: inline-block;
        font-size: 13px;
        font-weight: 800;
        color: #fff;
    }

    body.home #content > .section:has(h3.uppercase span[style*="#ffff00"]) .button i,
    body.home #main > .section:has(h3.uppercase span[style*="#ffff00"]) .button i {
        font-size: 17px;
        margin: 0 !important;
    }
}

@media (max-width: 849px) {
    .cp-home-edge,
    .cp-benefits-section .cp-benefits-strip,
    .cp-brands-section .cp-brands-carousel {
        width: calc(100% - 2 * var(--cp-home-gutter)) !important;
    }
}

@media (max-width: 549px) {
    .cp-home-edge,
    .cp-benefits-section .cp-benefits-strip,
    .cp-brands-section .cp-brands-carousel {
        width: calc(100% - 2 * var(--cp-home-gutter)) !important;
    }
}

@media (max-width: 849px) {
    body.home #content > .section:not(.cp-tiktok-section),
    body.home #main > .section:not(.cp-tiktok-section) {
        min-height: 0 !important;
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    body.home #content > .section:first-child,
    body.home #main > .section:first-child {
        padding-top: 0 !important;
    }

    body.home #content > .gap-element,
    body.home #content > .section .gap-element,
    body.home #main > .gap-element,
    body.home #main > .section .gap-element {
        height: 22px !important;
        padding-top: 0 !important;
    }

    body.home .cp-products-outer,
    body.home .cp-bento-outer {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    body.home .cp-platform-section {
        padding-top: 32px !important;
        padding-bottom: 18px !important;
    }



    body.home .cp-three-steps-heading {
        margin-bottom: 24px;
    }
}

@media (max-width: 549px) {
    body.home #content > .section:not(.cp-tiktok-section),
    body.home #main > .section:not(.cp-tiktok-section) {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

    body.home #content > .gap-element,
    body.home #content > .section .gap-element,
    body.home #main > .gap-element,
    body.home #main > .section .gap-element {
        height: 14px !important;
    }

    body.home .cp-products-outer,
    body.home .cp-bento-outer {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    body.home .cp-platform-section {
        padding-top: 24px !important;
        padding-bottom: 14px !important;
    }


    body.home .cp-three-steps-heading {
        margin-bottom: 20px;
    }
}

/* Full labels on touch devices; desktop controls expand inside a fixed-height slot. */
body.home #main .cp-products-slide form.cart button[type="submit"],
body.home #main .cp-products-slide a.add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 40px !important;
    padding: 7px 8px !important;
    margin: 0 auto !important;
    align-self: center;
    box-sizing: border-box;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal;
    background-color: #5d1587 !important;
    border-color: #5d1587 !important;
    color: #fff !important;
    box-shadow: none;
    transform: none !important;
}

body.home #main .cp-products-slide form.cart button[type="submit"]:hover,
body.home #main .cp-products-slide a.add_to_cart_button:hover {
    background-color: #4b0f70 !important;
    border-color: #4b0f70 !important;
}

body.home #main .cp-products-slide .cp-order-button::before {
    content: "\e908";
    font-family: 'fl-icons' !important;
    font-size: 17px;
    line-height: 1;
    color: #fef100;
    margin: 0;
}

body.home #main .cp-products-slide .cp-order-button-label {
    font: inherit !important;
    line-height: 1.2 !important;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    body.home #main .cp-products-slide form.cart button[type="submit"].cp-order-button,
    body.home #main .cp-products-slide a.add_to_cart_button.cp-order-button {
        position: relative;
        width: 36px !important;
        max-width: 136px;
        min-width: 36px;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 18px !important;
        padding: 0 !important;
        font-size: 11px !important;
        gap: 0;
        overflow: hidden;
        transform: none;
        /* Override the older product-card transition in style-new.css. */
        transition: width 280ms cubic-bezier(.22, .61, .36, 1), padding 280ms cubic-bezier(.22, .61, .36, 1), gap 280ms cubic-bezier(.22, .61, .36, 1), background-color 180ms ease, box-shadow 180ms ease !important;
    }

    body.home #main .cp-products-slide form.cart button[type="submit"].cp-order-button::before,
    body.home #main .cp-products-slide a.add_to_cart_button.cp-order-button::before {
        content: "\e908";
        font-family: 'fl-icons' !important;
        position: static;
        flex: 0 0 16px;
        transform: none;
        font-size: 16px;
        display: block;
        width: 16px;
        height: 16px;
        line-height: 1;
        text-align: center;
        color: #fef100;
        margin: 0;
    }

    body.home #main .cp-products-slide .cp-order-button-label {
        position: static;
        flex: 0 0 auto;
        width: max-content;
        max-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        margin-left: 0;
        opacity: 0;
        overflow: hidden;
        white-space: normal;
        text-align: center;
        transform: translateX(4px);
        transition: max-width 280ms cubic-bezier(.22, .61, .36, 1), opacity 120ms ease, transform 280ms cubic-bezier(.22, .61, .36, 1);
    }

    /* Keep text layout stable while the outer label reveals it. */
    body.home #main .cp-products-slide .cp-order-button-text {
        flex: 0 0 auto;
        width: max-content;
        max-width: 88px;
        font: inherit !important;
        line-height: inherit !important;
    }

    body.home #main .cp-products-slide form.cart button[type="submit"].cp-order-button:is(:hover, :focus-visible, .loading),
    body.home #main .cp-products-slide a.add_to_cart_button.cp-order-button:is(:hover, :focus-visible, .loading) {
        width: min(100%, 136px) !important;
        padding: 0 12px !important;
        gap: 8px;
        transform: none;
        box-shadow: 0 4px 12px rgba(93, 21, 135, .18);
    }

    body.home #main .cp-products-slide .cp-order-button:is(:hover, :focus-visible, .loading) .cp-order-button-label {
        max-width: 88px;
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0s, 100ms, 0s;
    }

    body.home #main .cp-products-slide .cp-order-button:focus-visible {
        outline: 2px solid #5d1587;
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home #main .cp-products-slide form.cart button[type="submit"],
    body.home #main .cp-products-slide a.add_to_cart_button,
    body.home #main .cp-products-slide .cp-order-button::before,
    body.home #main .cp-products-slide .cp-order-button-label {
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* Review 2026-10-19: shared homepage edges and stronger text hierarchy. */
body.home .cp-bento-outer,
body.home .cp-products-outer {
    padding-inline: var(--cp-home-gutter);
}
body.home .cp-bento-heading { font-weight: 800; }
body.home .cp-platform-copy { padding-inline: 0; }
body.home #main .cp-products-slide .name.product-title,
body.home #main .cp-products-slide .name.product-title a { font-weight: 700 !important; }
body.home #main .cp-products-slide .category { font-weight: 600 !important; }
body.home #footer h5,
body.home #footer h5 span { font-weight: 700 !important; }
body.home #footer p,
body.home #footer p span,
body.home #footer li,
body.home #footer li a { font-weight: 600 !important; }
body.home #footer .wpforms-submit {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    min-height: 36px;
    line-height: 1.2;
}
body.home #header .header-main .account-item > a,
body.home #header .header-main .cart-item > a,
body.home #header .header-main .cart-item > a .amount,
body.home #header .header-main .cart-item > a .amount span,
body.home #header .header-main .nav-dropdown a,
body.home #header .header-main .nav-dropdown .quantity,
body.home #header .header-main .nav-dropdown .amount,
body.home #header .header-main .nav-dropdown .amount span { font-weight: 600 !important; }
@media (min-width: 850px) {
    body.home #header .header-main .account-item > a,
    body.home #header .header-main .cp-sell-button { font-size: 14px; font-weight: 700; }
}
/* Keep WordPress toolbar glyphs out of the homepage typeface override. */
body.home #wpadminbar .ab-icon,
body.home #wpadminbar .ab-icon::before,
body.home #wpadminbar .ab-item::before,
body.home #wpadminbar .ab-item::after { font-family: dashicons !important; }

/* Reuse the same native carousel for brands and countries at every size. */
body.home .cp-brands-section .cp-desktop-only { display: block !important; }
body.home .cp-brands-section .cp-mobile-slider__wrap { display: none !important; }
body.home .cp-brands-section .cp-brands-carousel {
    width: calc(100% - 2 * var(--cp-home-gutter) + 16px) !important;
}
body.home .cp-brands-section .cp-brands-carousel .flickity-slider > .row {
    margin: 0 !important;
}
body.home .cp-brands-section .cp-brands-carousel .row > .cp-brand-card {
    max-width: none;
}
@media (max-width: 849px) {
    body.home { --cp-home-gutter: 16px; }
    /* Override Flatsome's mobile row padding; card gutters supply the spacing. */
    body.home .row.cp-category-row {
        padding-inline: 0 !important;
    }
    body.home .cp-brands-section .cp-brand-card .banner { height: 112px; }
    body.home .cp-countries-section .cp-brand-card .banner { height: auto; }
    body.home .cp-brands-section .cp-brand-card p { font-size: 13px; }
}
body.home .cp-top-selling-heading,
body.home .cp-new-arrivals-heading,
body.home .cp-trending-categories-heading,
body.home .cp-brands-heading,
body.home .cp-three-steps-heading {
    width: calc(100% - 2 * var(--cp-home-gutter));
    margin-inline: auto;
    padding-inline: 0;
}

/* Gill review, 20 October 2026: banners, titles, registration and spacing. */
body.home #header .header-main .header-search-form input.search-field {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* Only standalone full-width promotions, never category/product banners. */
body.home #content > .section:has(> .section-content > .banner),
body.home #content > .section:has(> .section-content h3.uppercase span[style*="#ffff00"]) {
    width: calc(100% - 2 * var(--cp-home-gutter));
    margin: 16px auto;
    border-radius: 16px;
    overflow: hidden;
}
body.home #main .cp-products-slide .name.product-title,
body.home #main .row .col:has(> .col-inner > .product-small.box) .name.product-title {
    display: block;
    height: 4.2em !important;
    min-height: 4.2em;
    max-height: 4.2em;
    line-height: 1.4;
    overflow: hidden;
}
body.home #main .cp-products-slide .name.product-title a,
body.home #main .row .col:has(> .col-inner > .product-small.box) .name.product-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: 4.2em;
    overflow: hidden;
}
.cp-three-step-content h3 a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.cp-three-step-content h3 a:hover { color: #5d1587; }
.cp-three-steps-actions { text-align: center; margin: 28px 16px 0; }
.cp-three-steps-actions .button { margin: 0; border-radius: 8px; padding-inline: 24px; white-space: normal; }
.cp-three-step-content h3 a:focus-visible,
.cp-three-steps-actions a:focus-visible { outline: 3px solid #5d1587; outline-offset: 5px; }
/* Flatsome's row padding remains even when its columns use display: contents. */
body.home .cp-platform-section .row.cp-platform-row { padding-bottom: 0 !important; margin-bottom: 0; }
body.home .cp-platform-section { padding-bottom: 0 !important; }
body.home .cp-countries-section { padding-top: 32px !important; }
@media (max-width: 849px) {
    body.home .cp-countries-section { padding-top: 24px !important; }
}
/* Clearfix pseudo-elements otherwise become empty grid items after the content. */
body.home .cp-platform-row::before,
body.home .cp-platform-row::after { display: none; }
body.home .cp-platform-row > .col > .col-inner > .gap-element { display: none !important; }
body.home .cp-platform-section + .gap-element { display: none !important; }

/* Round the actual promotion artwork as well as its section wrapper. */
body.home #content > .section:has(> .section-content > .banner) > .section-content > .banner,
body.home #content > .section:has(> .section-content h3.uppercase span[style*="#ffff00"]),
body.home #content > .section:has(> .section-content h3.uppercase span[style*="#ffff00"]) > .section-bg {
    border-radius: 16px !important;
    overflow: hidden;
}
/* UX Builder's negative inner-column margins were clipping the banner's top. */
body.home :is(#content, #main) > .section:has(h3.uppercase span[style*="#ffff00"]) .col-inner {
    margin: 0 !important;
}
body.home :is(#content, #main) > .section:has(h3.uppercase span[style*="#ffff00"]) .banner {
    border-radius: 16px !important;
    overflow: hidden;
    isolation: isolate;
}
body.home :is(#content, #main) > .section:has(h3.uppercase span[style*="#ffff00"]) :is(.banner-inner, .banner-bg, .banner-bg > .bg) {
    border-radius: inherit;
}
@media (max-width: 640px) {
    /* The generic mobile section padding must not leave square artwork inside. */
    body.home #content > .section:has(> .section-content > .banner) {
        padding-block: 0 !important;
    }
}