:root {
  --color-background: #fbf8ef;
  --color-surface: #f1ecdc;
  --color-text: #1c2a21;
  --color-text-muted: #4a5a50;
  --color-primary: #1f5a3a;
  --color-on-primary: #ffffff;
  --color-border: #c9c3ac;
  --font-heading: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --heading-case: none;
}

:root {
  --measure-space-none: 0px;
  --measure-space-step-1: 4px;
  --measure-space-step-2: 8px;
  --measure-space-step-3: 12px;
  --measure-space-step-4: 16px;
  --measure-space-step-5: 24px;
  --measure-space-step-6: 32px;
  --measure-space-step-7: 48px;
  --measure-text-size-smallest: 11px;
  --measure-text-size-small: 12px;
  --measure-text-size-button: 13px;
  --measure-text-size-normal: 14px;
  --measure-text-size-large: 16px;
  --measure-text-size-larger: 18px;
  --measure-text-size-title: 22px;
  --measure-text-size-display: 32px;
  --measure-letter-gap-none: 0em;
  --measure-letter-gap-label: 0.12em;
  --measure-letter-gap-button: 0.2em;
  --measure-line-height-tight: 1.2;
  --measure-line-height-body: 1.5;
  --measure-weight-light: 300;
  --measure-weight-regular: 400;
  --measure-weight-medium: 500;
  --measure-weight-bold: 600;
  --measure-tap-minimum: 44px;
  --measure-height-row: 44px;
  --measure-height-chip: 44px;
  --measure-height-button: 48px;
  --measure-height-field: 48px;
  --measure-height-header: 56px;
  --measure-height-field-area: 96px;
  --measure-icon-small: 18px;
  --measure-icon-medium: 24px;
  --measure-radius-none: 0px;
  --measure-radius-small: 8px;
  --measure-radius-box: 12px;
  --measure-radius-pill: 999px;
  --measure-border-thin: 1px;
  --measure-border-strong: 2px;
  --measure-opacity-disabled: 0.5;
  --measure-opacity-pressed: 0.7;
  --measure-opacity-full: 1;
  --measure-layer-base: 0;
  --measure-layer-raised: 10;
  --measure-layer-sticky: 20;
  --measure-layer-drawer: 30;
  --measure-layer-overlay: 40;
  --measure-layer-dialog: 50;
  --measure-layer-toast: 60;
  --measure-duration-fast: 200ms;
  --measure-duration-page: 300ms;
  --measure-duration-slide: 1600ms;
  --measure-duration-hold: 5000ms;
  --measure-curve-standard: cubic-bezier(0.2, 0, 0, 1);
  --measure-fraction-half: 50%;
  --measure-fraction-full: 100%;
  --measure-phone-small: 360px;
  --measure-phone-middle: 390px;
  --measure-phone-large: 430px;
  --measure-grid-product-columns: 2;
  --measure-layout-gutter: 16px;
  --measure-layout-thumbnail: 88px;
  --measure-layout-max-width: 480px;
  --measure-ratio-product-image: 3 / 4;
  --measure-ratio-front-image: 9 / 16;
  --measure-ratio-video: 3 / 4;
}

/* Every part's look. Sizes come only from --measure-*, colours only from the shop's --color-* and --part-*. */

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--measure-text-size-normal);
  font-weight: var(--measure-weight-regular);
  line-height: var(--measure-line-height-body);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

h1, h2, h3, p, dl, dd, fieldset { margin: 0; padding: 0; border: 0; }
img, video, svg { display: block; max-width: var(--measure-fraction-full); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, input:disabled, textarea:disabled { cursor: default; }
[hidden] { display: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
[data-state="focus"] {
  outline: var(--measure-border-strong) solid var(--color-text);
  outline-offset: var(--measure-border-strong);
}

.fwl-icon { width: var(--measure-icon-medium); height: var(--measure-icon-medium); fill: none; stroke: currentColor; stroke-width: var(--measure-border-strong); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fwl-icon-small { width: var(--measure-icon-small); height: var(--measure-icon-small); }

.fwl-page { width: var(--measure-fraction-full); max-width: var(--measure-layout-max-width); margin-inline: auto; padding-inline: var(--measure-layout-gutter); padding-block: var(--measure-space-step-4); display: flex; flex-direction: column; gap: var(--measure-space-step-4); background: var(--color-background); }
/* Inside a part's page every word sits on that part's own checked pair of colours, not the shop's. */
.fwl-page-part { --color-background: var(--part-page); --color-surface: var(--part-page); --color-text: var(--part-accent); --color-text-muted: var(--part-accent); background: var(--part-page); color: var(--part-accent); }

.fwl-icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--measure-tap-minimum); height: var(--measure-tap-minimum); border-radius: var(--measure-radius-pill); color: var(--color-text); transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-icon-button:active, .fwl-icon-button[data-state="pressed"] { opacity: var(--measure-opacity-pressed); background: var(--color-surface); }
.fwl-icon-button:disabled { opacity: var(--measure-opacity-disabled); }
.fwl-icon-button-clear { color: var(--part-name); background: var(--part-main); }
.fwl-count { position: absolute; top: 0; right: 0; min-width: var(--measure-icon-small); height: var(--measure-icon-small); padding-inline: var(--measure-space-step-1); display: flex; align-items: center; justify-content: center; border-radius: var(--measure-radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--measure-text-size-smallest); line-height: var(--measure-line-height-tight); }

.fwl-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--measure-space-step-2); max-width: var(--measure-fraction-full); min-height: var(--measure-height-button); padding: var(--measure-space-step-2) var(--measure-space-step-5); border: var(--measure-border-thin) solid transparent; border-radius: var(--measure-radius-box); font-size: var(--measure-text-size-button); font-weight: var(--measure-weight-medium); letter-spacing: var(--measure-letter-gap-none); line-height: var(--measure-line-height-tight); text-align: center; transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-button-solid { background: var(--color-primary); color: var(--color-on-primary); }
.fwl-button-framed { border-color: var(--color-text); color: var(--color-text); }
.fwl-button-quiet { color: var(--color-text); text-decoration: underline; }
.fwl-button-part { background: var(--part-name); color: var(--part-main); }
.fwl-button-wide { width: var(--measure-fraction-full); }
.fwl-button[aria-pressed="true"] { background: var(--color-text); color: var(--color-background); border-color: var(--color-text); }
.fwl-button:active, .fwl-button[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }
.fwl-button:disabled { opacity: var(--measure-opacity-disabled); }

.fwl-spinner { width: var(--measure-icon-small); height: var(--measure-icon-small); flex: none; border: var(--measure-border-strong) solid currentColor; border-radius: var(--measure-radius-pill); animation: fwl-breathe var(--measure-duration-page) var(--measure-curve-standard) infinite alternate; }

.fwl-heading { display: flex; flex-direction: column; gap: var(--measure-space-step-1); }
.fwl-heading-words { font-family: var(--font-heading); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }
.fwl-heading-display { font-size: var(--measure-text-size-display); }
.fwl-heading-title { font-size: var(--measure-text-size-title); }
.fwl-heading-note { color: var(--color-text-muted); font-size: var(--measure-text-size-small); }

.fwl-logo { display: inline-flex; align-items: center; min-width: var(--measure-tap-minimum); min-height: var(--measure-tap-minimum); max-width: var(--measure-fraction-full); }
.fwl-logo-image { height: var(--measure-tap-minimum); width: auto; }
.fwl-logo-name { font-family: var(--font-heading); font-size: var(--measure-text-size-larger); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }

.fwl-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--measure-space-step-2); min-height: var(--measure-height-header); padding-inline: var(--measure-space-step-1); background: var(--color-background); color: var(--color-text); }
.fwl-bar-clear { background: var(--part-main); color: var(--part-name); }
.fwl-bar-back { display: inline-flex; align-items: center; gap: var(--measure-space-step-1); min-width: var(--measure-tap-minimum); min-height: var(--measure-tap-minimum); }
.fwl-bar-back-words { font-size: var(--measure-text-size-button); line-height: var(--measure-line-height-tight); }
.fwl-bar-space { flex: auto; }
.fwl-bar-tools { display: flex; flex: none; }

.fwl-chips { display: flex; gap: var(--measure-space-step-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--measure-border-strong); }
.fwl-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; max-width: var(--measure-layout-max-width); min-height: var(--measure-height-chip); min-width: var(--measure-tap-minimum); padding: var(--measure-space-step-1) var(--measure-space-step-4); border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-pill); font-size: var(--measure-text-size-button); line-height: var(--measure-line-height-tight); transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-chip[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.fwl-chip:active, .fwl-chip[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }

.fwl-badge { display: inline-flex; align-items: center; padding: var(--measure-border-strong) var(--measure-space-step-2); border-radius: var(--measure-radius-pill); border: var(--measure-border-thin) solid var(--color-primary); font-size: var(--measure-text-size-smallest); line-height: var(--measure-line-height-tight); }
.fwl-badge-solid { background: var(--color-primary); color: var(--color-on-primary); }
.fwl-badge-framed { border-color: var(--color-text); color: var(--color-text); }

.fwl-photo { position: relative; display: flex; align-items: center; justify-content: center; width: var(--measure-fraction-full); overflow: hidden; background: var(--color-surface); color: var(--color-text); border-radius: var(--measure-radius-small); }
.fwl-photo-product { aspect-ratio: var(--measure-ratio-product-image); }
.fwl-photo img { width: var(--measure-fraction-full); height: var(--measure-fraction-full); object-fit: cover; }
.fwl-photo-contain { background: transparent; flex: auto; min-height: 0; }
.fwl-photo-contain img { object-fit: contain; }
.fwl-photo-none { padding: var(--measure-space-step-2); font-size: var(--measure-text-size-small); text-align: center; }
.fwl-photo-wait, .fwl-card-wait { display: block; background: var(--color-border); animation: fwl-breathe var(--measure-duration-slide) var(--measure-curve-standard) infinite alternate; }
.fwl-photo-wait { width: var(--measure-fraction-full); height: var(--measure-fraction-full); }
.fwl-card-wait { height: var(--measure-text-size-large); width: var(--measure-fraction-half); border-radius: var(--measure-radius-small); }
@keyframes fwl-breathe { to { opacity: var(--measure-opacity-disabled); } }

.fwl-card { display: flex; flex-direction: column; gap: var(--measure-space-step-1); min-width: 0; transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-card:active, .fwl-card[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }
.fwl-card-badges { display: flex; flex-wrap: wrap; gap: var(--measure-space-step-1); }
.fwl-card-name { font-size: var(--measure-text-size-normal); line-height: var(--measure-line-height-tight); }
.fwl-card-price { color: var(--color-text-muted); font-size: var(--measure-text-size-small); }
.fwl-grid { display: grid; grid-template-columns: repeat(var(--measure-grid-product-columns), calc((var(--measure-fraction-full) - var(--measure-space-step-3)) / var(--measure-grid-product-columns))); gap: var(--measure-space-step-5) var(--measure-space-step-3); }

.fwl-gallery { display: flex; flex-direction: column; gap: var(--measure-space-step-2); }
.fwl-gallery-open { display: block; width: var(--measure-fraction-full); cursor: zoom-in; }
.fwl-video { width: var(--measure-fraction-full); aspect-ratio: var(--measure-ratio-video); object-fit: cover; background: var(--color-surface); border-radius: var(--measure-radius-small); }
.fwl-thumbs { display: flex; gap: var(--measure-space-step-2); overflow-x: auto; scrollbar-width: none; padding: var(--measure-border-strong); }
.fwl-thumb { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--measure-layout-thumbnail); aspect-ratio: var(--measure-ratio-product-image); overflow: hidden; border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-small); background: var(--color-surface); }
.fwl-thumb img { position: absolute; inset: 0; width: var(--measure-fraction-full); height: var(--measure-fraction-full); object-fit: cover; }
.fwl-thumb .fwl-icon { position: relative; color: var(--color-text); background: var(--color-surface); border-radius: var(--measure-radius-pill); }
.fwl-thumb[aria-current="true"] { border: var(--measure-border-strong) solid var(--color-text); }

.fwl-lightbox { position: fixed; inset: 0; z-index: var(--measure-layer-dialog); display: flex; flex-direction: column; align-items: flex-end; gap: var(--measure-space-step-2); padding: var(--measure-space-step-2); background: var(--color-background); }

.fwl-form { display: flex; flex-direction: column; gap: var(--measure-space-step-4); }
.fwl-trap { display: none; }

.fwl-field { display: flex; flex-direction: column; gap: var(--measure-space-step-1); }
.fwl-field-label { padding: 0; font-size: var(--measure-text-size-small); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); }
.fwl-field-input, .fwl-field-area { width: var(--measure-fraction-full); min-height: var(--measure-height-field); padding: var(--measure-space-step-2) var(--measure-space-step-3); border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-small); background: var(--color-background); font-size: var(--measure-text-size-large); line-height: var(--measure-line-height-tight); }
.fwl-field-area { display: block; min-height: var(--measure-height-field-area); line-height: var(--measure-line-height-body); resize: vertical; }
.fwl-field-input::placeholder, .fwl-field-area::placeholder { color: var(--color-text-muted); opacity: var(--measure-opacity-full); }
.fwl-field-input:focus, .fwl-field-area:focus { border-color: var(--color-text); }
.fwl-field-input[aria-invalid="true"], .fwl-field-area[aria-invalid="true"] { border: var(--measure-border-strong) solid var(--color-text); }
.fwl-field-input:disabled, .fwl-field-area:disabled { opacity: var(--measure-opacity-disabled); }
.fwl-field-error { display: flex; align-items: flex-start; gap: var(--measure-space-step-1); font-size: var(--measure-text-size-small); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); }

.fwl-choice { display: flex; flex-direction: column; gap: var(--measure-space-step-2); min-width: 0; }
.fwl-choice-row { display: flex; align-items: center; gap: var(--measure-space-step-3); min-height: var(--measure-height-row); padding: var(--measure-space-step-2) var(--measure-space-step-3); border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-small); cursor: pointer; transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-choice-row:has(:checked) { border: var(--measure-border-strong) solid var(--color-text); }
.fwl-choice-row:has(:disabled) { opacity: var(--measure-opacity-disabled); cursor: default; }
.fwl-choice-row:active, .fwl-choice-row[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }
.fwl-choice-mark { flex: none; margin: 0; width: var(--measure-icon-small); height: var(--measure-icon-small); accent-color: var(--color-primary); }
.fwl-choice-words { display: flex; flex-direction: column; gap: var(--measure-space-step-1); min-width: 0; }
.fwl-choice-name { line-height: var(--measure-line-height-tight); }
.fwl-choice-note { color: var(--color-text-muted); font-size: var(--measure-text-size-small); line-height: var(--measure-line-height-tight); }

.fwl-stepper { display: inline-flex; align-items: center; gap: var(--measure-space-step-1); border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-pill); width: fit-content; }
.fwl-stepper-count { min-width: var(--measure-icon-medium); text-align: center; font-weight: var(--measure-weight-medium); }

.fwl-bag-row { display: flex; align-items: flex-start; gap: var(--measure-space-step-3); padding-block: var(--measure-space-step-3); border-bottom: var(--measure-border-thin) solid var(--color-border); }
.fwl-bag-photo { flex: none; width: var(--measure-layout-thumbnail); }
.fwl-bag-words { display: flex; flex: auto; flex-direction: column; gap: var(--measure-space-step-1); min-width: 0; }
.fwl-bag-name { line-height: var(--measure-line-height-tight); }
.fwl-bag-price { color: var(--color-text-muted); font-size: var(--measure-text-size-small); }

.fwl-receipt { display: flex; flex-direction: column; gap: var(--measure-space-step-3); padding: var(--measure-space-step-4); background: var(--color-surface); border-radius: var(--measure-radius-box); }
.fwl-receipt-head { display: flex; flex-direction: column; gap: var(--measure-space-step-1); padding-bottom: var(--measure-space-step-3); border-bottom: var(--measure-border-thin) solid var(--color-border); }
.fwl-receipt-shop { font-family: var(--font-heading); font-size: var(--measure-text-size-larger); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }
.fwl-receipt-number { font-weight: var(--measure-weight-bold); }
.fwl-receipt-when { font-size: var(--measure-text-size-small); }
.fwl-receipt-lines { display: flex; flex-direction: column; gap: var(--measure-space-step-2); }
.fwl-receipt-line { display: flex; justify-content: space-between; gap: var(--measure-space-step-4); line-height: var(--measure-line-height-tight); }
.fwl-receipt-line dd { flex: none; max-width: var(--measure-fraction-half); text-align: end; }
.fwl-receipt-total { padding-top: var(--measure-space-step-2); border-top: var(--measure-border-thin) solid var(--color-border); font-weight: var(--measure-weight-bold); }
.fwl-receipt-state { display: flex; align-items: center; gap: var(--measure-space-step-1); font-size: var(--measure-text-size-small); font-weight: var(--measure-weight-medium); }

.fwl-payment { display: flex; flex-direction: column; align-items: flex-start; gap: var(--measure-space-step-2); padding: var(--measure-space-step-4); border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-box); }
.fwl-payment-head { display: flex; align-items: center; gap: var(--measure-space-step-2); }
.fwl-payment-logo { width: var(--measure-icon-medium); height: var(--measure-icon-medium); object-fit: contain; }
.fwl-payment-name { font-size: var(--measure-text-size-large); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); }
.fwl-payment-words { font-size: var(--measure-text-size-larger); font-weight: var(--measure-weight-bold); }
.fwl-payment-qr { width: var(--measure-fraction-half); aspect-ratio: auto; background: var(--color-surface); border-radius: var(--measure-radius-small); }

.fwl-front { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: var(--measure-fraction-full); min-height: var(--measure-phone-small); overflow: hidden; background: var(--part-main); color: var(--part-name); }
.fwl-front-photos { position: relative; display: flex; flex: none; width: var(--measure-fraction-full); aspect-ratio: var(--measure-ratio-front-image); overflow: hidden; background: var(--part-photo); }
.fwl-front-frame { display: block; flex: none; width: var(--measure-fraction-full); height: var(--measure-fraction-full); }
.fwl-front-image { width: var(--measure-fraction-full); height: var(--measure-fraction-full); object-fit: cover; }
.fwl-front-photos[data-front="rolling"] { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fwl-front-photos[data-front="rolling"] .fwl-front-frame { scroll-snap-align: start; }
.fwl-front-photos[data-front="changing"] .fwl-front-frame { position: absolute; inset: 0; opacity: 0; transition: opacity var(--measure-duration-slide) var(--measure-curve-standard); }
.fwl-front-photos[data-front="changing"] .fwl-front-frame[aria-current="true"] { opacity: var(--measure-opacity-full); }
.fwl-front-photos[data-front="rising"] .fwl-front-image { object-fit: contain; animation: fwl-rise var(--measure-duration-slide) var(--measure-curve-standard) both; }
.fwl-front-photos[data-direction="up"] { --rise-from: var(--measure-fraction-half); }
.fwl-front-photos[data-direction="down"] { --rise-from: calc(var(--measure-fraction-half) - var(--measure-fraction-full)); }
@keyframes fwl-rise { from { translate: 0 var(--rise-from); opacity: 0; } to { translate: 0 0; opacity: var(--measure-opacity-full); } }
.fwl-front-words { display: flex; flex-direction: column; align-items: center; gap: var(--measure-space-step-2); padding: var(--measure-space-step-5) var(--measure-layout-gutter); text-align: center; }
.fwl-front-name { font-family: var(--font-heading); font-size: var(--measure-text-size-display); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }
.fwl-front-local { font-family: var(--font-heading); font-size: var(--measure-text-size-title); line-height: var(--measure-line-height-tight); }
.fwl-front-tagline { font-size: var(--measure-text-size-small); letter-spacing: var(--measure-letter-gap-label); }

.fwl-door { display: flex; flex-direction: column; gap: var(--measure-space-step-1); min-height: var(--measure-height-field-area); padding: var(--measure-space-step-4); border-radius: var(--measure-radius-box); background: var(--part-main); color: var(--part-name); transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-door:active, .fwl-door[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }
.fwl-door-name { font-family: var(--font-heading); font-size: var(--measure-text-size-title); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }
.fwl-door-local { font-family: var(--font-heading); font-size: var(--measure-text-size-large); }
.fwl-door-tagline { font-size: var(--measure-text-size-small); }
.fwl-door-words { display: inline-flex; align-items: center; gap: var(--measure-space-step-1); margin-top: auto; font-size: var(--measure-text-size-button); font-weight: var(--measure-weight-medium); letter-spacing: var(--measure-letter-gap-none); }

.fwl-identity, .fwl-numbers { display: flex; flex-direction: column; gap: var(--measure-space-step-2); padding: var(--measure-space-step-4); border: var(--measure-border-thin) solid var(--color-border); border-radius: var(--measure-radius-box); }
.fwl-identity-row, .fwl-number { display: flex; flex-direction: column; gap: var(--measure-space-step-1); line-height: var(--measure-line-height-tight); }
.fwl-identity-row dt, .fwl-number dt { color: var(--color-text-muted); font-size: var(--measure-text-size-small); }

.fwl-page-text { display: flex; flex-direction: column; gap: var(--measure-space-step-4); }
.fwl-page-group { color: var(--color-text-muted); font-size: var(--measure-text-size-small); letter-spacing: var(--measure-letter-gap-label); }
.fwl-page-title { font-family: var(--font-heading); font-size: var(--measure-text-size-title); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }
.fwl-page-section { display: flex; flex-direction: column; gap: var(--measure-space-step-1); }
.fwl-page-heading { font-size: var(--measure-text-size-large); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); }
.fwl-page-words { white-space: pre-line; }

.fwl-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--measure-space-step-3); width: var(--measure-fraction-full); min-height: var(--measure-height-row); padding-block: var(--measure-space-step-2); border-bottom: var(--measure-border-thin) solid var(--color-border); text-align: start; transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-menu-row:active, .fwl-menu-row[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }
.fwl-menu-row:disabled { opacity: var(--measure-opacity-disabled); }
.fwl-menu-row[aria-current="page"] { font-weight: var(--measure-weight-bold); border-bottom: var(--measure-border-strong) solid var(--color-text); }
.fwl-menu-words { display: flex; flex-direction: column; gap: var(--measure-space-step-1); min-width: 0; }
.fwl-menu-label { line-height: var(--measure-line-height-tight); }
.fwl-menu-note { color: var(--color-text-muted); font-size: var(--measure-text-size-small); line-height: var(--measure-line-height-tight); }

.fwl-notice { display: flex; flex-direction: column; align-items: center; gap: var(--measure-space-step-2); padding: var(--measure-space-step-6) var(--measure-space-step-4); text-align: center; }
.fwl-notice-mark { display: flex; align-items: center; justify-content: center; width: var(--measure-tap-minimum); height: var(--measure-tap-minimum); }
.fwl-notice-title { font-size: var(--measure-text-size-large); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); }
.fwl-notice-words { color: var(--color-text-muted); }

.fwl-toast { position: fixed; inset-inline: var(--measure-layout-gutter); bottom: calc(var(--measure-space-step-4) + env(safe-area-inset-bottom, var(--measure-space-none))); z-index: var(--measure-layer-toast); display: flex; align-items: center; gap: var(--measure-space-step-2); max-width: var(--measure-layout-max-width); min-height: var(--measure-height-row); margin-inline: auto; padding: var(--measure-space-step-2) var(--measure-space-step-4); border-radius: var(--measure-radius-box); background: var(--color-text); color: var(--color-background); line-height: var(--measure-line-height-tight); }

.fwl-panel-layer { position: fixed; inset: 0; z-index: var(--measure-layer-overlay); display: flex; flex-direction: column; justify-content: flex-end; }
.fwl-panel-shade { position: absolute; inset: 0; background: var(--color-text); opacity: var(--measure-opacity-disabled); }
.fwl-panel { position: relative; z-index: var(--measure-layer-raised); display: flex; flex-direction: column; width: var(--measure-fraction-full); max-width: var(--measure-layout-max-width); max-height: var(--measure-fraction-full); margin-inline: auto; padding: var(--measure-space-step-2) var(--measure-layout-gutter) calc(var(--measure-layout-gutter) + env(safe-area-inset-bottom, var(--measure-space-none))); border-radius: var(--measure-radius-box) var(--measure-radius-box) var(--measure-radius-none) var(--measure-radius-none); background: var(--color-background); color: var(--color-text); }
.fwl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--measure-space-step-2); }
.fwl-panel-title { font-family: var(--font-heading); font-size: var(--measure-text-size-larger); font-weight: var(--measure-weight-medium); line-height: var(--measure-line-height-tight); text-transform: var(--heading-case); }
.fwl-panel-body { display: flex; flex-direction: column; gap: var(--measure-space-step-3); overflow-y: auto; }

.fwl-in-place { position: relative; inset: auto; z-index: var(--measure-layer-base); min-height: var(--measure-phone-small); }
.fwl-toast.fwl-in-place { min-height: var(--measure-height-row); margin-inline: 0; }

@media (prefers-reduced-motion: reduce) {
  .fwl-spinner, .fwl-photo-wait, .fwl-card-wait, .fwl-front-photos[data-front="rising"] .fwl-front-image { animation: none; }
  .fwl-front-photos[data-front="changing"] .fwl-front-frame { transition: none; }
}

.fwl-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--measure-space-step-3); width: var(--measure-fraction-full); min-height: var(--measure-height-row); padding-block: var(--measure-space-step-2); color: var(--color-text); text-align: start; transition: opacity var(--measure-duration-fast) var(--measure-curve-standard); }
.fwl-switch-words { display: flex; flex-direction: column; gap: var(--measure-space-step-1); min-width: 0; overflow-wrap: anywhere; }
.fwl-switch-label { font-size: var(--measure-text-size-normal); line-height: var(--measure-line-height-tight); }
.fwl-switch-note { color: var(--color-text-muted); font-size: var(--measure-text-size-small); line-height: var(--measure-line-height-tight); }
.fwl-switch-track { display: flex; flex: none; align-items: center; justify-content: flex-start; width: var(--measure-space-step-7); height: var(--measure-icon-medium); padding-inline: var(--measure-border-thin); border: var(--measure-border-thin) solid var(--color-text); border-radius: var(--measure-radius-pill); background: var(--color-background); }
.fwl-switch-knob { width: var(--measure-icon-small); height: var(--measure-icon-small); border-radius: var(--measure-radius-pill); background: var(--color-text); }
.fwl-switch[aria-checked="true"] .fwl-switch-track { justify-content: flex-end; border-color: var(--color-primary); background: var(--color-primary); }
.fwl-switch[aria-checked="true"] .fwl-switch-knob { background: var(--color-on-primary); }
.fwl-switch:active, .fwl-switch[data-state="pressed"] { opacity: var(--measure-opacity-pressed); }
.fwl-switch:disabled { opacity: var(--measure-opacity-disabled); }
.fwl-switch:focus-visible, .fwl-switch[data-state="focus"] { outline: var(--measure-border-strong) solid var(--color-primary); outline-offset: var(--measure-border-strong); }

/* The site's frame. Everything inside it is a part from the parts book. */

.site-frame { width: var(--measure-fraction-full); max-width: var(--measure-layout-max-width); margin-inline: auto; }