@charset "UTF-8";

/* Menu panel */
#menu .wrap { max-width: 1200px; }

/* Tabs */
.menu-tabs{
  margin: 14px 0 18px 0;
  padding: 12px;
  background: #17181a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.menu-tabs .tab{
  display: inline-block;
  margin: 6px 10px 6px 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: #212327;
  color: #c9d0d6;
  font-weight: 700;
  cursor: pointer;
}
.menu-tabs .tab.is-active{
  background: #f2994a;
  color: #151617;
  border-color: rgba(242,153,74,0.55);
}

/* Tab panels */
.tab-panel{ display: none; }
.tab-panel.is-active{ display: block; }

#menu h2{ font-size: 40px; margin: 0 0 8px 0; }
#menu h3{ font-size: 22px; margin: 14px 0 10px 0; }
#menu h4{ font-size: 16px; margin: 0 0 8px 0; }

/* Card grids */
.card-grid{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -16px;
}
.card-grid.small{ margin: -12px; }

.card-grid .card{
  width: 31.333%;
  margin: 16px;
  background: #17181a;
  background-image: -webkit-linear-gradient(top, #17181a, #1d1f22);
  background-image: linear-gradient(180deg, #17181a, #1d1f22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 18px rgba(0,0,0,0.25);
          box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  -webkit-transition: -webkit-transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card-grid.small .card{ width: 23%; margin: 12px; }

.card-grid .card:hover{
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.35);
          box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border-color: rgba(242,153,74,0.25);
}

.card-grid .card img{ width: 100%; background: #0b0b0c; }

.badge{
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #151617;
  background: #f2994a;
  background-image: -webkit-linear-gradient(left, #f2994a, #d65a31);
  background-image: linear-gradient(90deg, #f2994a, #d65a31);
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.price{
  float: right;
  color: #f5f6f7;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Card quick-view (details) */
.card-more{
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #212327;
  color: #c9d0d6;
  font-weight: 700;
  cursor: pointer;
}

.card-more:hover{
  border-color: rgba(242,153,74,0.35);
}

.card-more-panel{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* When expanded, give a subtle glow */
.card.is-expanded{
  border-color: rgba(242,153,74,0.25);
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.35);
          box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}


/* Notes */
.menu-notes{ margin: 14px 0 0 0; }
.menu-notes summary{
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 14px 16px;
  background: #17181a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  -webkit-box-shadow: 0 4px 18px rgba(0,0,0,0.25);
          box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  font-weight: 700;
  outline: none;
}
.menu-notes[open] summary{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.menu-notes p{
  margin: 0;
  padding: 14px 16px 16px 16px;
  background: #1d1f22;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  color: #a9b0b7;
}

/* Links inside menu */
#menu a{
  color: #f2994a;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#menu a:hover{ color: #d65a31; }

/* Responsive (px) */
@media (max-width: 1200px){
  #menu h2{ font-size: 36px; }
  .card-grid .card{ width: 48%; margin: 14px 1%; }
  .card-grid.small .card{ width: 31.333%; margin: 12px 1%; }
}
@media (max-width: 768px){
  #menu h2{ font-size: 30px; }
  .card-grid .card{ width: 48%; margin: 12px 1%; }
  .card-grid.small .card{ width: 48%; margin: 10px 1%; }
}
@media (max-width: 480px){
  #menu h2{ font-size: 26px; }
  .card-grid .card,
  .card-grid.small .card{ width: 98%; margin: 10px 1%; }
}
@media (max-width: 300px){
  #menu h2{ font-size: 22px; }
}