/* ── Reusable Icon Components ────────────────────────────────
 * Pure CSS art icons. All sizes in `em` so they scale with
 * the parent's font-size. Set font-size on the wrapper to resize.
 *
 * Classes:
 *   .icon-meal        — flex row: fries · burger · soda
 *   .icon-burger-mark — CSS grid burger
 *   .icon-fries-mark  — CSS fries
 *   .icon-soda-mark   — CSS soda cup
 * ──────────────────────────────────────────────────────────── */

/* ── Meal container ───────────────────────────────────────── */

.icon-meal {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.18em;
  transform: translateY(0.03em);
}

/* ── Burger ───────────────────────────────────────────────── */

.icon-burger-mark {
  display: inline-grid;
  width: 1.1em;
  height: 0.94em;
  grid-template-rows: 24% 14% 14% 18% 24%;
  gap: 0.04em;
}

.icon-burger-mark span {
  display: block;
  border: 0.045em solid var(--dark);
}

.icon-burger-mark .bun.top {
  background: #f2a12a;
  border-radius: 12px 12px 4px 4px;
}

.icon-burger-mark .lettuce {
  background: var(--green);
  border-radius: 5px;
}

.icon-burger-mark .cheese {
  background: var(--yellow);
  transform: skewX(-16deg);
}

.icon-burger-mark .patty {
  background: var(--brown);
  border-radius: 4px;
}

.icon-burger-mark .bun.bottom {
  background: #d4850a;
  border-radius: 4px 4px 10px 10px;
}

/* ── Fries ────────────────────────────────────────────────── */

.icon-fries-mark {
  position: relative;
  width: 0.82em;
  height: 1.05em;
  transform: translateY(0.02em) rotate(-1deg);
}

.icon-fries-mark .fry {
  position: absolute;
  z-index: 1;
  top: 0.02em;
  width: 0.1em;
  height: 0.58em;
  background: linear-gradient(90deg, #ffe75a 0%, var(--yellow) 58%, #d99a00 100%);
  border: 0.025em solid var(--dark);
  border-radius: 0.045em 0.045em 0.02em 0.02em;
  box-shadow: inset 0.025em 0 0 rgba(255, 255, 255, 0.42);
}

.icon-fries-mark .fry:nth-child(1) { left: 0.12em; height: 0.5em; transform: rotate(-8deg); }
.icon-fries-mark .fry:nth-child(2) { left: 0.25em; height: 0.64em; transform: rotate(-3deg); }
.icon-fries-mark .fry:nth-child(3) { left: 0.39em; height: 0.7em; transform: rotate(2deg); }
.icon-fries-mark .fry:nth-child(4) { left: 0.53em; height: 0.6em; transform: rotate(7deg); }
.icon-fries-mark .fry:nth-child(5) { left: 0.65em; height: 0.48em; transform: rotate(12deg); }

.icon-fries-mark .fry-box {
  position: absolute;
  bottom: 0;
  left: 0.08em;
  z-index: 2;
  width: 0.68em;
  height: 0.56em;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 18%, transparent 18% 100%),
    linear-gradient(180deg, #ff3a2f 0%, var(--red) 68%, #9c1418 100%);
  border: 0.04em solid var(--dark);
  border-radius: 0.04em 0.04em 0.13em 0.13em;
  clip-path: polygon(5% 0%, 95% 0%, 85% 100%, 15% 100%);
  box-shadow:
    inset 0 0.06em 0 rgba(255, 255, 255, 0.25),
    inset 0 -0.06em 0 rgba(0, 0, 0, 0.18);
}

.icon-fries-mark .fry-box::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 0.1em;
  height: 0.1em;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0.16em 0 rgba(255, 215, 0, 0.65);
}

/* ── Soda ─────────────────────────────────────────────────── */

.icon-soda-mark {
  position: relative;
  width: 0.72em;
  height: 1.12em;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0.01em) rotate(1deg);
}

.icon-soda-mark .soda-straw {
  position: absolute;
  width: 0.075em;
  height: 0.46em;
  background: linear-gradient(90deg, #111 0 45%, #ff3a2f 45% 100%);
  top: -0.16em;
  right: 0.1em;
  border-radius: 0.02em;
  transform: rotate(13deg);
  transform-origin: bottom center;
  z-index: 4;
  box-shadow: 0.025em 0.025em 0 var(--dark);
}

.icon-soda-mark .soda-cup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  filter: drop-shadow(0.03em 0.03em 0 var(--dark));
}

.icon-soda-mark .soda-lid {
  position: relative;
  z-index: 3;
  width: 0.68em;
  height: 0.16em;
  background: linear-gradient(180deg, #fff 0%, #dff7f9 100%);
  border: 0.035em solid var(--dark);
  border-radius: 0.08em 0.08em 0.03em 0.03em;
  box-shadow: inset 0 0.035em 0 rgba(255, 255, 255, 0.75);
}

.icon-soda-mark .soda-body {
  position: relative;
  width: 0.58em;
  height: 0.68em;
  margin-top: -0.02em;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 16%, transparent 16% 100%),
    linear-gradient(180deg, #18d7df 0%, var(--teal) 62%, #007e96 100%);
  border: 0.035em solid var(--dark);
  border-radius: 0.03em 0.03em 0.1em 0.1em;
  clip-path: polygon(3% 0%, 97% 0%, 83% 100%, 17% 100%);
  box-shadow:
    inset 0.06em 0 0 rgba(255, 255, 255, 0.18),
    inset -0.05em 0 0 rgba(0, 0, 0, 0.12);
}

.icon-soda-mark .soda-body::after {
  content: '';
  position: absolute;
  left: 34%;
  right: 34%;
  top: 0.16em;
  bottom: 0.12em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}