@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,400&family=Oswald:wght@500;700&display=swap");

:root {
  --floor: #ece4d4;
  --ink: #1a1a1a;
  --red: #d61f3a;
  --teal: #0b6e6a;
  --paper: #fffdf8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Nunito Sans", sans-serif; background: var(--floor); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

.store {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}

.directory {
  background: var(--ink);
  color: #f4eee3;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}

.directory .mark { font-family: "Oswald", sans-serif; font-size: 20px; letter-spacing: 0.08em; }
.directory .mark span { color: var(--red); }
.directory small { display: block; color: #9a9388; margin: 8px 0 22px; font-size: 12px; }

.dir-list { display: grid; gap: 6px; }
.dir-list a, .dir-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #f4eee3;
  padding: 10px 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.dir-list a:hover, .dir-list button:hover, .dir-list a.active, .dir-list button.active {
  border-left-color: var(--red);
  background: #2a2a2a;
}

.lang { display: flex; margin-top: 24px; border: 1px solid #444; }
.lang button { flex: 1; background: transparent; color: #ccc; border: 0; padding: 8px; cursor: pointer; font-weight: 800; }
.lang button.active { background: var(--red); color: #fff; }

.stage { min-width: 0; }

.canopy {
  background:
    linear-gradient(180deg, rgba(214,31,58,0.12), transparent 40%),
    repeating-linear-gradient(90deg, #1a1a1a 0 18px, #d61f3a 18px 20px);
  padding: 48px 40px 36px;
  color: #fff;
}
.canopy h1 { font-family: "Oswald", sans-serif; font-size: clamp(36px, 6vw, 64px); text-transform: uppercase; line-height: 0.95; max-width: 16ch; }
.canopy p { max-width: 58ch; margin-top: 14px; color: #f3ddd8; }

.hours-strip {
  display: flex;
  gap: 0;
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
}
.hours-strip div { flex: 1; padding: 14px 18px; border-right: 1px solid #eadfce; font-size: 13px; font-weight: 800; }
.hours-strip div:last-child { border: 0; }
.hours-strip b { display: block; font-family: "Oswald", sans-serif; color: var(--red); }

.zone { padding: 48px 40px; border-bottom: 4px solid var(--ink); background: var(--paper); }
.zone.alt { background: #f3ebe0; }
.zone h2 { font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 34px; margin-bottom: 8px; }
.lead { max-width: 70ch; margin-bottom: 22px; }

.shelves {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.hook {
  min-width: 240px;
  scroll-snap-align: start;
  background: var(--floor);
  border: 3px solid var(--ink);
  padding: 16px;
}
.hook .price { font-family: "Oswald", sans-serif; color: var(--red); font-size: 22px; }
.hook h3 { font-size: 16px; margin: 6px 0; }

.walk {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 16px;
}
.foot {
  font-family: "Oswald", sans-serif;
  font-size: 28px;
  color: var(--teal);
  border-right: 3px dotted var(--ink);
  padding: 8px 0 28px;
}

.calendar { display: grid; grid-template-columns: 120px 1fr 1fr 1fr; gap: 2px; background: var(--ink); }
.calendar > * { background: var(--paper); padding: 12px; }
.calendar .hd { background: var(--teal); color: #fff; font-weight: 800; font-size: 12px; text-transform: uppercase; }

.reviews { display: grid; gap: 10px; }
.till {
  background: #fff;
  border: 1px dashed var(--ink);
  padding: 12px 14px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}

.cashier { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.steps { display: flex; gap: 8px; margin-bottom: 14px; }
.steps span { flex: 1; text-align: center; padding: 8px; background: #eee; font-weight: 800; font-size: 12px; }
.steps span.on { background: var(--red); color: #fff; }
.pane { display: none; }
.pane.on { display: grid; gap: 10px; }
label { font-size: 12px; font-weight: 800; text-transform: uppercase; }
input, textarea, select { border: 2px solid var(--ink); padding: 10px; width: 100%; }
textarea { min-height: 90px; }
.cta { background: var(--red); color: #fff; border: 0; padding: 12px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.bag { background: var(--ink); color: #ddd; padding: 16px; font-size: 13px; }
.bag a { color: #ff8a9a; }

.burger { display: none; }

@media (max-width: 900px) {
  .store { grid-template-columns: 1fr; }
  .directory { position: relative; height: auto; }
  .dir-list { display: none; }
  .directory.open .dir-list { display: grid; }
  .burger { display: block; width: 100%; margin-bottom: 12px; background: var(--red); color: #fff; border: 0; padding: 10px; font-weight: 800; }
  .canopy, .zone { padding: 28px 18px; }
  .hours-strip, .calendar, .cashier { grid-template-columns: 1fr; display: grid; }
  .hours-strip { display: grid; }
}