.market-background {
    position: fixed;
    inset: 0;
    z-index: -20;
    overflow: hidden;
    background:
        linear-gradient(118deg, rgba(255, 251, 247, 0.96), rgba(226, 239, 234, 0.78) 42%, rgba(246, 235, 219, 0.94)),
        var(--bg-page, #f4efe7);
}

.market-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(47, 93, 80, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 93, 80, 0.08) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 78%);
    animation: market-grid-drift 24s linear infinite;
}

.market-background::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -24vh;
    width: min(92vw, 920px);
    height: 56vh;
    transform: translateX(-50%) perspective(460px) rotateX(62deg);
    transform-origin: center bottom;
    background:
        repeating-linear-gradient(90deg, rgba(96, 75, 51, 0.12) 0 2px, transparent 2px 72px),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
    border-top: 1px solid rgba(96, 75, 51, 0.12);
    opacity: 0.62;
}

.market-background .page-overlay {
    position: fixed;
    inset: 0;
    z-index: -10;
    background:
        linear-gradient(180deg, rgba(244, 239, 231, 0.18), rgba(244, 239, 231, 0.9)),
        linear-gradient(90deg, rgba(255, 251, 247, 0.38), transparent 24%, transparent 76%, rgba(255, 251, 247, 0.38));
}

.market-aisle {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, minmax(42px, 1fr));
    gap: clamp(0.65rem, 1.6vw, 1rem);
    width: clamp(12rem, 22vw, 18rem);
    padding: clamp(0.8rem, 1.7vw, 1.2rem);
    border: 1px solid rgba(96, 75, 51, 0.12);
    border-radius: 1.8rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 251, 247, 0.32)),
        repeating-linear-gradient(180deg, transparent 0 54px, rgba(96, 75, 51, 0.1) 54px 56px);
    box-shadow: 0 24px 50px rgba(60, 43, 24, 0.1);
    backdrop-filter: blur(2px);
}

.market-aisle span {
    display: block;
    aspect-ratio: 1 / 0.78;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(47, 93, 80, 0.72), rgba(137, 178, 163, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 8px 16px rgba(47, 93, 80, 0.14);
}

.market-aisle span:nth-child(2n) {
    background: linear-gradient(135deg, rgba(185, 91, 97, 0.72), rgba(237, 172, 146, 0.82));
}

.market-aisle span:nth-child(3n) {
    background: linear-gradient(135deg, rgba(214, 174, 91, 0.72), rgba(245, 219, 142, 0.86));
}

.market-aisle-one {
    top: 16vh;
    left: max(-3rem, 4vw);
    transform: rotate(-8deg);
    animation: market-float-left 12s ease-in-out infinite;
}

.market-aisle-two {
    right: max(-4rem, 4vw);
    bottom: 10vh;
    transform: rotate(7deg);
    animation: market-float-right 14s ease-in-out infinite;
}

.market-basket {
    position: absolute;
    left: 50%;
    top: 18vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.45rem;
    width: clamp(8rem, 16vw, 13rem);
    height: clamp(5.4rem, 10vw, 8rem);
    transform: translateX(-50%);
    border: 2px solid rgba(47, 93, 80, 0.28);
    border-top: 0;
    border-radius: 0 0 2.2rem 2.2rem;
    background:
        repeating-linear-gradient(90deg, rgba(47, 93, 80, 0.12) 0 2px, transparent 2px 22px),
        rgba(255, 251, 247, 0.38);
    box-shadow: 0 22px 44px rgba(60, 43, 24, 0.09);
    animation: market-basket-glide 16s ease-in-out infinite;
}

.market-basket::before {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: -34%;
    height: 60%;
    border: 2px solid rgba(47, 93, 80, 0.22);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.market-basket span {
    width: 22%;
    aspect-ratio: 1;
    border-radius: 999px 999px 0.7rem 0.7rem;
    background: #d7ad5b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.market-basket span:nth-child(2) {
    background: #5f9b78;
    transform: translateY(-0.7rem);
}

.market-basket span:nth-child(3) {
    background: #c8666a;
}

.market-sign {
    position: absolute;
    width: clamp(8rem, 16vw, 13rem);
    height: clamp(2.8rem, 5vw, 4rem);
    border-radius: 1.2rem;
    border: 1px solid rgba(96, 75, 51, 0.12);
    background: linear-gradient(90deg, rgba(47, 93, 80, 0.16), rgba(255, 251, 247, 0.78), rgba(214, 174, 91, 0.2));
    box-shadow: 0 16px 34px rgba(60, 43, 24, 0.08);
}

.market-sign::before,
.market-sign::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 0.45rem;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(47, 93, 80, 0.22);
}

.market-sign::before {
    left: 14%;
    width: 34%;
}

.market-sign::after {
    right: 14%;
    width: 22%;
    background: rgba(185, 91, 97, 0.2);
}

.market-sign-one {
    top: 12vh;
    right: 22vw;
    animation: market-sign-drift 15s ease-in-out infinite;
}

.market-sign-two {
    left: 18vw;
    bottom: 16vh;
    animation: market-sign-drift 18s ease-in-out infinite reverse;
}

@keyframes market-grid-drift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 54px 54px, 54px 54px; }
}

@keyframes market-float-left {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
    50% { transform: translate3d(1rem, -0.8rem, 0) rotate(-5deg); }
}

@keyframes market-float-right {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(7deg); }
    50% { transform: translate3d(-1rem, 0.9rem, 0) rotate(4deg); }
}

@keyframes market-basket-glide {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(calc(-50% + 1.4rem), 0.65rem, 0); }
}

@keyframes market-sign-drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0.8rem, -0.6rem, 0); }
}

.theme-dark .market-background {
    background:
        linear-gradient(118deg, rgba(22, 18, 15, 0.98), rgba(33, 54, 47, 0.92) 44%, rgba(35, 29, 24, 0.98)),
        var(--bg-page, #16120f);
}

.theme-dark .market-background::before {
    background-image:
        linear-gradient(rgba(137, 178, 163, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 178, 163, 0.1) 1px, transparent 1px);
}

.theme-dark .market-aisle,
.theme-dark .market-sign {
    border-color: rgba(212, 192, 163, 0.14);
    background:
        linear-gradient(180deg, rgba(41, 35, 30, 0.72), rgba(33, 28, 23, 0.38)),
        repeating-linear-gradient(180deg, transparent 0 54px, rgba(212, 192, 163, 0.12) 54px 56px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.2);
}

.theme-dark .market-basket {
    border-color: rgba(137, 178, 163, 0.28);
    background:
        repeating-linear-gradient(90deg, rgba(137, 178, 163, 0.12) 0 2px, transparent 2px 22px),
        rgba(33, 28, 23, 0.42);
}

.theme-dark .market-basket::before {
    border-color: rgba(137, 178, 163, 0.24);
}

.theme-dark .market-background .page-overlay {
    background:
        linear-gradient(180deg, rgba(22, 18, 15, 0.1), rgba(22, 18, 15, 0.88)),
        linear-gradient(90deg, rgba(22, 18, 15, 0.44), transparent 24%, transparent 76%, rgba(22, 18, 15, 0.44));
}

@media (max-width: 640px) {
    .market-aisle {
        opacity: 0.7;
    }

    .market-basket {
        top: 22vh;
        opacity: 0.72;
    }

    .market-sign {
        opacity: 0.58;
    }
}

@media (prefers-reduced-motion: reduce) {
    .market-background::before,
    .market-aisle-one,
    .market-aisle-two,
    .market-basket,
    .market-sign {
        animation: none;
    }
}