/* ==========================================================================
   DECORATIVE ELEMENTS FIX
   Ensures decorative SVG/background elements don't overlap content
   ========================================================================== */

/* Ensure all content has proper z-index layering */
.container {
    position: relative;
    z-index: 10;
}

.card-base,
.product-card,
.btn {
    position: relative;
    z-index: 10;
}

/* Decorative elements should be behind content */
.decorative-bg,
.decorative-line,
.decorative-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* Fix for overlapping decorative elements */
.content-wrapper {
    position: relative;
    z-index: 10;
    background: white;
}

/* Ensure text is always readable */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div {
    position: relative;
    z-index: 5;
}

/* Product detail grid fix */
.product-detail-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.main-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--slate-50);
    border: 1px solid var(--slate-100);
    position: relative;
    z-index: 10;
}

.main-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Remove any conflicting decorative overlays */
.section-padding::before,
.section-padding::after {
    display: none !important;
}

/* Ensure modals and overlays work correctly */
.modal,
.overlay,
.mobile-menu {
    z-index: 2000;
}

.mobile-overlay {
    z-index: 1999;
}

/* Fix for any SVG decorations */
svg.decoration {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.1;
}

@media(max-width: 900px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    h1 {
        font-size: 2rem;
    }
}