/*
 * WDE Booking v2, the full form. 27 September 2026.
 *
 * Every colour is a custom property. The defaults below are overridden inline from the
 * Branding tab in the admin, so a new client's form takes their brand with no code; a
 * theme can still override any of them. The font inherits the theme unless one is set.
 * Everything is scoped under .wb so the theme's own form styles do not leak in, and the
 * theme's button and input defaults are reset inside it.
 */
.wb {
	--wb-primary: #F9B401;
	--wb-panel: #F5C400;
	--wb-ink: #141D38;
	--wb-surface: #FBF8E9;
	--wb-text: #424242;
	--wb-font: inherit;
	--wb-muted: color-mix(in srgb, var(--wb-ink) 68%, #fff);
	--wb-field: rgba(255, 255, 255, .78);
	--wb-line: color-mix(in srgb, var(--wb-ink) 12%, transparent);
	--wb-warn: #FFF4D6;
	--wb-no: #F07A1A;
	--wb-radius: 24px;
	background: var(--wb-surface);
	color: var(--wb-text);
	font-family: var(--wb-font);
	font-size: 16px;
	line-height: 1.5;
}
.wb *, .wb *::before, .wb *::after { box-sizing: border-box; }
.wb [hidden] { display: none !important; }
.wb button { font: inherit; text-transform: none; letter-spacing: normal; margin: 0; min-height: 0; line-height: inherit; box-shadow: none; text-shadow: none; }
.wb input, .wb select, .wb textarea { font: inherit; box-shadow: none; margin: 0; }
.wb :focus-visible { outline: 3px solid var(--wb-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wb * { transition: none !important; } }

.wb-in { max-width: 1240px; margin: 0 auto; padding: 56px 24px 80px; }
.wb-head { text-align: center; margin: 0 auto 32px; max-width: 640px; }
.wb-head h1 { margin: 0 0 8px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; font-weight: 600; color: var(--wb-ink); text-wrap: balance; }
.wb-head p { margin: 0; color: var(--wb-muted); }
.wb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin: 0; }

.wb-steps { display: flex; flex-direction: column; gap: 18px; }
.wb-step { background: var(--wb-panel); border-radius: var(--wb-radius); padding: 26px 28px 28px; transition: opacity .2s; }
.wb-step[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.wb-step__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.wb-step__no { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--wb-ink); color: #fff; font-weight: 600; font-size: 14px; display: grid; place-items: center; transform: translateY(-2px); }
.wb-step__title { margin: 0; font-size: 21px; font-weight: 600; color: var(--wb-ink); line-height: 1.25; }
.wb-step__hint { margin: -6px 0 16px 42px; font-size: 14px; color: var(--wb-ink); opacity: .85; }

.wb-label { display: block; font-size: 14px; font-weight: 600; color: var(--wb-ink); margin: 0 0 6px; }
.wb .wb-field { display: block; height: 50px; width: 100%; max-width: none; padding: 0 14px; border: 1px solid #fff; border-radius: 10px; background: var(--wb-field); color: var(--wb-ink); font-size: 16px; }
.wb textarea.wb-field { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; }
.wb .wb-field[readonly] { background: rgba(255, 255, 255, .45); }
.wb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wb-row + .wb-row, .wb-row + .wb-block, .wb-block + .wb-block { margin-top: 16px; }
.wb-muted { color: var(--wb-muted); font-size: 13px; }
.wb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wb-pc { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.wb .wb-field--pc { max-width: 180px; font-size: 20px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.wb-lock { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 600; color: var(--wb-ink); font-variant-numeric: tabular-nums; }
.wb-lock svg { width: 16px; height: 16px; }
.wb .wb-link { background: none; border: 0; padding: 0; color: var(--wb-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 500; }
.wb-zone { font-size: 14px; color: var(--wb-ink); margin: 10px 0 0; }
.wb-zone b { font-weight: 600; }
.wb-alert { margin-top: 12px; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--wb-ink); }

/* waste types: square tiles with an icon, Babar 27 September 2026 */
/* six streams, three by two: wide, short tiles with the icon beside the label. Babar, 2 Oct 2026 */
.wb-wastes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wb .wb-waste { min-height: 76px; background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 12px 16px; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; color: var(--wb-ink); font-weight: 600; font-size: 14px; line-height: 1.25; transition: border-color .15s, transform .15s; }
.wb .wb-waste:hover { transform: translateY(-2px); }
.wb .wb-waste[aria-pressed="true"] { border-color: var(--wb-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-ink) 14%, transparent); }
.wb-waste__icon { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.wb-yes { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wb-ink); color: #fff; font-size: 12px; margin-right: 4px; vertical-align: -3px; }

.wb-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wb .wb-size { position: relative; text-align: center; align-items: center; background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 10px 12px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--wb-ink); transition: border-color .15s, transform .15s; }
.wb .wb-size:hover { transform: translateY(-2px); }
.wb .wb-size[aria-pressed="true"] { border-color: var(--wb-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-ink) 14%, transparent); }
.wb-size__img { aspect-ratio: 16 / 9; object-fit: contain; width: 100%; max-width: 100%; background: var(--wb-surface); border-radius: 10px; padding: 8px 4px; display: block; margin-bottom: 4px; }
.wb-size__name { font-weight: 600; font-size: 17px; }
.wb-size__price { font-size: 14px; color: var(--wb-muted); font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.wb-size__price b { display: inline-block; font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--wb-ink); }
.wb-size__dim { font-size: 12.5px; line-height: 1.35; color: var(--wb-muted); font-variant-numeric: tabular-nums; }
.wb-size__tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--wb-ink); color: #fff; display: none; place-items: center; font-size: 13px; }
.wb .wb-size[aria-pressed="true"] .wb-size__tick { display: grid; }

.wb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wb .wb-chip { border: 2px solid transparent; background: #fff; border-radius: 999px; padding: 10px 16px; cursor: pointer; font-weight: 500; color: var(--wb-ink); display: inline-flex; gap: 8px; align-items: center; }
.wb .wb-chip small { font-weight: 500; color: var(--wb-muted); font-size: 13px; }
.wb .wb-chip[aria-pressed="true"] { background: var(--wb-ink); color: #fff; }
.wb .wb-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }

.wb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wb .wb-tile { background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--wb-ink); }
.wb .wb-tile b { font-weight: 600; }
.wb .wb-tile span { font-size: 13px; color: var(--wb-muted); }
.wb .wb-tile[aria-pressed="true"] { border-color: var(--wb-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-ink) 14%, transparent); }
.wb-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--wb-ink); background: rgba(255, 255, 255, .55); border-radius: 12px; padding: 10px 12px; }
.wb-note--warn { background: var(--wb-warn); border: 1px solid var(--wb-line); }
.wb-days { margin: 12px 0 0; font-size: 14px; color: var(--wb-ink); font-variant-numeric: tabular-nums; }
.wb-days b { font-weight: 600; }
.wb-block { margin-top: 16px; }

.wb-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wb-list { background: #fff; border-radius: 16px; padding: 14px 16px; }
.wb-list h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--wb-ink); display: flex; gap: 8px; align-items: center; }
.wb-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; }
.wb-list li { padding-left: 24px; position: relative; margin: 0; }
.wb-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--wb-primary); }
.wb-list--no li::before { background: var(--wb-no); }
.wb-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11px; }
.wb-dot--yes { background: var(--wb-primary); }
.wb-dot--no { background: var(--wb-no); }

.wb-extras { display: flex; flex-direction: column; gap: 10px; }
.wb-extra { background: #fff; border-radius: 14px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 12px; }
.wb-extra__txt { flex: 1; min-width: 0; }
.wb-extra__txt b { display: block; color: var(--wb-ink); font-weight: 600; }
.wb-extra__txt span { font-size: 13px; color: var(--wb-muted); font-variant-numeric: tabular-nums; }
.wb-stepper { display: inline-flex; align-items: center; background: var(--wb-surface); border-radius: 999px; }
.wb .wb-stepper button { width: 38px; height: 38px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--wb-ink); border-radius: 50%; padding: 0; }
.wb .wb-stepper button:disabled { opacity: .3; cursor: default; }
.wb-stepper output { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wb-ink); }

.wb-pay { display: flex; flex-direction: column; gap: 10px; }
.wb .wb-payopt { background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; text-align: left; color: var(--wb-ink); width: 100%; }
.wb .wb-payopt[aria-pressed="true"] { border-color: var(--wb-ink); }
.wb-payopt__r { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 2px solid var(--wb-ink); margin-top: 2px; display: grid; place-items: center; }
.wb .wb-payopt[aria-pressed="true"] .wb-payopt__r::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--wb-ink); }
.wb-payopt b { display: block; font-weight: 600; }
.wb-payopt span span { font-size: 13.5px; color: var(--wb-muted); }
.wb-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--wb-ink); margin-top: 14px; cursor: pointer; }
.wb-agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--wb-ink); flex: 0 0 18px; }
.wb-agree a { color: var(--wb-ink); }
.wb .wb-btn { display: flex; justify-content: center; align-items: center; height: 54px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--wb-ink); color: #fff; font-weight: 600; font-size: 17px; cursor: pointer; width: 100%; margin-top: 16px; }
.wb .wb-btn:disabled { opacity: .45; cursor: not-allowed; }
.wb-error { margin-top: 12px; background: #fff; border-left: 4px solid var(--wb-no); border-radius: 10px; padding: 12px 14px; color: var(--wb-ink); font-size: 14px; }
.wb-done { margin-top: 16px; background: #fff; border-radius: 14px; padding: 16px; color: var(--wb-ink); }
.wb-done b { font-size: 18px; }

.wb-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; }
.admin-bar .wb-side { top: 142px; }
.wb-order { background: #fff; border-radius: var(--wb-radius); padding: 24px; box-shadow: 0 10px 30px color-mix(in srgb, var(--wb-ink) 6%, transparent); }
.wb-order h2 { margin: 0 0 14px; font-size: 21px; font-weight: 600; color: var(--wb-ink); }
.wb-lines { display: flex; flex-direction: column; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.wb-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wb-line); }
.wb-line span:last-child { color: var(--wb-ink); font-weight: 500; text-align: right; }
.wb-line--total { border-bottom: 0; padding-top: 14px; font-size: 18px; font-weight: 600; color: var(--wb-ink); align-items: baseline; }
.wb-line--total span:last-child { font-size: 24px; }
.wb-wait { margin-top: 12px; background: var(--wb-surface); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--wb-ink); }
.wb-alts { background: #fff; border-radius: var(--wb-radius); padding: 20px 24px; }
.wb-alts h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--wb-ink); }
.wb-alts p { margin: 0 0 4px; font-size: 13.5px; color: var(--wb-muted); }
.wb .wb-alt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--wb-surface); border: 2px solid transparent; border-radius: 14px; padding: 10px 12px; cursor: pointer; font-variant-numeric: tabular-nums; margin-top: 8px; text-align: left; color: var(--wb-ink); }
.wb .wb-alt:hover { border-color: var(--wb-primary); }
.wb-alt b { font-weight: 600; }
.wb-alt__p { font-weight: 600; text-align: right; }
.wb-alt__d { display: block; font-size: 12px; font-weight: 500; color: var(--wb-muted); }
.wb .wb-alt--cur { border-color: var(--wb-ink); background: #fff; cursor: default; }

.wb-bar { display: none; }

@media (max-width: 900px) {
	/* one column; the order and its alternatives come straight after the dates, where
	   the price first appears, not after the payment step */
	/* stretch: the desktop grid's align-items:start would shrink each step to its content */
	.wb-layout { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
	.wb-steps { display: contents; }
	#wb-postcode { order: 1; } #wb-waste { order: 2; } #wb-size { order: 3; } #wb-dates { order: 4; }
	.wb-side { order: 5; position: static; }
	#wb-lists { order: 6; } #wb-extras { order: 7; } #wb-place { order: 8; } #wb-details { order: 9; } #wb-pay { order: 10; }
	.wb-sizes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; gap: 10px; margin: 0; padding: 4px 4px 10px; scrollbar-width: none; }
	.wb-sizes::-webkit-scrollbar { display: none; }
	.wb .wb-size { flex: 0 0 44%; scroll-snap-align: start; }
	.wb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wb-wastes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wb-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--wb-ink); color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); align-items: center; justify-content: space-between; gap: 12px; }
	.wb-bar__t { font-variant-numeric: tabular-nums; }
	.wb-bar__t small { display: block; font-size: 12px; opacity: .75; }
	.wb-bar__t b { font-size: 20px; font-weight: 600; }
	.wb-bar a { background: var(--wb-primary); color: var(--wb-ink); font-weight: 600; padding: 12px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
}
@media (max-width: 560px) {
	.wb-in { padding: 32px 15px 64px; }
	.wb-step { padding: 20px 16px 22px; border-radius: 20px; }
	.wb .wb-size { flex-basis: 70%; }
	.wb-wastes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.wb .wb-waste { min-height: 68px; padding: 10px 12px; gap: 10px; font-size: 13px; }
	.wb-waste__icon { width: 32px; height: 32px; flex-basis: 32px; }
	.wb-row, .wb-lists { grid-template-columns: 1fr; }
	.wb-step__hint { margin-left: 0; }
	.wb-order, .wb-alts { padding: 20px 16px; }
}

/* ============================================ the guided flow, 28 September 2026 */
/* Only the postcode shows first, centred, with a picture beside it; each answer opens
   the next question. The order summary joins once a bin is chosen. */
.wb-step { scroll-margin-top: 130px; }
.wb--start .wb-layout { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; }
.wb--start .wb-side { display: none; }

.wb-pcwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.wb-pcart { width: 210px; max-width: 100%; }
.wb-pcart__img { display: block; width: 100%; height: auto; max-height: 130px; object-fit: contain; }
.wb:not(.wb--start) .wb-pcart { width: 130px; }
.wb-alert p { margin: 0; }
.wb .wb-btn--inline { display: inline-flex; width: auto; height: 46px; margin-top: 12px; padding: 0 22px; font-size: 16px; text-decoration: none; color: #fff; }
.wb-lists[data-lists] { margin-top: 16px; }

@media (max-width: 560px) {
	.wb-pcwrap { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; }
	.wb--start .wb-pcart, .wb:not(.wb--start) .wb-pcart { width: 104px; }
	.wb .wb-field--pc { max-width: 150px; }
}

/* ============================================ the thank you page, 28 September 2026 */
/* Same tokens, cards and order summary as the booking page, so the customer finishes
   on the page they started on. */
.wbc .wb-in { padding-top: 70px; padding-bottom: 70px; }
.wbc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.wbc-main, .wbc-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.wbc-card { background: #fff; border-radius: var(--wb-radius); padding: 28px; box-shadow: 0 10px 30px color-mix(in srgb, var(--wb-ink) 6%, transparent); }
.wbc h2, .wbc h3 { color: var(--wb-ink); font-weight: 600; margin: 0; }
.wbc h3 { font-size: 20px; margin-bottom: 14px; }
.wbc-hero { display: flex; gap: 20px; align-items: flex-start; }
.wbc-hero h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; margin: 10px 0 8px; text-wrap: balance; }
.wbc-hero p { margin: 0; color: var(--wb-text); }
.wbc-tick { flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--wb-primary); color: var(--wb-ink); display: grid; place-items: center; }
.wbc-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wbc-badge--paid { background: #e6f4ea; color: #137333; }
.wbc-badge--wait { background: var(--wb-warn); color: #8a5a00; }
.wbc-ref { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; background: var(--wb-ink); border-radius: var(--wb-radius); overflow: hidden; }
.wbc-ref > div { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid rgba(255, 255, 255, .12); }
.wbc-ref > div:last-child { border-right: 0; }
.wbc-ref span { color: rgba(255, 255, 255, .72); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.wbc-ref strong { color: #fff; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wbc-ref > div:first-child strong { color: var(--wb-primary); font-size: 24px; }
.wbc-mail { display: flex; gap: 14px; align-items: flex-start; background: var(--wb-panel); color: var(--wb-ink); border-radius: var(--wb-radius); padding: 18px 24px; }
.wbc-mail svg { flex: 0 0 22px; margin-top: 2px; }
.wbc-mail p { margin: 0; }
.wbc-mail strong { overflow-wrap: anywhere; }
.wbc-dl { margin: 0; display: flex; flex-direction: column; }
.wbc-dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wb-line); }
.wbc-dl > div:last-child { border-bottom: 0; }
.wbc .wbc-dl dt, .wbc .wbc-dl dd { text-transform: none; letter-spacing: normal; font-size: 15.5px; line-height: 1.45; }
.wbc-dl dt { color: var(--wb-muted); font-weight: 400; margin: 0; }
.wbc-dl dd { color: var(--wb-ink); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.wbc .wb-line--total small { font-size: 13px; font-weight: 400; color: var(--wb-muted); }
.wbc-btn { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 18px; padding: 0 24px; border-radius: 999px;
	background: var(--wb-primary); color: var(--wb-ink) !important; font-weight: 700; text-decoration: none !important; transition: filter .15s; }
.wbc-btn:hover { filter: brightness(.95); }
.wbc-next { background: var(--wb-ink); color: #fff; border-radius: var(--wb-radius); padding: 26px 28px; }
.wbc .wbc-next h3 { color: #fff; }
.wbc-next ol { margin: 0; padding: 0; list-style: none; counter-reset: wbc; display: flex; flex-direction: column; gap: 14px; }
.wbc-next li { counter-increment: wbc; position: relative; padding-left: 42px; margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; }
.wbc-next li::before { content: counter(wbc); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--wb-primary);
	color: var(--wb-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.wbc-next b { color: #fff; }
.wbc-help { background: #fff; border-radius: var(--wb-radius); padding: 26px 28px; border: 2px solid var(--wb-primary); }
.wbc-help p { margin: 0 0 10px; }
.wbc-contact { display: flex; gap: 12px; align-items: baseline; margin: 0 0 6px !important; }
.wbc-contact span { flex: 0 0 48px; color: var(--wb-muted); font-size: 14px; }
.wbc-contact a { color: var(--wb-ink); font-weight: 700; font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.wbc-contact a[href^="mailto:"] { font-size: 15.5px; }
.wbc-empty { max-width: 640px; margin: 0 auto; text-align: center; background: #fff; border-radius: var(--wb-radius); padding: 40px 28px; }
.wbc-empty h2 { font-size: 28px; margin-bottom: 10px; }
.wbc-empty .wbc-btn { display: inline-flex; }

@media (max-width: 960px) {
	.wbc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.wbc .wb-in { padding-top: 40px; padding-bottom: 40px; }
	.wbc-card, .wbc-next, .wbc-help { padding: 22px 18px; }
	.wbc-hero { flex-direction: column; gap: 12px; }
	.wbc-tick { flex-basis: auto; width: 48px; height: 48px; }
	.wbc-ref { grid-template-columns: 1fr 1fr; }
	.wbc-ref > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.wbc-ref > div { padding: 16px 18px; }
	.wbc-mail { padding: 16px 18px; }
	.wbc-dl > div { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
}

/* ============================================ phone fixes, 29 September 2026 */
/* The size strip scrolls inside the yellow step, with the band showing round it, rather
   than running out to the band's edge where the cards looked laid on top of it. Babar,
   from a real phone. The step clips it, so a half card never pokes past the corner. */
@media (max-width: 900px) {
	#wb-size { overflow: hidden; }
}

/* iOS Safari gives a date input an intrinsic minimum width and its own inner layout, so
   width:100% is ignored and the delivery and collection fields overlap each other and
   run off the card. Dropping the native appearance and letting the grid cell shrink puts
   them back in their columns. The value is left aligned to match the other fields. */
.wb-row > div { min-width: 0; }
.wb input[type="date"].wb-field {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	line-height: 48px;
	text-align: left;
}
.wb input[type="date"].wb-field::-webkit-date-and-time-value { text-align: left; min-height: 48px; line-height: 48px; }
.wb input[type="date"].wb-field::-webkit-calendar-picker-indicator { margin-left: auto; }

/* ============================================ the first question, compact */
/* Babar, 29 September 2026: with only the postcode showing, the 860 wide card left a
   short box floating in a lot of yellow. Until the next question opens the card is
   narrow, box and picture side by side, then it eases out to the normal width. */
.wb--start .wb-layout { transition: max-width .35s ease; }
.wb--first .wb-layout { max-width: 580px; }
.wb--first .wb-pcwrap { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
.wb--first .wb .wb-field--pc, .wb--first .wb-field--pc { max-width: 240px; }
.wb--first .wb-pcart { width: 170px; }
@media (prefers-reduced-motion: reduce) { .wb--start .wb-layout { transition: none; } }
@media (max-width: 560px) {
	.wb--first .wb-pcart { width: 104px; }
}