/* Single Product Page — Page-Level Styles */

/* ----------------------------------------
   Component imports (shared cards)
---------------------------------------- */
@import url('../../components/product-card/assets/styles.css');
@import url('../../components/blog-card/styles.css');

/* ----------------------------------------
   Section imports
---------------------------------------- */
@import url('../section-breadcrumbs/assets/styles.css');
@import url('../section-product-gallery/assets/styles.css');
@import url('../section-product-info/assets/styles.css');
@import url('../section-product-features/assets/styles.css');
@import url('../section-product-video/assets/styles.css');
@import url('../section-product-tabs/assets/styles.css');
@import url('../section-related-articles/assets/styles.css');
@import url('../section-faq/assets/styles.css');
@import url('../section-suggested-products/assets/styles.css');

/* ----------------------------------------
   Page wrapper
---------------------------------------- */
.single-product {
    width: 100%;
}

/* ----------------------------------------
   Breadcrumbs wrapper — 87.5rem content width
---------------------------------------- */
.single-product__breadcrumbs-wrap {
    width: 100%;
    min-width: 0;
    max-width: 87.5rem;
    padding-top: 5.25rem;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------
   Two-column main layout — 87.5rem content width
   (left 50.5rem + gap 1rem + right 36rem = 87.5rem exactly)
---------------------------------------- */
.single-product__main {
    width: 100%;
    min-width: 0;
    max-width: 87.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 6.25rem;
    display: flex;
    align-items: flex-start;
}

.single-product__left {
    width: 50.5rem;
    flex-shrink: 0;
}

/* ----------------------------------------
   Left column — section spacing
   Figma: 40px (2.5rem) gap between each section
---------------------------------------- */
.single-product__left .section-product-features {
    margin-top: 2.5rem;
    /* 40px / 16 */
}

.single-product__left .section-product-video {
    margin-top: 2.5rem;
    /* 40px / 16 */
}

.single-product__left .section-product-tabs {
    margin-top: 2.5rem;
    /* 40px / 16 */
}

.single-product__left .section-related-articles {
    margin-top: 0.5rem;
}

.single-product__right {
    width: 36rem;
    flex-shrink: 0;
    margin-left: 1rem;
    position: sticky;
    top: 0.25rem;
}

/* ----------------------------------------
   Mobile — single column stack
---------------------------------------- */
@media screen and (max-width: 639.98px) {
    .single-product {
        max-width: 100%;
        overflow-x: hidden;
    }

    .single-product__breadcrumbs-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .single-product__main {
        flex-direction: column;
        max-width: 100%;
        overflow-x: hidden;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 5rem;
    }

    .single-product__left,
    .single-product__right {
        display: contents;
    }

    .section-product-gallery {
        order: 1;
    }

    .section-product-info {
        order: 2;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section-product-features {
        order: 3;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section-product-video {
        order: 4;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section-product-tabs {
        order: 5;
    }

    .section-related-articles {
        order: 6;
        box-sizing: border-box;
        padding-left: 1rem;
        padding-right: 1rem;
		margin-left: 0rem;
		margin-right: 0rem;
		width: 100%;
    }

    .section-product-features,
    .section-product-video,
    .section-product-tabs,
    .section-related-articles {
        margin-top: 1.5rem;
    }

    .section-product-info {
        margin-top: 0;
    }
	.single-product__left .section-related-articles{
		margin-top: 0;
	}
}