/* ─────────────────────────────────────────────────────────────────────────
   thedutchchocolatebar.nl · "Made in Holland"

   Everything here comes out of the shop's own brand book
   (TheDutchBar-Brandystyle.pdf): the pink/mint/orange palette, the
   pink-to-mint-to-orange gradient background, Montserrat ExtraBold headings
   over Montserrat Medium body, the red and blue dashed flag bands from the
   storefront material, and the cartoon logo, tulips, chocolate bars and
   canal-house skyline.

   The two brand pinks are deliberately different: #e87eab is the brand pink
   for surfaces, #c2306e is its darkened sibling for anything carrying white
   text (5.3:1). The brand orange and mint carry INK text, never white.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pink: #e87eab;
  --pink-deep: #c2306e;
  --pink-deeper: #a52458;
  --mint: #8ec5be;
  --orange: #ef802d;
  --ink: #020101;
  --ink-soft: #4a4446;
  --flag-red: #ff1f27;
  --flag-blue: #3fa9f5;
  --sheet: #fff;
  --radius: 22px;
  --shadow: 0 10px 34px rgba(2, 1, 1, .12);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: #f7d9c0;
  -webkit-text-size-adjust: 100%;
}

/* The brand gradient is a fixed LAYER rather than background-attachment: fixed,
   which iOS Safari refuses to honour and which tiles at every viewport boundary
   in a full-page screenshot. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #f7d9c0 url('../img/background.svg') center top / cover no-repeat;
}

h1, h2, h3 { font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1em; }

a { color: var(--pink-deep); text-underline-offset: .18em; }
a:hover { color: var(--pink-deeper); }

img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7em 1.2em; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; border-radius: 4px; }

/* ── the red and blue dashed flag bands ──────────────────────────────────── */

.flagband {
  height: 13px;
  background-image: repeating-linear-gradient(90deg,
    var(--flag-red) 0 7px, #fff 7px 13px);
}
.flagband-blue {
  background-image: repeating-linear-gradient(90deg,
    var(--flag-blue) 0 7px, #fff 7px 13px);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.site-header {
  background: #fff;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .55rem clamp(.9rem, 3vw, 2rem);
}
.brand { text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand-name {
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(.72rem, 2vw, .92rem);
}
.site-nav { display: flex; gap: clamp(.6rem, 2vw, 1.5rem); margin-left: auto; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; color: var(--ink); font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; font-size: .74rem;
  padding: .35em 0; border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--pink); }
.header-side { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.lang {
  text-decoration: none; color: var(--ink); font-weight: 800; font-size: .78rem;
  border: 2px solid var(--ink); border-radius: 999px; padding: .2em .7em;
}
.lang:hover { background: var(--ink); color: #fff; }
.open-chip {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: var(--mint); color: var(--ink); border-radius: 999px; padding: .3em .8em;
  white-space: nowrap;
}
.open-chip.is-closed { background: #efe3e7; color: var(--ink-soft); }

@media (max-width: 860px) {
  .brand-name { display: none; }
  .site-nav { margin-left: 0; }
  .site-header { flex-wrap: wrap; }
}

/* ── layout ──────────────────────────────────────────────────────────────── */

main { display: block; }

.section, .page-head, .hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.9rem) clamp(1.1rem, 4vw, 3rem);
}
.section {
  background: var(--sheet);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: clamp(1rem, 3vw, 1.6rem) auto;
  width: calc(100% - 2 * clamp(.7rem, 3vw, 2rem));
}
.section > h2 { margin-bottom: .2em; }
.section-sub { color: var(--ink-soft); max-width: 62ch; margin-bottom: 1.8em; }

.page-head { padding-top: clamp(1.8rem, 5vw, 3.4rem); padding-bottom: .4rem; }
.page-head h1 { margin-bottom: .3em; }
.page-head > p { max-width: 62ch; font-size: 1.06rem; }
.page-head .lede { font-size: 1.14rem; }
.crumb { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8em; }
/* the page head sits on the brand gradient, not on white, so the crumb link is
   ink with an underline: pink-deep passes on white but fails over the mint band */
.crumb a { color: var(--ink); text-decoration: underline; }
.crumb a:hover { color: var(--ink); text-decoration-thickness: 2px; }

.more { margin: 1.6em 0 0; font-weight: 800; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero-inner { text-align: center; padding-top: clamp(1.2rem, 4vw, 2.4rem); }
.hero-logo {
  width: min(340px, 62vw); height: auto; margin: 0 auto .4rem;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(2, 1, 1, .18));
  animation: breathe 16s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.05) rotate(3deg); }
}
.hero-title {
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  max-width: 18ch; margin: 0 auto .45em;
}
.hero-tag {
  font-size: clamp(1.02rem, 2.3vw, 1.28rem);
  max-width: 42ch; margin: 0 auto 1em; font-weight: 500;
}
.rating { font-size: .95rem; margin-bottom: 1.4em; }
.stars { color: var(--orange); letter-spacing: .06em; margin-right: .35em; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 16px; padding: .85em 1.6em; line-height: 1.25;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn-main { font-size: 1.02rem; }
.btn-sub { font-size: .68rem; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .92; }

.btn-pink { background: linear-gradient(180deg, var(--pink-deep), var(--pink-deeper)); color: #fff; }
.btn-pink:hover { color: #fff; }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { color: var(--ink); }
.btn-mint { background: var(--mint); color: var(--ink); }
.btn-mint:hover { color: var(--ink); }
.btn-ghost { background: #fff; color: var(--ink); }
.btn-ghost:hover { color: var(--ink); }
.btn-small { padding: .5em 1.1em; font-size: .82rem; box-shadow: 0 4px 0 var(--ink); border-width: 2px; }

.cta-pair { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-cta { justify-content: center; }

/* ── products ────────────────────────────────────────────────────────────── */

.products { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.product {
  border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
}
.product-photo { background: var(--pink); aspect-ratio: 3 / 2; overflow: hidden; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.accent-orange .product-photo { background: var(--orange); }
.accent-mint .product-photo { background: var(--mint); }
.product-body { padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { margin-bottom: .1em; font-size: 1.3rem; }
.product-tag {
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem;
  color: var(--pink-deep); margin-bottom: .9em;
}
.accent-orange .product-tag { color: #a8520b; }
.accent-mint .product-tag { color: #3d7a71; }
.product-body p { font-size: .96rem; }
.allergens {
  font-size: .8rem; color: var(--ink-soft); border-top: 2px dotted #e2d8db;
  padding-top: .8em; margin-top: auto;
}
.allergens span { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.product-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1em; flex-wrap: wrap; }
.price { font-weight: 800; font-size: 1.5rem; }
.price-instore { font-size: .96rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

/* ── how it works ────────────────────────────────────────────────────────── */

.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.how li { position: relative; padding-top: .4rem; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--mint); border: 3px solid var(--ink);
  font-weight: 800; margin-bottom: .7rem;
}
.how li:nth-child(2) .step-n { background: var(--pink); }
.how li:nth-child(3) .step-n { background: var(--orange); }
.how li p { font-size: .96rem; color: var(--ink-soft); }

/* ── reviews ─────────────────────────────────────────────────────────────── */

.reviews { position: relative; min-height: 8.5rem; }
.review { margin: 0; }
.review[hidden] { display: none; }
.review blockquote {
  margin: 0 0 .7em; font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 800;
  line-height: 1.35; max-width: 32ch;
}
.review blockquote::before { content: '\201C'; }
.review blockquote::after { content: '\201D'; }
.review figcaption { font-size: .86rem; color: var(--ink-soft); font-weight: 500; }
.review figcaption a { color: var(--ink-soft); }
.review-dots { display: flex; gap: .5rem; margin-top: 1.6rem; padding: 0; }
.review-dots button {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink);
  background: #fff; padding: 0; cursor: pointer;
}
.review-dots button[aria-current='true'] { background: var(--pink-deep); }

/* ── guides ──────────────────────────────────────────────────────────────── */

.guides { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.guide-card {
  display: block; text-decoration: none; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 18px; padding: 1.1rem 1.2rem;
  background: #fff; box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.guide-card:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.guide-card h3 { margin-bottom: .35em; }
.guide-card p { font-size: .9rem; color: var(--ink-soft); margin-bottom: .8em; }
.guide-more {
  font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pink-deep);
}
.guide-card:nth-child(3n+2) { background: #fdf3f7; }
.guide-card:nth-child(3n+3) { background: #f1f8f7; }

/* ── family ──────────────────────────────────────────────────────────────── */

.family { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.family-card {
  display: block; text-decoration: none; color: var(--ink);
  border: 3px dashed var(--ink); border-radius: 18px; padding: 1.1rem 1.2rem; background: #fffdf6;
}
.family-card:hover { background: #fff6ea; color: var(--ink); }
.family-card h3 { margin-bottom: .3em; }
.family-card p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ── visit ───────────────────────────────────────────────────────────────── */

.visit { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.address { font-size: 1.25rem; font-weight: 800; line-height: 1.4; }
.open-line { font-size: .95rem; color: var(--ink-soft); }
.visit-links { display: flex; gap: .7rem; flex-wrap: wrap; }
.hours { border-collapse: collapse; width: 100%; font-size: .95rem; }
.hours caption {
  text-align: left; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  font-size: .76rem; padding-bottom: .7em;
}
.hours th, .hours td { text-align: left; padding: .38em 0; border-bottom: 2px dotted #e2d8db; font-weight: 500; }
.hours th { font-weight: 800; }
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--pink-deep); }

/* ── faq ─────────────────────────────────────────────────────────────────── */

.faq { border-top: 2px solid #efe6e9; }
.faq-item { border-bottom: 2px solid #efe6e9; }
.faq-item summary {
  cursor: pointer; padding: .95em 2.2em .95em 0; position: relative; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3, .faq-item summary h4 { display: inline; font-size: 1.02rem; margin: 0; }
.faq-item summary::after {
  content: '+'; position: absolute; right: .2em; top: .55em;
  font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--pink-deep);
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-answer { padding: 0 0 1.1em; max-width: 68ch; }
.faq-answer p { font-size: .98rem; }
.learn { font-weight: 800; font-size: .88rem; margin-bottom: 0; }

/* ── prose (guides, press) ───────────────────────────────────────────────── */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.5em; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* ── closing cta band ────────────────────────────────────────────────────── */

.cta-band { background: linear-gradient(140deg, var(--pink) 0%, var(--mint) 55%, var(--orange) 100%); }
.cta-band h2 { margin-bottom: .3em; }
.cta-band p { max-width: 54ch; margin-bottom: 1.6em; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.site-footer { margin-top: clamp(1.4rem, 4vw, 2.4rem); background: #fff; }
.skyline { display: block; width: min(640px, 92%); margin: 0 auto -2px; }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 1.8rem clamp(1.1rem, 4vw, 3rem) 1rem;
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 3px solid var(--ink);
}
.footer-col h2 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8em;
}
.footer-col a { display: block; color: var(--ink); text-decoration: none; padding: .22em 0; font-size: .94rem; }
.footer-col a:hover { color: var(--pink-deep); text-decoration: underline; }
.foot-logo { width: 108px; margin-bottom: .6rem; }
.footer-brand p { font-size: .88rem; color: var(--ink-soft); margin-bottom: .3em; }
.madein { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; }
.footer-legal {
  max-width: var(--wrap); margin: 0 auto; padding: .9rem clamp(1.1rem, 4vw, 3rem) 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-soft);
}
.footer-legal a { color: var(--ink-soft); }

/* ── 404 ─────────────────────────────────────────────────────────────────── */

.notfound {
  max-width: 620px; margin: 0 auto; padding: 3rem 1.4rem; text-align: center;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  margin-top: clamp(1.4rem, 6vw, 4rem); margin-bottom: clamp(1.4rem, 6vw, 4rem);
}
.notfound .hero-logo { width: min(220px, 55vw); animation: none; }
.notfound h2 { margin-top: 1.4em; }
.notfound h2:first-of-type { margin-top: .4em; }

/* ── the topping bar ─────────────────────────────────────────────────────── */
/* The giant stroopwafel exists only across the counter, so this band sells the
   choice: the five jars, photographed where they stand. Tinted rather than white
   so it reads as a different kind of thing from the shelf of bars above it. */

.topping-section { background: #fff7fa; }
.topping-section > .topping-lede { max-width: 62ch; }
.topping-lede p:last-child { margin-bottom: 0; }

.topping-hero {
  margin: 1.8rem 0 0;
  border: 3px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; background: var(--pink); box-shadow: 0 6px 0 var(--ink);
}
.topping-hero img { display: block; width: 100%; height: auto; }
.topping-hero figcaption {
  padding: .7rem 1.1rem; font-size: .88rem; font-weight: 600;
  background: var(--ink); color: #fff;
}

.topping-picker { margin-top: 2rem; }
.topping-pick {
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pink-deep); margin-bottom: 1em;
}
.toppings {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.topping { text-align: center; }
.topping img {
  display: block; width: 100%; max-width: 160px; aspect-ratio: 1; height: auto;
  margin: 0 auto .7rem; object-fit: cover;
  border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .14s ease;
}
.topping:hover img { transform: translateY(-3px) rotate(-2deg); }
.topping h3 { font-size: 1rem; margin-bottom: .25em; }
.topping p { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.topping-plain {
  margin: 1.6em 0 0; font-weight: 800; font-size: .95rem; color: var(--ink);
}

/* ── the photo wall (flip/flap) ──────────────────────────────────────────── */
/* Twelve cells; one of them turns over every couple of seconds and comes back as
   another photo from the pool, the way a split-flap board does. Everything here is
   an enhancement: without JavaScript it is simply twelve photographs. */

.wall-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  border: 3px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; background: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.wall-cell {
  display: block; padding: 0; margin: 0; border: 0; background: var(--pink);
  aspect-ratio: 1; overflow: hidden; cursor: pointer;
  perspective: 420px;
}
.wall-cell img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center; backface-visibility: hidden;
  transition: transform .34s ease, filter .3s ease;
}
.wall-cell:hover img, .wall-cell:focus-visible img { filter: brightness(1.06) saturate(1.08); }
.wall-cell:focus-visible { outline: 4px solid var(--flag-blue); outline-offset: -4px; }
.wall-cell.is-flipping img { transform: rotateX(90deg); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 1rem; padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(2, 1, 1, .92);
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(92vw, 1100px); max-height: 74vh; object-fit: contain;
  border: 3px solid #fff; border-radius: 10px; background: var(--ink);
}
.lightbox-caption {
  color: #fff; text-align: center; max-width: 60ch; font-size: .98rem; margin: 0;
}
.lightbox-close {
  position: absolute; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem);
  font: inherit; font-weight: 800; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; cursor: pointer;
  background: #fff; color: var(--ink); border: 3px solid var(--ink);
  border-radius: 999px; padding: .5em 1.2em;
}
.lightbox-close:hover { background: var(--pink); }

/* ── the storefront on the visit page ────────────────────────────────────── */

.visit-photo {
  margin: 2rem 0 0;
  border: 3px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; background: var(--mint); box-shadow: 0 6px 0 var(--ink);
}
.visit-photo img { display: block; width: 100%; height: auto; }
.visit-photo figcaption {
  padding: .7rem 1.1rem; font-size: .88rem; font-weight: 600;
  background: var(--ink); color: #fff;
}

/* ── small screens ───────────────────────────────────────────────────────── */

/* The cell count stays twelve at every width: the grid just reflows from
   6x2 to 4x3 to 3x4, so the flip never lands on a cell nobody can see. */
@media (max-width: 860px) {
  .wall-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .cta-pair .btn { flex: 1 1 100%; }
  .hours td { text-align: right; }
  .wall-grid { grid-template-columns: repeat(3, 1fr); }
  .toppings { grid-template-columns: repeat(2, 1fr); }
}