/* Product Page */
.product-content {
    padding               : 3rem var(--side-padding) 1rem;
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : var(--grid-gap);
    position              : relative;
    grid-template-areas   : "opening opening opening opening opening opening opening opening"
                            "text text text text text text text text"
                            "gallery gallery gallery gallery gallery gallery gallery gallery"
                            "form form form form form form form form";

    @media (width > 700px) {
            padding               : 5rem var(--side-padding) 1rem;
            grid-template-areas : "opening opening opening opening opening opening text text text text text text"
                                  "gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery gallery";
    }

}
/* The primary opening image */
.product-opening-image {
    grid-area : opening;
    object-fit: cover;
    @media (width > 700px) {
        max-height : calc(100svh - 6rem);
    }
}
/* The Text Container */
.product-information {
    grid-area  : text;
    align-self : start;
    top : 0;
    display : grid;
    grid-template-columns: subgrid;
    grid-template-areas: "title title title title title collection collection collection"
                         "text text text text text text text text"
                         "meta meta meta meta meta meta meta meta"
                         "form form form form form form form form";

    @media (width > 700px) {
        position : sticky;
        grid-template-areas: "title title title title . collection"
                    "text text text text . ."
                    "meta meta meta meta meta meta"
                    "form form form form form form";
    }

    @media (width > 1400px) {
        grid-template-areas: "title title title title . collection"
                        "text text text text . ."
                        "meta meta meta . . ."
                        "form form form form form form";
    }
}
.product-information a {
    color : var(--gray);
}
.product-name {
    grid-area : title;
    text-transform : uppercase;
}
.product-collection {
    grid-area : collection;
    color : var(--gray);
    @media (width <= 700px) {
        justify-self: end;
    }
}
.product-description {
    grid-area : text;
    margin-bottom : 4rem;
}
.product-description p:empty {
    margin-bottom: 1rem;
}
.product-meta {
    grid-area             : meta;
    display               : grid;
    grid-template-columns : repeat(3,1fr);
    gap                   : var(--grid-gap);
}
.product-meta a:hover {
    color : var(--black);
}
/* Buy Button/Section */
.product-form-button {
    justify-self   : start;
    border         : none;
    background     : var(--gray);
    color          : var(--gray-light);
    text-transform : uppercase;
    padding        : 0.25rem 0.5rem;
    cursor         : pointer;
    white-space    : nowrap;

    @media (hover:hover) {
        &:hover {
            background : var(--text);
        }
    }
}
.product-form-button.disabled {
    pointer-events: none;
}
.product-form-is-open .product-form-button {
    background : var(--text);
}
.product-form-is-open .product-form-button:hover {
    @media (hover:hover) {
        &:hover {
            background : var(--black);
        }
    }
}
.product-form-container {
    grid-area : form;
    margin-top : 4rem;
    background: var(--text);
    color : var(--background);
    max-width : min-content;
}
.product-form {
    padding : 1rem 0.5rem;
    display : none;
}
.product-form-is-open .product-form {
    display : block;
}
.product-form-is-open {
    max-width : 23rem;
}
.product-form-row {
    border : none;
    display : grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "label inputs";
    margin-bottom : 0.5rem;
}
.product-form-label {
    grid-area : label;
    display : contents;
}
.product-form-inputs {
    grid-area: inputs;
}
.product-form-inputs input[type="radio"] {
    appearance: initial;
    height : 0;
    width : 0;
}
.product-form-inputs label {
    opacity : .5;
    cursor : pointer;
    &:not(:last-child) {
        margin-right : 0.5rem;
    }
}
.product-form-inputs label:hover {
    opacity : .75;
}
.product-form-inputs input[type="radio"]:checked + label {
    opacity : 1;
}
.product-form-email {
    border        : none;
    opacity       : .5;
    padding-left  : 0;
    border-radius : 0;
    border-left : 1px solid var(--background);
}
.product-form-email:not(:placeholder-shown) {
    border-left : 1px solid transparent;
}
.product-form-email:focus {
    opacity     : 1;
    border-left : 1px solid transparent;
}
.product-form-submit {
    font : var(--font-small);
    text-transform: uppercase;
    border : none;
    background: var(--gray);
    color : var(--text);
    padding : 0.25rem 0.5rem;
    margin-top : 1rem;
    cursor : pointer;
}
@media (hover:hover) {

    .product-form-submit:hover {
        background : var(--background);
    }
}
/* The Product Gallery */
.product-gallery {
    grid-area : gallery;
}
/* The Single Gallery Module */
.product-gallery-row {
    display               : grid;
    grid-template-columns : var(--grid-columns);
    grid-gap              : 0.5rem;
    @media (width > 500px) {
        grid-gap : var(--grid-gap);
    }
}
.product-gallery-row:not(:last-child) {
    margin-bottom : 0.5rem;
    @media (width > 500px) {
        margin-bottom : var(--grid-gap);
    }
}
/* The Left Image */
@media (width > 500px) {
    .product-gallery-left-image {
        object-fit: cover;
        max-height : calc(100svh - 2rem);
    }
}
.product-gallery-left-image-container {

    grid-column : 1 / -1;

    @media (width > 500px) { 
        grid-column : 1 / span 4;
        grid-row    : span 2;
        max-height : calc(100svh - 2rem);
    }

    @media (width > 700px) {
        grid-column : 1 / span 6;
        grid-row : span 2;
    }
}
.product-gallery-left-image-container[data-size="small"] {
    @media (width > 500px) {
        align-self: end;
        grid-column : 1 / span 3;
    }
    @media (width > 700px) {
        grid-column : 1 / span 5;
    }
}
/* Right, Top Image */
.product-gallery-right-top-image-container,
.product-gallery-right-bottom-image-container {
    @media (width > 500px) {
        grid-column : 5 / span 2;
        max-height : calc(50svh - 1.5rem);
    }
    @media (width > 700px) {
        grid-column : 7 / span 3;
    }
}
@media (width <= 500px) {     
    .product-gallery-right-top-image-container {
        grid-column : 1 / span 4;
    }
    .product-gallery-right-bottom-image-container {
        grid-column : 5 / span 4;
    }
}
/* Right, Bottom Image */
.product-gallery-right-bottom-image-container {
    @media (width > 500px) {
        grid-row : 2 / 3;
    }
}
.product-gallery-right-top-image-container[data-position="right"],
.product-gallery-right-bottom-image-container[data-position="right"] {
    @media (width > 500px) { 
        grid-column : 7 / span 2;
    }
    @media (width > 700px) {
        grid-column : 10 / span 3;
    }
}
.product-gallery-right-top-image-container img,
.product-gallery-right-bottom-image-container img {
    height : 100%;
    object-fit: cover;
}
/* Related and Suggested Products */
.product-suggested,
.product-related {
    margin-top : 10rem;
    @media (width > 700px) {
        margin-top : 20rem;
    }
}
.product-suggested-title,
.product-related-title {
    padding-left : var(--side-padding);
    margin-bottom : 1rem;
}
/* Mobile Form */
.product-form-mobile-container {
    grid-area: form;
    @media (width > 700px) {
         display : none;
    }
}
/* Hide the desktop form */
@media (width <= 700px) {
    .product-form-container {
        margin-top : 2rem;
    }
    .product-information .product-form-container {
        display : none;
    }
    .product-information {
        margin-bottom : 2rem;
    }
    .product-description {
        margin-bottom : 1rem;
    }
}
/* JS form */
.product-form-container.submitting {
    pointer-events: none;
    position : relative;
    &::after {
        content        : "";
        inset          : 0;
        background     : black;
        opacity        : 0.5;
        position       : absolute;
        cursor         : not-allowed;
        pointer-events : all;
    }
}