/* ============================================================
   Refubly — home
   Split out of the old single refubly-theme.css, rule by rule: a selector
   rendered by exactly one page lives in that page's file, anything shared
   lives here. Media queries are re-wrapped per file, so each keeps only its
   own overrides.
   Load order: base -> chrome -> components -> <page>. Keep it.
   NOTE: theme sets html{font-size:62.5%} -> 1rem = 10px.
   ============================================================ */

.rf-section {
    margin-bottom: 5.6rem;
}

.rf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.rf-title {
    font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.2;
}

.rf-sub {
    font-size: 1.4rem;
    color: var(--rf-muted);
    margin: .6rem 0 0;
}

.rf-view-all {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--rf-primary);
    white-space: nowrap;
    transition: color .2s, gap .2s;
}

.rf-view-all:hover {
    color: var(--rf-primary-dark);
    gap: .8rem;
}

.rf-view-all i {
    font-size: 1.1rem;
}

/* SEO heading block */

.rf-seo-heading {
    text-align: center;
    margin: 0 0 3.6rem;
}

.rf-seo-heading h1 {
    font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--rf-ink);
    margin-bottom: .8rem;
}

.rf-seo-heading p {
    font-size: 1.45rem;
    color: var(--rf-muted);
    max-width: 68rem;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   2. Hero
   ------------------------------------------------------------ */

.rf-hero {
    padding-top: 1.6rem;
    margin-bottom: 4.4rem;
}

.rf-hero-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
}

.rf-hero-main {
    position: relative;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-bg-soft);
}

.rf-hero-main .banner-media,
.rf-hero-side .banner-media {
    height: 100%;
    margin: 0;
}

.rf-hero-main .banner-media img,
.rf-hero-side .banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rf-hero-main .banner-price-info {
    font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem);
    margin-bottom: 2rem;
}

.rf-hero-main .swiper-pagination {
    bottom: 1.6rem;
}

.rf-hero-main .swiper-pagination-bullet {
    width: .8rem;
    height: .8rem;
    background: #fff;
    opacity: .55;
    transition: all .25s;
}

.rf-hero-main .swiper-pagination-bullet-active {
    width: 2.2rem;
    border-radius: 99px;
    background: var(--rf-primary);
    opacity: 1;
}

.rf-hero-prev,
.rf-hero-next,
.rf-deals-prev,
.rf-deals-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4.4rem !important;
    height: 4.4rem !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important;
    color: var(--rf-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    cursor: pointer !important;
    z-index: 30 !important;
    transition: all .25s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.rf-hero-prev::before, .rf-hero-next::before,
.rf-deals-prev::before, .rf-deals-next::before,
.rf-hero-prev::after, .rf-hero-next::after,
.rf-deals-prev::after, .rf-deals-next::after {
    display: none !important;
    content: "" !important;
}

.rf-hero-prev { left: 2rem !important; }

.rf-hero-next { right: 2rem !important; }

.rf-deals-prev { left: 0.5rem !important; }

.rf-deals-next { right: 0.5rem !important; }

.rf-hero-prev:hover, .rf-hero-next:hover,
.rf-deals-prev:hover, .rf-deals-next:hover {
    background: var(--rf-primary) !important;
    color: #ffffff !important;
    border-color: var(--rf-primary) !important;
    box-shadow: 0 6px 20px rgba(7, 166, 75, 0.35) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

@media (max-width: 575px) {
    .rf-hero-prev, .rf-hero-next,
        .rf-deals-prev, .rf-deals-next {
            width: 3.6rem !important;
            height: 3.6rem !important;
            font-size: 1.4rem !important;
        }

    .rf-hero-prev { left: 1rem !important; }

    .rf-hero-next { right: 1rem !important; }

    .rf-deals-prev { left: 0.2rem !important; }

    .rf-deals-next { right: 0.2rem !important; }
}

.rf-hero-side {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr 1fr;
}

.rf-hero-banner {
    position: relative;
    display: block;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-bg-soft);
}

.rf-hero-banner img {
    transition: transform .5s ease;
}

.rf-hero-banner:hover img {
    transform: scale(1.04);
}

@media (max-width: 991px) {
    .rf-hero-banner {
            aspect-ratio: 16 / 10;
        }
}

@media (min-width: 992px) {
    /* Hero main spans the full width on its own row; the two side
       banners sit in a new row below at 50% each. */

    .rf-hero-grid {
            grid-template-columns: 1fr;
        }

    .rf-hero-side {
            grid-template-columns: 1fr 1fr;
        }

    .rf-hero-side .rf-hero-banner {
            aspect-ratio: 16 / 7;
        }
}

/* ------------------------------------------------------------
   3. Category circles
   ------------------------------------------------------------ */

.rf-cats .category-ellipse .category-media {
    background: var(--rf-bg-soft);
    border: 1px solid var(--rf-border);
    border-radius: 50%;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.rf-cats .category-ellipse:hover .category-media {
    border-color: var(--rf-primary);
    box-shadow: var(--rf-shadow-hover);
    transform: translateY(-.3rem);
}

.rf-cats .category-ellipse .category-media img {
    border-radius: 50%;
    background: transparent !important;
}

/* ------------------------------------------------------------
   4. Deals bar / countdown
   ------------------------------------------------------------ */

.rf-timer {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--rf-primary-soft);
    border: 1px solid #bfe6cf;
    border-radius: 999px;
    padding: .7rem 1.6rem;
}

.rf-timer-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rf-primary-dark);
    white-space: nowrap;
    margin: 0;
}

.rf-timer .product-countdown {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--rf-ink);
}

.rf-timer .countdown-row {
    display: inline-flex;
    gap: .5rem;
}

.rf-timer .countdown-section {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
}

.rf-timer .countdown-amount {
    display: inline-block;
    background: var(--rf-ink);
    color: #fff;
    border-radius: .6rem;
    padding: .25rem .7rem;
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 3rem;
    text-align: center;
}

.rf-timer .countdown-period {
    font-size: 1.05rem;
    color: var(--rf-primary-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ------------------------------------------------------------
   6. Product grid
   ------------------------------------------------------------ */

.rf-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
    .rf-grid {
            grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 992px) {
    .rf-grid {
            grid-template-columns: repeat(4, 1fr);
        }
}

@media (min-width: 1200px) {
    .rf-grid {
            grid-template-columns: repeat(5, 1fr);
        }
}

@media (min-width: 1600px) {
    .rf-grid {
            grid-template-columns: repeat(6, 1fr);
        }
}

@media (max-width: 419px) {
    .rf-grid {
            gap: 1rem;
        }
}

/* ------------------------------------------------------------
   7. Promo banners
   ------------------------------------------------------------ */

.rf-banners {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .rf-banners-3,
        .rf-banners-2 {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 992px) {
    .rf-banners-3 {
            grid-template-columns: repeat(3, 1fr);
        }
}

.rf-banner {
    position: relative;
    display: block;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-bg-soft);
}

.rf-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.rf-banner:hover img {
    transform: scale(1.04);
}

.rf-banner-wide {
    aspect-ratio: 88 / 30;
}

.rf-banner-square {
    aspect-ratio: 58 / 30;
}

@media (max-width: 575px) {
    .rf-banner-wide,
        .rf-banner-square {
            aspect-ratio: 2 / 1;
        }
}

/* ------------------------------------------------------------
   8. Boxed category panel (tiles)
   ------------------------------------------------------------ */

.rf-panel {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    padding: 2.4rem 2.4rem 2.8rem;
}

.rf-panel .rf-head {
    margin-bottom: 2rem;
}

.rf-tiles {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
    .rf-tiles {
            grid-template-columns: repeat(3, 1fr);
        }
}

@media (min-width: 992px) {
    .rf-tiles {
            grid-template-columns: repeat(5, 1fr);
        }
}

.rf-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    background: #fff;
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-sm);
    padding: 2rem 1.4rem 1.8rem;
    text-align: center;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.rf-tile:hover {
    border-color: var(--rf-primary);
    box-shadow: var(--rf-shadow-hover);
    transform: translateY(-.3rem);
}

.rf-tile img {
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.rf-tile-name {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--rf-ink);
    margin: 0;
}

/* ------------------------------------------------------------
   9. Mini product lists (New Arrivals / On Sale)
   ------------------------------------------------------------ */

.rf-mini-wrap {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .rf-mini-wrap {
            grid-template-columns: 1fr 1.4fr 1fr;
            align-items: stretch;
        }
}

.rf-mini-col {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    padding: 2rem;
}

.rf-mini-col .rf-head {
    margin-bottom: 1.6rem;
}

.rf-mini {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1rem 0;
}

.rf-mini + .rf-mini {
    border-top: 1px solid var(--rf-border-soft);
}

.rf-mini-thumb {
    flex: 0 0 7.2rem;
    width: 7.2rem;
    height: 7.2rem;
    border-radius: var(--rf-radius-sm);
    background: var(--rf-bg-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .6rem;
}

.rf-mini-info {
    min-width: 0;
}

.rf-mini-name {
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rf-mini-name a {
    color: var(--rf-ink);
}

.rf-mini-name a:hover {
    color: var(--rf-primary);
}

.rf-mini-poster {
    position: relative;
    display: block;
    border-radius: var(--rf-radius);
    overflow: hidden;
    background: var(--rf-bg-soft);
    min-height: 30rem;
}

.rf-mini-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991px) {
    .rf-mini-poster {
            aspect-ratio: 16 / 9;
            min-height: 0;
        }

    .rf-mini-poster img {
            position: static;
            aspect-ratio: 16 / 9;
        }
}

/* ------------------------------------------------------------
   10. Blog cards
   ------------------------------------------------------------ */

.rf-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
}

.rf-post:hover {
    box-shadow: var(--rf-shadow-hover);
    transform: translateY(-.3rem);
}

.rf-post-media {
    position: relative;
    display: block;
    aspect-ratio: 43 / 28;
    overflow: hidden;
}

.rf-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.rf-post:hover .rf-post-media img {
    transform: scale(1.05);
}

.rf-post-date {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 2;
    background: #fff;
    color: var(--rf-ink);
    border-radius: .8rem;
    padding: .6rem 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: var(--rf-shadow);
}

.rf-post-date span {
    display: block;
}

.rf-post-date .rf-post-month {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rf-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rf-post-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
    padding: 1.6rem 1.8rem 2rem;
}

.rf-post-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rf-post-title a {
    color: var(--rf-ink);
}

.rf-post-title a:hover {
    color: var(--rf-primary);
}

.rf-post-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--rf-primary);
}

.rf-post-link:hover {
    color: var(--rf-primary-dark);
    gap: .8rem;
}

/* ------------------------------------------------------------
   10b. "Our Services" tile grid (Cashify-style) — sits under the
   hero. Soft brand cards with an image or gradient icon + label.
   ------------------------------------------------------------ */

.rf-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

@media (min-width: 600px) {
    .rf-services-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
    .rf-services-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1200px) {
    .rf-services-grid { grid-template-columns: repeat(8, 1fr); }
}

.rf-svc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    /* padding: 2rem 1rem 1.5rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; */
}

.rf-svc-tile:hover {
    transform: translateY(-.4rem);
    border-color: var(--rf-primary);
    /* box-shadow: var(--rf-shadow-hover); */
}

.rf-svc-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 15rem;
    border-radius: 1.6rem;
    background: linear-gradient(160deg, #eef8f2 0%, #f5fbf7 100%);
    overflow: hidden;
}

.rf-svc-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform .3s ease;
}

.rf-svc-tile:hover .rf-svc-media img {
    transform: scale(1.07);
}

/* Gradient icon chips for quick-action tiles */

.rf-svc-icon { background: var(--rf-gradient-green); }

.rf-svc-icon--teal { background: var(--rf-gradient-teal); }

.rf-svc-icon--blue { background: var(--rf-gradient-blue); }

.rf-svc-icon i {
    font-size: 3.4rem;
    line-height: 1;
    color: #fff;
}

.rf-svc-label {
    font-family: var(--rf-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--rf-ink);
    letter-spacing: -.01em;
    line-height: 1.3;
}

.rf-svc-tile:hover .rf-svc-label { color: var(--rf-primary); }

@media (max-width: 479px) {
    .rf-services-grid { gap: 1rem; }

    .rf-svc-tile { padding: 1.5rem .8rem 1.2rem; gap: .9rem; }

    .rf-svc-media { width: 6.6rem; height: 6.6rem; border-radius: 1.3rem; }

    .rf-svc-icon i { font-size: 2.8rem; }

    .rf-svc-label { font-size: 1.2rem; }
}

/* ── "Our Services" media layers + looping animations ──────────
   Two stacked layers (media 1 / media 2). Admin-managed tiles use
   these; the admin live-preview mirrors the same keyframes. */

.rf-svc-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.rf-svc-layer img { width: 100%; height: 100%; object-fit: contain; }

.rf-svc-layer i { font-size: 5.4rem; color: var(--rf-primary); line-height: 1; }

.rf-svc-layer-2 { opacity: 0; }

.rf-svc-anim-fade .rf-svc-layer-1 { animation: rfSvcFadeA 5s ease-in-out infinite; }

.rf-svc-anim-fade .rf-svc-layer-2 { animation: rfSvcFadeB 5s ease-in-out infinite; }

.rf-svc-anim-slide .rf-svc-layer-1 { animation: rfSvcSlideA 5s ease-in-out infinite; }

.rf-svc-anim-slide .rf-svc-layer-2 { opacity: 1; animation: rfSvcSlideB 5s ease-in-out infinite; }

.rf-svc-anim-zoom .rf-svc-layer-1 { animation: rfSvcZoomA 5s ease-in-out infinite; }

.rf-svc-anim-zoom .rf-svc-layer-2 { animation: rfSvcZoomB 5s ease-in-out infinite; }

.rf-svc-anim-flip .rf-svc-layer { backface-visibility: hidden; }

.rf-svc-anim-flip .rf-svc-layer-2 { opacity: 1; transform: rotateY(180deg); }

.rf-svc-anim-flash .rf-svc-layer-1 { animation: rfSvcFlashPulse 2.4s ease-in-out infinite; }

.rf-svc-anim-popup .rf-svc-layer-1 { animation: rfSvcPopup 3s ease-in-out infinite; }

.rf-svc-anim-pulse .rf-svc-layer-1 { animation: rfSvcPulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    [class*="rf-svc-anim-"] .rf-svc-layer,
        [class*="rf-svc-anim-"]::after { animation: none !important; }

    .rf-svc-layer-2 { display: none; }
}

/* ------------------------------------------------------------
   11. Services strip (above footer)
   ------------------------------------------------------------ */

.rf-services {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .rf-services {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1200px) {
    .rf-services {
            grid-template-columns: repeat(4, 1fr);
        }
}

.rf-service {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    background: var(--rf-bg-soft);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
    padding: 1.8rem 2rem;
}

.rf-service i {
    font-size: 3rem;
    color: var(--rf-primary);
    flex-shrink: 0;
}

.rf-service h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--rf-ink);
    margin: 0 0 .2rem;
}

.rf-service p {
    font-size: 1.25rem;
    color: var(--rf-muted);
    margin: 0;
}

@media (max-width: 767px) {
    .rf-section {
            margin-bottom: 4rem;
        }

    .rf-panel {
            padding: 1.8rem 1.6rem 2rem;
        }

    .rf-mini-col {
            padding: 1.6rem;
        }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST BAR (home + product) + PRODUCT-DETAIL buy-box upgrades
   ══════════════════════════════════════════════════════════════════════════ */

.rf-trustbar-wrap {
    background: var(--rf-bg-soft);
    border-top: 1px solid var(--rf-border);
    border-bottom: 1px solid var(--rf-border);
    margin-bottom: 4.4rem;
}

.rf-trustbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    list-style: none;
    margin: 0;
    padding: 1.6rem 0;
}

.rf-trust {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.3rem;
    color: var(--rf-text);
    line-height: 1.25;
}

.rf-trust i { font-size: 2.4rem; color: var(--rf-primary); flex-shrink: 0; }

.rf-trust strong { color: var(--rf-ink); font-weight: 800; }

@media (max-width: 991px) {
    .rf-trustbar { justify-content: flex-start; }

    .rf-trust { flex: 1 1 30%; }
}

@media (max-width: 575px) {
    .rf-trust { flex: 1 1 45%; font-size: 1.2rem; }

    .rf-trust i { font-size: 2rem; }
}

/* ============================================================
   HOMEPAGE REDESIGN SECTIONS  (trust bar, brands, why, CTAs,
   sell/trade-in, collections, reviews, process, weekly drops)
   Reminder: theme sets html{font-size:62.5%} → 1rem = 10px.
   ============================================================ */
/* --- shared helpers --------------------------------------- */

.rf-eyebrow,
.rf-cta-eyebrow {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rf-primary);
    margin-bottom: 1rem;
}

.rf-head-center {
    justify-content: center;
    text-align: center;
}

.rf-head-center > div {
    max-width: 64rem;
    margin-inline: auto;
}

.rf-btn {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--rf-font);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    padding: 1.25rem 2.4rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.rf-btn:hover { transform: translateY(-2px); }

.rf-btn:disabled { opacity: .7; cursor: default; transform: none; }

.rf-btn i { font-size: 1.5rem; }

.rf-btn-primary { background: var(--rf-primary); color: #fff; }

.rf-btn-primary:hover { background: var(--rf-primary-dark); color: #fff; box-shadow: 0 10px 22px rgba(7, 166, 75, .28); }

.rf-btn-light { background: #fff; color: var(--rf-ink); }

.rf-btn-light:hover { color: var(--rf-ink); box-shadow: 0 10px 22px rgba(16, 24, 32, .18); }

.rf-btn-block { width: 100%; justify-content: center; }

/* --- trust bar -------------------------------------------- */

.rf-trustbar-wrap {
    background: var(--rf-bg-soft);
    border-top: 1px solid var(--rf-border);
    border-bottom: 1px solid var(--rf-border);
    margin-bottom: 5.6rem;
}

.rf-trustbar {
    list-style: none;
    margin: 0;
    padding: 1.8rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
}

.rf-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1 1 auto;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rf-ink);
}

.rf-trust i { font-size: 2.4rem; color: var(--rf-primary); }

.rf-trust strong { color: var(--rf-primary); font-weight: 800; }

/* --- featured brands -------------------------------------- */

.rf-brands-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 1rem 0;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.rf-brands-track {
    display: flex;
    gap: 1.6rem;
    width: max-content;
    animation: rfMarquee 30s linear infinite;
}

.rf-brands-track:hover {
    animation-play-state: paused;
}

.rf-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15rem;
    height: 7.2rem;
    padding: 0 2.4rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: 1.2rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.rf-brand:hover { transform: translateY(-3px); box-shadow: var(--rf-shadow-hover); border-color: transparent; }

.rf-brand-name {
    font-family: var(--rf-font-heading);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -.01em;
    color: var(--rf-ink);
}

.rf-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 1.8rem;
    border-radius: 1.4rem;
    background: var(--rf-primary-soft);
    color: var(--rf-primary);
    font-size: 2.8rem;
}

/* --- CTA banners (discount / trade-in / peace of mind) ----- */

.rf-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 4.4rem;
    border-radius: 2rem;
    color: #fff;
}

.rf-cta-text { max-width: 62rem; }

.rf-cta-eyebrow { color: rgba(255, 255, 255, .85); }

.rf-cta-title { font-size: 3.2rem; line-height: 1.12; margin: 0 0 1.2rem; color: #fff; }

.rf-cta-sub { font-size: 1.6rem; line-height: 1.6; margin: 0 0 2.2rem; color: rgba(255, 255, 255, .9); }

.rf-cta-dark { background: var(--rf-gradient-blue); }

.rf-cta-blue { background: linear-gradient(135deg, #1565FF 0%, #00B4E6 100%); }

.rf-cta-green { background: var(--rf-gradient-green); }

.rf-cta-green .rf-cta-eyebrow,
.rf-cta-green .rf-cta-title { color: var(--rf-ink); }

.rf-cta-green .rf-cta-sub { color: rgba(13, 27, 61, .82); }

.rf-cta-badges { display: flex; flex-wrap: wrap; gap: 1.4rem; }

.rf-cta-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    padding: 1.6rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .18);
}

.rf-cta-green .rf-cta-chip { background: rgba(13, 27, 61, .1); }

.rf-cta-chip strong { font-family: var(--rf-font-heading); font-size: 2.6rem; font-weight: 800; line-height: 1; }

.rf-cta-chip small { margin-top: .5rem; font-size: 1.2rem; opacity: .9; }

.rf-cta-green .rf-cta-chip strong,
.rf-cta-green .rf-cta-chip small { color: var(--rf-ink); }

.rf-cta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 2.4rem;
}

.rf-cta-list li { display: flex; align-items: center; gap: 1rem; font-size: 1.5rem; font-weight: 600; }

.rf-cta-list li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 1.2rem;
}

.rf-sell-visual .rf-title { text-align: left; }

.rf-sell-form { padding: 2.8rem; background: var(--rf-bg-soft); border-radius: 1.6rem; }

.rf-sell-form .rf-btn-block { margin-top: .6rem; }

/* --- premium collections ----------------------------------
   The cards were a photo at opacity .35 with mix-blend-mode:overlay laid over
   a full-bleed brand gradient, and a frosted band of text across the middle.
   Three of the eight gradients were near-identical bright greens, the blend
   mode bleached the photograph until it read as noise, and the tag on a light
   card ("SAVE MORE" in white on lime) failed contrast outright.

   The photograph is the card now. A single dark scrim, the same on every card,
   guarantees white text is legible whatever the image turns out to be, and the
   brand colour survives as an accent — the rule along the top edge and the tag
   chip — so the set still reads as a palette without fighting the pictures.
   ------------------------------------------------------------ */

.rf-collections {
    display: grid;
    /* auto-fit collapses the tracks it cannot fill and 1fr shares the row out
       between what is left, so however many collections the catalogue can
       actually fill, they span the container like every other section on the
       page rather than huddling in the middle. */
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2rem;
}

.rf-collection {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 20rem;
    padding: 0;
    border-radius: 1.6rem;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    /* No photograph: a stock image of somebody else's phones said nothing
       about what is in the collection, and it fought the text for the card.
       The card is a typographic panel in its own colour instead. */
    background:
        radial-gradient(120% 90% at 88% 8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(150deg, var(--rf-col-from, #0D1B3D) 0%, var(--rf-col-accent, #1565FF) 100%);
    transition: transform .18s ease, box-shadow .22s ease;
}

.rf-collection:hover,
.rf-collection:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(13, 27, 61, .22);
}

.rf-collection-content {
    position: relative;
    z-index: 2;
    padding: 2rem 2.2rem;
    width: 100%;
    /* The frosted band with its own borders read as a stripe pasted across the
       picture; the scrim already separates the text from the image. */
    background: none;
    border: 0;
}

/* On its own colour the chip has to separate itself from the panel, so it is
   a light wash rather than a second block of the same hue. */
.rf-collection-tag {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-family: var(--rf-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.rf-collection-name {
    margin: 0 0 .4rem;
    font-family: var(--rf-font-heading);
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
}

.rf-collection-sub {
    margin: 0 0 1.4rem;
    font-size: 1.3rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
}

.rf-collection-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

/* A real number, taken from the same rule the listing filters by, so the card
   cannot promise a shelf the next page turns out not to have. */
.rf-collection-count {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
}

.rf-collection-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.rf-collection-link i { transition: transform .18s ease; }
.rf-collection:hover .rf-collection-link i { transform: translateX(3px); }

/* Collection accents — one variable per card, used by the top rule, the tag
   chip and the no-image fallback. */
.rf-col-navy   { --rf-col-from: #060C1D; --rf-col-accent: #1E3A8A; }
.rf-col-blue   { --rf-col-from: #06225E; --rf-col-accent: #1565FF; }
.rf-col-purple { --rf-col-from: #1B0F4A; --rf-col-accent: #6D4AFF; }
.rf-col-slate  { --rf-col-from: #101A2B; --rf-col-accent: #33507A; }
.rf-col-orange { --rf-col-from: #1C1408; --rf-col-accent: #E08A22; }
.rf-col-teal   { --rf-col-from: #032F35; --rf-col-accent: #0097A7; }
.rf-col-green  { --rf-col-from: #023018; --rf-col-accent: #07A64B; }
.rf-col-gold   { --rf-col-from: #14140E; --rf-col-accent: #B4892C; }

@media (max-width: 900px) {
    /* 22rem still squeezed three cards onto a 768px tablet at 230px each. */
    .rf-collections { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.6rem; }
    .rf-collection { min-height: 18rem; }
    .rf-collection-name { font-size: 1.8rem; }
}

@media (max-width: 560px) {
    .rf-collections { grid-template-columns: minmax(0, 1fr); }
    .rf-collection { min-height: 17rem; }
}

/* --- trade-in banner --------------------------------------
   The banner was a headline, a paragraph and a button. Nothing on it answered
   "what happens after I click", which is the whole reason a trade-in CTA gets
   ignored, so the three steps are on the card itself. */

.rf-cta-tradein {
    align-items: center;
    gap: 4rem;
}

.rf-cta-tradein .rf-cta-text { max-width: 78rem; }

.rf-cta-tradein .rf-cta-title { margin-bottom: 1rem; }

.rf-cta-tradein .rf-cta-sub { margin-bottom: 1.8rem; }

.rf-cta-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rf-cta-steps li {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.rf-cta-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: 1.2rem;
    font-weight: 800;
}

.rf-cta-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    flex: 0 0 auto;
}

.rf-cta-note {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .rf-cta-action { align-items: stretch; width: 100%; }
    .rf-cta-action .rf-btn { justify-content: center; }
    .rf-cta-note { text-align: center; }
}

.rf-review {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 2.6rem;
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius);
}

.rf-review-text { flex: 1; margin: 0; font-size: 1.45rem; line-height: 1.65; color: var(--rf-text); }

.rf-review-by { display: flex; align-items: center; gap: 1.2rem; }

.rf-review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: var(--rf-primary-soft);
    color: var(--rf-primary-dark);
    font-size: 1.5rem;
    font-weight: 800;
}

.rf-review-name { display: block; font-size: 1.45rem; color: var(--rf-ink); }

.rf-review-verified { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.2rem; color: var(--rf-muted); }

.rf-review-verified i { color: var(--rf-primary); }

/* --- quality process stepper ------------------------------ */

.rf-process {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.4rem;
}

.rf-step { position: relative; text-align: center; }

.rf-step-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--rf-surface);
    border: 2px solid var(--rf-border);
    color: var(--rf-primary);
    font-size: 3rem;
}

.rf-step-num {
    position: absolute;
    top: -.4rem;
    left: 50%;
    z-index: 2;
    margin-left: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--rf-primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
}

.rf-step-name { margin: 1.2rem 0 0; font-size: 1.4rem; color: var(--rf-ink); }

.rf-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.5rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--rf-border);
    z-index: 0;
}

/* --- weekly drops ----------------------------------------- */

.rf-drops {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 4.4rem;
    border-radius: 2rem;
    background: var(--rf-gradient-blue);
    color: #fff;
}

.rf-drops-text { max-width: 58rem; }

.rf-drops .rf-cta-title { color: #fff; }

.rf-drops .rf-cta-sub { margin-bottom: 0; color: rgba(255, 255, 255, .9); }

.rf-drops-form {
    display: flex;
    gap: 1rem;
    padding: .8rem;
    background: #fff;
    border-radius: 1.2rem;
}

.rf-drops-form input {
    min-width: 26rem;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.45rem;
    color: var(--rf-ink);
}

.rf-drops-form .rf-btn { white-space: nowrap; }

@media (max-width: 991px) {
    .rf-process { grid-template-columns: repeat(4, 1fr); row-gap: 3rem; }

    .rf-step:not(:last-child)::after { display: none; }

    .rf-cta, .rf-drops { padding: 3.2rem; }

    .rf-cta-title { font-size: 2.6rem; }
}

@media (max-width: 767px) {
    .rf-trustbar { justify-content: flex-start; }

    .rf-trust { flex: 1 1 42%; justify-content: flex-start; }

    .rf-process { grid-template-columns: repeat(2, 1fr); }

    .rf-drops-form { width: 100%; }

    .rf-drops-form input { flex: 1; min-width: 0; }
}

@media (max-width: 575px) {
    .rf-cta-title { font-size: 2.2rem; }

    .rf-sell, .rf-sell-form { padding: 2.4rem; }

    .rf-brand { min-width: 12rem; }
}

/* --- new sell layout --------------------------------------- */

.rf-sell-new {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: 4rem;
    align-items: center;
}

.rf-sell-left {
    position: relative;
    border-radius: 3.2rem;
    background: linear-gradient(135deg, #e8f7ef 0%, #f0f4ff 100%);
    padding: 2.4rem;
    height: 100%;
    min-height: 48rem;
    display: flex;
}

.rf-sell-left-inner {
    border: 1px dashed rgba(7, 166, 75, 0.4);
    border-radius: 2.4rem;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rf-sell-img {
    max-width: 65%;
    max-height: 65%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rf-sell-left:hover .rf-sell-img {
    transform: translateY(-8px) scale(1.03);
}

.rf-sell-badge-top {
    position: absolute;
    top: -2rem;
    left: -2rem;
    background: #fff;
    padding: 1.4rem 2.2rem;
    border-radius: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}

.rf-sell-badge-top small {
    font-size: 1.2rem;
    color: var(--rf-muted);
    font-weight: 500;
}

.rf-sell-badge-top strong {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--rf-primary);
    font-family: var(--rf-font-heading);
}

.rf-sell-badge-bottom {
    position: absolute;
    bottom: 2.4rem;
    right: 2.4rem;
    background: #fff;
    padding: 1.2rem 2rem;
    border-radius: 99px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rf-ink);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.rf-sell-badge-bottom i {
    color: var(--rf-primary);
}

.rf-sell-right {
    padding: 2rem 0;
}

.rf-sell-form-new {
    background: #fff;
    border: 1px solid var(--rf-border);
    border-radius: 2.4rem;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.rf-field-new { margin-bottom: 2rem; }

.rf-field-row-new { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

.rf-field-new label { display: block; margin-bottom: .8rem; font-size: 1.2rem; font-weight: 700; color: var(--rf-text); letter-spacing: 0.05em; text-transform: uppercase;}

.rf-field-new input,
.rf-field-new select {
    width: 100%;
    height: 5.4rem;
    padding: 0 1.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--rf-ink);
    background: #f4f5f7;
    border: 2px solid transparent;
    border-radius: 1.2rem;
    transition: all .2s ease;
}

.rf-field-new input:focus,
.rf-field-new select:focus { outline: none; border-color: var(--rf-primary); background: #fff; box-shadow: 0 0 0 4px rgba(7, 166, 75, .1); }

.rf-sell-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--rf-border-soft);
}

.rf-sell-est {
    display: flex;
    flex-direction: column;
}

.rf-sell-est small {
    font-size: 1.3rem;
    color: var(--rf-muted);
}

.rf-sell-est strong {
    font-size: 3rem;
    font-weight: 800;
    color: var(--rf-primary);
    font-family: var(--rf-font-heading);
    line-height: 1.1;
}

@media (max-width: 991px) {
    .rf-sell-new { grid-template-columns: 1fr; }

    .rf-sell-left { min-height: 38rem; }
}

@media (max-width: 575px) {
    .rf-sell-left { min-height: 32rem; padding: 1.4rem; border-radius: 2rem; }

    .rf-sell-badge-top { top: -1rem; left: 1rem; padding: 1rem 1.6rem; }

    .rf-sell-badge-top strong { font-size: 2rem; }

    .rf-sell-form-new { padding: 2rem; }

    .rf-field-row-new { grid-template-columns: 1fr; gap: 0; }

    .rf-sell-form-footer { flex-direction: column; align-items: stretch; gap: 2rem; text-align: center; }
}

/* --- sell quote modal --------------------------------------- */

.rf-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.rf-modal {
    background: #fff;
    border-radius: 2.4rem;
    padding: 4rem;
    max-width: 52rem;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    animation: rfModalIn 0.3s ease;
}

.rf-modal-close {
    position: absolute;
    top: 1.6rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 2.8rem;
    color: var(--rf-muted);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.rf-modal-close:hover { color: var(--rf-ink); }

.rf-modal-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--rf-ink);
    margin-bottom: 0.8rem;
}

.rf-modal-sub {
    font-size: 1.4rem;
    color: var(--rf-text);
    margin-bottom: 2.4rem;
    line-height: 1.5;
}

.rf-modal .rf-field-new { margin-bottom: 1.6rem; }

.rf-modal .rf-field-new label { display: block; margin-bottom: .6rem; font-size: 1.15rem; font-weight: 700; color: var(--rf-text); letter-spacing: 0.05em; text-transform: uppercase; }

.rf-modal .rf-field-new input {
    width: 100%;
    height: 5rem;
    padding: 0 1.6rem;
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--rf-ink);
    background: #f4f5f7;
    border: 2px solid transparent;
    border-radius: 1.2rem;
    transition: all .2s ease;
}

.rf-modal .rf-field-new input:focus { outline: none; border-color: var(--rf-primary); background: #fff; box-shadow: 0 0 0 4px rgba(7, 166, 75, .1); }

.rf-modal .rf-field-row-new { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

@media (max-width: 575px) {
    .rf-modal { padding: 2.4rem; border-radius: 2rem; }

    .rf-modal .rf-field-row-new { grid-template-columns: 1fr; }
}

/* Hero dots keep their white-on-image treatment and the wider active pill. */

.rf-hero-main .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    background: transparent;
    opacity: 1;
    border-radius: 99px;
    position: relative;
}

.rf-hero-main .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .8rem;
    height: .8rem;
    border-radius: 99px;
    background: #fff;
    opacity: .55;
    transition: width .25s, background .25s, opacity .25s;
}

.rf-hero-main .swiper-pagination-bullet-active {
    width: 32px;
    background: transparent;
}

.rf-hero-main .swiper-pagination-bullet-active::after {
    width: 2.2rem;
    background: var(--rf-primary);
    opacity: 1;
}

@media (max-width: 1280px) {
    .rf-section {
            margin-bottom: 4rem;
        }

    .rf-title {
            font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.4rem);
        }
}