/* ==========================================================
   Anna's Cookies – styles
   Look: an old-fashioned blue cookie tin with a scalloped lid,
   butter-yellow highlights and cookies drawn in SVG.
   System fonts only, so nothing extra has to download.
   ========================================================== */

:root {
  --tin: #1f3f9a;        /* cookie-tin blue: main colour */
  --tin-dark: #152c6b;
  --tin-light: #e8ecf8;
  --butter: #f5c542;     /* highlight */
  --butter-light: #fdf0c4;
  --ink: #2b1a12;        /* cocoa brown text */
  --muted: #6b5e57;
  --line: #e4ddd3;
  --paper: #fffdf8;
  --error: #b3261e;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 18px;
  color-scheme: light;
}

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

/* Anything with the hidden attribute stays hidden, whatever its other styles say */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.55 var(--sans);
}

h1, h2, h3, legend {
  font-family: var(--serif);
  line-height: 1.1;
  font-weight: 700;
}

h2, legend {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

h3 {
  font-size: 1.35rem;
  margin: 0;
}

a {
  color: var(--tin);
}

:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.wrap {
  width: min(70rem, 100% - 2.5rem);
  margin-inline: auto;
}

.small {
  font-size: 0.9rem;
  color: var(--muted);
}

.lead {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0 0 1.75rem;
}


/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.9rem;
  background: var(--tin);
  color: #fff;
  font: 700 1.05rem var(--sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.button:hover {
  background: var(--tin-dark);
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.button--butter {
  background: var(--butter);
  color: var(--ink);
}

.button--butter:hover {
  background: #fff;
}

.button--wide {
  width: 100%;
}


/* ---------- Hero: the tin lid ----------
   Kept compact, so the cookies and the order form show without scrolling. */

.hero {
  position: relative;
  background: var(--tin);
  color: #fff;
  padding: 1.25rem 0 1rem;
  overflow-x: clip;
}

/* Scalloped edge: a row of half circles hanging under the blue band */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  height: 16px;
  background: radial-gradient(circle at 16px 0, var(--tin) 15px, transparent 16px) 0 0 / 32px 16px repeat-x;
}

.hero__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.4rem;
}

.hero p {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  color: #dfe5f7;
}

/* "Already ordered?" link */
.hero__link {
  color: #dfe5f7;
  font-size: 0.95rem;
  font-weight: 600;
}

.hero__link:hover {
  color: #fff;
}

/* Two small overlapping cookies beside the name (not on narrow phones) */
.hero__cookies {
  position: relative;
  flex: none;
  width: 8rem;
  aspect-ratio: 1.15;
}

@media (max-width: 36rem) {
  .hero__cookies {
    display: none;
  }
}

.hero__cookie {
  position: absolute;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 0.3));
}

.hero__cookie--back {
  width: 62%;
  height: 62%;
  top: 0;
  right: 0;
  transform: rotate(20deg);
}

.hero__cookie--front {
  width: 72%;
  height: 72%;
  bottom: 0;
  left: 0;
  transform: rotate(-12deg);
}

/* The one moment of motion: the cookies land on the page */
@media (prefers-reduced-motion: no-preference) {
  .hero__cookie--front { animation: land 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
  .hero__cookie--back  { animation: land 0.7s 0.12s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
}

@keyframes land {
  from { opacity: 0; translate: 0 -24px; rotate: -25deg; }
}

@media (min-width: 48rem) {
  .hero {
    padding: 1.75rem 0 1.5rem;
  }

  .hero__cookies {
    width: 9.5rem;
  }
}


/* ---------- Closed notice ---------- */

.closed-notice {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--butter);
  border-radius: var(--radius);
  background: var(--butter-light);
  font-size: 1.1rem;
}

.closed-notice strong {
  display: block;
  font: 700 1.5rem var(--serif);
}

.closed-notice p {
  margin: 0.25rem 0 0;
}

/* While closed, the order parts are dimmed and can't be used */
.is-closed .qty,
.is-closed .checkout__form {
  opacity: 0.45;
  pointer-events: none;
}


/* ---------- How it works ----------
   Three steps in one compact row. On phones, only their titles. */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 0;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: 0.65rem;
  align-items: start;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--butter);
  color: var(--ink);
  font: 700 1rem var(--serif);
}

.steps strong {
  display: block;
  color: var(--ink);
  font: 700 1.05rem var(--serif);
}

@media (max-width: 40rem) {
  .steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
  }

  .steps strong {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .steps span {
    display: none;
  }
}


/* ---------- Cookie menu ---------- */

.menu {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.2s, background-color 0.2s;
}

/* Set by script.js when this cookie is in the order */
.item.is-added {
  border-color: var(--tin);
  background: var(--tin-light);
}

.item__cookie {
  width: 8.5rem;
  height: 8.5rem;
  margin: 0 auto 1.25rem;
  filter: drop-shadow(0 8px 10px rgb(60 30 10 / 0.18));
  transition: transform 0.3s;
}

.item.is-added .item__cookie {
  transform: rotate(-10deg) scale(1.05);
}

.item__text {
  flex: 1;
}

.item__text p {
  margin: 0.35rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.item__buy {
  display: flex;
  flex-wrap: wrap;      /* on a narrow card the stepper moves under the price */
  row-gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.item__price {
  margin: 0;
  font: 700 1.3rem var(--serif);
}

/* ---------- Cookie photos ----------
   A strip of photos you swipe through, one at a time (scroll snapping).
   script.js adds the arrows and dots. Cookies without photos show the drawing. */

.carousel {
  position: relative;
  /* Fills the card: out to its edges and up to its top (the card's padding is 1.5rem) */
  margin: -1.5rem -1.5rem 1.25rem;
}

.carousel__track {
  display: flex;
  aspect-ratio: 4 / 3;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  background: var(--tin-light);
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

.carousel__photo {
  flex: 0 0 100%;
  scroll-snap-align: start;
  cursor: zoom-in;
}

.carousel__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On a computer, the arrows and the "see bigger" button fade in while the mouse is
   over the photo (or while moving through the page with the keyboard). Phones have
   no hover, so there they always show. The dots stay: they show there's more to see. */
@media (hover: hover) {
  .carousel__zoom,
  .carousel__button {
    opacity: 0;
    transition: opacity 0.2s;
  }

  .carousel:hover .carousel__zoom,
  .carousel:hover .carousel__button,
  .carousel:focus-within .carousel__zoom,
  .carousel:focus-within .carousel__button {
    opacity: 1;
  }
}

/* "See bigger" in the top right corner of the photo */
.carousel__zoom {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--ink);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
  cursor: pointer;
}

.carousel__zoom svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel__zoom:hover,
.carousel__button:hover {
  background: #fff;
}

.carousel__button {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
  cursor: pointer;
}

.carousel__button--prev { left: 0.5rem; }
.carousel__button--next { right: 0.5rem; }

.carousel__button:disabled {
  visibility: hidden;
}

.carousel__dots {
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
}

.carousel__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 0 2px rgb(0 0 0 / 0.4);
}

.carousel__dots span.is-current {
  background: #fff;
}

/* On phones, a row per cookie with the drawing on the left */
@media (max-width: 35rem) {
  .menu {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    column-gap: 1rem;
    padding: 1rem;
  }

  .item__cookie {
    width: 5rem;
    height: 5rem;
    margin: 0;
    grid-row: span 2;
  }

  .item__text p {
    margin-bottom: 0.75rem;
  }

  /* With photos, keep the full-width photo on top, like on bigger screens */
  .item.item--photo {
    display: flex;
    flex-direction: column;
  }

  /* Phone cards have 1rem padding, so the photo reaches out by that much */
  .item--photo .carousel {
    margin: -1rem -1rem 1rem;
  }
}

/* ---------- The large photo viewer ---------- */

.viewer {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.viewer::backdrop {
  background: rgb(20 14 10 / 0.9);
}

.viewer[open] {
  display: grid;
  place-items: center;
}

.viewer__figure {
  margin: 0;
  padding: 3.5rem 1rem 1rem;
  text-align: center;
}

.viewer__image {
  display: block;
  max-width: min(92vw, 1600px);
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

.viewer__caption {
  margin-top: 0.75rem;
  font-weight: 600;
}

.viewer__close,
.viewer__nav {
  position: fixed;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  line-height: 1;
  cursor: pointer;
}

.viewer__close {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.8rem;
}

.viewer__nav {
  top: 50%;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  font-size: 2rem;
}

.viewer__nav--prev { left: 1rem; }
.viewer__nav--next { right: 1rem; }

.viewer__close:hover,
.viewer__nav:hover {
  background: #fff;
}


/* ---------- Boxes ---------- */

#boxes {
  margin-bottom: 1rem;
}

.menu--boxes {
  margin-bottom: 2.5rem;
}

/* Box cards need more room than cookie cards, for the picker */
.menu.menu--boxes,
.order-layout .menu.menu--boxes {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.item__price,
.composer__add {
  white-space: nowrap;
}

.menu--boxes .empty {
  grid-column: 1 / -1;
  padding: 1rem 0;
  text-align: left;
}

/* Box cards stay stacked on phones too: the picker needs the whole width */
.item.box-card {
  display: flex;
  flex-direction: column;
}

/* A little cookie tin with the number of cookies on its label */
.box-card__tin {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 4.75rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--tin);
  box-shadow: inset 0 0.8rem 0 rgb(255 255 255 / 0.14);   /* the lid */
}

.box-card__tin span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--butter);
  color: var(--ink);
  font: 700 1.2rem var(--serif);
}

.box-card__size {
  margin: 0.2rem 0 0 !important;
  font-weight: 700;
  color: var(--tin) !important;
}

.box-card__contents {
  list-style: none;
  margin: 0.6rem 0 1.25rem;
  padding: 0;
  font-size: 0.95rem;
}

.box-card__contents li::before {
  content: "• ";
  color: var(--tin);
}

/* The fill-your-own picker */
.composer {
  margin-top: 0.75rem;
}

.composer__count {
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.composer.is-full .composer__count {
  color: #2e8b47;
}

.composer__cookies {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.composer__cookies li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.95rem;
}

.qty--small button {
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
}

.qty--small input {
  width: 2rem;
  font-size: 1rem;
}

.qty button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.composer__add {
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
}

.composer__add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.composer__added {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2e8b47;
}

.composer__added:empty {
  display: none;
}

/* "€ 2,50 each" and "In our boxes" on the cookie cards */
.item__price span {
  font: 400 0.85rem var(--sans);
  color: var(--muted);
}

.item__note {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

/* Quantity stepper */
.qty {
  display: flex;
  align-items: center;
}

.qty button {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--tin);
  border-radius: 50%;
  background: #fff;
  color: var(--tin);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.qty button[data-step="1"] {
  background: var(--tin);
  color: #fff;
}

.qty button:hover {
  background: var(--tin-dark);
  border-color: var(--tin-dark);
  color: #fff;
}

.qty input {
  width: 2.5rem;
  border: 0;
  background: transparent;
  text-align: center;
  font: 700 1.15rem var(--sans);
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty input::-webkit-inner-spin-button,
.qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* ---------- Checkout: form + summary ---------- */

/* The order page: cookies and contact form on the left, the order summary on the
   right, staying in view from the first cookie to the last field. Narrower screens
   have no room beside the cookies, so there the summary comes after the form. */
.order-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 5rem;
}

@media (min-width: 60rem) {
  .order-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  /* Slightly narrower cookie cards, so three still fit beside the summary */
  .order-layout .menu {
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  }

  .summary {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);   /* a long order scrolls inside it */
    overflow-y: auto;
  }
}

/* Phones: the bar at the bottom of the screen with the boxes and total */
.order-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--tin);
  color: #fff;
  box-shadow: 0 -4px 16px rgb(0 0 0 / 0.2);
}

.order-bar__text {
  margin: 0;
  font-size: 1.05rem;
}

.order-bar .button {
  padding: 0.65rem 1.2rem;
}

/* Keep the end of the page clear of the bar */
body.has-order-bar {
  padding-bottom: 4.5rem;
}

@media (min-width: 60rem) {
  .order-bar {
    display: none !important;
  }

  body.has-order-bar {
    padding-bottom: 0;
  }
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0;
}

legend {
  padding: 0;
  margin-bottom: 1.25rem;
}

.field-row {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 35rem) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: block;
  font-weight: 600;
  margin: 0 0 1.1rem;
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

.summary__note a {
  color: #fff;
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem var(--sans);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--tin);
  outline: none;
}

/* Pickup time buttons */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: -0.5rem 0 1.25rem;
}

.pill input {
  position: absolute;
  opacity: 0;
}

.pill span {
  display: block;
  padding: 0.65rem 1.2rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.pill input:checked + span {
  border-color: var(--tin);
  background: var(--tin);
  color: #fff;
}

.pill input:focus-visible + span {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

/* Address and postcode side by side */
@media (min-width: 35rem) {
  .field-row--address {
    grid-template-columns: 1fr 8rem;
  }
}

/* The spam-bot trap: moved off screen, never seen by people */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Cash on delivery notice */
.pay-info {
  padding: 1.1rem 1.2rem;
  border: 2px dashed var(--butter);
  border-radius: 14px;
  background: var(--butter-light);
  color: var(--muted);
}

.pay-info strong {
  display: block;
  color: var(--ink);
  font-size: 1.1rem;
}

/* The summary looks like the label on the tin */
.summary {
  background: var(--tin);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem;
}

.summary h2 {
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
}

.summary__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.summary__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgb(255 255 255 / 0.3);
}

/* The × to take a filled box out of the order */
.summary__remove {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.summary__remove:hover {
  background: var(--butter);
  color: var(--ink);
}

.summary__empty {
  margin: 0;
  color: #c9d2f0;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.25rem 0 1.5rem;
  font: 700 1.25rem var(--serif);
}

.summary__total output {
  font-size: 2.25rem;
}

.summary__note {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: #c9d2f0;
}

.error {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #fff;
  color: var(--error);
  font-weight: 600;
}


/* ---------- Confirmation (cash orders and thanks page) ---------- */

.confirmation {
  max-width: 36rem;
  padding: 4rem 0 5rem;
  text-align: center;
}

.confirmation h2 {
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  color: var(--tin);
}

.confirmation p {
  font-size: 1.1rem;
}

.confirmation__cookie {
  width: 7rem;
  height: 7rem;
  margin-bottom: 1rem;
  transform: rotate(-12deg);
}


/* Confirmation page: the order details to check */
.confirm-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1.25rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
}

.confirm-details dt {
  color: var(--muted);
  font-weight: 600;
}

.confirm-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.confirm-details__address {
  white-space: pre-line;   /* keeps the line breaks the customer typed */
}

/* On phones, each label sits above its value */
@media (max-width: 30rem) {
  .confirm-details {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .confirm-details dd {
    margin-bottom: 0.6rem;
  }
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.button--quiet {
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  font-weight: 600;
  padding: 0.5rem 1rem;
}

.button--quiet:hover {
  background: transparent;
  color: var(--ink);
}


/* ---------- Check your order ---------- */

.track-section {
  margin-bottom: 4rem;
  padding: 2rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.track-form {
  display: grid;
  gap: 0 1rem;
  align-items: end;
  text-align: left;
}

.track-form .field input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem var(--sans);
}

.track-form .field input:focus {
  border-color: var(--tin);
  outline: none;
}

.track-form .button {
  margin-bottom: 1.1rem;
}

@media (min-width: 48rem) {
  .track-section .track-form {
    grid-template-columns: 1fr 1.5fr auto;
  }
}

.confirmation .track-form {
  max-width: 24rem;
  margin: 1.5rem auto 0;
}

/* The status page: progress bar and messages */
.progress {
  list-style: none;
  display: flex;
  margin: 2rem 0;
  padding: 0;
  counter-reset: step;
}

.progress li {
  counter-increment: step;
  flex: 1;
  position: relative;
  padding-top: 2.75rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* The numbered circle */
.progress li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -1.125rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

/* The line between circles */
.progress li + li::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--line);
}

.progress li.is-done,
.progress li.is-current {
  color: var(--ink);
}

.progress li.is-done::before {
  content: "✓";
  border-color: var(--tin);
  background: var(--tin);
  color: #fff;
}

.progress li.is-current::before {
  border-color: var(--tin);
  background: var(--butter);
}

.progress li.is-done::after,
.progress li.is-current::after {
  background: var(--tin);
}

.track__notice,
.track__message {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  text-align: left;
}

.track__notice {
  background: var(--tin-light);
}

.track__message {
  border-left: 4px solid var(--butter);
  background: var(--butter-light);
}

.track__message strong {
  display: block;
  font-size: 0.85rem;
  color: #6b4d00;
}


/* ---------- Footer: the bottom of the tin ---------- */

.footer {
  position: relative;
  margin-top: 2rem;
  padding: 3rem 0;
  background: var(--tin);
  color: #dfe5f7;
}

/* Scallops pointing up */
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 16px;
  background: radial-gradient(circle at 16px 16px, var(--tin) 15px, transparent 16px) 0 0 / 32px 16px repeat-x;
}

.footer__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.footer p {
  margin: 0 0 0.35rem;
}

.footer a {
  color: #fff;
}

.footer__name {
  color: #fff;
  font: 700 1.5rem var(--serif);
}

.footer__allergens {
  font-size: 0.9rem;
  max-width: 40ch;
}


/* ---------- Thanks page ---------- */

.hero--small {
  padding: 1.5rem 0;
}

.home-link {
  color: #fff;
  font: 700 1.75rem var(--serif);
  text-decoration: none;
}


/* ==========================================================
   Order board (/admin)
   ========================================================== */

.board {
  padding: 2.5rem 0 5rem;
}

.board__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.board h1 {
  font-size: clamp(2.25rem, 6vw, 3rem);
  margin: 0;
}

.board__tools {
  display: flex;
  gap: 0.5rem;
}

/* Buttons on the board */
.board-button {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 0.95rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.board-button:hover {
  border-color: var(--tin);
}

.board-button--main {
  border-color: var(--tin);
  background: var(--tin);
  color: #fff;
}

.board-button--main:hover {
  background: var(--tin-dark);
}

.board-button--butter {
  border-color: var(--butter);
  background: var(--butter);
}

.board-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
}

/* Open/Close shop switch */
.shop-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.shop-status__text strong {
  display: block;
  font: 700 1.2rem var(--serif);
}

.shop-status__text span {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
}

.shop-status--open .shop-status__text strong::before {
  content: "● ";
  color: #2e8b47;
}

.shop-status--closed {
  border-color: var(--error);
  background: #fdf0ef;
}

.shop-status--closed .shop-status__text strong::before {
  content: "● ";
  color: var(--error);
}

.shop-status__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 22rem;
  justify-content: flex-end;
}

.shop-status__form input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  font: 400 0.95rem var(--sans);
}

.shop-status__form input:focus {
  border-color: var(--tin);
  outline: none;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--line);
}

.tabs a {
  padding: 0.75rem 1.1rem;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.tabs a[aria-selected="true"] {
  border-bottom-color: var(--tin);
  color: var(--ink);
}

.tabs span,
.count {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--tin-light);
  color: var(--tin);
  font: 700 0.85rem var(--sans);
  text-align: center;
  vertical-align: middle;
}

/* "Live" marker: the board updates by itself */
.live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.4rem;
  color: #2e8b47;
  font-weight: 700;
  font-size: 0.9rem;
}

.live::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .live::before {
    animation: live-pulse 2s ease-in-out infinite;
  }
}

@keyframes live-pulse {
  50% { opacity: 0.3; }
}

/* Shown when there are updates but Anna is typing */
.update-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--tin);
  border-radius: var(--radius);
  background: var(--tin-light);
  font-weight: 600;
}

/* Overview cards */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
}

.stats .stat--bake {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .stats {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .stats .stat--bake {
    grid-column: auto;
  }
}

.stat {
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.stat h2 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  color: var(--muted);
}

.stat__number {
  margin: 0;
  font: 700 2.5rem/1 var(--serif);
}

.stat__small {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* "To bake" is what matters most on baking day, so it gets the tin colours */
.stat--bake {
  border-color: var(--tin);
  background: var(--tin);
  color: #fff;
}

.stat--bake h2,
.stat--bake .stat__small {
  color: #c9d2f0;
}

.stat--bake ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.35rem 1rem;
  font-size: 1.1rem;
}

.stat--bake strong {
  display: inline-block;
  min-width: 2rem;
  font: 700 1.6rem var(--serif);
  color: var(--butter);
}

/* Orders, grouped per delivery time */
.delivery-group {
  margin-bottom: 3rem;
}

.delivery-group h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.order-card {
  padding: 1.25rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  scroll-margin-top: 1rem;
}

.order-card:target {
  border-color: var(--butter);
  box-shadow: 0 0 0 4px var(--butter-light);
}

.order-card--done {
  background: #fbfaf7;
}

/* Being handled right now: stands out in blue */
.order-card--handling {
  border-color: var(--tin);
  box-shadow: 0 0 0 3px var(--tin-light);
}

.order-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.order-card__head > div {
  min-width: 0;
}

.order-card h3 {
  font-size: 1.3rem;
  overflow-wrap: anywhere;
}

.order-card__meta {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.order-card__total {
  margin: 0;
  font: 700 1.4rem var(--serif);
  white-space: nowrap;
}

.order-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.badge {
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.badge--paid  { background: #d8f0dc; color: #1d5b2a; }
.badge--due   { background: var(--butter-light); color: #6b4d00; }
.badge--warn  { background: #fbe0de; color: var(--error); }
.badge--done  { background: var(--tin-light); color: var(--tin); }
.badge--muted { background: #eee; color: var(--muted); }
.badge--handling { background: var(--tin); color: #fff; }

.order-card__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.75rem 0;
  border-block: 1px dashed var(--line);
  font-size: 1.05rem;
}

.order-card__items strong {
  display: inline-block;
  min-width: 2.25rem;
  color: var(--tin);
}

.item-contents {
  display: block;
  margin: 0 0 0.3rem 2.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.item-kind {
  font-size: 0.8rem;
  color: var(--muted);
}

.order-card__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.85rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.order-card__contact dt {
  color: var(--muted);
}

.order-card__contact dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line; /* keeps line breaks in addresses */
}

.order-card__note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 4px solid var(--butter);
  background: var(--butter-light);
  font-size: 0.95rem;
  white-space: pre-line;
}

.order-card__note strong {
  display: block;
  font-size: 0.8rem;
  color: #6b4d00;
}

/* Anna's own comments on an order */
.comments {
  margin: 0 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
}

.comments h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.comments ul {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}

.comments li {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--tin-light);
  font-size: 0.95rem;
}

.comments li p {
  margin: 0;
  overflow-wrap: anywhere;
}

.comment-remove {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.comment-remove button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.comment-form {
  display: flex;
  gap: 0.4rem;
}

.comment-form input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  font: 400 0.95rem var(--sans);
}

.comment-form input:focus {
  border-color: var(--tin);
  outline: none;
}

/* The "Cash to collect" overview card links to the Cash due tab */
.stat--link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.stat--link:hover {
  border-color: var(--tin);
}

/* Folded sections: unconfirmed orders, blocked addresses */
.pending {
  margin: 1rem 0 3rem;
  padding: 1rem 1.25rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}

.pending summary {
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.pending .delivery-group {
  margin: 1rem 0 0;
}

.blocked-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.blocked-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.cash-summary {
  margin: 0 0 2rem;
  font-size: 1.2rem;
}

.cash-summary strong {
  font: 700 2rem var(--serif);
}

.order-card__erased {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Message for the customer, on each order card */
.customer-message {
  margin: 0 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
}

.customer-message label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.customer-message label span {
  font-weight: 400;
}

.customer-message__row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.customer-message textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--butter);
  border-radius: 12px;
  background: var(--butter-light);
  font: 400 0.95rem/1.4 var(--sans);
  resize: vertical;
}

.customer-message textarea:focus {
  border-color: var(--tin);
  outline: none;
}

.order-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.empty {
  padding: 3rem 0;
  color: var(--muted);
  font-size: 1.1rem;
  text-align: center;
}

/* ==========================================================
   Statistics (/admin/stats)
   ========================================================== */

.period-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.period-switch a {
  padding: 0.5rem 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.period-switch a[aria-current="page"] {
  border-color: var(--tin);
  background: var(--tin);
  color: #fff;
}

.stats-page .stats--income {
  grid-template-columns: 1fr 1fr;
  margin: 1.5rem 0 1rem;
}

@media (min-width: 48rem) {
  .stats-page .stats--income {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stats-page .stat__number {
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  white-space: nowrap;
}

.change {
  display: block;
  font-weight: 600;
}

.change--up   { color: #2e8b47; }
.change--down { color: var(--error); }

.stats-note {
  margin: 0 0 2.5rem;
  color: var(--muted);
}

.chart-card {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  min-width: 0;
}

.chart-card h2 {
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.chart-card h2 + .hbar,
.hbar + h2 {
  margin-top: 0.75rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9rem;
}

.legend span,
.swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.4rem;
  border-radius: 3px;
  vertical-align: -0.05rem;
}

/* The bar charts: one column per week or month; wide charts scroll sideways */
.chart {
  display: grid;
  grid-template-columns: repeat(var(--bars), minmax(2.75rem, 1fr));
  gap: 0.35rem;
  align-items: end;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  /* The program writes the newest bar first; right-to-left puts it on the right
     and makes a scrolling chart open on the newest bars. */
  direction: rtl;
}

.chart__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  direction: ltr;
}

.chart__value {
  height: 1.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.chart__area {
  display: flex;
  align-items: flex-end;
  height: 12rem;
  border-bottom: 2px solid var(--ink);
  /* light guide lines at every quarter */
  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%);
}

.chart__stack {
  display: flex;
  flex-direction: column-reverse;   /* the first cookie sits at the bottom */
  width: 100%;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.chart__stack span {
  display: block;
  flex-basis: 0;
  min-height: 2px;
}

.chart__label {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Per cookie table, and delivery times / weekdays side by side on wide screens */
.stats-columns {
  display: grid;
  gap: 0 1.5rem;
}

@media (min-width: 56rem) {
  .stats-columns {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-table th,
.stats-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
}

.stats-table th {
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 30rem) {
  .chart-card {
    padding: 1rem;
  }

  .stats-table th,
  .stats-table td {
    padding: 0.5rem 0.3rem;
    font-size: 0.9rem;
  }
}

.table-scroll {
  overflow-x: auto;
}

/* Horizontal bars: delivery times and weekdays */
.hbar {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.95rem;
}

.hbar__label {
  overflow-wrap: anywhere;
}

.hbar__track {
  height: 0.9rem;
  border-radius: 999px;
  background: var(--tin-light);
  overflow: hidden;
}

.hbar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tin);
}

.hbar__value {
  font-weight: 700;
  text-align: right;
}


/* ==========================================================
   Recipes (/admin/recipes, /admin/recipe)
   ========================================================== */

.new-recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.new-recipe .field {
  flex: 1 1 18rem;
  margin: 0;
}

.new-recipe input,
.recipe-form input[type="text"],
.recipe-form input[type="number"],
.recipe-form textarea,
.ingredient input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem var(--sans);
}

.recipe-form textarea {
  resize: vertical;
  line-height: 1.5;
}

.new-recipe input:focus,
.recipe-form input:focus,
.recipe-form textarea:focus,
.ingredient input:focus {
  border-color: var(--tin);
  outline: none;
}

/* The list of recipes */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.recipe-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.recipe-card:hover {
  border-color: var(--tin);
}

.recipe-card__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.recipe-card__photo {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 12px;
  object-fit: cover;
}

/* No photo yet: a plain cookie in the recipe's colours */
.recipe-card__photo--none {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 38%, var(--chip) 0 8%, transparent 9%),
    radial-gradient(circle at 64% 52%, var(--chip) 0 7%, transparent 8%),
    radial-gradient(circle at 42% 72%, var(--chip) 0 6%, transparent 7%),
    var(--dough);
}

.recipe-card__text strong {
  display: block;
  font: 700 1.15rem var(--serif);
}

.recipe-card__sub {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Selecting several recipes */
.recipes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.recipes-toolbar__status {
  font-size: 0.9rem;
  color: var(--muted);
}

.board-button--danger {
  border-color: var(--error);
  color: var(--error);
}

.board-button--danger:hover {
  background: var(--error);
  color: #fff;
}

.board-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.recipe-card__select {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--tin);
}

/* With the script, tick boxes and "Delete selected" only show after pressing "Select" */
.is-scripted:not(.is-selecting) .recipe-card__select,
.is-scripted:not(.is-selecting) #delete-selected {
  display: none;
}

.recipe-card.is-selected {
  border-color: var(--tin);
  background: var(--tin-light);
}

/* Drag handle */
.recipe-card__handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none;   /* a finger on the handle drags the card, not the page */
}

.recipe-card__handle svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.recipe-card__handle:hover {
  background: var(--tin-light);
  color: var(--tin);
}

.is-selecting .recipe-card__handle {
  display: none;
}

.recipe-card.is-dragging {
  border-color: var(--tin);
  box-shadow: 0 10px 24px rgb(31 63 154 / 0.25);
  opacity: 0.9;
  cursor: grabbing;
}

/* Boxes page */
.box-card__tin--small {
  flex: none;
  width: 4rem;
  height: 3.5rem;
  margin: 0;
}

.box-card__tin--small span {
  width: 1.9rem;
  height: 1.9rem;
  margin-top: 0.35rem;
  font-size: 0.95rem;
}

.singles-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1.25rem;
}

.singles-form .field,
.singles-form .confirm-delete {
  margin: 0;
}

.box-kind,
.box-contents {
  margin: 0 0 1.25rem;
}

.box-kind legend,
.box-contents legend {
  font: 700 1rem var(--sans);
  margin-bottom: 0.5rem;
}

.box-kind label {
  display: block;
  margin-bottom: 0.35rem;
}

.box-contents__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 28rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--line);
}

/* (Specific enough to win over the general form rule that makes inputs full width) */
.recipe-form .box-contents__row input[type="number"] {
  flex: none;
  margin-top: 0;
  width: 5rem;
  padding: 0.4rem 0.6rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  font: 400 1rem var(--sans);
}

/* Delete confirmation */
.delete-list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  line-height: 1.9;
}

.confirm-actions--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* One recipe */
.stats-page .stats--income,
.recipes-page .stats--recipe {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.recipes-page .stats--recipe {
  margin: 0 0 1.5rem;
}

.recipes-page .stat__number {
  font-size: clamp(1.4rem, 5vw, 2rem);
  white-space: nowrap;
}

.colours {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.colours legend {
  font: 700 1rem var(--sans);
  margin-bottom: 0.5rem;
}

.colours label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.colours input {
  width: 3rem;
  height: 2.25rem;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* Ingredient rows: five fields and the buttons, wrapping on small screens */
.ingredient {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 0.8fr 1.1fr auto;
  gap: 0.6rem;
  align-items: end;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--line);
}

.ingredient label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 0;
}

.ingredient input {
  margin-top: 0.25rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.95rem;
}

.ingredient__buttons {
  display: flex;
  gap: 0.35rem;
}

.ingredient__history {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.ingredient-add-title {
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
}

@media (max-width: 52rem) {
  .ingredient {
    grid-template-columns: 1fr 1fr;
  }

  .ingredient label:first-of-type,
  .ingredient__buttons {
    grid-column: 1 / -1;
  }
}

/* Photos */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.photo-grid figure {
  margin: 0;
}

.photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.photo-grid figcaption {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tin);
  text-align: center;
}

/* Hidden from the shop: faded, so it's clear at a glance */
.photo-grid .is-hidden img {
  opacity: 0.45;
}

.photo-grid .is-hidden figcaption {
  color: var(--muted);
}

.photo-grid form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-grid form .board-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.photo-upload {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: var(--tin);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.photo-upload input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.photo-upload:focus-within {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

.danger {
  border-color: #f1c4c0;
}

.confirm-delete {
  display: block;
  margin-bottom: 1rem;
}


/* Printing the board gives a clean delivery list */
@media print {
  .hero,
  .tabs,
  .shop-status,
  .update-banner,
  .period-switch,
  .board__tools,
  .order-card__actions,
  .customer-message,
  .comment-form,
  .comment-remove button {
    display: none;
  }

  .stat--bake {
    background: #fff;
    color: var(--ink);
  }

  .stat--bake strong {
    color: var(--ink);
  }

  .order-card {
    break-inside: avoid;
  }
}


/* ---------- Privacy notice ---------- */

.legal {
  max-width: 44rem;
  padding: 3rem 0 5rem;
}

.legal h1 {
  font-size: clamp(2.25rem, 6vw, 3rem);
  margin: 0 0 0.5rem;
}

.legal h2 {
  font-size: 1.5rem;
  margin: 2.25rem 0 0.5rem;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.legal th,
.legal td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal .table-scroll {
  overflow-x: auto;
}

.fill-in {
  background: var(--butter-light);
  padding: 0 0.25rem;
  border-radius: 4px;
}

.cost-note {
  margin: -0.75rem 0 1.5rem;
}


/* ==========================================================
   Stock status, sales, and a cookie's details window
   ========================================================== */

.labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0;
}

.label {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.label--out  { background: #ececec; color: #555; }
.label--soon { background: var(--tin-light); color: var(--tin); }
.label--sale { background: #fde2dd; color: var(--error); }

/* Shown, but can't be ordered right now */
.item--unavailable .carousel,
.item--unavailable .item__cookie,
.item--unavailable .box-card__tin {
  filter: grayscale(0.7);
  opacity: 0.65;
}

.item--unavailable .item__price {
  color: var(--muted);
}

/* During a sale: the normal price struck through, then the sale price */
.item__price s {
  margin-right: 0.25rem;
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 400;
}

.item__sale-price {
  color: var(--error);
}

/* A cookie's name that opens its details */
.cookie-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookie-link:hover {
  color: var(--tin);
}

.composer__cookies li.is-unavailable .cookie-link {
  color: var(--muted);
}

/* The details window */
.cookie-info {
  width: min(26rem, calc(100% - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
}

.cookie-info::backdrop {
  background: rgb(20 14 10 / 0.55);
}

.cookie-info__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--tin-light);
}

.cookie-info__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cookie-info__photo svg {
  width: 55%;
  height: 55%;
}

.cookie-info__nav,
.cookie-info__close {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

.cookie-info__close { top: 0.6rem; right: 0.6rem; }
.cookie-info__nav   { top: 50%; transform: translateY(-50%); }
.cookie-info__nav--prev { left: 0.6rem; }
.cookie-info__nav--next { right: 0.6rem; }

.cookie-info__body {
  padding: 1rem 1.25rem 1.25rem;
}

.cookie-info__body h3 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
}

.cookie-info__description {
  margin: 0.4rem 0 0.75rem;
  color: var(--muted);
}

.cookie-info__price .item__price {
  margin: 0;
  font-size: 1.2rem;
}

/* Admin: the stock status switch on recipe and box pages */
.availability {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.availability fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.availability legend {
  margin-bottom: 0.5rem;
  font: 700 1rem var(--sans);
}

/* When the stepper wraps under the price, it stays on the right */
.item__buy .qty {
  margin-left: auto;
}

/* Older browsers without the built-in dialog: the same window, as a simple overlay */
.cookie-info--overlay[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 101;
  display: block;
  margin: 0;
  transform: translate(-50%, -50%);
}

.cookie-info__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(20 14 10 / 0.55);
}