<template lang="pug">
    .purchase-step
        .products-selector
            product-searcher
            products-grid
        cart
</template>

<script>
    import ProductSearcher from '@/components/product/ProductSearcher'
    import ProductsGrid from '@/components/product/ProductsGrid'
    import Cart from '@/components/product/Cart'

    export default {
        components: {
            ProductSearcher,
            ProductsGrid,
            Cart
        }
    }
</script>

<style lang="sass">
    .purchase-step
        .products-selector
            width: calc(100% - 300px)
            height: 100%
            padding-right: 5px
            display: inline-block
        .cart-viewer
            width: 300px
            height: 100%
            border-left: 1px solid #d3d3d3
            padding-left: 10px
            display: inline-block
            vertical-align: top
</style>
