@layer components {

    product-info {

        & header {
            & a {
                text-decoration: none;
                color: var(--color-dark);

                & h3 {
                    font-size: var(--font-size-0);
                    &:hover {
                        color: var(--color-blue);
                    }
                }
            }
        }

        & .quantity-stepper {
            display: flex;
            gap: var(--size-1);
            align-items: center;
            justify-content: space-between;

            :is(button) {
                padding: 0 var(--size-2);
                border: none;
                background: transparent;

                &:hover {
                    color: var(--color-button-blue);
                    scale: 1.2;
                }

                &:active {
                    scale: 1;
                }
            }

            & input.product-quantity {
                text-align: center;
                width: 100%;
                max-width: 60px;

                /* START OF remove the spinners */
                /* note this is seems a bit hacky but it is required to handle different browsers */

                /* Chrome, Safari, Edge, Opera */
                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    appearance: none;
                    margin: 0;
                }

                /* Firefox */
                -moz-appearance: textfield;
                appearance: textfield;

                /* END OF remove the spinners */

                @media (hover: none) {
                    /* equal padding when hover is none, the default stepper controls are often hidden */
                    padding: var(--size-3) var(--size-2);
                }
            }
        }
    }

    product-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(clamp(147px, 40vw, 236px), 1fr));
        gap: var(--border-size-1); /* Needs to be the same size as product-info outline to prevent double up of borders in the grid */

        > h2 {
            display: grid;
            justify-content: space-between;
            grid-auto-flow: column;
            grid-column: 1 / -1;
        }

        > product-info {
            position: relative;
            display: grid;
            grid-template-areas: "image" "category" "price" "title" "shipping" "cart" "footer";
            grid-template-rows: auto auto auto 1fr auto auto auto;
            gap: var(--size-3);
            outline: var(--border-size-1) solid var(--color-border-grey); /* To prevent double up of borders in the grid make the product-list gap the same as the outline size */

            padding-top: var(--size-8);
            padding-bottom: var(--size-5);
            padding-inline: var(--size-3);

            & .product-image-container {
                grid-area: image;
            }

            & .product-image {

                :is(picture, img) {
                    display: block;
                    width: 125px;
                    max-width: 100%;
                    height: 125px;
                    object-fit: contain;
                    margin-inline: auto;

                    /* tablet and up */
                    @media screen and (min-width: 768px) {
                        width: 180px;
                        height: 180px;
                    }
                }
            }

            & .brand-logo {
                grid-area: brand;
                display: none;
            }

            & .header-container {
                grid-area: title;
                display: grid;
                grid-template-areas: "name" "brief" "model";
                grid-template-rows: auto auto auto;
                gap: var(--size-3);
            }

            & header {
                grid-area: name;
            }

            & .manufacturer-details {
                grid-area: model;
                display: none;
            }

            & .add-to-cart {
                grid-area: cart;

                & .cart-button {
                    width: 100%;
                    padding: var(--size-2);
                }
            }

            & .shipping {
                grid-area: shipping;
            }

            :is(.shipping, .addon-heading) em {
                font-style: normal;
                font-weight: var(--font-weight-5);
            }

            & .promo-badges {
                position: absolute;
                top: 0;
                right: 0;
                width: 72px;
                font-size: var(--font-size-000);
                display: flex;
                flex-direction: column-reverse;

                > * {
                    padding: var(--size-2) var(--size-2);
                    font-style: normal;
                }

                & .promotion {
                    display: block;
                    background-color: var(--color-blue);
                    color: var(--color-light);
                    text-align: center;
                }

                & .badge-flag {
                    --flag-color: var(--color-brand-yellow);
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    background-color: var(--flag-color);
                    align-items: center;
                    text-align: center;
                    padding-bottom: var(--size-1);
                    font-weight: var(--font-weight-4);

                    &.discount {
                        --flag-color: var(--color-green-alt);
                        color: var(--color-light);
                    }

                    &.additional {
                        padding-top: var(--size-3);
                    }

                    :is(rrp-discount) {
                        display: block;
                        font-weight: var(--font-weight-7);
                        height: 18px;
                    }

                    & .discount-percent {
                        font-weight: var(--font-weight-7);
                        height: 18px;
                    }

                    &::after {
                        content: "";
                        display: block;
                        width: 0;
                        height: 0;
                        border-left: 36px solid transparent;
                        border-right: 36px solid transparent;
                        border-top: 10px solid var(--flag-color);
                        position: absolute;
                        bottom: -10px;
                    }
                }
            }

            & .product-category {
                grid-area: category;
            }

            & .price-section {
                grid-area: price;
                display: flex;
                gap: var(--size-2);

                /* Needed in list view */
                & .shipping {
                    display: none;
                }

                /* Needed in list view */
                & .stock-levels {
                    grid-area: stock;
                    display: none;
                }

                & product-price, .poa {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: var(--font-size-5);
                    font-weight: var(--font-weight-7);
                }

                & product-price {
                    line-height: 0.7em;

                    :is(sup) {
                        font-size: var(--font-size-00);
                        font-weight: normal;
                        vertical-align: text-top;
                    }
                }

                :is(em) {
                    display: flex;
                    align-items: center;
                }

                & .bulk-buy-price {
                    grid-area: bulk-buy-price;
                    background-color: var(--color-light-green);
                    font-size: var(--font-size-000);
                    padding: var(--size-1);
                    border-radius: var(--border-size-2);
                    font-style: normal;
                    text-align: center;
                }
            }

            & .product-brief {
                grid-area: brief;
                color: var(--color-blue);
                font-weight: var(--font-weight-5);
                font-size: var(--font-size-0);
            }

            & .delivery-options {
                grid-area: delivery;
                display: none;
            }

            & footer {
                grid-area: footer;
                display: flex;
                justify-content: space-between;
                gap: var(--size-2);
                align-items: flex-end;
            }
        }

        /* Scroller specific styles */
        &.scroll-h {
            padding: 1px 0px;
            display: flex;
            width: min-content;
            max-width: 100%;

            & .price-section product-price, .price-section .poa {
                font-size: var(--font-size-4);
            }

            > product-info {
                grid-template-areas: "image" "category" "price" "title" "shipping";
                grid-template-rows: auto auto auto 1fr auto;
                min-width: 176px;
                flex: 1;

                &.with-cart {
                    grid-template-areas: "image" "category" "price" "title" "shipping" "cart";
                }

                &.with-footer {
                    grid-template-areas: "image" "category" "price" "title" "shipping" "footer";
                }

                &.with-cart.with-footer {
                    grid-template-areas: "image" "category" "price" "title" "shipping" "cart" "footer";
                }

                & .header-container {
                    grid-template-areas: "name" "brief";
                    grid-template-rows: auto auto;
                }
            }

            border-right: var(--border-size-1) solid var(--color-border-grey);
            border-left: var(--border-size-1) solid var(--color-border-grey);

            /* tablet and up */
            @media screen and (min-width: 768px) {

                > product-info {
                    min-width: 235px;
                    min-height: 502px;

                    :is(picture, img) {
                        width: 140px;
                        height: 140px;
                    }
                }
            }

            /* large screen */
            @media screen and (min-width: 1482px) {

                > product-info {
                    min-width: 239px;
                }

                /* min-width: unset; */
            }
        }

        /* tablet and up */
        @media screen and (min-width: 768px) {
            grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));

            > product-info {
            
                & .bulk-buy-price {
                    font-size: var(--font-size-00) !important;
                    padding: var(--size-1) var(--size-2) !important;
                }

                & .promo-badges {
                    font-size: var(--font-size-00);
                }
            }
        }

        /* large screen */
        @media screen and (min-width: 1200px) {
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
        }

        /* smaller screens only shows the checkbox */
        @media screen and (max-width: 600px) {
            /* Inside product lists, hide all the content of the compare button except the checkbox on smaller screens */
            & pikle-compare > .pikle-toggle-compare-button > * {
                display: none;
                &.check {
                    display: grid;
                }
            }
        }
    }

    .product-header {
        display: grid;
        gap: var(--size-3);

        &.site-container {
            display: flex;
            flex-direction: column;
        }

        > product-info {
            display: grid;
            gap: var(--size-6);
            grid-template-columns: auto;
            grid-template-areas: "header" "image-area" "details";

            &.has-offers {
                grid-template-areas: "header" "image-area" "details" "offers";
            }

            & header {
                grid-area: header;
                font-size: var(--font-size-4);

                & .deal {
                    font-style: normal;
                    color: var(--color-red);
                }
            }

            :is(product-images-container) {
                grid-area: image-area;

                :is(picture, img).header-image {
                    display: block;
                    width: 100%;
                    height: 350px;
                    max-width: 350px;
                    object-fit: contain;
                    margin-inline: auto;
                }

                & footer ul {
                    display: flex;
                    gap: var(--border-size-1);
                    margin-top: var(--size-2);
                    list-style: none;
                    margin: 0;
                    padding: var(--size-3) 0 0 0;

                    & li {
                        width: 65px;
                        height: 55px;
                        outline: var(--border-size-1) solid var(--color-border-grey); /* To prevent double up of borders in the grid make the product-list gap the same as the outline size */

                        :is(picture, img) {
                            width: 65px;
                            height: 55px;
                            object-fit: contain;
                        }
                    }
                }
            }

            & .details {
                grid-area: details;
                display: grid;
                gap: var(--size-6);
                grid-template-rows: max-content;
                align-content: start;

                & .cart-card {

                    & .stock {
                        font-size: var(--font-size-0);
                        font-weight: var(--font-weight-7);
                    }

                    :is(form) {

                        display: grid;
                        grid-template-columns: auto;
                        gap: var(--size-6);

                        & .price-quantity {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: var(--size-6);

                            & .price-container {
                                display: flex;
                                flex-direction: column;
                                gap: 0.08rem;
                            }

                            & product-price, .poa {
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: var(--font-size-6);
                                font-weight: var(--font-weight-7);
                                line-height: 0.7em;

                                :is(sup) {
                                    font-size: var(--font-size-0);
                                    font-weight: normal;
                                    vertical-align: text-top;
                                }
                            }

                            & .tax-info {
                                font-size: var(--font-size-00);
                                font-weight: var(--font-weight-4);
                            }
                        }

                        & .cart-button {
                            width: 100%;
                            padding: 0.77rem;
                        }
                    }

                    & footer {
                        display: flex;
                        justify-content: center;
                        /* display: grid; */
                        /* grid-template-columns: 1fr 0; */
                        align-items: center;
                        background-color: var(--color-light-green);
                        color: var(--color-green);
                        padding: 0.65rem var(--size-8);

                        & .bulk-buy-label {
                            padding: var(--size-2) var(--size-3);
                            display: none;
                            gap: var(--size-1);
                            justify-content: center;
                            align-items: center;
                            background-color: var(--color-green);
                            color: var(--color-light);
                            white-space: nowrap;
                        }

                        & discount-amount {
                            text-align: center;
                        }
                    }
                }

                & .delivery-card {
                    min-height: 178px;

                    & .content-tabs-nav-wrapper {
                        background-color: var(--color-light-grey);
                        border-bottom: none;

                        & :is(nav) {
                            :is(ul) {
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                align-items: stretch;
                            }

                            & .content-tab {
                                align-items: stretch;

                                &:not(:last-child) {
                                    border-right: 1px solid var(--color-border-grey);
                                }

                                :is(label) {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    border-bottom: 1px solid var(--color-border-grey);
                                    font-size: var(--font-size-0);

                                    &:has(input[type="radio"]:checked) {
                                        color: var(--color-text);
                                        background-color: var(--color-light);
                                        border-bottom: 1px solid var(--color-light);
                                    }
                                }

                                & .tab-icon {
                                    display: none;
                                }

                                & :is(input[type="radio"]) {
                                    position: relative;
                                    width: auto;
                                    height: auto;
                                    margin: 0 var(--size-2) 0 0;
                                    opacity: 1;
                                }
                            }
                        }
                    }

                    :is(content-tab-window-item) {
                        padding-top: var(--size-3);
                    }
                }

                & .additional-details-card {

                    font-size: var(--font-size-00);

                    :is(section) {
                        display: grid;
                        gap: var(--size-1);
                        grid-template-columns: auto auto;

                        :is(ul) {
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            display: grid;
                            gap: var(--size-2);
                        }

                        & a {
                            text-decoration: none;
                        }

                        &:first-child {
                            border-bottom: var(--border-size-1) solid var(--color-border-grey);
                        }
                    }

                    & h4 {
                        font-size: var(--font-size-1);
                        margin-bottom: var(--size-3);
                    }
                }
            }

            & .product-offers {
                grid-area: offers;
            }

            @media screen and (min-width: 768px) {
                & .details .cart-card {
                    :is(form) {
                        grid-template-columns: auto minmax(auto, 360px);

                        & .details .cart-card product-price, .details .cart-card .poa {
                            font-family: Arial, Helvetica, sans-serif;
                            font-size: var(--font-size-7);
                            font-weight: var(--font-weight-7);

                            :is(sup) {
                                font-size: var(--font-size-0);
                                font-weight: normal;
                                vertical-align: text-top;
                            }
                        }
                    }

                    & footer {
                        grid-template-columns: min-content 1fr 100px;

                        & .bulk-buy-label {
                            display: flex;
                        }
                    }
                }

                & .details .delivery-card .content-tabs-nav-wrapper nav .content-tab .tab-icon {
                    display: block;
                }

                & .additional-details-card {
                    display: grid;
                    gap: 0;
                    grid-template-columns: repeat(2, minmax(0, 1fr));

                    & section:first-child {
                        border-bottom: none !important;
                        border-right: var(--border-size-1) solid var(--color-border-grey);
                    }
                }
            }

            /* desktop and up */
            @media screen and (min-width: 960px) {
                grid-template-columns: auto 1fr;
                grid-template-areas: ". header" "image-area details";
                grid-template-rows: min-content 1fr;

                &.has-offers {
                    grid-template-areas: ". header" "image-area details" "offers offers";
                    grid-template-rows: min-content 1fr auto;
                }

                :is(product-images-container) {
                    grid-row: span 2;
                    grid-row-start: span 2;
                    grid-row-end: auto;
                }
            }

            /* large screen */
            @media screen and (min-width: 1024px) {
                grid-template-columns: auto minmax(auto, 750px);

                :is(product-images-container) {
                    :is(picture, img).header-image {
                        width: clamp(250px, 37vw, 450px);
                        height: clamp(250px, 37vw, 450px);
                        max-width: 450px;
                        max-height: 450px;
                    }
                }
            }
        }
    }
}