/* Bespoke Orders storefront (plan 091). Scoped to .bo-*; per-form tokens arrive as --bo-* inline
   custom properties and fall back to the Deluxe look. */
.bo-page { max-width: 100%; }
.bo-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bo-intro { margin: 0 0 16px; line-height: 1.55; }
.bo-note { margin: 0 0 16px; font-size: 14px; color: var(--bo-help-color, #6b7280); }
.bo-form {
  --bo-border: var(--bo-field-border, #ccc);
  --bo-focus: var(--bo-focus-color, #66afe9);
  --bo-error: var(--bo-error-color, #b42318);
  --bo-label: var(--bo-label-color, inherit);
  --bo-help: var(--bo-help-color, #6b7280);
  --bo-btn: var(--bo-button-bg, #333);
  --bo-btn-text: var(--bo-button-text, #fff);
  --bo-btn-hover: var(--bo-button-hover-bg, #333);
  --bo-btn-hover-text: var(--bo-button-hover-text, #fff);
  box-sizing: border-box; width: 100%; max-width: var(--bo-max-width, 960px); margin: 0 auto;
  padding: var(--bo-padding, 24px); border-radius: var(--bo-radius, 8px);
  border: 1px solid var(--bo-border-color, var(--bo-border)); background: var(--bo-background, #fff);
  color: var(--bo-label);
}
.bo-form--left { margin-left: 0; }
.bo-form *, .bo-form *::before, .bo-form *::after { box-sizing: border-box; }
.bo-block { margin-bottom: var(--bo-block-gap, 24px); }
.bo-cols { display: grid; gap: var(--bo-column-gap, 16px); grid-template-columns: 1fr; }
.bo-col { min-width: 0; }
.bo-field { margin-bottom: 16px; }
.bo-field[hidden], .bo-form [hidden] { display: none !important; }
.bo-label, .bo-group legend { display: block; width: auto; margin: 0 0 6px; padding: 0; border: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--bo-label); }
.bo-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.bo-icon { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; object-fit: contain; }
.bo-req { color: var(--bo-error); }
.bo-heading { margin: 8px 0 4px; font-size: 20px; line-height: 1.3; }
.bo-help { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--bo-help); }
.bo-error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--bo-error); font-weight: 600; }
.bo-alert { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--bo-error); border-radius: 6px; color: var(--bo-error); background: #fff5f4; font-size: 14px; line-height: 1.45; }
.bo-form input.bo-input, .bo-form select.bo-input, .bo-form textarea.bo-input, .bo-form select {
  display: block; width: 100%; height: auto; min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 1.3;
  color: inherit; background: var(--bo-field-bg, #fff); border: 1px solid var(--bo-border);
}
@media (max-width: 767px) { .bo-form input.bo-input, .bo-form select.bo-input, .bo-form textarea.bo-input, .bo-form select { font-size: 16px; } }
.bo-form textarea { min-height: 96px; resize: vertical; }
.bo-input:focus, .bo-form select:focus, .bo-form textarea:focus, .bo-form input[type=range]:focus-visible,
.bo-form input[type=checkbox]:focus-visible, .bo-form input[type=radio]:focus-visible, .bo-submit:focus-visible, .bo-reload:focus-visible {
  outline: 3px solid var(--bo-focus); outline-offset: 1px; border-color: var(--bo-focus);
}
.bo-input[aria-invalid=true], .bo-form select[aria-invalid=true] { border-color: var(--bo-error); }
.bo-inline { display: flex; align-items: center; gap: 8px; }
.bo-inline .bo-input { flex: 1 1 auto; }
.bo-unit { color: var(--bo-help); font-size: 14px; white-space: nowrap; }
.bo-selectwrap, .bo-selectbox { display: block; position: relative; }
.bo-selectbox select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.bo-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.bo-choice { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-weight: 400; font-size: 15px; cursor: pointer; line-height: 1.35; min-height: 32px; }
.bo-choice input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.bo-choice--image, .bo-choice--image_text { flex-direction: column; align-items: flex-start; padding: 8px; border: 2px solid var(--bo-border); border-radius: 8px; }
.bo-choice--image:has(input:checked), .bo-choice--image_text:has(input:checked) { border-color: var(--bo-focus); }
.bo-choice--image:has(input:focus-visible), .bo-choice--image_text:has(input:focus-visible) { outline: 3px solid var(--bo-focus); }
.bo-choice-img { display: block; max-width: 100%; height: auto; border-radius: 4px; object-fit: cover; }
.bo-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bo-range input[type=range] { flex: 1 1 180px; min-width: 0; min-height: 32px; }
.bo-range--dual input[type=range] { flex: 1 1 45%; }
.bo-range output { font-weight: 600; min-width: 4ch; }
.bo-color { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bo-colorinput { width: 64px !important; min-height: 44px; padding: 2px; cursor: pointer; }
.bo-colortoggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.bo-phone { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 8px; }
.bo-file { padding: 8px; }
/* The native "Choose file" text follows the browser language, not the shop's. With JS the input is visually hidden and a
   label in the shop's language takes its place; without JS the native input stays usable. */
.bo-filebtn, .bo-filestatus { display: none; }
.bo-form.is-js .bo-filepick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bo-form.is-js .bo-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.bo-form.is-js .bo-filebtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 12px 20px; cursor: pointer; }
.bo-form.is-js .bo-file:focus-visible + .bo-filebtn { outline: 2px solid var(--bo-focus, currentColor); outline-offset: 2px; }
.bo-form.is-js .bo-file[aria-invalid=true] + .bo-filebtn { border-color: var(--bo-error); }
.bo-form.is-js .bo-file[disabled] + .bo-filebtn { opacity: .6; cursor: not-allowed; }
.bo-form.is-js .bo-filestatus { display: inline; font-size: 14px; }
.bo-filelist { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; }
.bo-filelist li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 4px; }
.bo-fileremove { margin: 0; padding: 4px 10px; min-height: 32px; font: inherit; font-size: 13px; line-height: 1.2; color: var(--bo-label); background: transparent; border: 1px solid var(--bo-border); border-radius: 6px; cursor: pointer; }
.bo-fileremove:hover { border-color: var(--bo-error); color: var(--bo-error); }
.bo-fileremove:focus-visible { outline: 3px solid var(--bo-focus); outline-offset: 1px; }
.bo-filelist .is-problem { color: var(--bo-error); font-weight: 600; }
/* Date picker (replaces the native control, whose text follows the browser language). The native input stays in the DOM,
   visually hidden, and carries the ISO value that is submitted. */
.bo-date-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.bo-datewrap { position: relative; }
.bo-datebtn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; margin: 0; font: inherit; font-size: 16px; line-height: 1.3; text-align: left; color: inherit; background: var(--bo-field-bg, #fff); border: 1px solid var(--bo-border); border-radius: 6px; cursor: pointer; box-sizing: border-box; }
.bo-datebtn.is-empty .bo-datetext { color: var(--bo-help); }
.bo-datebtn:focus-visible { outline: 3px solid var(--bo-focus); outline-offset: 1px; border-color: var(--bo-focus); }
.bo-datebtn[disabled] { opacity: .6; cursor: not-allowed; }
.bo-date-native[aria-invalid=true] + .bo-datewrap .bo-datebtn { border-color: var(--bo-error); }
.bo-dateicon { flex: 0 0 auto; width: 18px; height: 16px; box-sizing: border-box; border: 2px solid currentColor; border-top-width: 5px; border-radius: 3px; opacity: .7; }
.bo-dateclear { position: absolute; top: 50%; right: 42px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; margin: 0; font-size: 22px; line-height: 1; color: var(--bo-help); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bo-dateclear:hover { color: var(--bo-label); }
.bo-dateclear:focus-visible, .bo-datenav:focus-visible, .bo-dateday:focus-visible, .bo-dateselect:focus-visible { outline: 3px solid var(--bo-focus); outline-offset: 1px; }
.bo-dateclear[hidden] { display: none; }
.bo-datepop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 320px; max-width: 100%; box-sizing: border-box; padding: 10px; background: var(--bo-field-bg, #fff); color: var(--bo-label); border: 1px solid var(--bo-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.bo-datepop[hidden] { display: none; }
.bo-datehead { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.bo-datenav { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; margin: 0; font-size: 22px; line-height: 1; color: inherit; background: transparent; border: 1px solid var(--bo-border); border-radius: 6px; cursor: pointer; }
.bo-datenav[disabled] { opacity: .35; cursor: not-allowed; }
.bo-dateselect { flex: 1 1 auto; min-width: 0; height: 36px; min-height: 36px !important; padding: 4px 6px !important; font-size: 14px !important; }
.bo-dateselect:last-of-type { flex: 0 0 76px; }
.bo-dategrid { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }
.bo-dategrid th { padding: 4px 0; font-size: 12px; font-weight: 600; text-align: center; color: var(--bo-help); text-transform: none; }
.bo-dategrid td { padding: 1px; text-align: center; border: 0; }
.bo-dateday { width: 100%; height: 38px; padding: 0; margin: 0; font: inherit; font-size: 14px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.bo-dateday:hover:not([disabled]) { border-color: var(--bo-border); background: rgba(0, 0, 0, .04); }
.bo-dateday.is-today { border-color: var(--bo-focus); }
.bo-dateday.is-selected { color: var(--bo-btn-text); background: var(--bo-btn); border-color: var(--bo-btn); font-weight: 700; }
.bo-dateday[disabled] { opacity: .3; cursor: not-allowed; }
@media (max-width: 400px) { .bo-datepop { width: 100%; } }
.bo-consent { margin: 8px 0 16px; }
.bo-captcha { margin: 0 0 16px; }
.bo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bo-form .bo-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 12px 28px; }
.bo-form[style*="--bo-button-bg"] .bo-submit { background: var(--bo-button-bg); }
.bo-form[style*="--bo-button-text"] .bo-submit { color: var(--bo-button-text); }
.bo-form[style*="--bo-button-hover-bg"] .bo-submit:hover { background: var(--bo-button-hover-bg); }
.bo-form[style*="--bo-button-hover-text"] .bo-submit:hover { color: var(--bo-button-hover-text); }
.bo-submit[disabled] { opacity: .6; cursor: progress; }
.bo-submit--icon { padding-left: 20px; padding-right: 20px; }
.bo-status { margin: 0; font-size: 14px; color: var(--bo-help); }
.bo-success { padding: 18px 20px; border: 1px solid #2f7d4f; border-radius: 8px; background: #f0faf4; color: #14532d; font-size: 16px; line-height: 1.5; }
.bo-success:focus { outline: 3px solid var(--bo-focus, #1f6feb); outline-offset: 2px; }
.bo-reload { margin-left: 8px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; }
@media (min-width: 640px) {
  .bo-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bo-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) { .bo-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .bo-form { padding: 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .bo-phone { grid-template-columns: 1fr; }
  .bo-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bo-form * { transition: none !important; animation: none !important; } }

/* Deluxe: the theme styles <label> as small text and floats a global h1 style; keep the form's own hierarchy. */
.bo-page h1 { margin-top: 0; }
.bo-form .bo-label, .bo-form .bo-group legend { font-size: 14px; font-weight: 600; }
.bo-form .bo-choice { font-size: 14px; }
.bo-form input[type=range], .bo-form input[type=checkbox], .bo-form input[type=radio] { accent-color: var(--bo-btn); }
.bo-form .bo-datebtn { font-size: 14px; }
/* The stronger field rule above must not reveal the inputs that the file button and the date picker replace. */
.bo-form input.bo-date-native, .bo-form.is-js input.bo-file { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }