:root {
            --rp-primary: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
            --rp-accent: #3f8f3d;
            --rp-dark: #172019;
            --rp-text: #202923;
            --rp-muted: #6c756f;
            --rp-border: #e5e9e6;
            --rp-background: #f7f9f7;

            --rp-radius-card: 22px;
            --rp-radius-pill: 999px;

            --rp-shadow-soft: 0 8px 22px rgba(23, 32, 25, 0.055);
            --rp-shadow-hover: 0 26px 50px rgba(23, 32, 25, 0.13);
            --rp-shadow-nav: 0 10px 26px rgba(23, 32, 25, 0.11);
            --rp-shadow-nav-hover: 0 16px 32px rgba(35, 107, 50, 0.30);

            --rp-ease: cubic-bezier(.22, .61, .36, 1);
        }

     

        html {
            -webkit-text-size-adjust: 100%;
        }

        

        /* ============================================================
           SECTION SHELL + DECORATIVE BACKGROUND
           ============================================================ */

        .rp-section {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            padding: 30px 0 20px;
            background:
                radial-gradient(1100px 460px at 50% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
                linear-gradient(180deg, #ffffff 0%, var(--rp-background) 52%, #ffffff 100%);
        }

        /* Fine grid pattern, softly masked */
        .rp-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background-image:
                linear-gradient(to right, rgba(35, 107, 50, 0.055) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(35, 107, 50, 0.055) 1px, transparent 1px);
            background-size: 64px 64px;
            -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 34%, #000 0%, transparent 76%);
            mask-image: radial-gradient(ellipse 72% 62% at 50% 34%, #000 0%, transparent 76%);
            pointer-events: none;
        }

        /* Soft blurred orbs */
        .rp-orb {
            position: absolute;
            z-index: -1;
            border-radius: 50%;
            filter: blur(72px);
            pointer-events: none;
        }

        .rp-orb--one {
            width: 430px;
            height: 430px;
            top: -170px;
            right: -130px;
            background: rgba(63, 143, 61, 0.14);
        }

        .rp-orb--two {
            width: 360px;
            height: 360px;
            bottom: -150px;
            left: -130px;
            background: rgba(35, 107, 50, 0.11);
        }

        .rp-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
        }

        /* ============================================================
           HEADER
           ============================================================ */

        .rp-header {
            max-width: 640px;
            margin: 0 auto 48px;
            text-align: center;
        }

        .rp-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 18px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: #0e5fb8;
        }

        .rp-eyebrow::before,
        .rp-eyebrow::after {
            content: "";
            width: 28px;
            height: 1px;
            display: block;
        }

        .rp-eyebrow::before {
            background: linear-gradient(90deg, transparent, var(--rp-accent));
        }

        .rp-eyebrow::after {
            background: linear-gradient(90deg, var(--rp-accent), transparent);
        }

        .rp-heading {
            margin: 0 0 16px;
            font-size: clamp(28px, 4vw, 46px);
            font-weight: 700;
            line-height: 1.14;
            letter-spacing: -0.022em;
            color: var(--rp-dark);
        }

        .rp-description {
            margin: 0;
            font-size: 15px;
            font-weight: 300;
            line-height: 1.75;
            color: var(--rp-muted);
        }

        /* ============================================================
           CAROUSEL STRUCTURE
           ============================================================ */

        .rp-carousel {
            position: relative;
        }

        .rp-carousel:focus-visible {
            outline: 2px solid rgba(35, 107, 50, 0.55);
            outline-offset: 8px;
            border-radius: 18px;
        }

        .rp-viewport {
            overflow: hidden;
            padding: 10px 0 28px;
            touch-action: pan-y;
        }

        .rp-track {
            --rp-gap: 24px;
            display: flex;
            gap: var(--rp-gap);
            will-change: transform;
        }

        .rp-slide {
            flex: 0 0 auto;
            display: flex;
            min-width: 0;
        }

        /* ============================================================
           PRODUCT CARD
           ============================================================ */

        .rp-card {
            position: relative;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            width: 100%;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid var(--rp-border);
            border-radius: var(--rp-radius-card);
            box-shadow: var(--rp-shadow-soft);
            transition:
                transform 0.45s var(--rp-ease),
                box-shadow 0.45s ease,
                border-color 0.45s ease;
        }

        .rp-card:hover {
            transform: translateY(-6px);
            border-color: #d6e3d9;
            box-shadow: var(--rp-shadow-hover);
        }

        /* --- Image area --- */

        .rp-card__image {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1/1;
            background:
                radial-gradient(circle at 50% 55%, #ffffff 0%, rgba(255, 255, 255, 0) 68%),
                linear-gradient(155deg, #f3f8f4 0%, #e9f1eb 100%);
            overflow: hidden;
        }

        .rp-card__image::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -58%;
            width: 118%;
            height: 78%;
            transform: translateX(-50%);
            border-radius: 50%;
            background: rgba(63, 143, 61, 0.07);
            pointer-events: none;
        }

        .rp-card__image img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.55s var(--rp-ease);
            -webkit-user-drag: none;
        }

        .rp-card:hover .rp-card__image img {
            transform: scale(1.04);
        }

        .rp-card__badge {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            padding: 6px 11px;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: #ffffff;
            background: var(--rp-primary);
            border-radius: var(--rp-radius-pill);
            box-shadow: 0 6px 14px rgba(35, 107, 50, 0.24);
        }

        .rp-card__wish {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 2;
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            padding: 0;
            color: var(--rp-muted);
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--rp-border);
            border-radius: 50%;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition:
                color 0.3s ease,
                background-color 0.3s ease,
                border-color 0.3s ease,
                transform 0.3s var(--rp-ease);
        }

        .rp-card__wish:hover {
            color: var(--rp-primary);
            transform: scale(1.07);
        }

        .rp-card__wish:focus-visible {
            outline: 2px solid var(--rp-primary);
            outline-offset: 2px;
        }

        .rp-card__wish.is-active {
            color: #d92e46;
            background: #fff1f3;
            border-color: #f7c5cc;
        }

        .rp-card__wish.is-active svg {
            fill: currentColor;
        }

        /* --- Content --- */

        .rp-card__content {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 8px;
            padding: 20px 22px 24px;
        }

        .rp-card__category {
            margin: 0;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--rp-accent);
        }

        .rp-card__title {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.35;
            letter-spacing: -0.01em;
            color: var(--rp-dark);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .rp-card__description {
            margin: 0;
            font-size: 13px;
            font-weight: 300;
            line-height: 1.65;
            color: var(--rp-muted);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .rp-card__pricing {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-top: auto;
            padding-top: 14px;
        }

        .rp-card__price {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.01em;
            color: var(--rp-primary);
        }

        .rp-card__old-price {
            font-size: 13px;
            font-weight: 400;
            color: var(--rp-muted);
            text-decoration: line-through;
            text-decoration-color: rgba(108, 117, 111, 0.6);
        }

        .rp-card__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
            padding: 12px 18px;
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: #ffffff;
            text-decoration: none;
            background: var(--rp-dark);
            border-radius: 12px;
            transition:
                background-color 0.35s ease,
                gap 0.35s var(--rp-ease),
                box-shadow 0.35s ease;
        }

        .rp-card__button:hover {
            gap: 13px;
            background: var(--rp-primary);
            box-shadow: 0 12px 24px rgba(35, 107, 50, 0.26);
        }

        .rp-card__button:focus-visible {
            outline: 2px solid var(--rp-primary);
            outline-offset: 3px;
        }

        .rp-card__button svg {
            flex: 0 0 auto;
            transition: transform 0.35s var(--rp-ease);
        }

        .rp-card__button:hover svg {
            transform: translateX(2px);
        }

        /* ============================================================
           NAVIGATION CONTROLS
           ============================================================ */

        .rp-nav {
            position: absolute;
            top: 50%;
            z-index: 5;
            display: grid;
            place-items: center;
            width: 50px;
            height: 50px;
            padding: 0;
            color: var(--rp-dark);
            background: #fff0;
            border: 1px solid var(--rp-border);
            border-radius: 50%;
            box-shadow: var(--rp-shadow-nav);
            cursor: pointer;
            transform: translateY(-50%);
            -webkit-tap-highlight-color: transparent;
            transition:
                background-color 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                transform 0.35s var(--rp-ease);
        }

        .rp-nav:hover {
            color: #ffffff;
            background: var(--rp-primary);
            border-color: var(--rp-primary);
            box-shadow: var(--rp-shadow-nav-hover);
            transform: translateY(-50%) scale(1.06);
        }

        .rp-nav:active {
            transform: translateY(-50%) scale(0.97);
        }

        .rp-nav:focus-visible {
            outline: 2px solid var(--rp-primary);
            outline-offset: 3px;
        }

        .rp-nav--prev {
            left: -25px;
        }

        .rp-nav--next {
            right: -25px;
        }

        /* ============================================================
           COUNTER + PROGRESS
           ============================================================ */

        .rp-footer {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-top: 4px;
            padding-top: 22px;
            border-top: 1px solid var(--rp-border);
            display: none;
        }

        .rp-counter {
            flex: 0 0 auto;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.16em;
            color: var(--rp-dark);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .rp-counter__total {
            font-weight: 400;
            color: var(--rp-muted);
        }

        .rp-progress {
            position: relative;
            flex: 1 1 auto;
            height: 3px;
            overflow: hidden;
            background: #e6ebe7;
            border-radius: var(--rp-radius-pill);
        }

        .rp-progress__bar {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--rp-primary), var(--rp-accent));
            transform: scaleX(0);
            transform-origin: left center;
        }

        @keyframes rp-progress-fill {
            from {
                transform: scaleX(0);
            }
            to {
                transform: scaleX(1);
            }
        }

        /* ============================================================
           TABLET  (768px – 991px)
           ============================================================ */

        @media (min-width: 768px) and (max-width: 991px) {

            .rp-section {
                padding: 74px 0 62px;
            }

            .rp-container {
                padding: 0 32px;
            }

            .rp-header {
                margin-bottom: 40px;
            }

            .rp-track {
                --rp-gap: 20px;
            }

            .rp-nav {
                width: 46px;
                height: 46px;
            }

            .rp-nav--prev {
                left: -15px;
            }

            .rp-nav--next {
                right: -15px;
            }
        }

        /* ============================================================
           MOBILE  (max-width: 767px)
           ============================================================ */

        @media (max-width: 767px) {

            .rp-section {
                padding: 56px 0 50px;
            }

            .rp-container {
                padding: 0 18px;
            }

            .rp-header {
                margin-bottom: 30px;
            }

            .rp-description {
                font-size: 14px;
            }

            .rp-track {
                --rp-gap: 16px;
            }

            .rp-viewport {
                padding: 6px 0 18px;
            }

            /* Controls drop below the carousel and sit side by side */
            .rp-carousel {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 14px;
            }

            .rp-viewport {
                flex: 1 0 100%;
            }

            .rp-nav {
                position: static;
                width: 46px;
                height: 46px;
                transform: none;
            }

            .rp-nav:hover {
                transform: scale(1.06);
            }

            .rp-nav:active {
                transform: scale(0.97);
            }

            .rp-card__content {
                padding: 18px 18px 22px;
            }

            .rp-footer {
                flex-direction: column;
                align-items: stretch;
                gap: 14px;
                margin-top: 8px;
            }

            .rp-counter {
                text-align: center;
            }
        }

        /* ============================================================
           REDUCED MOTION
           ============================================================ */

        @media (prefers-reduced-motion: reduce) {

            .rp-track {
                transition: none !important;
            }

            .rp-card,
            .rp-card__image img,
            .rp-nav,
            .rp-card__button {
                transition-duration: 0.01ms !important;
            }
        }