/* Explain: Diagonal layout utilities and responsive store structure */
.section-pad {
    padding-block: clamp(4rem, 7vw, 7.5rem);
}

.diagonal-slab {
    position: relative;
    isolation: isolate;
}

.diagonal-slab::after {
    content: '';
    position: absolute;
    inset: 8% -12% 8% auto;
    width: 58%;
    transform: skewX(-14deg);
    border: 1px solid var(--dark-line);
    background: linear-gradient(135deg, rgba(29, 111, 255, 0.16), rgba(184, 242, 58, 0.06));
    z-index: -1;
}

.grid-lines {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
}

.sticky-checkout {
    position: sticky;
    top: 5.5rem;
}

@media (max-width: 767px) {
    .diagonal-slab::after {
        inset: 18% -35% auto auto;
        width: 92%;
        height: 42%;
    }

    .sticky-checkout {
        position: static;
    }

    .mobile-safe-checkout {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin-inline: -1rem;
        border-radius: 1.4rem 1.4rem 0 0;
    }
}