/* Order info */

.order-info {
  margin-block: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.5em;
  padding: 2.5em .5em;
  line-height: 1.35;
}

.order-info li {
  position: relative;
  padding-left: 1.5em;
  width: 100%;
  max-width: 320px;
}

@media(min-width: 640px) {
  .order-info {
    justify-content: center;
  }

  .order-info li {
    width: calc(50% - 1.5em);
  }
}

@media(min-width: 1200px) {
  .order-info {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .order-info li {
    width: auto;
    min-width: 200px;
    max-width: 360px;
  }
}

.order-info li:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1.125em;
  height: 1.125em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF6D00" width="17" height="17"><path d="M16.48 6.738c-.197-.759-.369-1.811-1.146-2.181-.51-.332-1.178-.306-1.758-.102.599-.81.592-1.964-.191-2.628-.185-.198-1.019-.625-1.255-.778-1.063-.612-2.254-.045-2.719 1.033C9.246.928 8.252.067 7.061.379 6.788.468 5.883.653 5.648.8c-.923.44-1.235 1.537-.866 2.487-.942-.708-2.261-.548-2.859.491l-.548.944c-.605 1.04-.051 2.251 1.006 2.711-.853.134-1.579.753-1.713 1.614-.102.485.204 1.333.318 1.811.318 1.186 1.567 1.626 2.636 1.205-.7.938-.599 2.251.459 2.87.586.332 1.407.944 2.114.772.694-.057 1.261-.561 1.56-1.199.134.874.783 1.607 1.662 1.697.102.013.204.006.306.013.287.019 1.172-.274 1.465-.338 1.165-.306 1.624-1.556 1.204-2.628.936.708 2.254.536 2.853-.491l.548-.944c.611-1.059.051-2.251-1.019-2.717 1.159-.166 2.019-1.167 1.713-2.36h-.006z" /></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

.order-info strong, .order-info b {
  font-weight: var(--heavy);
}


/* Star reviews */

.stars {
  display: flex;
  gap: .25em;
}

.stars [class*="star"] {
  position: relative;
  width: 1em;
  height: 1em;
}

.stars [class*="star"] img.full, .stars [class*="star"] img.half {
  position: absolute;
  top: 0;
  right: 0;
}

.stars [class*="star"] img.half {
  clip-path: polygon(0 0, 50% 1%, 50% 100%, 0% 100%);
}


/* Stickers */

.sticker {
  position: absolute;
  z-index: 2;
  bottom: -1em;
  right: -1.5em;
  width: 4.5em;
  aspect-ratio: 1;
  font-size: calc(var(--h3) * .625);
  padding: .1em .25em 0;
  line-height: .9;
  font-weight: var(--heavy);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(20deg);
}

.sticker>span {
  position: relative;
  z-index: 1;
}

.sticker>svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* Header patterns (with slices of pie) */

/* Pattern 1 */
.header-pattern-1 {
  height: max(75vh, 95vmin);
}

.header-pattern-1 .slice-1 {
  left: 0;
  bottom: 10%;
  transform: translate(-60%, -10%) rotate(195deg);
}

.header-pattern-1 .slice-2 {
  left: 30%;
  top: 0;
  transform: translate(0, -25%) rotate(224deg);
}

.header-pattern-1 .slice-3 {
  right: 0;
  bottom: 0;
  transform: translate(55%, -40%) rotate(105deg);
}

@media (min-width: 1200px) {
  .header-pattern-1 .slice-1 {
    bottom: 5%;
    transform: translate(-55%, -50%) rotate(64deg);
  }

  .header-pattern-1 .slice-3 {
    transform: translate(50%, -10%) rotate(-40deg);
  }
}

/* Pattern 2 */
.header-pattern-2 {
  height: min(100vmax, 40rem);
}

.header-pattern-2 .slice-1 {
  left: 0;
  top: 50%;
  transform: translate(-50%, 0) rotate(220deg);
}

.header-pattern-2 .slice-2 {
  right: 0;
  top: 8%;
  transform: translate(70%, 0) rotate(150deg);
}

@media (min-width: 1200px) {
  .header-pattern-2 .slice-1 {
    top: auto;
    bottom: 0;
    transform: translate(-45%, -20%) rotate(240deg);
  }

  .header-pattern-2 .slice-2 {
    top: 45%;
    transform: translate(30%, 0) rotate(50deg);
  }
}

/* Pattern 3 */
.header-pattern-3 {
  height: min(100vmax, 48rem);
}

.header-pattern-3 .slice-1 {
  left: 0;
  top: 10%;
  transform: translate(-60%, 0) rotate(210deg);
}

.header-pattern-3 .slice-2 {
  right: 0;
  top: 60%;
  transform: translate(60%, 0) rotate(240deg);
}

@media (min-width: 1200px) {
  .header-pattern-3 .slice-1 {
    top: auto;
    bottom: 0;
    transform: translate(-45%, -25%) rotate(135deg);
  }

  .header-pattern-3 .slice-2 {
    top: 50%;
    transform: translate(45%, 0) rotate(-60deg);
  }
}

/* Pattern 4 */
.header-pattern-4 {
  height: min(85vmax, 48rem);
}

.header-pattern-4 .slice-1 {
  left: 0;
  top: 60%;
  transform: translate(-77%, 0) rotate(25deg);
}

.header-pattern-4 .slice-2 {
  left: 14%;
  top: 0;
  transform: translate(0, -70%) rotate(240deg);
}

.header-pattern-4 .slice-3 {
  right: 0;
  bottom: 18%;
  transform: translate(65%, 0) rotate(-20deg);
}

@media (min-width: 1200px) {
  .header-pattern-4 .slice-1 {
    top: auto;
    bottom: 0;
    transform: translate(-55%, 0) rotate(-40deg);
  }

  .header-pattern-4 .slice-2 {
    left: 25%;
    transform: translate(0, -50%) rotate(230deg);
  }

  .header-pattern-4 .slice-3 {
    bottom: 30%;
    transform: translate(45%, 0) rotate(60deg);
  }
}