/* Rows 2.3 to 2.6: the storefront's header bar, welcome header, pages,
   footer and allergy box, and the Operator's screens for them. Colours are
   shop.css's tokens, so dark mode follows. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.site-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); margin-right: auto; }
.site-brand .store-name { font-weight: var(--weight-strong); font-size: var(--text-l); }
.site-brand .custom-logo { display: block; max-height: 72px; max-width: min(240px, 60vw); width: auto; height: auto; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: var(--weight-label); padding: var(--space-2) 0; display: inline-block; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.welcome { margin: 0 0 var(--space-6); }
.welcome-intro { text-align: center; margin-bottom: var(--space-5); }
.welcome-intro h1 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.welcome-subtitle { max-width: 1100px; margin: 0 auto; }
.welcome-columns { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.welcome-panels { display: grid; gap: var(--space-4); }
.welcome-panel, .welcome-side { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.welcome-panel > summary { cursor: pointer; padding: var(--space-4); font-weight: var(--weight-label); min-height: 48px; }
.welcome-panel-body { border-top: 1px solid var(--line); padding: var(--space-4); }
.welcome-panel-allergy { border-color: #cc0000; } /* dark-ok: the allergy warning is red in both modes */
.welcome-side { padding: var(--space-4); }
@media (min-width: 900px) { .welcome-columns { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); } }
.next-pickups { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }

.site-page { max-width: 820px; }
.site-page details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 0 0 var(--space-3); }
.site-page details > summary { cursor: pointer; padding: var(--space-3); font-weight: var(--weight-label); }
.site-page details > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
.site-page img, .welcome img, .site-footer img { max-width: 100%; height: auto; }
.contact-details p { margin: 0 0 var(--space-2); }
.contact-embed { margin-top: var(--space-5); }
.contact-embed-frame { display: block; width: 100%; height: 480px; border: 0; background: transparent; color-scheme: light dark; }
.terms-section, .terms-notice { scroll-margin-top: var(--space-4); }
.terms-section:target, .terms-notice:target { outline: 3px solid var(--brand); outline-offset: 6px; border-radius: var(--radius-control); }
.terms-notice { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent); }

.site-footer { margin-top: var(--space-6); padding: var(--space-6) var(--space-4); border-top: 1px solid var(--line); background: var(--surface); }
.site-footer-columns { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); max-width: 1200px; margin: 0 auto; }
.site-footer-column > :first-child { margin-top: 0; }
.site-footer-custom { max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .site-footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.allergy-box { border: 2px solid #cc0000; padding: var(--space-4); margin: var(--space-5) 0; border-radius: var(--radius-control); background: #fff7f7; color: #550000; } /* dark-ok: recoloured for dark below */
.allergy-box h3 { margin: 0 0 var(--space-2); }
/* Card #332: the heading is in the box's own colour. Every look colours a store's headings --sf-ink (#111), and
   Your own look its own heading colour, at a weight a class cannot beat, so it is named by its id. */
#allergy-box-title { color: inherit; }
.allergy-box p { margin: 0; font-weight: var(--weight-strong); }
/* The dark colours are for the Operator's screens. :where() keeps them below the storefront's rule after them. */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .allergy-box { background: #3a1714; color: #f3b1aa; border-color: #f3b1aa; }
}
/* Row 7.16 (card #259): the same, when Dark is chosen in the account menu. */
@media not print {
  :where(:root[data-theme="dark"]) .allergy-box { background: #3a1714; color: #f3b1aa; border-color: #f3b1aa; }
}
/* Card #332: a store page is light only (storefront-look.css), so its box stays light in every mode, rather than a
   dark red box on a white page. */
.shell-storefront .allergy-box { background: #fff7f7; color: #550000; border-color: #cc0000; } /* dark-ok: the storefront is light only */

/* The Operator's screens. */
.site-settings fieldset { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }

.site-settings .logo-preview { display: block; max-width: 180px; height: auto; background: #fff; }
.site-settings .auto-panel { border-left: 3px solid var(--brand); padding: var(--space-1) var(--space-3); }
.site-settings .auto-panel h3 { margin: 0; }
.site-settings .section-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); word-break: break-all; }
.site-settings .copy-link { min-height: var(--control-h-s); }
.site-settings .copy-status { color: var(--ok-ink); font-size: var(--text-s); }
.site-settings .locked-label { margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .12em; font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--muted); }
.site-settings .terms-locked { background: var(--accent); }
.site-settings .label-like { font-weight: var(--weight-label); margin: 0; }
.site-settings [data-site-mode-part][hidden] { display: none; }
/* Card #102: under each box of words on Header and Footer, as on the original site, one short line, "Available
   shortcodes: [next_pickup_date] [cg_fmb_signup_form]", and a "?" right after it that opens and shuts what each does
   (a <details>, as "What is counted?" on Customers). The line and the <details> run inline, so the "?" follows the last
   shortcode even where the line wraps (every Footer box, a phone), what it opens goes under both at full width, and
   the "?" never moves when it opens. Its target is 48 by 48, as a Record button's, around a small round "?", and
   stands --space-2 clear of the last shortcode, so the 3px focus ring (2px out) never covers its "]". The
   shortcode itself in the page's ink, so it stands out from the muted words as the thing to type. */
.site-settings .shortcode-hint { margin-top: var(--space-1); font-size: var(--text-s); }
.site-settings .shortcode-hint .shortcode-line { display: inline; margin: 0; }
.site-settings .shortcode-help { display: inline; }
.site-settings .shortcode-help > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px;
  margin-left: var(--space-2); vertical-align: middle; cursor: pointer; list-style: none; border-radius: var(--radius-control); }
.site-settings .shortcode-help > summary::-webkit-details-marker { display: none; }
.site-settings .shortcode-q { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem;
  border: 1px solid var(--brand); border-radius: 50%; background: var(--field); color: var(--brand);
  font-size: var(--text-s); font-weight: var(--weight-strong); line-height: 1; }
/* Open wins over hover: the same weight, and later. A tap on a phone leaves :hover on the "?", and the hover colour
   under the open one's text was 1.1:1 (light) and 1.35:1 (dark), so an open "?" vanished under a finger. */
.site-settings .shortcode-help > summary:hover .shortcode-q { background: var(--accent); }
.site-settings .shortcode-help[open] > summary .shortcode-q { background: var(--brand); color: var(--brand-ink); }
.site-settings .shortcode-help-text { display: block; max-width: 40rem; margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--brand); }
.site-settings .shortcode-help-text p { margin: 0; }
.site-settings .shortcode-help-text p + p { margin-top: var(--space-2); }
.site-settings .shortcode-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
/* Footer's boxes, one under another: each box's list ends well before the next box's name. */
.site-settings .site-box + .site-box { margin-top: var(--space-5); }
.site-settings .site-box .field-error { margin-top: var(--space-1); }

/* The formatted-text editor (Quill, site-rich-editor.js) in shop.css's colours, so dark mode follows. On any screen with one:
   My Site Settings' boxes, and a catalogue meal's descriptions (card #268). */
.rich-editor { display: grid; grid-template-columns: minmax(0, 1fr); } /* never wider than a phone at a larger text size (card #167) */
.rich-editor .ql-toolbar.ql-snow { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--surface); padding: var(--space-1); display: flex; flex-wrap: wrap; gap: 2px; } /* token-exempt: Quill's own toolbar grid */
.rich-editor .ql-toolbar.ql-snow .ql-formats { margin-right: var(--space-2); display: inline-flex; flex-wrap: wrap; gap: 2px; } /* token-exempt: Quill's own toolbar grid */
.rich-editor .ql-toolbar.ql-snow button { min-height: 36px; min-width: 36px; height: 36px; width: 36px; padding: var(--space-2); background: transparent; color: var(--ink); border-radius: var(--radius-control); font-weight: var(--weight-strong); }
.rich-editor .ql-toolbar.ql-snow button:hover, .rich-editor .ql-toolbar.ql-snow button.ql-active { background: var(--accent); color: var(--brand); }
.rich-editor .ql-snow .ql-stroke { stroke: currentColor; }
.rich-editor .ql-snow .ql-fill { fill: currentColor; }
.rich-editor .ql-snow .ql-picker { color: var(--ink); height: 36px; }
.rich-editor .ql-snow .ql-picker-label { display: flex; align-items: center; }
/* Card #335: Quill fixes the heading picker at 98 px with its arrow pinned right, so at larger text (the iPhone sheet's 34)
   "Normal" ran under the arrow. The picker takes its word's width, the arrow keeps its own room. */
.rich-editor .ql-snow .ql-picker.ql-header { width: auto; min-width: 98px; }
.rich-editor .ql-snow .ql-picker.ql-header .ql-picker-label { padding-right: var(--space-5); white-space: nowrap; }
.rich-editor .ql-snow .ql-picker-options { background: var(--surface); border-color: var(--line); }
.rich-editor .ql-container.ql-snow { border: 1px solid var(--line); border-radius: 0 0 var(--radius-control) var(--radius-control); background: var(--field); color: var(--ink); font: inherit; }
.rich-editor .ql-editor { min-height: 8em; max-height: 60vh; overflow-y: auto; line-height: 1.5; }
.rich-editor .ql-editor:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.rich-editor .ql-editor a { color: var(--brand); }
.rich-editor .ql-editor p.faq-q { font-weight: var(--weight-strong); border-left: 3px solid var(--brand); padding-left: var(--space-2); margin-top: .6em; } /* token-exempt: relative to the question's own type size */
.rich-editor .ql-editor p.faq-q::before { content: "▸ "; color: var(--brand); }
.rich-editor .ql-editor hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-3) 0; }
.rich-editor .ql-snow .ql-tooltip { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 5; }
.rich-editor .ql-snow .ql-tooltip input[type=text] { background: var(--field); color: var(--ink); border-color: var(--line); min-height: 36px; }

/* Cards #79 to #83: Add picture (site-rich-picture.js). Its words show, so "click Add picture" works by voice, and
   it and the buttons under the box are at least 48 by 48, as Record: pressed by someone who cannot aim. */
.rich-editor .ql-toolbar.ql-snow button.rich-picture-add { width: auto; height: auto; min-width: 48px; min-height: 48px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--line); font-weight: var(--weight-label); }
.rich-editor .ql-toolbar.ql-snow button.rich-picture-add svg { float: none; width: 18px; height: 18px; }
/* While a picture is on its way: still pressable (it then says what to do), so it is dimmed, never disabled. */
.rich-editor .ql-toolbar.ql-snow button.rich-picture-add[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.rich-editor .rich-picture-icon { display: inline-flex; }
.site-settings .rich-picture-ask { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg); }
.site-settings .rich-picture-ask[hidden] { display: none; }
.site-settings .rich-picture-ask .hint { margin: 0; }
.site-settings .rich-picture-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-settings .rich-picture-buttons button { min-width: 48px; min-height: 48px; }
.site-settings .rich-picture-status { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-s); }
.site-settings .rich-picture-status:empty { display: none; }
.site-settings .rich-picture-status.warn { color: var(--error-ink); font-weight: var(--weight-strong); }
.rich-editor .ql-editor img { max-width: 100%; height: auto; }

/* The picker on My Site Settings → Header (row 7.8, card #54).
   An Operator sees each look's four colours before she takes it. The swatch
   rules below the marker are written by dev/write-theme-css.php from
   lib/storefront_theme.php, so a swatch cannot lie about a look. */
.theme-group { margin: 0 0 var(--space-5); border: 0; padding: 0; }
.theme-group-name { font-weight: var(--weight-label); margin: 0 0 var(--space-2); padding: 0; }
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin: 0; }
.theme-choice { display: block; margin: 0; font-weight: 400; cursor: pointer; }
.theme-choice input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.theme-card { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--surface); }
.theme-choice input:checked + .theme-card { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.theme-choice input:focus-visible + .theme-card { outline: 3px solid var(--brand); outline-offset: 2px; }
.theme-swatch { display: flex; height: var(--control-h); border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--line); }
.theme-swatch span { flex: 1; }
.theme-swatch span:nth-child(1) { background: var(--sw-bg); }
.theme-swatch span:nth-child(2) { background: var(--sw-accent); }
.theme-swatch span:nth-child(3) { background: var(--sw-secondary); }
.theme-swatch span:nth-child(4) { background: var(--sw-primary); }
.theme-name { display: block; font-weight: var(--weight-label); margin-top: var(--space-2); }
.theme-when { display: block; color: var(--muted); font-size: var(--text-xs); }
.theme-words { display: block; color: var(--muted); font-size: var(--text-s); margin-top: var(--space-1); }
/* Row 7.17 (card #287): Your own colours' four pickers, under its card. The browser's own colour picker, 44 px tall,
   with the colour's code beside it for an Operator matching her brand's colours. */
.my-look-colours { margin-top: var(--space-3); }
.my-look-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.my-look-pick input[type="color"] { width: 6rem; height: var(--control-h); padding: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--field); cursor: pointer; }
.my-look-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-s); }

/* >>> looks: written by dev/write-theme-css.php, do not edit by hand <<< */
.theme-swatch[data-look="classic"] { --sw-bg: #ffffff; --sw-accent: #fbfaf3; --sw-secondary: #3f3f3f; --sw-primary: #111111; }
.theme-swatch[data-look="batch-and-bite"] { --sw-bg: #FFF7F5; --sw-accent: #F2C6C2; --sw-secondary: #D98C95; --sw-primary: #8E3B46; }
.theme-swatch[data-look="winter-calm"] { --sw-bg: #F7FAFB; --sw-accent: #D7E8EE; --sw-secondary: #6C8FA3; --sw-primary: #355C7D; }
.theme-swatch[data-look="valentine-warmth"] { --sw-bg: #FFF7F5; --sw-accent: #F2C6C2; --sw-secondary: #D98C95; --sw-primary: #8E3B46; }
.theme-swatch[data-look="early-spring"] { --sw-bg: #F7FAF3; --sw-accent: #D8C76B; --sw-secondary: #92B87B; --sw-primary: #4F7D58; }
.theme-swatch[data-look="spring-bloom"] { --sw-bg: #FCFAF5; --sw-accent: #E5C76B; --sw-secondary: #B89CC4; --sw-primary: #657A4E; }
.theme-swatch[data-look="garden-season"] { --sw-bg: #FFFBEF; --sw-accent: #F0C75E; --sw-secondary: #D99058; --sw-primary: #3F704D; }
.theme-swatch[data-look="early-summer"] { --sw-bg: #FAFCF5; --sw-accent: #F4C95D; --sw-secondary: #63A56D; --sw-primary: #2878A0; }
.theme-swatch[data-look="americana-summer"] { --sw-bg: #FAF7EF; --sw-accent: #E8C76A; --sw-secondary: #A94343; --sw-primary: #315A7D; }
.theme-swatch[data-look="late-summer"] { --sw-bg: #FFF9EC; --sw-accent: #E4B854; --sw-secondary: #56704B; --sw-primary: #B96D36; }
.theme-swatch[data-look="harvest"] { --sw-bg: #FCF6EA; --sw-accent: #D39B45; --sw-secondary: #687447; --sw-primary: #8A5935; }
.theme-swatch[data-look="autumn"] { --sw-bg: #FBF3E7; --sw-accent: #D7963D; --sw-secondary: #5D4935; --sw-primary: #A6532B; }
.theme-swatch[data-look="thankful"] { --sw-bg: #F9F2E7; --sw-accent: #C28A42; --sw-secondary: #7D6945; --sw-primary: #6D4935; }
.theme-swatch[data-look="christmas"] { --sw-bg: #FCF8ED; --sw-accent: #C9A44C; --sw-secondary: #8D343A; --sw-primary: #25543B; }
.theme-swatch[data-look="new-year"] { --sw-bg: #FCFCFA; --sw-accent: #D6B96C; --sw-secondary: #68758A; --sw-primary: #24344D; }
.theme-swatch[data-look="easter"] { --sw-bg: #FFFCF5; --sw-accent: #E6C66A; --sw-secondary: #8BAA78; --sw-primary: #77689A; }
.theme-swatch[data-look="independence-day"] { --sw-bg: #FCFBF7; --sw-accent: #E3D3AC; --sw-secondary: #A53E42; --sw-primary: #294D75; }
.theme-swatch[data-look="halloween"] { --sw-bg: #FFF5E7; --sw-accent: #343239; --sw-secondary: #59405F; --sw-primary: #C2672D; }
.theme-swatch[data-look="thanksgiving"] { --sw-bg: #FAF3E8; --sw-accent: #D29A52; --sw-secondary: #8B7048; --sw-primary: #7B4B31; }
.theme-swatch[data-look="christmas-night"] { --sw-bg: #F5EEDC; --sw-accent: #D1AE58; --sw-secondary: #7D3037; --sw-primary: #193E30; }
/* <<< looks end >>> */

/* Row 3.4: on a phone the Copy link button and each rich editor's toolbar buttons are the tap minimum (docs/THEMES.md). */
@media (max-width: 640px) {
  .site-settings .copy-link { min-height: var(--control-h); }
  .rich-editor .ql-snow .ql-picker { height: var(--control-h); }
  .rich-editor .ql-toolbar.ql-snow button { min-height: var(--control-h); min-width: var(--control-h); height: var(--control-h); width: var(--control-h); }
}