:root {
  --color-primary: #005AF0;
  --color-secondary: #00DCC0;
  --color-text-light: #fff;
  --color-text-dark: #000;
  --color-bg-light: #FAFAFC;
  --color-bg-grey: rgba(0,0,0,0.8);

  --space-1: .5rem;  /* 8px */
  --space-2: 1rem;   /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem;   /* 32px */
  --box-shadow-1: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 1px -1px rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

article#preview {
  background-color: var(--color-bg-light);
}

amp-carousel {
  margin:0
}

.header {
  position:relative;
  box-shadow: var(--box-shadow-1);
  padding-top:52px;
  background-color: var(--color-secondary);
}

.header #sample-menu {
  position:absolute;
  top:0;
  left:0;
  font-size:18px;
  font-weight:700;
  color: var(--color-text-light);
  text-transform:uppercase;
  padding:13px;
}

.header #sample-logo {
  position:absolute;
  top:0;
  left:36px;
  font-size:18px;
  font-weight:400;
  color:var(--color-text-light);
  text-transform:uppercase;
  margin:0 var(--space-2);
  height:var(--space-4);
  text-decoration:none;
  line-height:52px
}

.header form {
  padding:0
}

.header input::-webkit-search-decoration,.header input::-webkit-search-cancel-button {
  display:none
}

.header input[type=submit] {
  position:absolute;
  top:10px;
  right:var(--space-1);
  background-color:var(--color-primary);
  background-position:center;
  background-repeat:no-repeat;
  background-image:-webkit-image-set(url(/img/ic_search_white_1x_web_24dp.png) 1x,url(/img/ic_search_white_2x_web_24dp.png) 2x);
  border:0;
  height:var(--space-4);
  width:36px;
  -webkit-appearance:none;
  border-radius:4px 0
}

.header input[type=search],.header input[type=text] {
  position:absolute;
  top:10px;
  right:var(--space-3);
  background:var(--color-bg-light);
  padding:0 var(--space-1);
  width:20vw;
  height:var(--space-4);
  font-family:inherit;
  font-size:100%;
  border:solid 0 var(--color-primary);
  border-radius:4px 0;
  transition:all .9s ease
}

.header input[type=search]:focus,.header input[type=text]:focus {
  width:80vw;
  max-width:700px;
  background-color:var(--color-text-light);
  border-color:var(--color-primary);
  box-shadow:var(--box-shadow-1);
  outline:none
}

.header input:-moz-placeholder,.header input::-webkit-input-placeholder {
  color:var(--color-bg-light);
}

.header input:focus + #sample-logo {
  visibility:hidden;
  opacity:0;
  transition:visibility 0 0.7s,opacity .7s ease
}

.header input + #sample-logo {
  visibility:visible;
  opacity:1;
  transition:opacity 1.5s ease
}

@media (min-width: 600px) {
  .header input[type=search] {
    width:100px
  }

  .header input[type=search]:focus {
    width:600px
  }
}

.items,amp-list.items > div {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap
}

.item {
  flex-grow:1;
  flex-shrink:1
}

.tile {
  background-color:var(--color-text-light);
  width:120px;
  height:200px;
  display:block;
  margin:var(--space-1);
  -webkit-tap-highlight-color:var(--color-bg-light);
  max-width:200px
}

@media (max-width: 500px) {
  .items .tile {
    width:150px;
    height:200px
  }
}

.tile:active {
  background-color:var(--color-bg-light);
}

.tile p {
  margin:0;
  padding:0 var(--space-1);
  font-size:var(--space-2);
  line-height:20px
}

.tile .name {
  margin-top:var(--space-1);
}

.tile .price {
  margin-bottom:var(--space-1);
}

.tile .price,.tile .star {
  color:var(--color-text-dark);
}