* {
    margin:0;
    padding:0;
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    font-family:Arial,Helvetica,sans-serif;
    background:#fff7ed;
    color:#1f2937
}

a {
    text-decoration:none;
    color:inherit
}

.top-bar {
    background:linear-gradient(90deg,#7c2d12,#be123c,#7c2d12);
    color:#fff;
    text-align:center;
    padding:11px 20px;
    font-size:14px;
    font-weight:600
}

.header {
    background:#fff;
    padding:22px 8%;
    display:grid;
    grid-template-columns:auto minmax(260px,620px) auto;
    align-items:center;
    gap:28px;
    border-bottom:1px solid #fed7aa
}

.logo {
    font-size:28px;
    font-weight:900;
    color:#111827;
    display:inline-flex;
    align-items:center
}

.logo span {
    color:#f97316
}

.logo::before {
    content:"🛒";
    width:42px;
    height:42px;
    border-radius:14px;
    background:#ffedd5;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:10px
}

.search-box input {
    width:100%;
    padding:14px 20px;
    border:1px solid #fed7aa;
    border-radius:999px;
    background:#fffaf5;
    outline:0;
    font-size:14px
}

.auth-links {
    background:#fff7ed;
    padding:12px 16px;
    border:1px solid #fed7aa;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:800
}

.auth-links a:hover {
    color:#f97316
}

.nav {
    background:#fff;
    padding:15px 8%;
    display:flex;
    gap:32px;
    font-size:14px;
    font-weight:800;
    box-shadow:0 8px 20px rgba(124,45,18,.06)
}

.nav a:first-child,.nav a:hover {
    color:#f97316
}

.main {
    padding:36px 8%
}

.main-hero {
    min-height:430px;
    border-radius:28px;
    background:radial-gradient(circle at 78% 25%,rgba(255,255,255,.45),transparent 22%),linear-gradient(135deg,#7c2d12,#f97316 52%,#fb7185);
    color:#fff;
    padding:64px;
    display:grid;
    grid-template-columns:1.25fr 0.85fr;
    gap:35px;
    align-items:center;
    box-shadow:0 22px 55px rgba(249,115,22,.26)
}

.hero-badge {
    display:inline-block;
    padding:9px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.28);
    font-size:13px;
    font-weight:900;
    margin-bottom:20px
}

.main-hero h1 {
    max-width:760px;
    font-size:58px;
    line-height:1.08;
    margin-bottom:20px;
    letter-spacing:-1px
}

.main-hero p {
    max-width:620px;
    color:#ffedd5;
    font-size:18px;
    line-height:1.7
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px
}

.primary-btn,.secondary-btn {
    display:inline-block;
    padding:13px 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:900
}

.primary-btn {
    background:#fff;
    color:#c2410c
}

.secondary-btn {
    background:rgba(255,255,255,.15);
    color:#fff;
    border:1px solid rgba(255,255,255,.32)
}

.hero-right {
    position:relative;
    min-height:300px
}

.floating-card {
    position:absolute;
    background:rgba(255,255,255,.96);
    color:#111827;
    border-radius:22px;
    padding:22px;
    min-width:190px;
    box-shadow:0 18px 40px rgba(124,45,18,.22)
}

.floating-card span {
    color:#64748b;
    display:block;
    margin-bottom:8px
}

.floating-card strong {
    color:#f97316;
    font-size:24px
}

.card-one {
    top:10px;
    right:40px
}

.card-two {
    top:120px;
    left:0
}

.card-three {
    right:0;
    bottom:5px
}

.section {
    margin-top:36px;
    background:#fff;
    border-radius:24px;
    padding:32px;
    box-shadow:0 14px 38px rgba(124,45,18,.07)
}

.section-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px
}

.section-subtitle {
    color:#f97316;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.6px
}

.section-title {
    font-size:30px;
    margin-top:8px;
    color:#111827
}

.section-text {
    max-width:420px;
    color:#64748b;
    font-size:14px;
    line-height:1.6
}

.category-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px
}

.category-card {
    min-height:165px;
    border-radius:22px;
    border:1px solid #fed7aa;
    background:#fffaf5;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    justify-content:center;
    text-align:center;
    transition:.2s ease;
    padding:18px
}

.category-icon {
    width:62px;
    height:62px;
    border-radius:20px;
    background:#ffedd5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px
}

.category-card strong {
    font-size:16px;
    font-weight:900
}

.category-card small {
    color:#64748b;
    font-size:12px;
    line-height:1.4
}

.category-card.electronics-card,.category-card:hover {
    background:#fff7ed;
    border-color:#fb923c;
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(249,115,22,.12)
}

.category-card.electronics-card {
    color:#ea580c
}

.dress-card .category-icon {
    background:#fce7f3
}

.electronics-card .category-icon {
    background:#e0f2fe
}

.beauty-card .category-icon {
    background:#ffe4e6
}

.grocery-card .category-icon {
    background:#dcfce7
}

.accessories-card .category-icon {
    background:#ede9fe
}

.backpack-card .category-icon {
    background:#fef3c7
}

.feature-grid,.security-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.feature-card,.security-card {
    background:#fffaf5;
    border:1px solid #fed7aa;
    border-radius:20px;
    padding:26px
}

.feature-card span,.security-card span {
    display:inline-flex;
    width:46px;
    height:46px;
    border-radius:15px;
    background:#ffedd5;
    color:#ea580c;
    align-items:center;
    justify-content:center;
    font-weight:900;
    margin-bottom:16px
}

.feature-card h3,.security-card h3 {
    font-size:18px;
    margin-bottom:10px
}

.feature-card p,.security-card p {
    color:#64748b;
    line-height:1.6;
    font-size:14px
}

.security-section {
    background:radial-gradient(circle at top right,rgba(249,115,22,.1),transparent 28%),#fff
}

.site-footer {
    margin-top:36px;
    background:#431407;
    color:#fed7aa;
    padding:48px 8% 22px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:30px;
    padding-bottom:28px;
    border-bottom:1px solid rgba(255,255,255,.14)
}

.footer-logo {
    display:inline-block;
    font-size:26px;
    font-weight:900;
    color:#fff;
    margin-bottom:14px
}

.footer-logo span {
    color:#fb923c
}

.footer-brand p,.footer-column a {
    color:#fed7aa;
    font-size:14px;
    line-height:1.7
}

.footer-column h4 {
    color:#fff;
    margin-bottom:16px
}

.footer-column a {
    display:block;
    margin-bottom:10px
}

.footer-column a:hover {
    color:#fff
}

.footer-bottom {
    text-align:center;
    color:#fed7aa;
    font-size:14px;
    padding-top:20px
}

@media (max-width:1000px) {
    .header {
        grid-template-columns:1fr;
        text-align:center
    }

    .logo {
        justify-content:center
    }

    .auth-links {
        justify-content:center;
        width:fit-content;
        margin:0 auto
    }

    .main-hero {
        grid-template-columns:1fr
    }

    .hero-right {
        min-height:260px
    }

    .category-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .feature-grid,.footer-grid,.security-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width:600px) {
    .header,.main,.nav,.site-footer {
        padding-left:5%;
        padding-right:5%
    }

    .nav {
        overflow-x:auto;
        white-space:nowrap
    }

    .main-hero {
        padding:36px 24px
    }

    .main-hero h1 {
        font-size:34px
    }

    .main-hero p {
        font-size:15px
    }

    .hero-right {
        min-height:auto
    }

    .floating-card {
        position:relative;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
        margin-bottom:14px;
        min-width:100%
    }

    .section-header {
        align-items:flex-start;
        flex-direction:column
    }

    .category-grid,.feature-grid,.footer-grid,.security-grid {
        grid-template-columns:1fr
    }
}

.main-hero-circle {
    position:absolute;
    width:210px;
    height:210px;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    right:35px;
    bottom:28px;
    border:1px solid rgba(255,255,255,.22)
}

.hero-right {
    position:relative
}

@media (max-width:600px) {
    .main-hero-circle {
        display:none
    }
}

.hero-right {
    position:relative;
    min-height:330px
}

.main-hero-circle {
    width:230px;
    height:230px;
    right:58px;
    bottom:42px;
    z-index:1
}

.floating-card {
    z-index:2
}

.card-one {
    top:18px;
    right:18px
}

.card-two {
    top:122px;
    left:10px
}

.card-three {
    right:0;
    bottom:10px
}

@media (max-width:1000px) {
    .hero-right {
        min-height:330px;
        max-width:520px
    }

    .main-hero-circle {
        right:90px;
        bottom:45px
    }

    .card-one {
        top:10px;
        right:40px
    }

    .card-two {
        top:125px;
        left:10px
    }

    .card-three {
        right:30px;
        bottom:0
    }
}

@media (max-width:600px) {
    .main-hero-circle {
        display:block;
        position:absolute;
        width:180px;
        height:180px;
        right:20px;
        top:78px;
        bottom:auto;
        opacity:.7
    }

    .floating-card {
        position:relative;
        z-index:2;
        margin-bottom:14px
    }
}

.hero-right {
    position:relative;
    min-height:350px
}

.main-hero-circle {
    position:absolute;
    width:245px;
    height:245px;
    border-radius:50%;
    right:70px;
    top:55px;
    bottom:auto;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.3);
    z-index:1
}

.floating-card {
    z-index:2
}

.card-one {
    top:0;
    right:20px
}

.card-two {
    top:135px;
    left:10px
}

.card-three {
    right:0;
    bottom:8px
}

@media (max-width:1000px) {
    .hero-right {
        min-height:340px;
        max-width:560px
    }

    .main-hero-circle {
        width:225px;
        height:225px;
        right:105px;
        top:58px
    }

    .card-one {
        top:0;
        right:45px
    }

    .card-two {
        top:130px;
        left:10px
    }

    .card-three {
        right:45px;
        bottom:0
    }
}

@media (max-width:600px) {
    .hero-right {
        min-height:auto
    }

    .main-hero-circle {
        display:none
    }

    .floating-card {
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
        margin-bottom:14px;
        width:100%
    }
}

.card-two {
    top:135px;
    left:95px
}

.main-hero-circle {
    right:70px;
    top:58px
}

@media (max-width:1000px) {
    .card-two {
        top:132px;
        left:75px
    }

    .main-hero-circle {
        right:95px;
        top:58px
    }
}

@media (max-width:600px) {
    .card-two {
        top:auto;
        left:auto
    }
}

.hero-right {
    position:relative
}

.floating-card {
    animation-duration:7s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite
}

.card-one {
    animation-name:orbitCardOne
}

.card-two {
    animation-name:orbitCardTwo
}

.card-three {
    animation-name:orbitCardThree
}

@keyframes orbitCardOne {
    0% {
        transform:translate(0,0)
    }

    25% {
        transform:translate(-18px,14px)
    }

    50% {
        transform:translate(-8px,28px)
    }

    75% {
        transform:translate(12px,12px)
    }

    100% {
        transform:translate(0,0)
    }
}

@keyframes orbitCardTwo {
    0% {
        transform:translate(0,0)
    }

    25% {
        transform:translate(18px,-12px)
    }

    50% {
        transform:translate(30px,8px)
    }

    75% {
        transform:translate(12px,22px)
    }

    100% {
        transform:translate(0,0)
    }
}

@keyframes orbitCardThree {
    0% {
        transform:translate(0,0)
    }

    25% {
        transform:translate(-14px,-18px)
    }

    50% {
        transform:translate(-28px,-8px)
    }

    75% {
        transform:translate(-10px,12px)
    }

    100% {
        transform:translate(0,0)
    }
}

.main-hero-circle {
    animation:rotateHeroCircle 12s linear infinite
}

@keyframes rotateHeroCircle {
    from {
        transform:rotate(0)
    }

    to {
        transform:rotate(360deg)
    }
}

@media (max-width:600px) {
    .floating-card,.main-hero-circle {
        animation:none
    }
}

.floating-card {
    animation-duration:9s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    will-change:transform
}

.card-one {
    animation-name:smoothClockwiseOne
}

.card-two {
    animation-name:smoothAntiClockwiseTwo
}

.card-three {
    animation-name:smoothClockwiseThree
}

@keyframes smoothClockwiseOne {
    0% {
        transform:translate(0,0)
    }

    25% {
        transform:translate(14px,18px)
    }

    50% {
        transform:translate(-6px,34px)
    }

    75% {
        transform:translate(-24px,14px)
    }

    100% {
        transform:translate(0,0)
    }
}

@keyframes smoothAntiClockwiseTwo {
    0% {
        transform:translate(0,0)
    }

    25% {
        transform:translate(18px,-18px)
    }

    50% {
        transform:translate(44px,0)
    }

    75% {
        transform:translate(18px,18px)
    }

    100% {
        transform:translate(0,0)
    }
}

@keyframes smoothClockwiseThree {
    0% {
        transform:translate(0,0)
    }

    25% {
        transform:translate(-20px,-14px)
    }

    50% {
        transform:translate(-38px,-34px)
    }

    75% {
        transform:translate(-10px,-44px)
    }

    100% {
        transform:translate(0,0)
    }
}

.main-hero-circle {
    animation:smoothCircleRotate 18s linear infinite
}

@keyframes smoothCircleRotate {
    from {
        transform:rotate(0)
    }

    to {
        transform:rotate(360deg)
    }
}

@media (max-width:600px) {
    .floating-card,.main-hero-circle {
        animation:none!important
    }
}

.hero-right {
    position:relative;
    min-height:390px
}

.main-hero-circle {
    position:absolute;
    width:245px;
    height:245px;
    border-radius:50%;
    left:50%;
    top:50%;
    right:auto;
    bottom:auto;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.28);
    z-index:1;
    animation:none!important
}

.floating-card {
    position:absolute;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2;
    animation-duration:16s!important;
    animation-timing-function:linear!important;
    animation-iteration-count:infinite!important;
    will-change:transform
}

.card-one {
    animation-name:orbitOne!important
}

.card-two {
    animation-name:orbitTwo!important
}

.card-three {
    animation-name:orbitThree!important
}

@keyframes orbitOne {
    0% {
        transform:translate(-50%,-50%) rotate(300deg) translateX(150px) rotate(-300deg)
    }

    100% {
        transform:translate(-50%,-50%) rotate(660deg) translateX(150px) rotate(-660deg)
    }
}

@keyframes orbitTwo {
    0% {
        transform:translate(-50%,-50%) rotate(180deg) translateX(150px) rotate(-180deg)
    }

    100% {
        transform:translate(-50%,-50%) rotate(540deg) translateX(150px) rotate(-540deg)
    }
}

@keyframes orbitThree {
    0% {
        transform:translate(-50%,-50%) rotate(60deg) translateX(150px) rotate(-60deg)
    }

    100% {
        transform:translate(-50%,-50%) rotate(420deg) translateX(150px) rotate(-420deg)
    }
}

@media (max-width:600px) {
    .hero-right {
        min-height:auto
    }

    .main-hero-circle {
        display:none
    }

    .floating-card {
        position:relative!important;
        left:auto!important;
        top:auto!important;
        right:auto!important;
        bottom:auto!important;
        transform:none!important;
        animation:none!important;
        margin-bottom:14px;
        width:100%
    }
}

.grocery-card .category-icon {
    background:#dcfce7
}

.storefront-carousel-wrap {
    position:relative;
    width:100%
}

.storefront-carousel-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin:0 0 12px
}

.storefront-carousel-btn {
    width:38px;
    height:38px;
    border:1px solid rgba(249,115,22,.45);
    background:#fff;
    color:#f97316;
    border-radius:999px;
    font-size:20px;
    font-weight:800;
    cursor:pointer;
    line-height:1;
    box-shadow:0 8px 18px rgba(15,23,42,.08)
}

.storefront-carousel-btn:hover {
    background:#fff7ed
}

.storefront-product-row {
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    padding-bottom:12px
}

.storefront-product-row>* {
    flex:0 0 260px;
    scroll-snap-align:start
}

.storefront-product-row::-webkit-scrollbar {
    height:8px
}

.storefront-product-row::-webkit-scrollbar-thumb {
    background:rgba(249,115,22,.35);
    border-radius:999px
}

.storefront-carousel-btn {
    border-color:rgba(249,115,22,.45);
    color:#f97316
}

.storefront-carousel-btn:hover {
    background:#fff7ed
}

.storefront-product-row::-webkit-scrollbar-thumb {
    background:rgba(249,115,22,.42)
}

html {
    scroll-behavior:smooth
}

.product-detail-link {
    display:inline-flex;
    margin-top:10px;
    padding:8px 12px;
    border-radius:999px;
    background:#f97316;
    color:#fff!important;
    font-size:12px;
    font-weight:800;
    text-decoration:none
}

.product-detail-link:hover {
    background:#ea580c
}

.product-card {
    --product-action-color:#431407;
    --product-action-hover-color:#f97316
}

body,html {
    max-width:100%;
    overflow-x:hidden
}

iframe,img,video {
    max-width:100%
}

.dynamic-admin-banner {
    max-width:100%
}

@media (max-width:860px) {
    .dynamic-admin-banner {
        grid-template-columns:1fr!important;
        padding:22px!important;
        gap:18px!important;
        text-align:left!important
    }

    .dynamic-admin-banner h1,.dynamic-admin-banner h2 {
        font-size:clamp(24px, 7vw, 38px)!important;
        line-height:1.12!important
    }

    .dynamic-admin-banner p {
        font-size:14px!important;
        line-height:1.55!important
    }

    .dynamic-admin-banner [style*="height:170px"],.dynamic-admin-banner [style*="width:170px"] {
        width:120px!important;
        height:120px!important;
        font-size:38px!important
    }

    .header,.main-header,.site-header,.top-header {
        max-width:100%
    }

    .category-grid,.featured-category-grid,.product-grid,.storefront-product-row {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
}

@media (max-width:560px) {
    .dynamic-admin-banner {
        margin:16px 0!important;
        padding:18px!important;
        border-radius:18px!important
    }

    .hero-actions,.hero-highlights {
        flex-direction:column!important;
        align-items:stretch!important
    }

    .hero-actions a,.hero-actions button {
        width:100%!important;
        text-align:center!important;
        justify-content:center!important
    }

    .category-grid,.featured-category-grid,.product-grid,.storefront-product-row {
        grid-template-columns:1fr!important
    }

    .category-card,.category-item,.featured-category-card,.product-card {
        max-width:100%!important
    }

    .footer-grid,footer [style*=grid-template-columns] {
        grid-template-columns:1fr!important
    }
}

:root {
    --product-action-color:#f97316;
    --product-action-hover-color:#f97316;
    --product-action-soft-bg:#ffedd5;
    --product-action-heading:#431407;
    --products-accent:#f97316;
    --products-soft-bg:#ffedd5;
    --products-heading:#431407
}

.logo.rr-dynamic-brand-only::after,.logo.rr-dynamic-brand-only::before {
    content:none!important;
    display:none!important
}

html body .nav.rr-category-mega-nav .nav-link.active::after,html body .nav.rr-category-mega-nav .nav-link.is-active::after,html body .nav.rr-category-mega-nav .nav-link::after,html body .nav.rr-category-mega-nav .rr-nav-parent-link.active::after,html body .nav.rr-category-mega-nav .rr-nav-parent-link.is-active::after,html body .nav.rr-category-mega-nav .rr-nav-parent-link::after,html body .nav.rr-category-mega-nav .rr-nav-plain-link::after {
    content:none!important;
    display:none!important;
    width:0!important;
    height:0!important;
    opacity:0!important;
    background:0 0!important
}

html body:not(.admin) footer.site-footer,html body:not(.admin) footer.site-footer.rr-central-footer {
    margin-top:0!important
}