/* The logo's own lettering font. It only contains A B C D E G I L N O R U, the digits 0 2 5 and a hyphen,
   so it is used for the business name in the menu bar (set in capitals) and nowhere else. */
@font-face { font-family:'Celadon'; src:url("../fonts/celadon.6ec7518d5f7a.woff2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* Brand palette (downloads/branding/colors_ref.md) */
  --title-green:#3f5f55; --text-green:#5e8e7e; --sub-text-green:#7faf9c;
  --border-gold-1:#b29f6d; --border-gold-2:#c2a869; --background-green-1:#d7eee6; --background-green-2:#eefff9; --background-green-3:#bff5de;
  --logo-background-green:#bed5cd;
  --category-background-1:#a9c8bd; --category-background-2:#8faea3; --category-background-3:#cbe1d9;
  --beige-1:#eae2d6; --beige-2:#f4efe6; --beige-3:#fcf8ef;
  /* Roles assigned so far: title, text and background */
  --title:var(--title-green); --fg:var(--text-green); --bg:var(--background-green-2);
  /* Section title cards: a tinted card with a thick gold bar down its left edge */
  --section-bg:var(--sub-text-green); --section-bar:var(--border-gold-2);
  /* The heading text on those cards is light now that the card is the stronger green */
  --section-text:var(--background-green-2);
  /* Category titles (the Extras heading on a baking day): a softer green than the page and section titles, with the
     darkest brand green for the text on it */
  --category-bg:var(--background-green-1); --category-text:var(--title-green);
  /* The outline round today's box on the calendar */
  --today-outline:var(--title-green);
  /* How far a title card sticks out past the content on each side */
  --title-overhang:.75rem;
  /* Small secondary text under a title (the pickup and order-by line on a baking day card) */
  --meta-text:var(--sub-text-green);
  /* Baking day card: the title band, and the pickup row under it (the menu stays on the plain card color) */
  --day-title-bg:var(--beige-2); --day-bg:var(--beige-3);
  /* Something that is closed or inactive: a plain neutral grey, deliberately outside the brand palette (4.6:1 for the text) */
  --disabled-bg:#efefef; --disabled-text:#6b6b6b;
  /* A baking day that is not taking orders: a light red background with a dark red text (5.5:1), used by the
     "Closed" badge, the closed cells on the calendar and the "orders are closed" label on the day page */
  --closed-bg:#f6dcdc; --closed-text:#a33;
  /* Buttons and highlights: the pale green the title cards used to have (the two swapped colors), with the darkest
     brand green for the text on it. The hover is the palest green. Solid buttons get a thin outline (see .btn). */
  --btn-bg:var(--background-green-1); --btn-bg-hover:var(--background-green-3); --btn-text:var(--title-green);
  /* Not assigned from the palette yet */
  --muted:#7a6a5a; --accent:#a8602b; --line:#e4d9c8; --card:#fefffe;   /* a cool near-white with a hint of celadon, lighter than the minty page background */
  /* Menu item hover: the menu brown, about 4% lighter */
  --accent-hover:#b86a2f;
  /* The outline of the input fields: the brand text green (3.6:1 on the card color). The browsers draw their own when none is set, and iOS draws a very pale one. */
  --field-border:var(--text-green);
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }   /* the footer stays at the bottom of short pages */
body > main { flex:1 0 auto; width:100%; }
h1, h2, h3 { color:var(--title); }
/* Title cards, for page headings (.page-title) and section headings (.section-title) alike:
   a tinted card with a thin accent bar down its left edge. */
.section-title, .page-title {
  background:var(--section-bg); border-left:.25rem solid var(--section-bar); border-radius:8px; }
/* The title cards reach a little past the content on both sides (negative side margins). The overhang must stay
   smaller than the page's side padding (1rem), or it would cause a sideways scrollbar. */
.section-title { border-radius:12px; display:block; margin:2rem calc(-1 * var(--title-overhang)) 1rem; padding:.55rem 1rem .55rem .9rem; font-size:clamp(1.15rem, 4.8vw, 1.35rem); line-height:1.3; }
.page-title { margin:0 calc(-1 * var(--title-overhang)) 1.25rem; padding:.65rem 1rem .65rem .9rem; border:1px solid var(--text-green); border-left:.25rem solid var(--section-bar); }   /* a thin border all round, the gold bar stays on the left */
h1.page-title, .page-title h1 { font-size:clamp(1.4rem, 5.6vw, 1.7rem); line-height:1.25; }
.page-title h1 { margin:0; }   /* h1.page-title is the card itself: it keeps the card margins above */
.section-title, .page-title, .page-title h1 { color:var(--section-text); }
/* A page heading with buttons: the whole row is the card, the buttons sit inside it on the right. */
.page-head.page-title, .cal-head.page-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.category-title, .sub-title { background:var(--category-bg); color:var(--category-text); border:1px solid var(--sub-text-green); border-left:.25rem solid var(--sub-text-green); box-shadow:none; }   /* after the rules it overrides */
.section-title a, .cart-day-title a, .day-link { color:inherit; text-decoration:none; }
.section-title .muted, .section-title .tag, .cart-day-title .tag { font-size:.85rem; vertical-align:middle; }
.section-title .muted { color:inherit; opacity:.85; }   /* the gray "order #…" note would clash on the green */
a { color:var(--accent); }
/* Every input field, select and text area gets the same outline, on every browser. :where() keeps this at the lowest specificity, so the rules for a
   particular field (the search bars, the quantity boxes) can still change it. */
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=submit], [type=button], [type=hidden]), select, textarea) {
  border:1px solid var(--field-border); border-radius:6px; background:var(--card); color:var(--title-green);
}
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=submit], [type=button], [type=hidden]), textarea) { -webkit-appearance:none; appearance:none; }   /* iOS adds its own inner shadow and rounding */
/* The top bar. Desktop, left to right: the name, the main links (they take the free space, which pushes what follows
   to the right), the cart, then the user menu. .site-menu is only a wrapper there (display:contents), so its two
   children are laid out by the bar itself and `order` can put the cart between them. */
.topbar { display:flex; align-items:center; gap:1.25rem; padding:.75rem 1.25rem; background:var(--card); border-bottom:1px solid var(--line); position:relative; }
.site-menu { display:contents; }
.main-nav { order:1; display:flex; gap:.3rem; align-items:center; margin-right:auto; }
.cart-link { order:2; position:relative; display:inline-flex; align-items:center; justify-content:center; color:var(--text-green); }
.user-menu { order:3; display:flex; gap:1rem; align-items:center; }
.main-nav a, .cart-link, .user-menu > a, .user-dropdown summary { padding:.35rem .7rem; border-radius:6px; text-decoration:none; transition:color .15s, background-color .15s; }
.main-nav a:hover, .main-nav a:focus-visible, .cart-link:hover, .cart-link:focus-visible, .user-menu > a:hover, .user-menu > a:focus-visible, .user-dropdown summary:hover, .user-dropdown[open] summary { background:var(--background-green-1); }
.topbar nav a:hover, .topbar nav a:focus-visible,
.topbar .user-menu > a:hover, .topbar .user-menu > a:focus-visible, .user-dropdown summary:hover { color:var(--accent-hover); }
.topbar [aria-current="page"] { font-weight:600; }
/* The user dropdown: a <details> element, so it works with the keyboard and without JavaScript */
.user-dropdown { position:relative; }
.user-dropdown summary { cursor:pointer; white-space:nowrap; list-style:none; color:var(--accent); }
.user-dropdown summary::-webkit-details-marker { display:none; }
.user-icon { display:none; width:1.4rem; height:1.4rem; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }   /* shown instead of the name on a phone */
.user-name { display:inline-block; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }   /* a very long first name is cut with … */
.user-dropdown summary::after { content:' \25BE'; text-decoration:none; display:inline-block; }
.dropdown-panel { position:absolute; right:0; top:calc(100% + .6rem); min-width:13rem; z-index:20; display:flex; flex-direction:column; padding:.35rem;
  background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 14px rgba(63,95,85,.18); }
.dropdown-panel form { margin:0; }
.dropdown-panel a, .dropdown-panel .menu-item { display:block; width:100%; padding:.5rem .75rem; border:0; border-radius:6px; background:none; font:inherit; text-align:left; text-decoration:none; color:var(--title-green); cursor:pointer; }
.dropdown-panel a:hover, .dropdown-panel a:focus-visible, .dropdown-panel .menu-item:hover, .dropdown-panel .menu-item:focus-visible { background:var(--background-green-1); }
.menu-sep { border:0; border-top:1px solid var(--line); margin:.3rem .2rem; }
/* The List | Calendar tabs at the top of the two baking day pages, full width */
.view-switch { display:flex; margin:0 0 1rem; }
.view-switch .btn, .day-checkout .btn { flex:1; text-align:center; }
.view-switch .btn { border-radius:0; }
.view-switch .btn:first-child { border-radius:6px 0 0 6px; }
.view-switch .btn:last-child { border-radius:0 6px 6px 0; }
.view-switch .btn.active { background:var(--sub-text-green); color:var(--title-green); cursor:default; }   /* the page you are on: not a link */
/* Capitals only: that is all the Celadon font has, and lowercase letters would fall back to another font.
   Weight 400 on purpose: the font has no bold, so asking for bold would make the browser fake it. */
.brand { font-family:'Celadon', Georgia, 'Times New Roman', serif; font-weight:400; font-size:1.05rem; letter-spacing:.02em; word-spacing:.15em; text-transform:uppercase; text-decoration:none; color:var(--title);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.25rem .7rem .25rem .3rem; margin-left:-.3rem; border-radius:10px; transition:background-color .15s; }
.brand-mark { display:block; width:2.5rem; height:2.5rem; border-radius:8px; }   /* the favicon's mark: the C in its wreath */
/* Like the other menu items, the mark and name get the palest green behind them on hover. The padding is taken back with a negative margin so nothing moves. */
.brand:hover, .brand:focus-visible { background:var(--background-green-1); }
@media (min-width:481px) { .brand { white-space:nowrap; flex:none; } }   /* the name stays on one line; on a small phone it may wrap */
.container { max-width:60rem; margin:0 auto; padding:1.5rem 1rem; }
.inline { display:inline; margin:0; }
.linklike { background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline; }
.btn { display:inline-block; padding:.5rem 1rem; background:var(--btn-bg); color:var(--btn-text); border:0; border-radius:6px; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .15s;
  box-shadow:inset 0 0 0 1px var(--sub-text-green); }   /* the pale button color is only 1.2:1 against the page, so it needs an edge */
.btn:hover { background:var(--btn-bg-hover); }
.btn:focus-visible { outline:2px solid var(--title-green); outline-offset:2px; }
/* The outline is an inset shadow, not a border, so outline and solid buttons are exactly the same size. */
.btn.ghost { background:transparent; box-shadow:inset 0 0 0 1px var(--text-green); }
.btn.ghost:hover { background:var(--btn-bg); }
/* Every button inside a page title card looks the same, like "Add product": the standard solid button, even when
   a template marks it as an outline (ghost) one, which would look dark and faint on the green card. */
.page-title .btn.ghost { background:var(--btn-bg); box-shadow:inset 0 0 0 1px var(--sub-text-green); }
.page-title .btn.ghost:hover { background:var(--btn-bg-hover); }
.btn.danger { background:#a33; color:#fff; box-shadow:none; }
.btn.danger:hover { background:#b84444; }
.msg { padding:.6rem 1rem; border-radius:6px; background:#e6f2e6; margin-bottom:1rem; }
.msg.error { background:#f6dcdc; }
.cal-head h1 { text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cal-dow { background:var(--card); padding:.4rem; text-align:center; font-weight:600; color:var(--muted); }
.cal-cell { background:var(--card); min-height:5.5rem; padding:.3rem; transition:box-shadow .12s, background-color .12s; }
.cal-cell.out { background:#f3eee5; color:var(--muted); }
.cal-cell.today .cal-num { background:var(--btn-bg); color:var(--btn-text); font-weight:600; box-shadow:inset 0 0 0 1px var(--sub-text-green); border-radius:50%; display:inline-block; width:1.6rem; text-align:center; }
.cal-cell.baking { background:var(--closed-bg); position:relative; }             /* a baking day that is closed: the light red of the "Closed" badge */
.cal-cell.baking.open { background:var(--background-green-2); } /* one that is taking orders */
/* Today: the whole box is outlined, not just the date number */
.cal-cell.today { box-shadow:inset 0 0 0 2px var(--today-outline); }
/* Staff: an empty day from today onward is one big "add" target. The button's ::after covers the cell, so a click
   anywhere in the cell works; its label shows on hover or keyboard focus, and always on touch screens. */
.cal-cell.can-add { position:relative; }
.cal-add { position:static; display:block; width:100%; margin-top:.4rem; padding:.2rem .4rem; font:inherit; font-size:.8rem; background:none; border:1px dashed var(--border-gold-1); border-radius:6px; color:var(--title-green); cursor:pointer; opacity:0; transition:opacity .12s; }
.cal-add::after { content:''; position:absolute; inset:0; }
.cal-cell:hover .cal-add, .cal-add:focus-visible { opacity:1; }
.cal-cell.can-add:hover { background:var(--beige-3); }
/* Hover: only the cells that do something react (a baking day opens its page, an empty day lets staff add one).
   A past or out-of-month empty day does nothing, so it stays still. The edge is the gold accent, and on today's
   cell it sits inside the dark today ring so both stay visible. */
.cal-cell.baking:hover, .cal-cell.can-add:hover { box-shadow:inset 0 0 0 2px var(--section-bar); cursor:pointer; }
.cal-cell.today.baking:hover, .cal-cell.today.can-add:hover { box-shadow:inset 0 0 0 2px var(--today-outline), inset 0 0 0 4px var(--section-bar); }
.cal-link::after { content:''; position:absolute; inset:0; }            /* the link covers the whole baking day cell */
.cal-link:focus-visible { outline:none; }
.cal-link:focus-visible::after { outline:2px solid var(--title-green); outline-offset:-2px; }
@media (hover:none) { .cal-add { opacity:1; } }
.cal-link { display:block; margin-top:.2rem; text-decoration:none; color:inherit; font-size:.85rem; }
.search-bar { margin:0 0 1rem; }
.search-bar-field { position:relative; }
.search-bar input { width:100%; box-sizing:border-box; height:40px; padding:0 2.4rem 0 .8rem; font:inherit; border:1px solid var(--field-border); border-radius:6px; background:var(--card); color:var(--title-green); }
.search-bar input::-webkit-search-cancel-button { display:none; }   /* we have our own clear button */
.search-bar-clear { position:absolute; top:0; right:0; width:40px; height:40px; border:0; background:none; font-size:1.4rem; line-height:1; color:var(--title-green); cursor:pointer; }
.search-bar-clear[hidden] { display:none; }
.search-bar-count { margin:.3rem 0 0; min-height:1.2em; font-size:.85rem; }
/* Days without the product: gone from the list; in the calendar grid the cell stays (the grid needs it) but shows only its date */
.day.no-match, .card.no-match { display:none; }
.cal-cell.baking.no-match, .cal-cell.no-match { background:var(--card); cursor:default; }
.cal-cell.baking.no-match:hover, .cal-cell.can-add.no-match:hover { box-shadow:none; }
.cal-cell.no-match .cal-link, .cal-cell.no-match .cal-add { visibility:hidden; pointer-events:none; }
.cal-label { display:block; font-weight:600; color:var(--title-green); }
.cal-count { display:block; font-size:.8rem; color:var(--muted); }
/* The tag sets its own text color: inside a title card it would otherwise inherit the heading's light text,
   which is unreadable on the tag's pale pill. */
.tag { display:inline-block; font-size:.7rem; padding:0 .4rem; border-radius:99px; background:#d9ecd0; color:var(--title-green); }
.tag.closed { background:#eee; color:var(--muted); }
.tag.closed-day { background:var(--closed-bg); color:var(--closed-text); }
/* Text for screen readers only: it takes no space and shows nothing */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; }
/* The empty card at the end of the products grid (staff only) that adds a product */
.card-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; min-height:12rem; font:inherit; font-weight:600; color:var(--title-green); background:none; border:2px dashed var(--border-gold-1); cursor:pointer; transition:background-color .15s, border-color .15s; }
.card-add-plus { font-size:3rem; line-height:1; }
.card-add:hover, .card-add:focus-visible { background:var(--background-green-1); border-color:var(--border-gold-2); }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.price { font-weight:700; }
.empty-state { text-align:center; padding:2rem 1rem; }   /* a short message and one button, like an empty bag */
.empty-state p:first-child { margin-top:0; font-size:1.1rem; }
.empty-state p:last-child { margin-bottom:0; }
.note { background:#fff8e8; padding:.6rem 1rem; border-left:4px solid var(--section-bar); }
table.list { width:100%; border-collapse:collapse; background:var(--card); }
table.list th, table.list td { text-align:left; padding:.5rem; border-bottom:1px solid var(--line); }
.form div { margin-bottom:.8rem; }
.form label { display:block; font-weight:600; }
.form input[type=text], .form input[type=url], .form input[type=email], .form input[type=number], .form input[type=date], .form input[type=time],
.form input[type=datetime-local], .form input[type=password], .form select, .form textarea { width:100%; max-width:28rem; padding:.4rem; font:inherit; }
.form .helptext { display:block; color:var(--muted); font-size:.85rem; }
.form .errorlist { color:#a33; margin:0; padding-left:1rem; }
/* Justified gallery: rows of equal height built from each photo's aspect ratio (--r), no JS. */
.jg { --row-h: clamp(100px, 32vw, 220px); display:flex; flex-wrap:wrap; gap:6px; }
.jg::after { content:''; flex-grow:1000000; }
.jg-item { position:relative; flex-grow:calc(var(--r) * 100); flex-basis:calc(var(--r) * var(--row-h)); }
.jg-item a { display:block; position:relative; }
.jg-item a::before { content:''; display:block; padding-bottom:calc(100% / var(--r)); }
.jg-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--line); }
.jg-caption { position:absolute; inset:auto 0 0 0; padding:1.6rem .8rem .5rem; color:#eee; font-size:.9rem; opacity:0; transition:opacity .15s;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.7)); }
.jg-item a:hover .jg-caption, .jg-item a:focus-visible .jg-caption { opacity:1; }
.jg-edit { position:absolute; top:.4rem; right:.4rem; font-size:.8rem; padding:.1rem .5rem; border:0; border-radius:4px; background:rgba(255,255,255,.9); cursor:pointer; }
.dropzone { border:2px dashed var(--line); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem; text-align:center; background:var(--card); cursor:pointer; }
.dropzone.highlight { border-color:var(--section-bar); background:#fff8e8; }
.dropzone p { margin:.2rem 0; }
.upload-list { list-style:none; margin:.5rem 0 0; padding:0; text-align:left; font-size:.9rem; }
.upload-list .error { color:#a33; }
.edit-preview { max-width:100%; max-height:14rem; border-radius:6px; display:block; margin-bottom:1rem; }
.tag.ordered { background:var(--title-green); color:var(--section-text); }
.cal-ordered { display:block; font-size:.8rem; font-weight:600; color:var(--title-green); }
.my-orders h2 { margin:0 0 .5rem; font-size:1.1rem; }
.my-order + .my-order { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); }
.my-order p { margin:.3rem 0; }
.my-order ul { margin:.2rem 0; padding-left:1.2rem; }
.my-order-total { margin-left:auto; font-weight:600; }
.my-order-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.in-cart { margin:.2rem 0; font-size:.9rem; color:var(--title-green); }
.add-form { display:flex; gap:.4rem; align-items:center; }
.add-form input[type=number] { width:4.5rem; padding:.25rem; font:inherit; }
.totals { margin:1rem 0 1rem auto; min-width:16rem; border-collapse:collapse; }
.totals td { padding:.25rem .5rem; }
.totals td:last-child { text-align:right; }
.totals .grand td { font-weight:700; border-top:1px solid var(--line); }
.error-text { color:#a33; font-size:.9rem; }
table.narrow { width:auto; min-width:16rem; }
tr.cancelled { opacity:.5; }
.row-actions form { display:inline; }
.row-actions { white-space:nowrap; }
.test-payment { border:2px dashed var(--section-bar); border-radius:10px; padding:.5rem 1.25rem 1rem; margin:1.5rem 0; background:#fff8e8; }
.head-actions { display:flex; align-items:center; gap:.75rem; }
.day-nav { display:flex; gap:.35rem; }
.chevron { display:block; width:1.25rem; height:1.5rem; }   /* as tall as a line of text, so the button matches the others */
/* Arrow buttons are only narrower than other buttons. Their height must come from .btn, so they line up with a
   neighbouring button (e.g. Edit on a day page): no vertical padding or line-height of their own. */
.btn.icon { padding-left:.75rem; padding-right:.75rem; }
.btn.disabled { opacity:.4; cursor:default; pointer-events:none; }
.info-card .closed-text strong { color:var(--closed-text); }   /* the "orders are closed" row inside the day's info card (5.6:1 on the beige) */
.cart-day { margin-bottom:1rem; }
.cart-day-title { margin:0 0 .75rem; padding:0 2.5rem .4rem 0;   /* the right padding leaves room for the remove-day button */
  border-bottom:1px solid var(--border-gold-2); font-size:1.3rem; color:var(--title-green); }
.cart-day .totals { margin-bottom:0; }
.inline-check { display:inline-flex; gap:.3rem; align-items:center; font-weight:400; }
tr[hidden] { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 1rem; }
.chip { display:inline-block; padding:.2rem .8rem; border:1px solid var(--line); border-radius:99px; background:var(--card); color:var(--fg); text-decoration:none; font:inherit; font-size:.9rem; cursor:pointer; }
.chip.active { background:var(--btn-bg); border-color:var(--sub-text-green); color:var(--btn-text); font-weight:600; }
.photo-picker .pp-preview { display:block; max-width:12rem; max-height:9rem; border-radius:6px; margin-bottom:.5rem; }
.photo-picker .pp-buttons { display:flex; gap:.5rem; }
.pp-panel { border:1px solid var(--line); border-radius:8px; padding:.75rem; margin-top:.6rem; background:var(--bg); }
.pp-items { display:grid; grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr)); gap:.4rem; max-height:16rem; overflow:auto; }
.pp-item { padding:0; border:2px solid transparent; border-radius:6px; background:none; cursor:pointer; }
.pp-item:hover, .pp-item:focus-visible { border-color:var(--section-bar); }
.pp-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; }
label.btn { cursor:pointer; }
.btn.small { padding:.15rem .6rem; font-size:.85rem; }
/* A button as wide as its column, e.g. under a list of cards */
.btn.block { display:block; width:100%; text-align:center; margin-top:1rem; padding:.65rem 1rem; }
.muted { color:var(--muted); font-weight:400; }
.foot { text-align:center; color:var(--muted); padding:2rem 1rem; font-size:.9rem; }
.foot .legal-links { margin:0 0 .15rem; }
.foot .legal-links a { color:inherit; text-decoration:none; padding:.1rem .5rem; border-radius:6px; transition:background-color .15s; }
.foot .legal-links a:hover, .foot .legal-links a:focus-visible { background:var(--btn-bg); color:var(--btn-text); }
.legal h2 { font-size:1.15rem; margin:1.5rem 0 .5rem; }
.legal ul { padding-left:1.25rem; }
.legal li { margin-bottom:.4rem; }
.hero { display:grid; grid-template-columns:minmax(16rem, 26rem) 1fr; gap:2rem; align-items:start; margin-bottom:2rem; }
.hero-logo { margin:0; }
.hero-logo img { display:block; width:100%; height:auto; border-radius:12px; }
.hero-about > .section-title { margin-top:0; }
/* Baking day card: a tinted title band, a line, the smaller pickup/order-by row, a line, then the menu.
   The whole card is one link to that day's ordering page. */
.day { position:relative; background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:.8rem; transition:box-shadow .15s, border-color .15s; }
.day:hover { border-color:var(--section-bar); box-shadow:0 2px 8px rgba(63,95,85,.18); }
.day-head { border-bottom:1px solid var(--section-bar); }
/* 7px = the card's 8px corner minus its 1px border, so the band follows the card's curve exactly */
.day-title { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.6rem 1rem; background:var(--day-title-bg); border-bottom:1px solid var(--section-bar); border-radius:7px 7px 0 0; }
.day h3 { margin:0; }
.day-link::after { content:''; position:absolute; inset:0; border-radius:8px; }   /* stretches the link over the whole card */
.day-link:focus-visible { outline:none; }
.day-link:focus-visible::after { outline:2px solid var(--title-green); outline-offset:2px; }
.day-edit { position:relative; z-index:1; margin-left:auto; }   /* stays clickable above the stretched link */
.day-meta { margin:0; padding:.25rem 1rem; font-size:.85rem; color:var(--meta-text); background:var(--day-bg); }
.day-body { padding:.7rem 1rem .85rem; }
.day .menu { margin:0; padding:0; list-style:none; display:grid; gap:.4rem; }
.day .menu li { display:flex; align-items:center; gap:.6rem; }
.menu-thumb { width:2.5rem; height:2.5rem; flex:none; border-radius:6px; object-fit:cover; background:var(--beige-2); }
/* Footer call to action, full width. It is not a second link: the stretched title link already covers the card,
   so a click anywhere (including here) opens the ordering page. */
.day-foot { border-top:1px solid var(--section-bar); }
.day-cta { display:block; width:100%; text-align:center; border-radius:0 0 7px 7px; padding:.65rem 1rem; box-shadow:none; }
.day:hover .day-cta:not(.closed) { background:var(--btn-bg-hover); }
.day-cta.closed { background:var(--disabled-bg); color:var(--disabled-text); }
.card.inactive { opacity:.6; }
.card h3 { margin:.5rem 0 .2rem; }
.card-photo { display:block; cursor:zoom-in; }
/* Staff: the whole card opens the edit window (a button stretched over the card); the photo stays clickable above it for the zoom */
.card.editable { position:relative; transition:box-shadow .12s; }
.card-edit { position:absolute; inset:0; width:100%; padding:0; border:0; border-radius:8px; background:none; cursor:pointer; }   /* out of the flow: it adds no height */
.card-edit:focus-visible { outline:2px solid var(--title-green); outline-offset:-2px; }
.card.editable:hover { box-shadow:inset 0 0 0 2px var(--section-bar); }
.card.editable .card-photo { position:relative; z-index:1; }
/* Info card: the beige palette colors, with the dark title green for the text so it stays readable */
.info-card { background:var(--beige-2); border:1px solid var(--beige-1); border-radius:8px; padding:.8rem 1rem; margin:0 0 1.25rem; color:var(--title-green); }
.info-card p { margin:0 0 .5rem; }
.info-card p:last-child { margin-bottom:0; }
.cal-month { display:none; font-size:.7rem; color:var(--muted); }
dialog { border:0; border-radius:10px; padding:1.25rem; max-width:44rem; width:calc(100% - 2rem); max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.45); }
#confirm-dialog { max-width:26rem; }
#confirm-dialog p { margin:0; font-size:1.05rem; }
.actions { display:flex; gap:.6rem; margin-top:1rem; }
/* In a dialog the buttons stay at the bottom edge while a long form scrolls (flush with the edges, over the padding) */
dialog .actions .btn { flex:1 1 9rem; text-align:center; }   /* the buttons share the width of the dialog */
dialog .actions { position:sticky; bottom:-1.25rem; margin:1rem -1.25rem -1.25rem; padding:.75rem 1.25rem; background:var(--card); border-top:1px solid var(--line); }
.form input[type=checkbox] { width:auto; }
/* Phones and tablets: two rows. The name and the cart, then the links with the user menu at the right end, under a thin line.
   .site-menu stays a wrapper (display:contents). The name takes the whole first row but the cart (3.6rem), so what is on the
   second row, signed in or not, cannot change how the first one wraps; the links then do not fit beside it and go down. */
@media (max-width:900px) {
  .topbar { flex-wrap:wrap; gap:.2rem 0; padding:.6rem .75rem; }
  .brand { flex:1 1 calc(100% - 3.6rem); min-width:0; gap:.45rem; margin:0; padding:.2rem .5rem .2rem .25rem; margin-left:-.25rem; white-space:nowrap; font-size:min(1.05rem, 3.7vw); }   /* the normal size from about 450px up, smaller on a narrower screen, always on one line */
  .brand-mark { width:2rem; height:2rem; border-radius:6px; }
  .cart-link { order:1; }
  .main-nav { order:2; flex:1 1 auto; flex-wrap:wrap; align-items:flex-start; gap:0; margin:0; }
  .user-menu { order:3; align-self:flex-start; margin-left:auto; gap:0; }   /* always at the right edge, so its dropdown (anchored on its right) stays on screen */
  .user-menu:not(:has(.user-dropdown))::before { content:''; align-self:center; width:1px; height:1em; margin-right:.3rem; background:var(--text-green); opacity:.3; }   /* a thin bar between the links and Sign in, outside the link so the hover does not cover it */
  .main-nav, .user-menu { border-top:1px solid var(--line); padding-top:.2rem; }
  .main-nav a, .user-menu > a, .user-dropdown summary { display:inline-block; padding:.35rem .5rem; }
}
/* Every grid of cards on a phone: two side by side (a card is 14rem wide at least, which is a whole phone) */
@media (max-width:600px) {
  .cards { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
  .cards > .card { padding:.6rem; }
  .cards h3 { font-size:1rem; }
  .cards p { font-size:.9rem; margin:.3rem 0; }
  /* The quantity and the button of a baking day card do not fit side by side in a half-width card: one above the other */
  .cards .add-form { flex-direction:column; align-items:stretch; gap:.35rem; }
  .cards .add-form input[type=number] { width:100%; box-sizing:border-box; }
  .cards .add-form .btn { text-align:center; }
}
/* Small phones, signed in: an account icon instead of the first name, so staff (four links) still fit on one row. The name stays for screen readers. */
@media (max-width:600px) {
  .user-icon { display:inline-block; }
  .user-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:700px) {
  :root { --title-overhang:.5rem; }   /* less room at the screen edge on phones */
  .hero { grid-template-columns:1fr; gap:1.25rem; }
  .hero-logo { width:min(15rem, 60%); margin:0 auto; }   /* stacked above the text, the logo is no longer the width of the whole screen */
  /* The month grid stays on a phone, compact: the day number and the cell color (taking orders / closed), tap to open. */
  .cal-grid { font-size:.8rem; }
  .cal-dow { padding:.25rem 0; font-size:.7rem; }
  .cal-cell { min-height:4.4rem; padding:.2rem; overflow:hidden; }
  .cal-cell.today .cal-num { width:1.4rem; }
  .cal-count { display:none; }
  .cal-label { font-size:.62rem; line-height:1.15; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .cal-ordered { font-size:.7rem; }
  .cal-add { font-size:0; padding:.1rem 0; text-align:center; }
  .cal-add::before { content:'+'; font-size:1rem; line-height:1; }
}

/* The day cards of the cart, payment and order pages share column widths, so the columns line up from card to card. */
.cart-table, .receipt-table { table-layout:fixed; }
.cart-table th:nth-child(2), .cart-table th:nth-child(4) { width:5.5rem; }
.cart-table th:nth-child(3) { width:6.5rem; }
.cart-table th:nth-child(5) { width:3rem; }
.cart-update[hidden] { display:none; }   /* .btn sets a display, which would show the button hidden by the script */
.line-remove { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0; border:0; border-radius:6px; background:transparent; box-shadow:inset 0 0 0 1px #d9a3a3; color:var(--closed-text); cursor:pointer; }
.line-remove:hover, .line-remove:focus-visible { background:var(--closed-bg); }
.receipt-table td:last-child { width:6rem; text-align:right; }
.line-product { display:flex; align-items:center; gap:.6rem; }
.card .line-thumb { width:3.25rem; height:3.25rem; aspect-ratio:1; flex:none; border-radius:6px; }
.amount-due { margin-bottom:1rem; }
.amount-due-title { margin-bottom:.4rem; }
.amount-due-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.amount-due-total { font-size:1.6rem; line-height:1.2; }
.card.cart-day { position:relative; }
.cart-day-remove { position:absolute; top:.6rem; right:.6rem; margin:0; }
.cart-day-remove button { width:2rem; height:2rem; padding:0; border:0; border-radius:50%; background:none; font:inherit; font-size:1.5rem; line-height:1; color:var(--title-green); cursor:pointer; }
.cart-day-remove button:hover, .cart-day-remove button:focus-visible { background:var(--background-green-1); }
.cart-actions { display:flex; flex-direction:column; gap:.75rem; }
.cart-actions-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
.cart-actions-row > * { margin:0; }
.cart-actions-row .btn { display:block; width:100%; text-align:center; }
.cart-checkout { display:block; text-align:center; }
.extras-head th { color:var(--title-green); }
.extras-note td { font-size:.95rem; }
.extra-check { display:flex; align-items:flex-start; gap:.6rem; margin:.4rem 0; }
.note-card { margin-bottom:1rem; }
.price-history { margin:.8rem 0; }
.price-history summary { cursor:pointer; font-weight:600; }
.price-history ul { margin:.4rem 0 0; padding-left:1.2rem; }
.day-note { margin:1rem 0; }
.day-note textarea { width:100%; margin:.3rem 0; }
/* On the baking day page the cards of a row line up: the description takes the free space, and the price, the
   quantity and the button sit at the bottom of every card. */
#day-items .card { display:flex; flex-direction:column; }
#day-items .card .card-foot { margin-top:auto; }
#day-items .card .in-cart { min-height:1.4em; }
.note.day-notes { background:var(--card); }   /* the baker's notes for the day, on the baking day page */
/* The progress through the order (cart, details, payment), above the page title. */
.steps { margin:0 0 .9rem; }
.steps ol { display:flex; justify-content:center; gap:1.4rem; margin:0; padding:0; list-style:none; flex-wrap:wrap; }
.steps li { position:relative; display:flex; align-items:center; gap:.4rem; padding:.2rem .7rem .2rem .3rem; border-radius:999px; color:var(--text-green); font-weight:600; }
.steps li + li::before { content:"\203A"; position:absolute; left:-.95rem; top:50%; transform:translateY(-52%); color:var(--sub-text-green); }   /* the separator sits outside the pill */
.steps .step-num { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%; border:1px solid var(--sub-text-green); font-size:.85rem; }
.steps .current { background:var(--btn-bg); color:var(--title-green); box-shadow:inset 0 0 0 1px var(--sub-text-green); }
.steps .current .step-num { background:var(--title-green); border-color:var(--title-green); color:var(--background-green-2); }
.steps .done .step-num { background:var(--sub-text-green); border-color:var(--sub-text-green); color:var(--title-green); }
.steps .todo { opacity:.75; }
.checkout-form input[type=text], .checkout-form textarea { max-width:none; }
.receipt-head { margin-bottom:1rem; }
.receipt-head p { margin:0 0 .6rem; }
.receipt-head > :last-child { margin-bottom:0; }
.ingredient-totals { margin:1rem 0; }
.ingredient-totals h3 { margin:0 0 .5rem; }
.ingredient-totals .amount { text-align:right; white-space:nowrap; }
/* The Kitchen page: the day, with the previous and next day that has orders on each side */
.day-switcher { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0; padding-top:.4rem; padding-bottom:.4rem; }
.day-switcher-date { flex:1; margin:0; text-align:center; font-size:1.35rem; font-weight:600; }
.production td { padding:.9rem .6rem; vertical-align:top; }
.production .qty { font-size:1.2rem; font-weight:700; white-space:nowrap; color:var(--title-green); margin-right:.2rem; }
.production .product { width:45%; font-size:1.05rem; }
.production .needs div { padding:.1rem 0; }
.production .extra td { padding-top:.6rem; padding-bottom:.6rem; }
.production .extra .qty { font-size:1rem; }
.paid-total { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:1rem 0; }
.verify-notice { margin:0 0 1rem; }
.verify-notice p { margin:0 0 .6rem; }
.verify-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.verify-actions form { margin:0; }
.verify-ok { margin:0 0 1rem; }
/* The profile: a list of rows (label, value, Edit button) */
.profile-row { display:grid; grid-template-columns:10rem 1fr auto; gap:1rem; align-items:start; padding:.9rem 0; border-bottom:1px solid var(--line); }
.profile-row:first-child { padding-top:0; }
.profile-row:last-child { padding-bottom:0; border-bottom:0; }
.profile-label { font-weight:600; color:var(--title-green); }
.profile-value { overflow-wrap:anywhere; }
.profile-value p { margin:.3rem 0 0; }
.profile-value .tag { margin-left:.4rem; vertical-align:middle; }
.profile-value .verify-actions { margin-top:.5rem; }
@media (max-width:600px) { .profile-row { grid-template-columns:1fr auto; } .profile-label { grid-column:1 / -1; } }
/* The eye button on a password field (js/password_toggle.js) */
.password-field { position:relative; display:block; max-width:28rem; }
.password-field input { padding-right:2.6rem; }
.password-eye { position:absolute; top:50%; right:.3rem; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; padding:0; border:0; border-radius:6px; background:none; color:var(--text-green); cursor:pointer; }
.password-eye:hover, .password-eye:focus-visible { background:var(--background-green-1); color:var(--title-green); }
/* The bag in the menu bar: the icon takes the text colour, the count sits on the body of the bag */
.topbar .cart-link:hover, .topbar .cart-link:focus-visible { color:var(--title-green); }
.bag-icon { display:block; width:2.1rem; height:2.1rem; }
.bag-count { position:absolute; left:50%; top:56%; transform:translate(-50%, -50%); font-size:.75rem; font-weight:800; line-height:1; color:var(--title-green); }
.production .needs, .ingredient-totals td { color:var(--muted); }   /* the ingredients, in the same gray as "No recipe yet" */
.hidden-orders-note { display:flex; align-items:center; gap:1rem; margin:.6rem 0 0; flex-wrap:wrap; }
.refund-note { color:var(--closed-text); }
/* Login, sign up and password reset: a narrow card in the middle of the page. */
.auth-card { max-width:26rem; margin:1.5rem auto 1rem; }
.auth-card .form input[type=text], .auth-card .form input[type=email], .auth-card .form input[type=password], .auth-card .form .password-field { max-width:none; }
.auth-card .form > :last-child, .auth-card form { margin-bottom:0; }
.auth-card p:first-child { margin-top:0; }
.auth-links { text-align:center; margin:0 0 1rem; }
.guest-note { margin:0 0 1rem; }
.guest-note p { margin:0; }
.preview-list { margin:0; padding-left:1.2rem; }
.preview-list li { padding:.25rem 0; }

.profile-card + .profile-card { margin-top:1.25rem; }
#card-container { min-height:90px; margin:.5rem 0 1rem; }
.form-error { color:#a33; margin:.5rem 0; }
.saved-cards { display:grid; gap:.4rem; margin:.5rem 0 1rem; }
.saved-card, .save-card label { display:flex; gap:.5rem; align-items:center; cursor:pointer; }
.save-card { margin:0 0 1rem; }
.save-card p { margin:.2rem 0 0 1.6rem; font-size:.9rem; }
.square-note { text-align:center; font-size:.9rem; margin:.75rem 0 0; }
/* Apple Pay and Google Pay: Square draws the Google button, the Apple one is the browser's own button style */
.square-pay .card { margin-bottom:1rem; }
.wallet-button { display:block; width:100%; height:48px; margin:0 0 .6rem; }
.wallet-button[hidden] { display:none; }
.apple-pay-button { -webkit-appearance:-apple-pay-button; appearance:-apple-pay-button; -apple-pay-button-type:pay; -apple-pay-button-style:black; border:0; border-radius:6px; cursor:pointer; }
.bag-dot { position:absolute; top:-2px; right:-2px; width:.7rem; height:.7rem; border-radius:50%; background:#c0392b; box-shadow:0 0 0 2px var(--bg, #fff); }
.waiting-order { margin-bottom:1rem; }
.waiting-order .actions form { margin:0; }
.edit-bag { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 .5rem; }
.edit-bag form { margin:0; }
.day-checkout { display:flex; gap:.75rem; margin:1.5rem 0 .5rem; }
.btn.soft-danger { background:var(--closed-bg); color:var(--closed-text); box-shadow:inset 0 0 0 1px #d9a3a3; }
.btn.soft-danger:hover { background:#f0c8c8; }
.btn.ghost-danger { background:transparent; color:var(--closed-text); box-shadow:inset 0 0 0 1px #d9a3a3; }
.btn.ghost-danger:hover { background:var(--closed-bg); }
.foot .social { margin:0 0 1rem; }
.foot .social a { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:6px; background:var(--btn-bg); color:var(--btn-text); font-weight:600; line-height:1.2; text-decoration:none; transition:background-color .15s; }
.foot .social a:hover, .foot .social a:focus-visible { background:var(--btn-bg-hover); }
.foot .social img { width:1.4rem; height:1.4rem; }
.preset-picker { margin:0 0 1rem; }
.preset-picker label { display:block; font-weight:600; margin-bottom:.25rem; }
.preset-picker select { width:100%; max-width:28rem; padding:.4rem; font:inherit; }
.copy-date { margin:.3rem 0; }
.totals.refunds { margin-top:.5rem; }
.totals.refunds td:first-child { text-align:left; }
.order-search { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; }
.order-search input[type=search] { flex:1 1 18rem; padding:.45rem .6rem; font:inherit; border:1px solid var(--field-border); border-radius:6px; background:var(--card); color:var(--title-green); }
.order-search select { padding:.45rem .5rem; font:inherit; }
.pager { display:flex; gap:1rem; align-items:center; justify-content:center; margin:1rem 0 0; }

/* Maintenance mode: the reminder staff see on every page, and the page customers see */
.maintenance-bar { background:#b3261e; color:#fff; padding:.5rem 1.25rem; text-align:center; font-size:.95rem; }
.maintenance-bar button { background:none; border:0; padding:0; margin-left:.5rem; color:#fff; font:inherit; text-decoration:underline; cursor:pointer; }
.maintenance-page { text-align:center; padding-top:3rem; }
.maintenance-logo { display:block; width:min(100%, 360px); height:auto; margin:0 auto 1.5rem; border-radius:12px; }

/* Settings dialog: one card per setting */
.settings-form .setting-card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.85rem 1rem; margin-bottom:.75rem; }
.settings-form .setting-label { display:block; font-weight:600; color:var(--title-green); margin-bottom:.35rem; }
.settings-form .setting-check { display:flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--title-green); }
.settings-form .setting-help { margin:.4rem 0 0; font-size:.9rem; }
.settings-form .setting-card input[type="text"], .settings-form .setting-card input[type="url"], .settings-form .setting-card input[type="email"], .settings-form .setting-card input[type="number"],
.settings-form .setting-card textarea { width:100%; max-width:none; box-sizing:border-box; }
.settings-form .setting-sub { margin-top:.9rem; }
.settings-version { margin:1rem 0 0; font-size:.85rem; text-align:center; }

/* Staff-only Square ids on the order page */
.square-info summary { cursor:pointer; font-weight:600; color:var(--title-green); }
.square-info table { margin-top:.6rem; }
.square-info th { text-align:left; font-weight:600; vertical-align:top; padding-right:1rem; }
.square-info code { overflow-wrap:anywhere; user-select:all; }
/* A baking day with a product photo: the photo fills the cell, the date sits in a badge, the status is the outline */
.cal-cell.has-photo { display:flex; flex-direction:column; isolation:isolate; padding:0; background:var(--card); }
.cal-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.cal-cell.has-photo .cal-num { position:absolute; top:.25rem; left:.25rem; min-width:1.6rem; box-sizing:border-box; padding:0 .3rem; border-radius:999px; text-align:center; background:rgba(255,255,255,.88); color:var(--title-green); font-weight:600; }
.cal-cell.has-photo.today .cal-num { display:block; width:auto; border-radius:999px; }
.cal-cell.has-photo .cal-link { margin-top:auto; padding:1rem .35rem .3rem; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.cal-cell.has-photo .cal-label, .cal-cell.has-photo .cal-count, .cal-cell.has-photo .cal-ordered { color:#fff; }
.cal-cell.has-photo.baking { outline:3px solid #d9a3a3; outline-offset:-3px; }            /* closed */
.cal-cell.has-photo.baking .cal-photo { filter:grayscale(.6) brightness(.85); }
.cal-cell.has-photo.baking.open { outline-color:var(--section-bar); }
.cal-cell.has-photo.baking.open .cal-photo { filter:none; }
.cal-cell.has-photo.no-match .cal-photo { display:none; }
.cal-cell.has-photo.no-match .cal-num { background:none; }
@media (max-width:700px) {
  .cal-cell.has-photo .cal-num { top:.15rem; left:.15rem; min-width:1.3rem; padding:0 .2rem; font-size:.75rem; }
  .cal-cell.has-photo .cal-label { display:none; }   /* a phone cell is too small for text on the photo */
}
/* The bag on a phone: the five columns do not fit, so each line becomes two rows: the item and
   Remove on top, then the quantity, "× price each" and the total, which reads as a sum. Remove sits right above the total. */
@media (max-width:650px) {
  .card .line-thumb { width:2.25rem; height:2.25rem; border-radius:5px; }   /* smaller than the 3.25rem of a desktop */
  .line-product { gap:.5rem; }
  .cart-table, .cart-table tbody { display:block; }
  .cart-table tbody > tr:first-child { display:none; }   /* the column titles */
  .cart-table tr { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"item item remove" "qty price total"; gap:.4rem .6rem; align-items:center; padding:.6rem .5rem; border-bottom:1px solid var(--line); }
  table.list.cart-table td, table.list.cart-table th { display:block; padding:0; border:0; width:auto; }   /* more specific than `table.list td`, which gives each cell its own bottom line */
  .cart-table td:nth-child(1) { grid-area:item; font-weight:600; }
  .cart-table td:nth-child(2) { grid-area:price; }
  .cart-table td:nth-child(2)::before { content:'\00d7\00a0'; color:var(--muted); }
  .cart-table td:nth-child(2)::after { content:' each'; color:var(--muted); font-size:.85rem; }
  .cart-table td:nth-child(3) { grid-area:qty; }
  .cart-table td:nth-child(4) { grid-area:total; justify-self:end; font-weight:600; }
  .cart-table td:nth-child(5) { grid-area:remove; justify-self:end; }
  .cart-table tr.extras-head, .cart-table tr.extras-note { display:block; }
  .cart-table tr.extras-head th { display:block; }
}