body{margin:0; padding:0; font-family: Open Sans;}

 a{
  font-size:14px;
  color:#333;
  text-decoration:none;
 }

 a:hover{
  text-decoration: none;
 }


.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
 .grid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 columnas en grande */
    gap: 20px; /* separación entre elementos */
    padding: 20px;
    max-width:1200px;
    margin-left:auto; margin-right:auto;
  }

   .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 columnas en grande */
    gap: 20px; /* separación entre elementos */
    padding: 20px;
    max-width:900px;
    margin-left:auto; margin-right:auto;
  }

  .item {
    background: #fff;
    border:solid 1px #f1f1f1;
    color: #333;
    font-weight:300;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    cursor:pointer;
  }
  .menu-on{
    background-color:#333;
    color:#fff;
    padding:5px 20px;
    border-radius:50px;
    margin-left:5px; margin-right:5px;
    margin-bottom:20px;
    text-decoration:none;
    white-space: nowrap;
    display:inline-block;
  }
  .menu-off{
    background-color:#fff;
    color:#333;
    padding:5px 20px;
    border-radius:50px;
    margin-left:5px; margin-right:5px;
    border:solid 1px #ccc;
    margin-bottom:20px;
    text-decoration:none;
    white-space: nowrap;
    display:inline-block;
  }
    .menu-cart-on{
    background-color:#fff;
    color:#333;
    padding:5px 20px;
    border-radius:50px;
    margin-left:5px; margin-right:5px;
    margin-bottom:20px;
    text-decoration:none;
    white-space: nowrap;
    display:inline-block;
  }
  .menu-cart-off{
    background-color:#fff;
    color:#333;
    padding:5px 20px;
    border-radius:50px;
    margin-left:5px; margin-right:5px;
    border:solid 1px #ccc;
    margin-bottom:20px;
    text-decoration:none;
    white-space: nowrap;
    display:inline-block;
  }
  .kp-button{
    background-color:#333;
    color:#fff;
    padding:5px 20px;
    margin-bottom:20px;
    text-decoration:none;
    cursor:pointer;
  }
  .kp-button:hover{
    background-color:#fff;
    color:#333;
    border:solid 1px #333;
    cursor:pointer;
  }


  .kp-button-xs{
    background-color:#333;
    color:#fff;
    padding:5px 20px;
    margin-left:5px; margin-right:5px;
    margin-bottom:20px;
    text-decoration:none;
    cursor:pointer;
  }


  /*COLORS*/
  .kp-bg-grey{background-color:#ccc;}



/*GRID*/
.grid-title{
    font-weight:500;
    font-size:16px;
  }
  .grid-subtitle{
    font-weight:300;
    color:#999;
    font-size:14px;
  }
  .grid-price{
    padding:3px 8px; background-color:#f1f1f1; font-size:14px; display:inline-block; margin-top:10px;
  }


/*DETAIL*/
.title{font-size:18px; font-weight:bold;}
.subtitle{font-size:14px; color:#666;}
.price{font-size:16px; font-weight:bold;}



/*CART*/

 .cart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 3 columnas en grande */
    gap: 20px; /* separación entre elementos */
    padding: 20px;
    max-width:1200px;
    margin-left:auto; margin-right:auto;
  }

  .cart-item {
    background: #fff;
    border:solid 1px #f1f1f1;
    color: #333;
    font-weight:300;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    cursor:pointer;
  }

  .cart-title{
    font-weight:500;
    font-size:24px;
  }
  .cart-subtitle{
    font-weight:300;
    color:#999;
  }
  .cart-price{
    padding:3px 8px; background-color:#f1f1f1; width:fit-content; margin-top:10px;
  }

  .cart-qty{
    padding:3px 14px;
    border:solid 1px #999;
    display:inline-block;
    text-align: center;
    width:fit-content;
  }

  .description{
    margin-top:20px; margin-bottom:20px; font-family:Open Sans; font-weight:300;font-size:14px;
  }


  /*MODIFIERS*/
  .kp-hand{
    cursor:pointer;
  }


  /*FORMS*/


/*FORM*/

.kp-form-element{
	height:40px;
	font-size:15px;
	color:#333;
	padding:0px 10px;
	width:100%;
	box-sizing: border-box;
	border:solid 1px #ddd;
  display:inline-block;
}


.kp-form-header{
		font-size:11px;
		color:#999;
		text-transform: uppercase;
	}