html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: "Nunito", system-ui, sans-serif; }
.logo {
  font-weight: 900; font-style: italic; letter-spacing: -0.03em; line-height: .9;
  color: #ffe14a;
  text-shadow:
    -0.06em 0 #6a3a12, 0.06em 0 #6a3a12, 0 -0.06em #6a3a12, 0 0.06em #6a3a12,
    0.08em 0.08em 0 #ff7a1a;
}
[data-cup] svg { width: 100%; height: auto; display: block; }
.shop { height: 100%; display: flex; flex-direction: column; background: #14110e; color: #fff; padding: 4.5% 4.5% 4%; gap: 2.4vw; box-sizing: border-box; }
.bar { display: flex; align-items: center; justify-content: space-between; font-size: 3vw; font-weight: 800; }
.bar span { color: rgba(255,255,255,.55); font-weight: 700; }
.banner {
  border-radius: 3vw; background: linear-gradient(160deg, #ff7a18, #e4570e);
  padding: 4vw; display: flex; align-items: center; gap: 3vw; color: #3a1c08;
}
.banner h1 { margin: 0; font-size: 5.4vw; line-height: 1; }
.banner p { margin: 1vw 0 0; font-size: 2.8vw; font-weight: 700; }
.cta { margin-top: 2vw; border: 0; background: #3a1c08; color: #ffe14a; border-radius: 999px; padding: 1.4vw 3vw; font-weight: 800; font-size: 2.6vw; }
.tabs { display: flex; gap: 2vw; font-size: 2.6vw; font-weight: 800; color: rgba(255,255,255,.45); }
.tabs i { font-style: normal; }
.tabs .on { color: #ffe14a; border-bottom: .5vw solid #ffe14a; padding-bottom: .6vw; }
.label { font-size: 2.6vw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.tile { background: #241c16; border-radius: 2.4vw; min-height: 18vw; padding: 2vw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.tile.lead { outline: .45vw solid #ffe14a; background: #3a2414; }
.tile em { font-style: normal; font-size: 2.5vw; font-weight: 800; margin-top: 1vw; }
.tile .pic { width: 70%; }