/*
================================================

Space Vanta Theme 1.0

Module:
Product Details

File:
details.css

Version:
1.0

Phase:
PDR-DV-001

Purpose:
Product Details Visual Foundation

Responsibilities:

- Product Details container
- Separation from Product Information / Gallery
- Product Details heading
- Shared spatial rhythm

Does NOT handle:

- Description visual styling
- FAQ visual styling
- Policy styling
- Accordion behavior
- Modal behavior

================================================
*/


/* =================================================
PRODUCT DETAILS
================================================= */

.sv-product__details {

    width: 100%;
    min-width: 0;

    margin-top: clamp(56px, 8vw, 110px);

    position: relative;

}


/* =================================================
GLASS DIVIDER
================================================= */

.sv-product__details::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.04) 12%,
            rgba(0, 0, 0, 0.14) 42%,
            rgba(0, 0, 0, 0.18) 50%,
            rgba(0, 0, 0, 0.14) 58%,
            rgba(0, 0, 0, 0.04) 88%,
            transparent 100%);

    opacity: 0.75;

}


/* =================================================
GLASS LIGHT
================================================= */

.sv-product__details::after {

    content: "";

    position: absolute;

    top: -12px;
    left: 20%;
    right: 20%;

    height: 24px;

    pointer-events: none;

    background:
        radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.16) 34%,
            transparent 72%);

    filter: blur(10px);

    opacity: 0.45;

}


/* =================================================
CONTENT
================================================= */

.sv-product__details-content {

    width: 100%;
    min-width: 0;

    padding-top: clamp(42px, 5vw, 72px);

}


/* =================================================
DETAILS CHILD SPACING
================================================= */

.sv-product__details-content>* {

    width: 100%;
    min-width: 0;

}


/* =================================================
MOBILE
================================================= */

@media (max-width: 749px) {

    .sv-product__details {

        margin-top: 52px;

    }


    .sv-product__details-content {

        padding-top: 34px;

    }


    .sv-product__details::after {

        left: 12%;
        right: 12%;

    }

}