/*----------------------------------------------------
@File: Default Styles
@Author: Vuyani Joshua Matumbu
Author E-mail: da_vuks@yahoo.com / vj@mkholoempire.co.za

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.
---------------------------------------------------- */
/*=====================================================================
@Template Name: Pizza
 
 
=====================================================================*/
 /*============Product================*/
.product{
    margin-bottom: 10em;
}
.product .grid-2{
    gap: 5em;
}
 
.product .product-details p{
    padding: 1em 0;
}
.product .product-content .product-details .size p{
    
    border: .1em solid var(--primary-color);
    margin: 1.5em .2em;
    padding: 1em 1em;
}
.product .product-content .product-details .size p:hover{
   cursor: pointer;
   background-color: var(--primary-color);
   color: #fff;
}
.product .product-details .spacy,
.garlic{
    display: flex;
    gap: 1em;
    margin: 0 2em;
}
.product .product-details input[type='number']{
border: .2em solid var(--primary-color);
padding: .8em 1em;
width: 80%;
 
}

@media only screen and (min-width:500px) {
    .product .product-content
    {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
    
      gap: 5em;
  } 
  .product .product-content .product-details .additional-ingredients{
      display: flex;
      gap: 5em;
  } 
 
     }
     @media only screen and (min-width:700px) {
    
    .footer .footer-content{
        margin-top: 10em;
        display: grid;
        grid-template-columns:40% 20% 20% 20%;
        gap: 2em;
    }  
 
     }