/* ============================================================
   cariPRO Retainer Cleaner — React page inline styles
   Mirrors retainer-cleaner.css (v1) with rc- prefixed classes
   to avoid conflicts. Existing shared classes (price-content,
   percent-off-text, cut-off-price, etc.) are inherited from
   retainer-cleaner.css which is also loaded on this page.
   ============================================================ */

/* ---- Hero ---- */
.rc-top-hero-section-wrapper {
    padding-top: 70px;
}
.rc-top-hero-section-wrapper .container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
.rc-left-col {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}
.rc-main-image img {
    width: 100%;
    height: auto;
}
.rc-hero-content-wrapper {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.rc-cari-pro-logo {
    position: relative;
    font-weight: 700;
    margin-top: 76px;
    font-size: 30px;
    color: #565759;
    line-height: 30px;
    margin-bottom: 6px;
    font-family: 'Montserrat', sans-serif;
}
.rc-tm {
    font-size: 12px;
    position: absolute;
    top: -5px;
}
.rc-top-hero-section-wrapper h1 {
    font-size: 48px;
    font-weight: 600;
    line-height: 57px;
    color: #00b5bb;
    margin-top: 5px;
    font-family: 'Montserrat', sans-serif;
}
.rc-title-divider {
    background: #0eb4ba;
    width: 100px;
    height: 4px;
    margin: 15px auto 25px auto;
}
.rc-hero-description {
    color: #3a3a3a;
    line-height: 28px;
    font-size: 16px;
    margin-bottom: 35px;
    font-family: 'Open Sans', sans-serif;
}
.rc-cta-btn {
    background-color: #00b5bc;
    border-color: #00b5bc;
    border-radius: 5px;
    margin-top: 0;
    margin-bottom: 20px;
    min-width: 284px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.rc-how-btn {
    font-family: 'Montserrat', sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 16px;
    min-width: 284px;
}
.rc-how-btn:hover {
    color: #68c8c7;
}

/* ---- Benefits ---- */
.rc-benefits-wrapper {
    padding-bottom: 40px;
    margin-bottom: 1px;
    background-color: #00b5bb;
}
.rc-benefits-heading {
    padding-top: 25px;
}
.rc-benefits-heading h2 {
    font-size: 32px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px;
    letter-spacing: 0.05em;
    margin-top: 25px;
    font-family: 'Montserrat', sans-serif;
}
.rc-benefits-icons {
    max-width: 925px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.rc-benefit-box {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
}
/* Higher specificity — single-product WooCommerce CSS overrides plain .rc-benefit-box img */
/* .rc-benefits-wrapper .rc-benefit-box img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 140px;
    display: block;
    margin: 0 auto;
} */
.rc-benefit-box p {
    color: #b3e9eb;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    margin-top: 10px;
    font-weight: 500;
    margin-bottom: 0;
}

/* ---- Appliances ---- */
.rc-appliances-wrapper {
    padding-top: 30px;
    padding-bottom: 49px;
    background-color: #d6eef0;
}
.rc-appliances-content {
    padding-top: 30px;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}
.rc-appliances-content .container {
    max-width: 85rem;
}
.rc-list-box-wrapper {
    display: flex;
}
.rc-list-box {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}
.rc-img-list-box {
    text-align: center;
}
.rc-img-list-box img {
    max-width: 100%;
    height: auto;
}
ul.rc-bg-graphic {
    margin-left: 20px;
    padding-left: 25px;
    list-style: none;
}
ul.rc-bg-graphic li {
    background-image: url('../images/products/retainer-cleaner/circle-dark-blue-tick.jpg');
    background-repeat: no-repeat;
    background-position: left;
    font-size: 28px;
    padding-left: 92px;
    line-height: 56px;
    margin-top: 8px;
    color: #555759;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* ---- Products ---- */
.rc-products-wrapper {
    max-width: 1380px;
    width: 100%;
    padding: 0 35px;
    margin: 0 auto;
}
.rc-products-heading {
    text-align: center;
    padding-bottom: 31px;
}
.rc-products-heading h2 {
    font-size: 39px;
    text-align: center;
    color: #0eb4ba;
    margin-top: 60px;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}
.rc-products-heading p {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}
.rc-products-row {
    gap: 0;
}
.rc-product-card {
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    position: relative;
    overflow: hidden;
}
.rc-backorder {
    background: #f3e7f8;
    color: #dc5dad;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    border-radius: 8px 8px 0 0;
    padding: 5px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.rc-product-image {
    min-height: 199px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-product-image img {
    max-width: 100%;
    height: auto;
}
.rc-product-name {
    padding: 10px 15px 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
}
.rc-product-price-wrap {
    background-color: #f7fcfc;
    padding: 20px 15px 15px;
    text-align: center;
}
.rc-original-price-note {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #555759;
    margin-bottom: 4px;
}
.rc-product-price-wrap .btn-primary-purple {
    background-color: #00b5bb;
    border-color: #00b5bb;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0;
    margin-top: 9px;
    width: 100%;
}
.rc-product-price-wrap .btn-primary-purple:hover {
    background-color: #595858;
    border-color: #595858;
}

/* ---- How It Works ---- */
.rc-how-it-works-wrapper {
    margin-top: 76px;
    border-top: 1px solid #c5c6c9;
    padding-top: 75px;
}
.rc-how-heading {
    text-align: center;
    margin-bottom: 35px;
}
.rc-how-heading h2 {
    color: #00b5bb;
    font-weight: 500;
    font-size: 38px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0;
    line-height: 1.3;
}
.rc-how-heading p {
    text-align: center;
    color: #565759;
    font-size: 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    padding-bottom: 8px;
}
.rc-how-steps {
    display: flex;
    justify-content: space-between;
}
.rc-step-box {
    max-width: 33.33%;
    text-align: center;
}
.rc-step-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 262px;
    margin-bottom: 25px;
}
.rc-step-media img {
    max-width: 100%;
    height: auto;
}
.rc-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #00b5bb;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.rc-step-title {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #2d2e2f;
    margin-bottom: 10px;
}
.rc-step-action {
    color: #00b5bb;
}
.rc-step-text {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    line-height: 24px;
    color: #565759;
    text-align: center;
    padding-top: 12px;
    min-height: 86px;
}
.rc-order-btn-wrap {
    padding-top: 52px;
    padding-bottom: 60px;
    text-align: center;
}
.rc-order-btn-wrap .btn-primary-blue,
.rc-order-btn-wrap .btn {
    background-color: #0fb7bc;
    border-color: #0fb7bc;
    color: #fff;
    letter-spacing: 0;
    border-radius: 5px;
}
.rc-order-btn-wrap .btn:hover {
    background-color: #595858;
    border-color: #595858;
}

/* ---- Guarantee ---- */
.rc-guarantee-wrapper {
    margin-top: 16px;
    border-top: 1px solid #c5c6c9;
}
.rc-guarantee-content {
    text-align: center;
    padding-top: 75px;
}
.rc-guarantee-logo {
    margin-bottom: 35px;
}
.rc-try-it-text {
    font-size: 39px;
    text-align: center;
    color: #68c8c7;
    font-family: 'Open Sans', sans-serif;
    padding-top: 15px;
}
.rc-try-it-text span {
    color: #945aa5;
}
.rc-guarantee-text {
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: #565759;
    padding-top: 10px;
    max-width: 800px;
    margin: 0 auto;
}
.rc-no-strings {
    color: #945aa5;
    font-weight: 500;
    font-size: 31px;
    font-family: 'Montserrat', sans-serif;
    padding-top: 16px;
}
.rc-buy-now-wrap {
    margin-bottom: 40px;
    margin-top: 46px;
}
.rc-buy-now-btn {
    background-color: #0fb7bc;
    border-color: #0fb7bc;
    color: #fff;
    letter-spacing: 0;
    min-width: 180px;
    border-radius: 5px;
}
.rc-buy-now-btn:hover {
    background-color: #595858;
    border-color: #595858;
    color: #fff;
}
.under-review-btn{
    padding-top: 40px;
}
/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 1499px) {
    ul.rc-bg-graphic li {
        font-size: 21px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .rc-top-hero-section-wrapper .rc-cari-pro-logo {
        margin-top: 15px;
    }
    .rc-top-hero-section-wrapper h1 {
        font-size: 42px;
        line-height: 48px;
    }
    .rc-top-hero-section-wrapper {
        padding-bottom: 40px;
    }
    .rc-top-hero-section-wrapper .row {
        align-items: center;
    }
    ul.rc-bg-graphic {
        margin-left: 0;
        padding-left: 0;
    }
    ul.rc-bg-graphic li {
        font-size: 16px;
        padding-left: 50px;
        background-size: 38px;
    }
    .rc-product-image {
        min-height: 160px;
    }
    .rc-step-text br {
        display: none;
    }
    .rc-guarantee-text br {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .rc-top-hero-section-wrapper {
        padding-top: 20px;
    }
    .rc-top-hero-section-wrapper .row {
        flex-direction: column-reverse;
    }
    .rc-main-image {
        margin-top: 54px;
        margin-bottom: 28px;
    }
    .rc-cari-pro-logo {
        margin-top: 0;
    }
    .rc-top-hero-section-wrapper h1 {
        font-size: 42px;
        line-height: 48px;
    }
    .rc-hero-description {
        font-size: 14px;
    }
    /* Benefits */
    .rc-benefits-heading h2 {
        font-size: 26px;
        margin-bottom: 35px;
    }
    .rc-benefits-icons {
        flex-wrap: wrap;
    }
    .rc-benefit-box {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 15px;
    }
    /* Appliances */
    .rc-list-box-wrapper {
        flex-direction: column;
    }
    .rc-list-box {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    .rc-list-box-one { order: 2; }
    .rc-list-box-two { order: 3; }
    .rc-img-list-box {
        order: 1;
        max-width: 150px;
        margin: 0 auto 40px;
    }
    ul.rc-bg-graphic {
        margin-left: 0;
        padding-left: 0;
    }
    ul.rc-bg-graphic li {
        font-size: 22px;
        padding-left: 46px;
        line-height: 32px;
        margin-top: 0;
        background-size: 38px;
        text-align: left;
        max-width: 338px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        min-height: 48px;
        background-position: top left;
    }
    .rc-appliances-wrapper {
        padding-bottom: 20px;
    }
    /* Products */
    .rc-products-wrapper {
        padding: 0 15px;
    }
    .rc-products-heading h2 {
        font-size: 28px;
        line-height: 1;
    }
    .rc-products-heading p {
        padding-top: 10px;
        line-height: 1.2;
    }
    /* How it works */
    .rc-how-it-works-wrapper {
        padding-top: 65px;
    }
    .rc-how-heading p {
        font-size: 20px;
    }
    .rc-how-steps {
        display: block;
    }
    .rc-step-box {
        max-width: 100%;
    }
    .rc-step-text br {
        display: none;
    }
    .rc-order-btn-wrap {
        padding-top: 30px;
        padding-bottom: 60px;
    }
    /* Guarantee */
    .rc-guarantee-content {
        padding-top: 30px;
    }
    .rc-guarantee-logo {
        max-width: 69px;
    }
    .rc-trusted-logo {
        max-width: 130px;
    }
    .rc-guarantee-text {
        font-size: 14px;
        padding: 11px 25px 0;
    }
    .rc-guarantee-text br {
        display: none;
    }
    .rc-try-it-text {
        padding: 0 20px;
    }
    .rc-no-strings {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Slick arrows */
    .rc-how-steps .slick-next { right: 15px; }
    .rc-how-steps .slick-prev { left: 0; }
    .rc-how-steps .slick-next:before,
    .rc-how-steps .slick-prev:before {
        font-size: 35px;
        opacity: 1;
        color: #68c8c7;
    }
}