.elementor-29169 .elementor-element.elementor-element-e698dba{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29169 .elementor-element.elementor-element-0cd98d9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}body.elementor-page-29169{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS *//* ==========================================================
   RONY STORE — CATEGORIES PAGE V1
   RTL / Elementor / WoodMart / Mobile First
   ========================================================== */

.rony-categories-page-v1 {

    --rcp-burgundy: #5B071E;
    --rcp-deep: #330611;
    --rcp-soft: #7A1733;

    --rcp-gold: #D6AA4B;
    --rcp-gold-dark: #A97A22;
    --rcp-gold-light: #F1D88A;

    --rcp-bg: #FBF7F6;
    --rcp-bg-2: #F7EFEC;

    --rcp-text: #26151A;
    --rcp-muted: #77676C;

    width: 100%;

    overflow: hidden;

    background:
        var(--rcp-bg);

    color:
        var(--rcp-text);

    font-family:
        "Alexandria",
        "Cairo",
        Tahoma,
        Arial,
        sans-serif;
}


.rcp-container {

    width:
        min(
            1320px,
            calc(100% - 48px)
        );

    margin-inline: auto;
}


/* ==========================================================
   HERO
   ========================================================== */

.rcp-hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height:
        clamp(
            420px,
            40vw,
            580px
        );

    overflow: hidden;

    background:

        radial-gradient(
            circle at 84% 30%,
            rgba(214,170,75,.17),
            transparent 24%
        ),

        radial-gradient(
            circle at 8% 80%,
            rgba(122,23,51,.40),
            transparent 33%
        ),

        linear-gradient(
            135deg,
            #28030C,
            #4B0619 58%,
            #31030E
        );

    color: #fff;

    isolation: isolate;
}


.rcp-hero::before {

    content: "RONY";

    position: absolute;

    left: -25px;
    bottom: -48px;

    z-index: -1;

    color:
        rgba(255,255,255,.025);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            140px,
            24vw,
            340px
        );

    line-height: .8;
}


.rcp-hero-glow {

    position: absolute;

    width: 460px;
    height: 460px;

    top: -230px;
    right: -170px;

    border:
        1px solid
        rgba(214,170,75,.16);

    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(214,170,75,.025),
        0 0 0 125px rgba(214,170,75,.014);

    animation:
        rcpFloat
        10s
        ease-in-out
        infinite alternate;
}


.rcp-hero-inner {

    position: relative;

    z-index: 2;

    max-width: 720px;

    padding:
        55px 0;
}


.rcp-breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 27px;

    color:
        rgba(255,255,255,.52);

    font-size: 9px;
}


.rcp-breadcrumb a {

    color:
        rgba(255,255,255,.52) !important;

    text-decoration: none !important;
}


.rcp-breadcrumb svg {

    width: 12px;
    height: 12px;

    fill: none;

    stroke:
        var(--rcp-gold);

    stroke-width: 1.7;
}


.rcp-kicker {

    display: block;

    margin-bottom: 13px;

    color:
        var(--rcp-gold-light);

    font-size: 10px;

    font-weight: 650;
}


.rcp-hero h1 {

    margin: 0;

    color: #fff !important;

    font-size:
        clamp(
            42px,
            6vw,
            78px
        );

    line-height: 1.12;

    font-weight: 740;

    letter-spacing: -.045em;
}


.rcp-hero h1 em {

    color:
        var(--rcp-gold-light);

    font-style: normal;
}


.rcp-hero p {

    max-width: 550px;

    margin:
        23px
        0
        0;

    color:
        rgba(255,255,255,.63);

    font-size:
        clamp(
            13px,
            1.2vw,
            16px
        );

    line-height: 1.95;
}


.rcp-hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 49px;

    margin-top: 29px;

    padding:
        0 19px;

    border:
        1px solid
        rgba(214,170,75,.31);

    border-radius: 13px;

    background:
        rgba(214,170,75,.10);

    color:
        var(--rcp-gold-light) !important;

    font-size: 10.5px;

    font-weight: 650;

    text-decoration: none !important;

    transition:
        transform .3s ease,
        background .3s ease;
}


.rcp-hero-btn svg {

    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ==========================================================
   INTRO
   ========================================================== */

.rcp-intro {

    padding:
        clamp(55px,6vw,85px)
        0
        clamp(37px,4vw,54px);
}


.rcp-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(280px,.7fr);

    align-items: end;

    gap:
        clamp(35px,7vw,100px);
}


.rcp-section-kicker {

    display: block;

    margin-bottom: 10px;

    color:
        var(--rcp-burgundy);

    font-size: 9.5px;

    font-weight: 650;
}


.rcp-intro h2 {

    max-width: 650px;

    margin: 0;

    color:
        var(--rcp-deep) !important;

    font-size:
        clamp(
            32px,
            4vw,
            53px
        );

    line-height: 1.18;

    font-weight: 730;
}


.rcp-intro h2 em {

    color:
        var(--rcp-burgundy);

    font-style: normal;
}


.rcp-intro-grid > p {

    margin: 0;

    color:
        var(--rcp-muted);

    font-size: 12px;

    line-height: 2;
}


/* ==========================================================
   GRID
   ========================================================== */

.rcp-categories {

    padding:
        0
        0
        clamp(65px,8vw,110px);
}


.rcp-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        clamp(14px,1.7vw,23px);
}


.rcp-card {

    position: relative;

    display: block;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    border-radius:
        clamp(19px,2vw,28px);

    background:
        var(--rcp-deep);

    text-decoration: none !important;

    box-shadow:
        0 11px 38px
        rgba(51,6,17,.075);

    isolation: isolate;

    transform:
        translateZ(0);

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}


.rcp-card img {

    position: absolute;

    inset: 0;

    z-index: -3;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

    transition:
        transform .7s
        cubic-bezier(.22,1,.36,1);
}


.rcp-card-overlay {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(25,1,8,.02) 20%,
            rgba(25,1,8,.10) 47%,
            rgba(31,2,10,.89) 100%
        );
}


.rcp-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border:
        1px solid
        rgba(241,216,138,.14);

    border-radius: inherit;

    pointer-events: none;
}


.rcp-card-number {

    position: absolute;

    top: 17px;
    left: 17px;

    display: grid;

    place-items: center;

    width: 39px;
    height: 39px;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius: 999px;

    background:
        rgba(40,3,14,.20);

    backdrop-filter:
        blur(12px);

    color:
        rgba(255,255,255,.8);

    font-size: 9px;

    direction: ltr;
}


.rcp-card-copy {

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    padding:
        clamp(20px,2.2vw,29px);
}


.rcp-card-copy > span {

    display: block;

    margin-bottom: 6px;

    color:
        rgba(255,255,255,.60);

    font-size: 9px;
}


.rcp-card h3 {

    margin: 0;

    color: #fff !important;

    font-size:
        clamp(
            20px,
            2vw,
            28px
        );

    line-height: 1.35;

    font-weight: 680;
}


.rcp-card-link {

    display: flex;

    align-items: center;

    gap: 7px;

    width: max-content;

    margin-top: 10px;

    color:
        var(--rcp-gold-light);

    font-size: 9.5px;

    font-weight: 600;
}


.rcp-card-link svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    transition:
        transform .3s ease;
}


/* ==========================================================
   PRIVACY
   ========================================================== */

.rcp-privacy {

    padding:
        0
        0
        clamp(65px,7vw,95px);
}


.rcp-privacy-card {

    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items: center;

    gap:
        clamp(18px,3vw,32px);

    padding:
        clamp(25px,3vw,38px);

    overflow: hidden;

    border-radius:
        clamp(22px,2vw,30px);

    background:
        linear-gradient(
            135deg,
            var(--rcp-deep),
            var(--rcp-burgundy)
        );

    color: #fff;

    box-shadow:
        0 20px 60px
        rgba(51,6,17,.13);
}


.rcp-privacy-card::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -130px;
    bottom: -190px;

    border:
        1px solid
        rgba(214,170,75,.13);

    border-radius: 50%;

    box-shadow:
        0 0 0 50px
        rgba(214,170,75,.025);
}


.rcp-privacy-icon {

    display: grid;

    place-items: center;

    width: 59px;
    height: 59px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            var(--rcp-gold),
            var(--rcp-gold-dark)
        );

    color:
        var(--rcp-deep);
}


.rcp-privacy-icon svg {

    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}


.rcp-privacy-card span {

    color:
        rgba(255,255,255,.55);

    font-size: 9px;
}


.rcp-privacy-card h2 {

    margin:
        5px 0 0;

    color: #fff !important;

    font-size:
        clamp(
            20px,
            2.2vw,
            30px
        );

    line-height: 1.4;

    font-weight: 640;
}


.rcp-privacy-card h2 em {

    color:
        var(--rcp-gold-light);

    font-style: normal;
}


.rcp-privacy-card > a {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 46px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(241,216,138,.25);

    border-radius: 13px;

    background:
        rgba(255,255,255,.07);

    color:
        #fff !important;

    font-size: 10px;

    font-weight: 620;

    text-decoration: none !important;
}


.rcp-privacy-card > a svg {

    width: 14px;
    height: 14px;

    fill: none;

    stroke:
        var(--rcp-gold-light);

    stroke-width: 1.7;
}


/* ==========================================================
   DESKTOP INTERACTION
   ========================================================== */

@media (hover:hover) and (pointer:fine) {

    .rcp-card:hover {

        transform:
            translateY(-7px);

        box-shadow:
            0 22px 65px
            rgba(51,6,17,.15);
    }


    .rcp-card:hover img {

        transform:
            scale(1.065);
    }


    .rcp-card:hover .rcp-card-link svg {

        transform:
            translateX(-4px);
    }


    .rcp-hero-btn:hover {

        transform:
            translateY(-3px);

        background:
            rgba(214,170,75,.17);
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .rcp-container {

        width:
            calc(100% - 36px);
    }


    .rcp-grid {

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap: 14px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .rcp-container {

        width:
            calc(100% - 30px);
    }


    .rcp-hero {

        min-height: 450px;
    }


    .rcp-hero-inner {

        max-width: 390px;

        padding:
            52px 0;
    }


    .rcp-hero h1 {

        font-size:
            clamp(
                38px,
                12vw,
                52px
            );
    }


    .rcp-hero p {

        max-width: 340px;

        font-size: 12.5px;
    }


    .rcp-intro {

        padding:
            47px
            0
            29px;
    }


    .rcp-intro-grid {

        display: block;
    }


    .rcp-intro h2 {

        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }


    .rcp-intro-grid > p {

        margin-top: 17px;

        font-size: 11px;
    }


    /* Cards 2 columns */

    .rcp-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 10px;
    }


    .rcp-card {

        border-radius: 18px;
    }


    .rcp-card-copy {

        padding: 15px;
    }


    .rcp-card h3 {

        font-size:
            clamp(
                16px,
                4.8vw,
                21px
            );
    }


    .rcp-card-copy > span {

        font-size: 7.5px;
    }


    .rcp-card-link {

        margin-top: 7px;

        font-size: 8px;
    }


    .rcp-card-number {

        top: 11px;
        left: 11px;

        width: 32px;
        height: 32px;

        font-size: 7.5px;
    }


    /* Privacy */

    .rcp-privacy-card {

        grid-template-columns:
            auto 1fr;

        padding: 21px;

        border-radius: 21px;
    }


    .rcp-privacy-icon {

        width: 48px;
        height: 48px;

        border-radius: 15px;
    }


    .rcp-privacy-card > a {

        grid-column:
            1 / -1;

        width: 100%;

        justify-content: center;

        margin-top: 6px;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .rcp-grid {

        grid-template-columns: 1fr;
    }


    .rcp-card {

        aspect-ratio:
            4 / 4.65;
    }


    .rcp-card-copy {

        padding: 19px;
    }


    .rcp-card h3 {

        font-size: 22px;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.rony-categories-page-v1 a:focus-visible {

    outline:
        3px solid
        var(--rcp-gold);

    outline-offset: 4px;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes rcpFloat {

    from {
        transform:
            translate3d(0,0,0);
    }

    to {
        transform:
            translate3d(-50px,35px,0);
    }

}


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

    .rony-categories-page-v1 *,
    .rony-categories-page-v1 *::before,
    .rony-categories-page-v1 *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}/* End custom CSS */