/* The shop look: everything here is scoped to .site[data-look="shop"]. Appended after base.css (bun run --filter @platform/sections css).

   A bakery, a florist or a food truck, made of the paper they hand over the
   counter: the paper bag with the shop's rubber stamp on it (the stamp in
   the shop's colour, --stamp), the kraft roll at the counter with what is
   for sale written on it in marker, the card in the window with the opening
   hours, and the order slip. The kraft is the artefacts' material only: the
   page around them is the cool white of a shop's wall and counter, never
   cream. The shop's colour (--primary, a stamp-pad blue until they pick one)
   fills the buttons and paints the wall the roll hangs on; text on it is
   always --on-primary. */

.site[data-look="shop"] {
  --k-ink: var(--stamp, var(--primary));
  --k-shadow: 0 1px 1px rgb(20 22 24 / 0.08), 0 24px 34px -22px rgb(20 22 24 / 0.5);
  --k-fibre: repeating-linear-gradient(91deg, rgb(74 48 18 / 0.045) 0 1px, transparent 1px 4px), repeating-linear-gradient(97deg, rgb(74 48 18 / 0.035) 0 2px, transparent 2px 13px), repeating-linear-gradient(84deg, rgb(255 248 235 / 0.06) 0 1px, transparent 1px 9px);
  --fs-base: 1.075rem;
  --fs-lead: clamp(1.12rem, 1.02rem + 0.4vw, 1.3rem);
  --fs-h2: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem);
  --section-pad: clamp(3.75rem, 8.5vw, 7rem);
  --wrap: 76rem;
  background: var(--bg);
}
.site[data-look="shop"] main > .s + .s { border-top: 0; }
.site[data-look="shop"] :is(h1, h2) { line-height: 0.94; letter-spacing: 0.005em; }
.site[data-look="shop"] h2 { font-size: var(--fs-h2); margin: 0 0 0.45em; }
.site[data-look="shop"] :is(p, li, dd, td) { hyphens: auto; }
.site[data-look="shop"] .btn { border-radius: 0.35rem; min-height: 3.25rem; padding-inline: 1.6rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }
.site[data-look="shop"] .btn-primary { box-shadow: 0 2px 0 rgb(0 0 0 / 0.25); }
.site[data-look="shop"] .btn-primary:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 0 rgb(0 0 0 / 0.22); }
.site[data-look="shop"] .cta-alt { font-weight: 650; text-underline-offset: 0.25em; }
.site[data-look="shop"] :is(a, button, .btn, input, textarea, select):focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* Header: the name set like the stamp, a rule like the counter's edge. */
.site[data-look="shop"] .site-header { background: var(--bg); border-bottom: 3px solid var(--text); }
.site[data-look="shop"] .brand { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); line-height: 0.95; hyphens: manual; }
.site[data-look="shop"] .site-header nav a { font-weight: 600; }
.site[data-look="shop"] .site-header .btn { min-height: 2.75rem; padding-inline: 1.1rem; font-size: 0.98rem; }

/* --- Hero: the paper bag on the counter. ----------------------------------- */
.site[data-look="shop"] .k-hero { position: relative; padding-block: clamp(1.5rem, 4vw, 3.5rem) 0; overflow: clip; }
.site[data-look="shop"] .k-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 4.5rem); align-items: end; }
@media (min-width: 56rem) {
  .site[data-look="shop"] .k-hero-grid { grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr); min-height: min(44rem, calc(calc(100 * var(--raam-vh)) - 6rem)); }
}
.site[data-look="shop"] .k-hero-text { min-width: 0; padding-bottom: clamp(2.25rem, 6vw, 5.5rem); align-self: center; }
.site[data-look="shop"] .k-headline { font-size: clamp(3rem, 1.6rem + 6vw, 7.4rem); line-height: 0.95; margin: 0 0 0.3em; max-width: 11ch; }
.site[data-look="shop"] .k-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 34rem; margin: 0; color: var(--muted); hyphens: manual; }
.site[data-look="shop"] .k-actions { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
/* The counter top the bag stands on: a band of pale stone with its front edge. */
.site[data-look="shop"] .k-counter { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(2.25rem, 5vw, 3.75rem); background: linear-gradient(to bottom, #e3e6e4 0, #d6dad8 70%, #b9bebc 100%); border-top: 1px solid #c4c9c7; }
.site[data-look="shop"] .k-counter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.55rem; background: var(--text); }
.site[data-look="shop"] .k-hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; min-width: 0; padding-bottom: clamp(1rem, 2.6vw, 2rem); }

/* The bag: flat kraft, its gussets shaded, folded shut once at the top. */
.site[data-look="shop"] .k-bag { position: relative; width: min(100%, 28rem, max(18rem, calc((calc(100 * var(--raam-vh)) - 12rem) * 0.68))); filter: drop-shadow(0 26px 20px rgb(30 24 14 / 0.2)) drop-shadow(0 4px 3px rgb(30 24 14 / 0.18)); transform: rotate(-1.5deg); transform-origin: 50% 100%; }
.site[data-look="shop"] .k-bag-paper {
  position: relative; aspect-ratio: 5 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30% 9% 14%;
  background: linear-gradient(90deg, rgb(60 38 12 / 0.16) 0, rgb(60 38 12 / 0.03) 7%, transparent 9%, transparent 91%, rgb(60 38 12 / 0.05) 93%, rgb(60 38 12 / 0.2) 100%), linear-gradient(to bottom, transparent 88%, rgb(60 38 12 / 0.1) 88.4%, transparent 89.4%), var(--k-fibre), linear-gradient(170deg, var(--kraft-light), var(--kraft) 70%);
  border-radius: 2px 2px 1px 1px;
}
/* The folded flap: lit from above, its serrated edge casting a shadow. */
.site[data-look="shop"] .k-bag-fold { position: absolute; left: 0; right: 0; top: 0; height: 21%; filter: drop-shadow(0 5px 3px rgb(50 30 8 / 0.28)); }
.site[data-look="shop"] .k-bag-fold::before {
  content: ''; position: absolute; inset: 0;
  background: var(--k-fibre), linear-gradient(to bottom, var(--kraft-light), color-mix(in srgb, var(--kraft-light) 70%, var(--kraft)));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
}

/* The shop's rubber stamp, in its own ink: a double rule, the place, the
   name, the number. The ink is speckled by an SVG filter (shop.tsx InkFilter). */
.site[data-look="shop"] .k-stamp {
  position: relative; width: 100%; padding: 0.75rem 0.85rem 0.7rem; color: var(--k-ink); text-align: center;
  border: 0.24rem solid currentColor; border-radius: 0.6rem; transform: rotate(-4deg);
}
.site[data-look="shop"] .k-stamp::before { content: ''; position: absolute; inset: 0.3rem; border: 0.09rem solid currentColor; border-radius: 0.35rem; pointer-events: none; }
.site[data-look="shop"] :is(.k-stamp-top, .k-stamp-foot) { display: block; font-family: var(--font-body); font-weight: 750; font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.86rem); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; font-variant-numeric: tabular-nums; }
.site[data-look="shop"] .k-stamp-top { padding-bottom: 0.45rem; margin-bottom: 0.45rem; border-bottom: 0.09rem solid currentColor; }
.site[data-look="shop"] .k-stamp-foot { padding-top: 0.45rem; margin-top: 0.4rem; border-top: 0.09rem solid currentColor; letter-spacing: 0.14em; }
.site[data-look="shop"] .k-stamp-name { margin: 0; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.92; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); text-wrap: balance; }

/* The sticker over the fold: today's hours (todayScript sets <html data-today>). */
.site[data-look="shop"] .k-sticker {
  position: absolute; z-index: 2; top: 13%; right: 9%; width: 6.6rem; aspect-ratio: 1; margin: 0; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 0.5rem; transform: rotate(9deg);
  background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.22), transparent 42%), var(--primary); color: var(--on-primary);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.25), inset 0 0 0 0.22rem rgb(255 255 255 / 0.18);
}
:root:not([data-today]) .site[data-look="shop"] .k-sticker { display: none; }
.site[data-look="shop"] .k-sticker > span { display: none; }
:root[data-today="mon"] .site[data-look="shop"] .k-sticker [data-day="mon"],
:root[data-today="tue"] .site[data-look="shop"] .k-sticker [data-day="tue"],
:root[data-today="wed"] .site[data-look="shop"] .k-sticker [data-day="wed"],
:root[data-today="thu"] .site[data-look="shop"] .k-sticker [data-day="thu"],
:root[data-today="fri"] .site[data-look="shop"] .k-sticker [data-day="fri"],
:root[data-today="sat"] .site[data-look="shop"] .k-sticker [data-day="sat"],
:root[data-today="sun"] .site[data-look="shop"] .k-sticker [data-day="sun"] { display: grid; gap: 0.2rem; }
.site[data-look="shop"] .k-sticker-word { font-weight: 750; font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.15; }
.site[data-look="shop"] .k-sticker-time { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

/* With the shop's own photo: the photo stands behind, the bag in front of it. */
.site[data-look="shop"] .k-hero.has-photo .k-hero-art { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; justify-items: start; }
.site[data-look="shop"] .k-hero-photo { grid-area: 1 / 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.25rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.site[data-look="shop"] .k-hero.has-photo .k-bag { grid-area: 1 / 1; width: min(58%, 17rem); margin-left: -0.5rem; }
.site[data-look="shop"] .k-hero.has-photo .k-stamp-name { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); }
.site[data-look="shop"] .k-hero.has-photo .k-sticker { width: 5.4rem; top: 9%; right: 4%; }
.site[data-look="shop"] .k-hero.has-photo .k-sticker-time { font-size: 1rem; }

@media (max-width: 55.99rem) {
  .site[data-look="shop"] .k-hero-text { padding-bottom: clamp(2.5rem, 8vw, 3.5rem); padding-top: 0; }
  .site[data-look="shop"] .k-hero-grid { align-items: start; }
  /* On a phone the bag is shorter, so the button still shows on the first screen. */
  .site[data-look="shop"] .k-hero.no-photo .k-hero-art { order: -1; }
  .site[data-look="shop"] .k-hero.no-photo .k-bag { width: min(100%, 21rem); }
  .site[data-look="shop"] .k-hero.no-photo .k-bag-paper { aspect-ratio: 6 / 5; padding: 21% 8% 8%; }
  .site[data-look="shop"] .k-hero.no-photo .k-bag-fold { height: 22%; }
  .site[data-look="shop"] .k-hero.no-photo .k-sticker { top: 9%; right: 4%; width: 5.4rem; }
  .site[data-look="shop"] .k-hero.no-photo .k-sticker-time { font-size: 1rem; }
  .site[data-look="shop"] .k-stamp-name { font-size: clamp(2rem, 1.3rem + 3.2vw, 2.8rem); }
  .site[data-look="shop"] .k-headline { font-size: clamp(2.6rem, 1.5rem + 5.4vw, 4.4rem); }
  .site[data-look="shop"] .k-counter { display: none; }
  .site[data-look="shop"] .k-hero-art { padding-bottom: 0; }
  .site[data-look="shop"] .k-hero.has-photo .k-hero-photo { aspect-ratio: 4 / 3; }
  .site[data-look="shop"] .k-hero.has-photo .k-bag { width: min(50%, 12rem); }
  /* The small bag in front of a photo carries the name only. */
  .site[data-look="shop"] .k-hero.has-photo :is(.k-stamp-top, .k-stamp-foot) { display: none; }
}

/* --- What is for sale: the kraft roll on the shop's painted wall. --------- */
.site[data-look="shop"] .k-wall {
  background: repeating-linear-gradient(90deg, transparent 0 calc(9rem - 1px), rgb(0 0 0 / 0.1) calc(9rem - 1px) 9rem), var(--primary);
  color: var(--on-primary); padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7.5rem); overflow-x: clip;
}
.site[data-look="shop"] .k-wall-grid { display: grid; justify-items: center; gap: clamp(1.75rem, 4vw, 2.75rem); }
.site[data-look="shop"] .k-wall-intro { justify-self: start; max-width: 36rem; margin: 0; font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; }
.site[data-look="shop"] .k-roll { position: relative; width: min(100%, 38rem); filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.28)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.2)); }
.site[data-look="shop"] .k-roll.k-cols-2 { width: min(100%, 66rem); }
/* The holder: a black steel bar with its brackets, the roll of paper under it. */
.site[data-look="shop"] .k-roll-holder { position: relative; display: block; height: 3.1rem; margin-inline: clamp(-1.1rem, -2vw, -0.6rem); }
.site[data-look="shop"] .k-roll-holder::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0.75rem; border-radius: 0.4rem; background: linear-gradient(to bottom, #4a4e52, #16181a 70%); }
.site[data-look="shop"] .k-roll-holder::after { content: ''; position: absolute; top: -0.4rem; left: 0.15rem; right: 0.15rem; height: 3.1rem; border-left: 0.7rem solid #1d2023; border-right: 0.7rem solid #1d2023; border-radius: 0.35rem; }
.site[data-look="shop"] .k-roll-core { position: absolute; left: 1.1rem; right: 1.1rem; top: 0.7rem; height: 2.4rem; border-radius: 1.2rem / 0.5rem; background: var(--k-fibre), linear-gradient(to bottom, color-mix(in srgb, var(--kraft) 70%, #000) 0, var(--kraft-light) 38%, var(--kraft) 62%, color-mix(in srgb, var(--kraft) 72%, #000) 100%); }
.site[data-look="shop"] .k-roll-sheet {
  position: relative; margin-top: -0.6rem; padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.3rem, 4.5vw, 3rem) clamp(2.6rem, 5vw, 3.4rem);
  background: linear-gradient(to bottom, rgb(40 24 6 / 0.22), transparent 1.4rem), var(--k-fibre), var(--kraft); color: var(--on-kraft);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 11px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 11px repeat-x;
}
/* Written in marker: the heading underlined twice by hand. */
.site[data-look="shop"] .k-roll-title { position: relative; display: inline-block; margin: 0 0 1.1rem; font-family: var(--font-hand); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.5rem); line-height: 1; color: var(--on-kraft); max-width: 100%; }
.site[data-look="shop"] .k-roll-title::after { content: ''; display: block; height: 0.11em; margin-top: 0.12em; width: 104%; border-radius: 0.1em 0.3em 0.2em 0.4em; background: currentColor; transform: rotate(-1.2deg); box-shadow: 0.35em 0.17em 0 -0.025em currentColor; clip-path: inset(-0.5em 0 -0.5em 0); }
.site[data-look="shop"] .k-items { list-style: none; margin: 0; padding: 0; }
.site[data-look="shop"] .k-cols-2 .k-items { column-gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 46rem) { .site[data-look="shop"] .k-cols-2 .k-items { columns: 2; column-rule: 2px dashed rgb(29 25 20 / 0.18); } }
.site[data-look="shop"] .k-item { break-inside: avoid; padding: 0.45rem 0 0.55rem; font-family: var(--font-hand); line-height: 1.12; }
.site[data-look="shop"] .k-item-line { display: flex; align-items: last baseline; gap: 0.45rem; font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem); }
.site[data-look="shop"] .k-item-name { flex: 0 1 auto; min-width: 0; hyphens: manual; overflow-wrap: normal; }
.site[data-look="shop"] .k-item-dots { flex: 1 0 1.25rem; align-self: last baseline; height: 0.25em; border-bottom: 0.14em dotted rgb(29 25 20 / 0.45); transform: translateY(-0.18em); }
.site[data-look="shop"] .k-item-price { flex: none; white-space: nowrap; }
.site[data-look="shop"] .k-price-from, .site[data-look="shop"] .k-price-unit { font-size: 0.72em; }
.site[data-look="shop"] .k-item-note { display: block; margin-top: 0.15rem; max-width: 34rem; font-size: clamp(1.08rem, 1rem + 0.3vw, 1.22rem); line-height: 1.22; color: var(--kraft-muted); hyphens: manual; }
.site[data-look="shop"] .k-roll-foot { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 0.13em solid rgb(29 25 20 / 0.55); font-family: var(--font-hand); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.2; }
.site[data-look="shop"] .k-roll-foot a { white-space: nowrap; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

/* --- Opening hours: the card in the window. -------------------------------- */
.site[data-look="shop"] .k-hours { background: var(--surface); }
.site[data-look="shop"] .k-hours-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="shop"] .k-hours-grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr); } }
.site[data-look="shop"] .k-hours-place { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.25rem; }
.site[data-look="shop"] .k-hours-place a { font-weight: 650; }
.site[data-look="shop"] .k-hours-call { margin: 0; }
.site[data-look="shop"] .k-hours-call a { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); text-decoration: none; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.site[data-look="shop"] .k-hours-call a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.site[data-look="shop"] .k-window { display: flex; justify-content: center; padding-top: 2.4rem; }
/* The card hangs from a suction cup on the glass by a thin cord. */
.site[data-look="shop"] .k-card { position: relative; width: min(100%, 25rem); padding: 2.3rem clamp(1.3rem, 4vw, 2rem) 1.6rem; background: var(--sign); color: var(--on-sign); border-radius: 0.5rem; box-shadow: var(--k-shadow); transform: rotate(1.4deg); }
.site[data-look="shop"] .k-card::before { content: ''; position: absolute; top: 0.85rem; left: 50%; width: 0.7rem; height: 0.7rem; margin-left: -0.35rem; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35); }
.site[data-look="shop"] .k-card-cup { position: absolute; left: 50%; top: -2.6rem; width: 1px; height: 3.6rem; background: linear-gradient(to bottom, #9aa2a6, #6f777b); }
.site[data-look="shop"] .k-card-cup::before { content: ''; position: absolute; left: -0.85rem; top: -0.6rem; width: 1.7rem; height: 1rem; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 30%, rgb(255 255 255 / 0.85), rgb(205 214 218 / 0.55) 60%, rgb(160 172 178 / 0.6)); box-shadow: 0 1px 1px rgb(0 0 0 / 0.15); }
.site[data-look="shop"] .k-card-name { margin: 0 0 0.15rem; text-align: center; color: var(--sign-muted); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: manual; }
.site[data-look="shop"] .k-card-head { margin: 0 0 0.9rem; padding-bottom: 0.7rem; border-bottom: 3px solid var(--on-sign); text-align: center; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.9rem); line-height: 0.95; letter-spacing: 0.02em; }
.site[data-look="shop"] .k-card-table { display: block; width: 100%; font-variant-numeric: tabular-nums; }
.site[data-look="shop"] .k-card-table tbody { display: block; }
.site[data-look="shop"] .k-card-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; position: relative; border-bottom: 1px solid rgb(24 25 27 / 0.12); }
.site[data-look="shop"] .k-card-table tr:last-child { border-bottom: 0; }
.site[data-look="shop"] .k-card-table :is(th, td) { display: block; padding: 0.42rem 0; font-size: 1.04rem; }
.site[data-look="shop"] .k-card-table th { text-align: left; font-weight: 650; padding-right: 1rem; }
.site[data-look="shop"] .k-card-table td { text-align: right; }
.site[data-look="shop"] .k-time { display: block; white-space: nowrap; }
.site[data-look="shop"] .k-card-table tr.is-closed :is(th, td) { color: var(--sign-muted); font-weight: 400; }
/* Today circled in marker on the card. */
:root[data-today="mon"] .site[data-look="shop"] .k-card-table tr[data-day="mon"]::after,
:root[data-today="tue"] .site[data-look="shop"] .k-card-table tr[data-day="tue"]::after,
:root[data-today="wed"] .site[data-look="shop"] .k-card-table tr[data-day="wed"]::after,
:root[data-today="thu"] .site[data-look="shop"] .k-card-table tr[data-day="thu"]::after,
:root[data-today="fri"] .site[data-look="shop"] .k-card-table tr[data-day="fri"]::after,
:root[data-today="sat"] .site[data-look="shop"] .k-card-table tr[data-day="sat"]::after,
:root[data-today="sun"] .site[data-look="shop"] .k-card-table tr[data-day="sun"]::after {
  content: ''; position: absolute; left: -0.7rem; right: -0.7rem; top: 0.02rem; bottom: 0.02rem;
  border: 0.17rem solid var(--k-ink); border-radius: 48% 52% 46% 54% / 55% 48% 52% 45%; transform: rotate(-1.2deg); pointer-events: none;
}

/* --- Where to find us: each place stamped. -------------------------------- */
.site[data-look="shop"] .k-places-grid { display: grid; gap: 0.5rem clamp(2rem, 5vw, 4rem); }
@media (min-width: 52rem) { .site[data-look="shop"] .k-places-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } .site[data-look="shop"] .k-places-list { grid-column: 2; grid-row: 1 / span 2; } }
.site[data-look="shop"] .k-places-body { margin: 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; max-width: 30rem; }
.site[data-look="shop"] .k-places-list { list-style: none; margin: 0; padding: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; }
.site[data-look="shop"] .k-places-list li {
  padding: 0.5rem 0.9rem 0.4rem; color: var(--k-ink); border: 0.2rem solid currentColor; border-radius: 0.35rem; box-shadow: inset 0 0 0 0.18rem var(--bg), inset 0 0 0 0.27rem currentColor;
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); line-height: 1;
  transform: rotate(-1.5deg); overflow-wrap: anywhere; hyphens: manual;
}
.site[data-look="shop"] .k-places-list li:nth-child(3n + 2) { transform: rotate(1.2deg); }
.site[data-look="shop"] .k-places-list li:nth-child(3n) { transform: rotate(-0.4deg); }

/* --- About: plain text, the founding year as a round stamp. ---------------- */
.site[data-look="shop"] .k-about { background: var(--bg); }
.site[data-look="shop"] .k-about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="shop"] .k-about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.site[data-look="shop"] .k-about-body { max-width: 40rem; font-size: 1.12rem; line-height: 1.65; }
.site[data-look="shop"] .k-about-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.25rem; }
.site[data-look="shop"] .k-year {
  justify-self: center; display: grid; place-content: center; text-align: center; width: clamp(10rem, 22vw, 14rem); aspect-ratio: 1; margin: 0; border-radius: 50%;
  color: var(--k-ink); border: 0.3rem solid currentColor; box-shadow: inset 0 0 0 0.45rem var(--bg), inset 0 0 0 0.58rem currentColor; transform: rotate(-9deg);
}
.site[data-look="shop"] .k-year span:first-child { font-weight: 750; font-size: 0.9rem; letter-spacing: 0.3em; text-transform: uppercase; }
.site[data-look="shop"] .k-year-n { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2.2vw, 4.4rem); line-height: 0.9; }

/* --- Photos: the shop's own. -------------------------------------------- */
.site[data-look="shop"] .k-photos-band { background: var(--surface); }
.site[data-look="shop"] .k-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-look="shop"] .k-photos li:first-child { grid-column: 1 / -1; }
@media (min-width: 52rem) { .site[data-look="shop"] .k-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .site[data-look="shop"] .k-photos li:first-child { grid-column: span 2; grid-row: span 2; } }
.site[data-look="shop"] .k-photo { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.2rem; }

/* --- What customers say: written on the back of a torn-off bit of kraft. -- */
.site[data-look="shop"] .k-quotes { list-style: none; margin: 0; padding: 0.5rem 0 0; display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="shop"] .k-q2 .k-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site[data-look="shop"] .k-q2 .k-quotes li:nth-child(2) { margin-top: 2.5rem; } }
.site[data-look="shop"] .k-quotes figure {
  margin: 0; padding: clamp(1.4rem, 3.5vw, 2rem) clamp(1.3rem, 3.5vw, 2rem) 2rem; color: var(--on-kraft); max-width: 36rem;
  background: var(--k-fibre), var(--kraft-light); filter: drop-shadow(0 12px 12px rgb(20 22 24 / 0.16)); transform: rotate(-0.8deg);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 9px repeat-x;
}
.site[data-look="shop"] .k-quotes li:nth-child(2) figure { transform: rotate(0.9deg); }
.site[data-look="shop"] .k-quotes blockquote { margin: 0; }
.site[data-look="shop"] .k-quotes blockquote p { margin: 0 0 0.8rem; font-family: var(--font-hand); font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem); line-height: 1.25; hyphens: manual; }
.site[data-look="shop"] .k-quotes figcaption { font-family: var(--font-hand); font-size: 1.3rem; color: var(--kraft-muted); }
.site[data-look="shop"] .k-quotes figcaption::before { content: '– '; }

/* --- Ordering ahead: the slip from the counter's order book. --------------- */
.site[data-look="shop"] .k-order .s-request { background: var(--surface); }
.site[data-look="shop"] .k-order .request-form {
  position: relative; padding: 4.4rem clamp(1.2rem, 4vw, 2.2rem) 1.8rem; border-top: 0; background: var(--slip); color: var(--on-slip); box-shadow: var(--k-shadow); border-radius: 0 0 0.25rem 0.25rem;
  --text: var(--on-slip); --muted: var(--slip-muted); --bg: var(--slip);
}
/* The perforated edge it was torn along. */
.site[data-look="shop"] .k-order .request-form::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0.8rem; background: radial-gradient(circle at 0.45rem 0, var(--surface) 0.22rem, transparent 0.26rem) 0 0 / 0.9rem 0.8rem repeat-x; }
/* Printed at the top in the shop's ink: the slip's name and the shop's. */
.site[data-look="shop"] .k-order .request-form::before { content: var(--k-slip-head); position: absolute; top: 1.4rem; left: clamp(1.2rem, 4vw, 2.2rem); right: clamp(1.2rem, 4vw, 2.2rem); padding-bottom: 0.55rem; border-bottom: 2px solid var(--k-ink); color: var(--k-ink); font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.35rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site[data-look="shop"] .k-order .request-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { background: transparent; border: 0; border-bottom: 1.5px solid var(--slip-rule); border-radius: 0; padding-inline: 0.1rem; }
.site[data-look="shop"] .k-order .request-form textarea { border: 1.5px solid var(--slip-rule); padding: 0.6rem; background: repeating-linear-gradient(to bottom, transparent 0 1.85rem, var(--slip-rule) 1.85rem calc(1.85rem + 1px)); line-height: 1.85rem; }
.site[data-look="shop"] .k-order .request-form :is(input, textarea, select):focus-visible { border-color: var(--on-slip); }
.site[data-look="shop"] .k-order .request-form label { font-size: 0.95rem; }

/* --- Ordering: the numbers on a sheet of kraft, the form on a slip. ------ */
.site[data-look="shop"] .contact-value { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.site[data-look="shop"] .k-contact .s-contact { background: var(--surface); }
.site[data-look="shop"] .k-contact .contact-list {
  margin-top: 1.6rem; padding: 0.6rem clamp(1.1rem, 3.5vw, 1.8rem) 1.8rem; border-top: 0; color: var(--on-kraft);
  background: linear-gradient(to bottom, rgb(40 24 6 / 0.14), transparent 1rem), var(--k-fibre), var(--kraft);
  --muted: var(--kraft-muted); --border: rgb(29 25 20 / 0.28); --text: var(--on-kraft);
  filter: drop-shadow(0 12px 12px rgb(20 22 24 / 0.18));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
}
.site[data-look="shop"] .k-contact .contact-list li { border-bottom: 2px dashed rgb(29 25 20 / 0.25); }
.site[data-look="shop"] .k-contact .contact-list li:last-child { border-bottom: 0; }
.site[data-look="shop"] .k-contact .contact-label { color: var(--kraft-muted); font-weight: 650; }
.site[data-look="shop"] .k-contact :is(.contact-also, .contact-note) { color: var(--on-kraft); }
.site[data-look="shop"] .k-contact .contact-form {
  position: relative; padding: 2.2rem clamp(1.2rem, 4vw, 2.2rem) 1.8rem; border-top: 0; background: var(--slip); color: var(--on-slip); box-shadow: var(--k-shadow); border-radius: 0 0 0.25rem 0.25rem;
  --text: var(--on-slip); --muted: var(--slip-muted); --bg: var(--slip);
}
.site[data-look="shop"] .k-contact .contact-form::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0.8rem; background: radial-gradient(circle at 0.45rem 0, var(--surface) 0.22rem, transparent 0.26rem) 0 0 / 0.9rem 0.8rem repeat-x; }
.site[data-look="shop"] .k-contact .contact-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) { background: transparent; border: 0; border-bottom: 1.5px solid var(--slip-rule); border-radius: 0; padding-inline: 0.1rem; }
.site[data-look="shop"] .k-contact .contact-form textarea { border: 1.5px solid var(--slip-rule); padding: 0.6rem; }

/* --- Footer and the phone bar. ----------------------------------------- */
.site[data-look="shop"] .site-footer { border-top: 0.55rem solid var(--primary); }
.site[data-look="shop"] .quick { font-weight: 700; }
.site[data-look="shop"] .k-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .site[data-look="shop"] .k-sticker { animation: k-stick 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.35s both; }
  @keyframes k-stick { from { transform: rotate(-4deg) scale(1.25); opacity: 0; } to { transform: rotate(9deg) scale(1); opacity: 1; } }
  .site[data-look="shop"] .btn-primary { transition: transform 0.12s, box-shadow 0.12s; }
}