/* Site CSS for what theme.json can't express. Tokens (palette, sizes, radii, shadows, the availability states' colours)
   live in theme.json; this file only reads them. Direction A "Tabără caldă" (BRIEF.md §10). */

:root {
	--ub-focus: var(--wp--preset--color--accent); /* UB Kit's focus ring: pine */
	--ub-ease-site: var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ---- Base ------------------------------------------------------------------------------------------------------- */

/* Full-width sections touch each other (no root block gap between them) */
.wp-site-blocks > main > .alignfull, .entry-content > .alignfull { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Text (design checklist, "Type"): headings balance their lines, body text keeps a word from sitting alone on its last
   line; figures line up in tables, prices and totals. Zero specificity: a block's own setting wins. */
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p, li, dd, blockquote, figcaption) { text-wrap: pretty; }
:where(table, .is-style-ub-price, .woocommerce-Price-amount, .wc-block-components-formatted-money-amount, .wc-block-formatted-money-amount, .wc-block-components-product-price) { font-variant-numeric: tabular-nums; }
:where(a:not(.wp-element-button)) { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
/* A hyphenated short form ("scrie-ne", "într-o") stays on one line (functions.php wraps it) */
.ub-nowrap { white-space: nowrap; }
:where(a:not(.wp-element-button)):hover { text-decoration-thickness: 2px; }

/* Full-screen sections (a cover's "full height") fit the screen a phone shows: 100svh, not 100vh or 100dvh. The editor
   writes 100vh into the block's style attribute, hence !important. */
@supports (min-height: 100svh) {
	:is([style*="min-height:100vh"], [style*="min-height: 100vh"]) { min-height: 100svh !important; }
}

/* Icons (functions.php: a block with the class ub-icon-<name> gets assets/icons/<name>.svg, Lucide 1.75 px), in the
   text's colour */
.ub-ico { display: inline-flex; flex: none; inline-size: 1.25em; block-size: 1.25em; vertical-align: -0.25em; }
.ub-ico svg { inline-size: 100%; block-size: 100%; overflow: visible; }
:is(p, li, h2, h3, h4):has(> .ub-ico) { display: flex; align-items: center; gap: 0.5rem; }
/* In a heading the icon is pine (the headings' accent) and a little smaller than in text, beside the first line */
:is(h2, h3, h4):has(> .ub-ico) { align-items: flex-start; gap: 0.625rem; }
:is(h2, h3, h4) > .ub-ico { inline-size: 1.1em; block-size: 1.1em; margin-block-start: 0.05em; color: var(--wp--preset--color--accent); }
:is(p, h2, h3, h4).has-text-align-center:has(> .ub-ico) { justify-content: center; }

/* ---- Buttons ---------------------------------------------------------------------------------------------------- */

/* Never under 48 px; an icon sits beside the label. The colour change on hover is theme.json's (orange → #D96A00),
   faded in over 200 ms on the site's curve; pressed, a button sits 1 px lower; the focus ring is UB Kit's (pine).
   Neither under reduced motion. */
.wp-element-button, .wp-block-button__link { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
	:is(.wp-element-button, .wp-block-button__link):hover {
		transition-property: background-color, color, border-color;
		transition-duration: 0.2s;
		transition-timing-function: var(--ub-ease-site);
	}
	:is(.wp-element-button, .wp-block-button__link):active { transform: translateY(1px); }
	.wp-block-button.is-style-ub-link > .wp-block-button__link:active { transform: none; }
}
/* The secondary button: core's "Outline" style, in pine (theme.json); on hover it fills with pine */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
/* A button that reads as a text link (styles/blocks/button-link.json): what a page binds a link to (the phone and
   e-mail from ub/contact). In the text's flow, still a 44 px target; underlined until hovered. */
.wp-block-button.is-style-ub-link > .wp-block-button__link { min-block-size: 44px; justify-content: flex-start; }
.wp-block-button.is-style-ub-link > .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--primary-text); text-decoration: none; }

/* ---- Fields ----------------------------------------------------------------------------------------------------- */

/* Text, date and number fields and lists: white, a 3:1 border (palette "edge"), 12 px corners, 48 px tall, 16 px text
   or more (no zoom on phones). Zero specificity: a plugin's own field styles win. */
:where(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="search"], [type="password"]), select, textarea) {
	box-sizing: border-box; min-block-size: 48px; padding: 0.625rem 1rem;
	font: inherit; font-size: max(1rem, 16px); color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--edge);
	border-radius: var(--wp--preset--border-radius--control);
}
:where(input, select, textarea):hover { border-color: var(--wp--preset--color--ink); }
:where(input, select, textarea):focus-visible { border-color: var(--wp--preset--color--accent); }
.ub-field { display: flex; flex-direction: column; gap: 0.375rem; max-inline-size: 20rem; }
.ub-field label { font-size: var(--wp--preset--font-size--small); font-weight: 600; }

/* ---- Paragraph styles (styles/blocks/) -------------------------------------------------------------------------- */

.is-style-ub-chip { inline-size: fit-content; display: inline-flex; align-items: center; gap: 0.375rem; }
.is-style-ub-chip .ub-ico { inline-size: 1.125em; block-size: 1.125em; }
/* Price line: "de la <strong>300 lei</strong>/zi"; the amount in orange text, bigger */
.is-style-ub-price strong { font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--primary-text); }
.is-style-ub-plain { list-style: none; }

/* ---- Header ----------------------------------------------------------------------------------------------------- */

/* The header template part sticks to the top (below the admin bar when signed in) */
header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.ub-header { background: var(--wp--preset--color--base); border-block-end: 1px solid var(--wp--preset--color--line); }

/* The logo: the badge beside the site name; the name's link covers both, so the whole logo goes home */
.ub-brand { position: relative; flex: none; }
.ub-brand__badge { margin: 0; line-height: 0; }
.ub-brand__badge img { inline-size: 72px; block-size: 56px; object-fit: contain; }
.ub-brand__name { margin: 0; white-space: nowrap; }
.ub-brand__name a::after { content: ""; position: absolute; inset: 0; }

/* The menu (.ub-nav): items are 44 px targets; hover a sand pill; the current page in pine, underlined */
.ub-nav .wp-block-navigation-item__content { padding: 0.5rem 0.75rem; min-block-size: 44px; display: inline-flex; align-items: center; border-radius: var(--wp--preset--border-radius--control); }
.ub-nav .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--band); }
.ub-nav :is(.current-menu-item > .wp-block-navigation-item__content, [aria-current="page"]) {
	color: var(--wp--preset--color--accent); font-weight: 600;
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em;
}

/* The phone and the booking button */
.ub-header__buttons { flex: none; }
.ub-header__phone > .wp-block-button__link { font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; white-space: nowrap; }
.ub-header__phone > .wp-block-button__link:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.ub-header__phone .ub-ico { color: var(--wp--preset--color--accent); }
.ub-header__cta > .wp-block-button__link { white-space: nowrap; }

/* Widths. The menu shows in the bar from 1280 px (theme.json custom.header.menuBreakpoint); below that the menu button
   goes last: logo · phone · button · menu. The phone shows as an icon wherever the menu is in the bar (the six items
   leave no room for the number in the 1240 px bar) and on phones, where the bar is logo · phone icon · menu. */
@media (width < 1280px) {
	.ub-header .ub-nav { order: 2; }
	/* The phone and the button go right, beside the menu button (two classes: over the flex layout's margin reset) */
	.ub-header__bar > .ub-header__buttons { margin-inline-start: auto; }
}
@media (width >= 1280px), (width < 782px) {
	.ub-header .ub-header__phone > .wp-block-button__link { inline-size: 2.75rem; justify-content: center; gap: 0; font-size: 0; }
	.ub-header .ub-header__phone .ub-ico { inline-size: 1.5rem; block-size: 1.5rem; }
}
/* The checkout's header has no menu: its phone keeps the number beside the icon, except on phones */
@media (width >= 782px) {
	.ub-header--checkout .ub-header__phone > .wp-block-button__link { inline-size: auto; gap: 0.5rem; font-size: var(--wp--preset--font-size--medium); }
	.ub-header--checkout .ub-header__phone .ub-ico { inline-size: 1.25em; block-size: 1.25em; }
}
/* The six-item menu in the bar from 1280 px: tighter items and gaps, the text a size down (16 px under 1366 px, where
   the bar is narrowest, 17 px above), every label on one line */
@media (width >= 1280px) {
	.ub-header__bar { column-gap: 0.75rem !important; }
	.ub-nav .wp-block-navigation__container { gap: 0.125rem; }
	.ub-nav .wp-block-navigation-item__content { padding-inline: 0.5rem; white-space: nowrap; font-size: 1.0625rem; }
	.ub-header__cta > .wp-block-button__link { padding-inline: 1.125rem; }
}
@media (1280px <= width < 1366px) {
	.ub-nav .wp-block-navigation-item__content { font-size: 1rem; }
}
@media (width < 782px) {
	.wp-block-buttons > .wp-block-button.ub-header__cta { display: none; }
	.ub-brand__badge img { inline-size: 57px; block-size: 44px; }
	.ub-header__bar { gap: 0.5rem !important; }
}

/* The menu button and its overlay (core's below the breakpoint; functions.php writes the media query) */
.ub-nav .wp-block-navigation__responsive-container-open { inline-size: 2.75rem; block-size: 2.75rem; align-items: center; justify-content: center; border-radius: var(--wp--preset--border-radius--control); }
.ub-nav .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--band); }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--large); }

/* The open menu (below 1280 px) ends with the booking button and the phone (functions.php adds them to the header's
   navigation): on a phone the header has no room for the orange button */
.ub-nav__extra { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open .ub-nav__extra {
	order: 3; display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40); padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line); inline-size: 100%;
}
.ub-nav__extra .wp-block-buttons { flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--20); }
.ub-nav__phone > .wp-block-button__link { font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; }
.ub-nav__phone > .wp-block-button__link:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.ub-nav__phone .ub-ico { color: var(--wp--preset--color--accent); }

/* In the overlay each submenu folds behind its own button (assets/nav.js; core keeps every submenu open there:
   upperbiz-ro H27). A submenu's class lands on its <li> and on its inner <ul> too: style it as li.my-class. */
.ub-nav__fold { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.has-child.ub-nav__folds { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0.25rem; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > .wp-block-navigation__submenu-container { flex-basis: 100%; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds:not(.ub-nav__open) > ul.wp-block-navigation__submenu-container { display: none; }
.ub-nav .wp-block-navigation__responsive-container.is-menu-open li.ub-nav__folds > button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle { display: none; }
.ub-nav .is-menu-open .ub-nav__fold {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 2.75rem; min-inline-size: 2.75rem;
	margin: 0; padding: 0 0.5rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.ub-nav .is-menu-open .ub-nav__fold::after {
	content: ""; inline-size: 0.5rem; block-size: 0.5rem; border: solid currentColor; border-width: 0 2px 2px 0;
	transform: translateY(-25%) rotate(45deg);
}
.ub-nav .is-menu-open .ub-nav__open > .ub-nav__fold::after { transform: translateY(25%) rotate(-135deg); }
.ub-nav .is-menu-open .ub-nav__fold:hover { background: var(--wp--preset--color--band); }

/* ---- Footer (dark pine) ----------------------------------------------------------------------------------------- */

.ub-footer :is(p, ul) { margin-block: 0; }
.ub-footer__name { margin-block-end: 0.25rem !important; }
.ub-footer .wp-block-site-title a { color: var(--wp--preset--color--on-deep); }
.ub-footer__title { margin-block-end: 0.25rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--sage); }
.ub-footer a:hover { color: var(--wp--preset--color--sage); }
.ub-footer .wp-block-button.is-style-ub-link > .wp-block-button__link { color: var(--wp--preset--color--on-deep); text-decoration: underline; }
.ub-footer .wp-block-button.is-style-ub-link > .wp-block-button__link:hover { color: var(--wp--preset--color--sage); }
.ub-footer .ub-ico { color: var(--wp--preset--color--sage); }
.ub-footer__company-name { font-weight: 600; }
.ub-fact__label { font-weight: 600; }
.ub-footer__links li a { display: inline-block; padding-block: 0.25rem; }
.ub-footer__bottom { padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--on-deep) 22%, transparent); }
.ub-footer__anpc { margin: 0; line-height: 0; }
.ub-footer__anpc a { display: inline-block; border-radius: 4px; }

/* ---- Caravan card (an example on /stil/ now; the fleet's cards later reuse it) -------------------------------- */

.ub-caravan-card {
	display: flex; flex-direction: column; overflow: hidden; max-inline-size: 26rem;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card);
	box-shadow: var(--wp--preset--shadow--soft);
}
.ub-caravan-card > .wp-block-image { margin: 0; }
.ub-caravan-card > .wp-block-image img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.ub-caravan-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
.ub-caravan-card__body > * { margin-block: 0; }
.ub-caravan-card__body > * + * { margin-block-start: 0.625rem; }
.ub-caravan-card__body > .wp-block-heading { margin-block-start: 0.75rem; }
.ub-caravan-card__specs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; padding: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.ub-caravan-card__specs .ub-ico { color: var(--wp--preset--color--accent); }
.ub-caravan-card__body > .wp-block-buttons { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--30); }
.ub-caravan-card .wp-block-button, .ub-caravan-card .wp-block-button__link { inline-size: 100%; }
/* The cards ub/caravan-cards prints (ub-site): the name at the card size whatever its level, a link in the text's
   colour; the status chip's icon drawn here (a check; a calendar when booked), so the block's script can switch it */
.ub-caravan-card__name { font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.ub-caravan-card__name a { color: inherit; text-decoration: none; }
.ub-caravan-card__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ub-caravan-card__status::before { content: ""; flex: none; inline-size: 1.125em; block-size: 1.125em; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ub-caravan-card__status.is-busy { background: var(--wp--preset--color--band); color: var(--wp--preset--color--ink); }
.ub-caravan-card__status.is-busy::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E"); }
/* The one effect on cards (BRIEF.md §10): it lifts 3 px on hover in 200 ms; never under reduced motion or the toggle */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-caravan-card { transition: transform 0.2s var(--ub-ease-site), box-shadow 0.2s var(--ub-ease-site); }
	html:not([data-ub-motion="off"]) .ub-caravan-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lifted); }
}

/* ---- Caravan page: the listing (patterns/caravan-listing.php) ------------------------------------------------- */

/* Name and short line, the photo grid (blocks/caravan-photos), then the facts and the product's text on the left and the
   booking box on the right, sticky. UB Kit 1.16's form is short (its months open in a pop-up), so the box fits a laptop
   screen; if it ever doesn't (a breakdown and an error on a short screen), it scrolls inside rather than hiding its
   button. Under 1024 px one column: facts, the box, the text; the phone's bar leads to the form. */
.ub-listing__head > * { margin-block: 0; }
.ub-listing__head .wp-block-post-title { margin-block-start: 0.25rem; }
.ub-listing__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
.ub-listing__body > * { min-inline-size: 0; margin-block: 0 !important; }
@media (width >= 1024px) {
	.ub-listing__body {
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 25rem); grid-template-rows: auto 1fr;
		grid-template-areas: "facts aside" "about aside"; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: var(--wp--preset--spacing--40);
	}
	.ub-listing__facts { grid-area: facts; }
	.ub-listing__about { grid-area: about; }
	.ub-listing__aside { grid-area: aside; }
	.ub-bookbox {
		position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 6.5rem);
		max-block-size: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 7.5rem); overflow-y: auto; overscroll-behavior: contain;
	}
}
.ub-bookbox {
	padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card); box-shadow: var(--wp--preset--shadow--soft);
}
.ub-bookbox > * { margin-block: 0; }
.ub-bookbox > * + * { margin-block-start: var(--wp--preset--spacing--30); }
/* The bar's link and the search results land on the form below the sticky header */
#ub-booking { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem); }
/* The product's own text (page-builder): its H2s ("Ce e inclus", "Bine de știut") as the listing's section heads */
.ub-listing__about { max-inline-size: 44rem; }
.ub-listing__about .wp-block-post-content > :first-child { margin-block-start: 0; }
.ub-listing__about :is(h2, .wp-block-heading:is(h2)) { margin-block-start: var(--wp--preset--spacing--50); padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--large); }
.ub-listing__about .wp-block-post-content > h2:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.ub-listing__more { margin-block-start: var(--wp--preset--spacing--60) !important; padding-block-start: var(--wp--preset--spacing--50); border-block-start: 1px solid var(--wp--preset--color--line); }
.ub-listing__more > * { margin-block: 0; }
.ub-listing__more > * + * { margin-block-start: var(--wp--preset--spacing--30); }

/* ---- Fleet page (/rulote/: patterns/fleet.php) ------------------------------------------------------------------- */

.ub-fleet__head > * { margin-block: 0; }

/* ---- Search bar sample on /stil/ (the approved look; the real one is ub/booking-search, styled further down) --- */

/* A white pill with fields split by thin lines; the round button at its end. It follows its own width (a container),
   so it works in a narrow column too: under 30 rem the fields go two and one, the button under them with its label. */
.ub-searchbar-wrap { container-type: inline-size; }
.ub-searchbar {
	display: flex; align-items: center; max-inline-size: 46rem; padding: 0.5rem;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--pill); box-shadow: var(--wp--preset--shadow--soft);
}
.ub-searchbar__field {
	position: relative; flex: 1 1 0; min-inline-size: 0; min-block-size: 56px;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.125rem;
	padding: 0.5rem 1.25rem; border: 0; border-radius: var(--wp--preset--border-radius--pill);
	background: transparent; color: var(--wp--preset--color--ink); font: inherit; text-align: start; cursor: pointer;
}
.ub-searchbar__field + .ub-searchbar__field::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 25%; border-inline-start: 1px solid var(--wp--preset--color--line); }
.ub-searchbar__field:hover { background: var(--wp--preset--color--base); }
.ub-searchbar__field:hover::before, .ub-searchbar__field:hover + .ub-searchbar__field::before { visibility: hidden; }
.ub-searchbar__label { font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; }
.ub-searchbar__value { max-inline-size: 100%; overflow: hidden; color: var(--wp--preset--color--muted); font-size: 1rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.ub-searchbar__go {
	flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	inline-size: 56px; block-size: 56px; padding: 0; border: 0; border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); font: inherit; font-weight: 500; cursor: pointer;
}
.ub-searchbar__go:hover { background: var(--wp--custom--color--primary-hover); }
.ub-searchbar__go svg { inline-size: 1.5rem; block-size: 1.5rem; }
.ub-searchbar__go-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (width < 30rem) {
	.ub-searchbar { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--wp--preset--border-radius--card); }
	.ub-searchbar__field { border-radius: var(--wp--preset--border-radius--control); padding-inline: 1rem; }
	.ub-searchbar__field:nth-child(3) { grid-column: 1 / -1; }
	.ub-searchbar__field:nth-child(3)::before { inset-inline: 1rem; inset-block: 0 auto; border-inline-start: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
	.ub-searchbar__go { grid-column: 1 / -1; inline-size: auto; block-size: 52px; margin-block-start: 0.375rem; border-radius: var(--wp--preset--border-radius--pill); }
	.ub-searchbar__go-text { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
}
@media (prefers-reduced-motion: no-preference) {
	:is(.ub-searchbar__field, .ub-searchbar__go):hover { transition: background-color 0.2s var(--ub-ease-site); }
	.ub-searchbar__go:active { transform: translateY(1px); }
}

/* ---- First screen of the home page (a sample on /stil/) -------------------------------------------------------- */

/* Text on the solid cream page beside a real fleet photo (no text over the photo); on phones the photo goes first */
.ub-first { align-items: center !important; }
.ub-first__photo .wp-block-image { margin: 0; }
.ub-first__photo img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wp--preset--border-radius--card); }
.ub-first__lead { max-inline-size: 34rem; color: var(--wp--preset--color--muted); }
@media (width < 782px) {
	.ub-first > .ub-first__photo { order: -1; }
	.ub-first__photo img { aspect-ratio: 16 / 10; }
}

/* ---- Availability table sample on /stil/ (the approved look; the real one is ub/booking-calendar, further down) - */

/* Caravans as rows, days as columns, today marked with a pine ring and "Azi"; each state by colour, an icon and its
   word (the legend, and hidden in each cell for screen readers). The caravans' column stays while the days scroll.
   Under 640 px the phone layout: days as rows, the four caravans as columns. Colours: theme.json custom.availability. */
.ub-avail {
	--ub-free: var(--wp--custom--availability--free); --ub-free-mark: var(--wp--custom--availability--free-mark);
	--ub-booked: var(--wp--custom--availability--booked); --ub-booked-hatch: var(--wp--custom--availability--booked-hatch);
	--ub-booked-mark: var(--wp--custom--availability--booked-mark);
	--ub-past: var(--wp--custom--availability--past); --ub-past-mark: var(--wp--custom--availability--past-mark);
	font-size: var(--wp--preset--font-size--small);
}
.ub-avail__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 var(--wp--preset--spacing--30); padding: 0; list-style: none; }
.ub-avail__legend li { display: flex; align-items: center; gap: 0.5rem; }
.ub-avail__key { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 6px; }
/* position: the cells' hidden words (.ub-sr-only, absolute) stay inside the scroller, not past the page's edge */
.ub-avail__scroll { position: relative; overflow-x: auto; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card); }
.ub-avail__table { inline-size: 100%; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.ub-avail__table :is(th, td) { padding: 0; border: 0; font-weight: 500; text-align: center; vertical-align: middle; }
.ub-avail__table strong { font-weight: 700; }
.ub-avail__month { padding: 0.5rem 0.75rem 0 !important; text-align: start !important; font-weight: 600; }
.ub-avail__corner { min-inline-size: 9rem; }
.ub-avail__day { min-inline-size: 2.75rem; padding: 0.375rem 0.125rem !important; color: var(--wp--preset--color--muted); font-weight: 500; line-height: 1.2; border-radius: 6px; }
.ub-avail__dow, .ub-avail__date { display: block; }
.ub-avail__date { color: var(--wp--preset--color--ink); font-size: 1rem; font-weight: 700; }
.ub-avail__day--past :is(.ub-avail__dow, .ub-avail__date) { color: var(--wp--preset--color--muted); font-weight: 500; }
.ub-avail__day--today .ub-avail__dow { color: var(--wp--preset--color--accent); font-weight: 700; }
.ub-avail__name { position: sticky; inset-inline-start: 0; z-index: 1; padding: 0.375rem 0.75rem !important; text-align: start !important; background: var(--wp--preset--color--surface); box-shadow: 3px 0 0 var(--wp--preset--color--surface); }
.ub-avail__name strong { display: block; font-size: 1rem; line-height: 1.25; white-space: nowrap; }
.ub-avail__name span { display: block; color: var(--wp--preset--color--muted); }
.ub-avail__cell { min-inline-size: 2.75rem; block-size: 3rem; border-radius: 6px; }
/* The state's mark (check, cross, dash: the theme's Lucide icons as a mask, in the state's mark colour) */
.ub-avail__mark { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; vertical-align: middle; }
.ub-avail__mark::before { content: ""; inline-size: 1.375rem; block-size: 1.375rem; background: currentColor; mask: var(--ub-mark) center / contain no-repeat; }
.ub-avail .is-free { --ub-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background: var(--ub-free); color: var(--ub-free-mark); }
.ub-avail .is-booked { --ub-mark: url("icons/x.svg"); background: repeating-linear-gradient(-45deg, var(--ub-booked-hatch) 0 1.5px, var(--ub-booked) 1.5px 7px); color: var(--ub-booked-mark); }
.ub-avail .is-booked .ub-avail__mark { background: var(--ub-booked); }
.ub-avail .is-past { --ub-mark: url("icons/minus.svg"); background: var(--ub-past); color: var(--ub-past-mark); }
.ub-avail .is-today { box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent); }
.ub-avail__key.is-today { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--accent); font-weight: 700; font-size: 0.75rem; }
.ub-avail__note { margin-block: var(--wp--preset--spacing--20) 0; color: var(--wp--preset--color--muted); }
/* The phone layout: shown under 640 px instead of the wide table (and always in .ub-avail--rows) */
.ub-avail__table--rows { display: none; }
.ub-avail__table--rows { table-layout: fixed; }
.ub-avail__table--rows .ub-avail__corner { inline-size: 4.25rem; min-inline-size: 0; }
.ub-avail__table--rows thead th { padding: 0.375rem 0.125rem !important; line-height: 1.2; }
.ub-avail__table--rows thead strong { display: block; font-size: 0.9375rem; white-space: nowrap; }
.ub-avail__table--rows thead span { display: block; color: var(--wp--preset--color--muted); font-size: 0.8125rem; white-space: nowrap; }
.ub-avail__table--rows .ub-avail__day { display: table-cell; text-align: start !important; padding-inline: 0.5rem !important; white-space: nowrap; }
.ub-avail__table--rows .ub-avail__day :is(.ub-avail__dow, .ub-avail__date) { display: inline; }
.ub-avail__table--rows .ub-avail__cell { block-size: 2.75rem; }
@media (width < 640px) {
	.ub-avail:not(.ub-avail--rows) .ub-avail__table--wide { display: none; }
	.ub-avail .ub-avail__table--rows { display: table; }
}
.ub-avail--rows .ub-avail__table--wide { display: none; }
.ub-avail--rows .ub-avail__table--rows { display: table; }

/* ---- The style page (/stil/) ------------------------------------------------------------------------------------ */

.ub-swatch__chip { min-block-size: 4.5rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--control); }
.ub-swatch > p { margin-block: 0.25rem 0; }
/* A sample framed as such: a dashed edge and its label */
.ub-sample { border: 2px dashed var(--wp--preset--color--edge); border-radius: var(--wp--preset--border-radius--card); }
/* The keyboard's focus ring, drawn still (what Tab shows) */
.ub-demo-focus > .wp-block-button__link, input.ub-demo-focus { outline: 3px solid var(--ub-focus); outline-offset: 2px; }
.ub-phone-frame { max-inline-size: 390px; padding: var(--wp--preset--spacing--20); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card); }
@media (width < 640px) { .ub-phone-preview { display: none; } }
.ub-stil-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wp--preset--spacing--30); }

/* Contact Form 7's fields (UB Kit's forms.css) as the theme's: white, the 3:1 "edge" border (body: to win over UB Kit's rule); an invalid field keeps UB Kit's red border. */
body .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea):not([aria-invalid="true"]) { background: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--edge); }
body .wpcf7 :is(input, select, textarea):not([aria-invalid="true"]):hover { border-color: var(--wp--preset--color--ink); }
/* The form's button is the pine secondary button (core's Outline style here): orange is for booking and search only
   (BRIEF.md §10); its checkboxes are pine too */
body .wpcf7 .wpcf7-submit {
	background: transparent; color: var(--wp--preset--color--accent);
	border: 2px solid var(--wp--preset--color--accent); padding: calc(0.75rem - 2px) calc(1.375rem - 2px);
}
body .wpcf7 .wpcf7-submit:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
body .wpcf7 :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--wp--preset--color--accent); }

/* ---- UB Kit's booking blocks in the direction (BRIEF.md §10; their markup is UB Kit 1.16's booking/render.php and
   assets/booking-picker.js) ------------------------------------------------------------------------------------- */

/* Each rule starts at the block's wrapper class, so it wins over UB Kit's booking.css whatever their order. White
   surfaces, 12 px fields with the 3:1 "edge" border, the soft "line" for dividers. The module's "primary" (chosen days,
   today's ring, focus, hover tints) is pine: orange stays the booking and search buttons' (theme.json's button). */
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-calendar, .wp-block-ub-booking-form) {
	--ub-bk-base: var(--wp--preset--color--surface);
	--ub-bk-radius: var(--wp--preset--border-radius--control);
	--ub-bk-primary: var(--wp--preset--color--accent);
	--ub-bk-on-primary: var(--wp--preset--color--on-accent);
}

/* The date fields of the form and the search: a button showing the date (.ub-bk-pick) that opens the pop-up calendar;
   the browser's own date field (.ub-bk-date) without JavaScript */
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) :is(.ub-bk-date input, .ub-bk-pick__value) { border-color: var(--wp--preset--color--edge); font-size: 1rem; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-pick:hover .ub-bk-pick__value { border-color: var(--wp--preset--color--ink); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-pick.is-empty .ub-bk-pick__value { color: var(--wp--preset--color--muted); }

/* The search bar (ub/booking-search): the approved white pill, Preluare · Predare · Persoane split by thin lines, each a
   label above its value, the round orange search button at the end. Under 34 rem of its own width: Preluare and
   Predare side by side, Persoane under them, the button with its word under all three. */
.wp-block-ub-booking-search { container-type: inline-size; }
.wp-block-ub-booking-search .ub-bk-search__form {
	display: flex; align-items: center; gap: 0; max-inline-size: 46rem; padding: 0.5rem;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--pill); box-shadow: var(--wp--preset--shadow--soft);
}
/* The segments: the two date buttons and the people (the date fields without JavaScript) */
.wp-block-ub-booking-search .ub-bk-search__form > :is(.ub-bk-pick, .ub-bk-date, .ub-bk-search__field) {
	position: relative; flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.125rem;
	min-block-size: 56px; padding: 0.375rem 1.25rem; border-radius: var(--wp--preset--border-radius--pill); cursor: pointer;
}
.wp-block-ub-booking-search .ub-bk-search__form.is-picker > .ub-bk-date { display: none; }
.wp-block-ub-booking-search .ub-bk-search__form > .ub-bk-search__field { flex: 0 1 9rem; }
.wp-block-ub-booking-search .ub-bk-search__form > :is(label:nth-of-type(n + 2), .ub-bk-pick[data-which="end"])::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block: 25%; border-inline-start: 1px solid var(--wp--preset--color--line);
}
.wp-block-ub-booking-search .ub-bk-search__form > :is(.ub-bk-pick, .ub-bk-date, .ub-bk-search__field):hover { background: var(--wp--preset--color--base); }
.wp-block-ub-booking-search .ub-bk-search__form > :is(.ub-bk-pick, .ub-bk-date, .ub-bk-search__field):is(:hover, :focus-visible, :focus-within)::before,
.wp-block-ub-booking-search .ub-bk-search__form > :is(:hover, :focus-visible, :focus-within) + :is(.ub-bk-pick, .ub-bk-date, .ub-bk-search__field)::before,
.wp-block-ub-booking-search .ub-bk-search__form > :is(:hover, :focus-visible, :focus-within) + .ub-bk-date + .ub-bk-pick::before { visibility: hidden; }
.wp-block-ub-booking-search :is(.ub-bk-pick__label, .ub-bk-date > span, .ub-bk-search__field > span) { font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.wp-block-ub-booking-search :is(.ub-bk-pick__value, .ub-bk-date input, .ub-bk-search__field select) {
	inline-size: 100%; min-block-size: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	color: var(--wp--preset--color--ink); font-size: 1rem; line-height: 1.4; cursor: pointer;
}
.wp-block-ub-booking-search .ub-bk-pick.is-empty .ub-bk-pick__value { color: var(--wp--preset--color--muted); }
/* The focus ring is UB Kit's (kit.css): round the whole segment for the date buttons, round the list for the people;
   the module's second ring on the date's value is left out, and the focused segment gets the hover's tint */
.wp-block-ub-booking-search .ub-bk-pick:focus-visible .ub-bk-pick__value { outline: none; }
.wp-block-ub-booking-search :is(.ub-bk-pick:focus-visible, .ub-bk-date:has(:focus-visible), .ub-bk-search__field:has(:focus-visible)) { background: var(--wp--preset--color--base); }
.wp-block-ub-booking-search .ub-bk-pick.is-missing { box-shadow: inset 0 0 0 2px var(--wp--custom--form--error); }
.wp-block-ub-booking-search .ub-bk-pick.is-missing .ub-bk-pick__value { box-shadow: none; }
.wp-block-ub-booking-search .ub-bk-search__go {
	flex: none; inline-size: 56px; block-size: 56px; min-block-size: 56px; padding: 0; gap: 0;
	border-radius: var(--wp--preset--border-radius--pill); font-size: 0; white-space: nowrap;
}
.wp-block-ub-booking-search .ub-bk-search__go::before { content: ""; flex: none; inline-size: 1.5rem; block-size: 1.5rem; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat; }
@container (width < 34rem) {
	.wp-block-ub-booking-search .ub-bk-search__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--wp--preset--border-radius--card); }
	.wp-block-ub-booking-search .ub-bk-search__form > :is(.ub-bk-pick, .ub-bk-date, .ub-bk-search__field) { padding-inline: 1rem; border-radius: var(--wp--preset--border-radius--control); }
	.wp-block-ub-booking-search .ub-bk-search__form > .ub-bk-search__field { grid-column: 1 / -1; }
	.wp-block-ub-booking-search .ub-bk-search__form > label.ub-bk-search__field:nth-of-type(n + 2)::before { inset-inline: 1rem; inset-block: 0 auto; border-inline-start: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
	.wp-block-ub-booking-search .ub-bk-search__go { grid-column: 1 / -1; inline-size: auto; block-size: 52px; min-block-size: 52px; margin-block-start: 0.375rem; gap: 0.5rem; font-size: var(--wp--preset--font-size--medium); }
	.wp-block-ub-booking-search .ub-bk-search__go::before { inline-size: 1.25rem; block-size: 1.25rem; }
}
/* Its results: the caravan card's look (white, 16 px corners, the soft shadow, the photo 16:10) */
.wp-block-ub-booking-search .ub-bk-results__summary { font-size: var(--wp--preset--font-size--medium); }
.wp-block-ub-booking-search .ub-bk-result { gap: 0.5rem; border-color: var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card); box-shadow: var(--wp--preset--shadow--soft); padding-block-end: var(--wp--preset--spacing--30); }
.wp-block-ub-booking-search .ub-bk-result__img { aspect-ratio: 16 / 10; }
.wp-block-ub-booking-search .ub-bk-result__name { font-size: var(--wp--preset--font-size--large); font-weight: 600; }
.wp-block-ub-booking-search .ub-bk-result__name a:hover { text-decoration: underline; }
.wp-block-ub-booking-search .ub-bk-result__total strong { color: var(--wp--preset--color--primary-text); font-size: var(--wp--preset--font-size--large); }
.wp-block-ub-booking-search .ub-bk-result__book { margin-block-start: auto; }

/* The pop-up calendar (a <dialog> inside the form or the search: under the fields on a wide screen, a sheet from the
   bottom on a phone): the card's corners and the lifted shadow, pill controls, the days chosen in pine and the range in
   sage, "Gata" the only orange (the confirm action) */
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker {
	border-color: var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card);
	background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--lifted);
}
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker::backdrop { background: rgb(35 43 54 / 0.25); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__box { padding: 1rem 1.5rem 1.5rem; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__x:hover { background: var(--wp--preset--color--band); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__status { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__foot { padding-block-start: var(--wp--preset--spacing--30); border-block-start: 1px solid var(--wp--preset--color--line); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__clear { min-block-size: 44px; color: var(--wp--preset--color--accent); font-weight: 500; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__clear:hover { color: var(--wp--preset--color--primary-text); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__done { min-block-size: 48px; padding-inline: 1.75rem; }
@media (width < 37.5em) {
	:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker { border-radius: var(--wp--preset--border-radius--card) var(--wp--preset--border-radius--card) 0 0; }
	:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-picker__box { padding-inline: 1rem; }
}
/* The months, in the pop-up (and the form's own without JavaScript) */
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-months__nav { inline-size: 2.75rem; block-size: 2.75rem; border-color: var(--wp--preset--color--edge); color: var(--wp--preset--color--ink); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-months__nav:hover:not(:disabled) { background: var(--wp--preset--color--band); border-color: var(--wp--preset--color--ink); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-month__title { margin-block-start: 0.625rem; font-size: var(--wp--preset--font-size--medium); font-weight: 600; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-month__grid th { color: var(--wp--preset--color--muted); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-day { border-radius: 10px; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-day.is-free:hover:not(.is-start, .is-end) { background: var(--wp--preset--color--sage); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-day.is-in { background: var(--wp--preset--color--sage); }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-day__p { color: var(--wp--preset--color--muted); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
:is(.wp-block-ub-booking-search, .wp-block-ub-booking-form) .ub-bk-day:is(.is-start, .is-end) .ub-bk-day__p { color: inherit; opacity: 0.9; }

/* The availability calendar (ub/booking-calendar): the approved table. Each state a tile in its colour with its mark
   (free: the price a day, a link to book it; booked: a cross on a disc over the hatch; not available: a dash), today
   "Azi" and ringed in pine. Wide: the caravans as rows, held while the days scroll; narrow (a phone): the days as rows,
   the caravans as columns (UB Kit 1.16). Colours: theme.json custom.availability. */
.wp-block-ub-booking-calendar {
	--ub-bk-cell: 2.75rem;
	--ub-free: var(--wp--custom--availability--free); --ub-free-mark: var(--wp--custom--availability--free-mark);
	--ub-booked: var(--wp--custom--availability--booked); --ub-booked-hatch: var(--wp--custom--availability--booked-hatch);
	--ub-booked-mark: var(--wp--custom--availability--booked-mark);
	--ub-past: var(--wp--custom--availability--past); --ub-past-mark: var(--wp--custom--availability--past-mark);
}
.wp-block-ub-booking-calendar .ub-bk-cal__title { font-size: var(--wp--preset--font-size--large); font-weight: 600; }
.wp-block-ub-booking-calendar .ub-bk-cal__nav { border-color: var(--wp--preset--color--edge); color: var(--wp--preset--color--ink); }
.wp-block-ub-booking-calendar a.ub-bk-cal__nav:hover { background: var(--wp--preset--color--band); border-color: var(--wp--preset--color--ink); }
.wp-block-ub-booking-calendar .ub-bk-cal__nav.is-off { opacity: 0.35; }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll { border-color: var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--card); }
.wp-block-ub-booking-calendar .ub-bk-cal__table { border-collapse: separate; border-spacing: 3px; font-size: var(--wp--preset--font-size--small); }
.wp-block-ub-booking-calendar .ub-bk-cal__table :is(th, td) { border: 0; border-radius: 6px; }
/* No weekend tint on the heads (the state colours fill the cells; weekend days' names are orange-brown text) */
.wp-block-ub-booking-calendar .ub-bk-cal__table thead th.is-weekend,
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows tr.is-weekend th { background-color: var(--wp--preset--color--surface); }
.wp-block-ub-booking-calendar .ub-bk-cal__table :is(tbody th, .ub-bk-cal__corner) { background: var(--wp--preset--color--surface); box-shadow: 3px 0 0 var(--wp--preset--color--surface); }
.wp-block-ub-booking-calendar .ub-bk-cal__corner { color: var(--wp--preset--color--muted); }
.wp-block-ub-booking-calendar .ub-bk-cal__cap { color: var(--wp--preset--color--muted); font-size: 0.8125rem; }
/* Wide: the days' heads (weekday over date), the caravans' names */
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--wide thead th { color: var(--wp--preset--color--ink); font-size: 1rem; font-weight: 700; }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--wide thead abbr { font-size: 0.75rem; font-weight: 500; color: var(--wp--preset--color--muted); }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--wide thead th.is-weekend abbr { color: var(--wp--preset--color--primary-text); }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--wide tbody th a { color: var(--wp--preset--color--ink); font-size: 0.9375rem; }
/* Narrow: the caravans' names on top, the days down the side. The day's column stays narrow (weekday over date, the
   month under the first date) so the four caravans fit a 390 px phone (QA Q9); the table is as tall as its days (no
   scroll inside it). Where it fits its box, it isn't a scroller at all, so the caravans' names stick under the page's
   header while a month scrolls by (assets/calendar-scroll.js says whether it fits, and marks a box with more to the
   right, which then fades at its right edge). */
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--rows { max-block-size: none; }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--rows[data-fits] { overflow: visible; }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll--rows[data-fits] thead th { inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ub-header-h, 0px)); }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows { border-spacing: 2px; }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows thead th {
	padding-inline: 0.25rem; background: var(--wp--preset--color--surface); box-shadow: 0 2px 0 var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink); font-size: 0.75rem; line-height: 1.2; hyphens: manual; overflow-wrap: normal;
}
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows thead .ub-bk-cal__cap { font-size: 0.6875rem; }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows .ub-bk-cal__corner { min-inline-size: 0; inline-size: 3.25rem; }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows tbody th {
	min-inline-size: 0; inline-size: 3.25rem; max-inline-size: 3.75rem; padding-inline: 0.375rem;
	font-weight: 600; line-height: 1.15; white-space: normal;
}
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows tbody th abbr { display: block; font-size: 0.75rem; }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows .ub-bk-cal__mon { display: block; font-size: 0.6875rem; }
.wp-block-ub-booking-calendar .ub-bk-cal__scroll[data-more] { mask-image: linear-gradient(to left, transparent, #000 3rem); }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows tr.is-weekend th abbr { color: var(--wp--preset--color--primary-text); }
.wp-block-ub-booking-calendar .ub-bk-cal__table--rows tr.is-month-start :is(th, td) { border-block-start: 0; }
/* Today: "Azi" in pine (never orange text: 2.8:1 on white), its date ringed in pine; its cells ringed too */
.wp-block-ub-booking-calendar .ub-bk-cal__table th[aria-current="date"] abbr { color: var(--wp--preset--color--accent); font-weight: 700; }
.wp-block-ub-booking-calendar .ub-bk-cal__table td.is-today { box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent); }
/* The states */
.wp-block-ub-booking-calendar .ub-bk-cal__table td.is-free { background: var(--ub-free); color: var(--ub-free-mark); }
.wp-block-ub-booking-calendar .ub-bk-cal__go { border-radius: 6px; }
.wp-block-ub-booking-calendar .ub-bk-cal__go:hover { background: var(--wp--preset--color--sage); box-shadow: inset 0 0 0 2px var(--ub-free-mark); }
.wp-block-ub-booking-calendar .ub-bk-cal__price { font-size: 0.8125rem; font-weight: 700; }
.wp-block-ub-booking-calendar .ub-bk-cal__table td.is-booked { background: repeating-linear-gradient(-45deg, var(--ub-booked-hatch) 0 1.5px, var(--ub-booked) 1.5px 7px); color: var(--ub-booked-mark); }
.wp-block-ub-booking-calendar .ub-bk-cal__table td.is-booked .ub-bk-icon { box-sizing: content-box; padding: 4px; border-radius: 50%; background: var(--ub-booked); }
.wp-block-ub-booking-calendar .ub-bk-cal__table td:is(.is-past, .is-closed) { background: var(--ub-past); color: var(--ub-past-mark); opacity: 1; }
.wp-block-ub-booking-calendar .ub-bk-legend { gap: 0.5rem 1.5rem; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); }
.wp-block-ub-booking-calendar .ub-bk-legend__mark { min-inline-size: 2.25rem; block-size: 2rem; border: 0; border-radius: 6px; }
.wp-block-ub-booking-calendar .ub-bk-legend__mark.is-free { background: var(--ub-free); color: var(--ub-free-mark); font-weight: 700; }
.wp-block-ub-booking-calendar .ub-bk-legend__mark.is-booked { background: repeating-linear-gradient(-45deg, var(--ub-booked-hatch) 0 1.5px, var(--ub-booked) 1.5px 7px); color: var(--ub-booked-mark); }
.wp-block-ub-booking-calendar .ub-bk-legend__mark.is-booked .ub-bk-icon { box-sizing: content-box; padding: 3px; border-radius: 50%; background: var(--ub-booked); }
.wp-block-ub-booking-calendar .ub-bk-legend__mark.is-past { background: var(--ub-past); color: var(--ub-past-mark); }

/* The booking form (ub/booking-form, and the caravan page's add-to-cart, which turns into it): two date fields, the
   breakdown with lined-up figures, the deposit as a note on sand */
.wp-block-ub-booking-form { max-inline-size: none; }
.wp-block-ub-booking-form .ub-bk-date input:hover { border-color: var(--wp--preset--color--ink); }
/* One focus ring, the field's: not also UB Kit's ring round the whole button, label included (kit.css's ring is
   !important, hence this one) */
.wp-block-ub-booking-form .ub-bk-pick:focus-visible { outline: none !important; }
.wp-block-ub-booking-form .ub-bk-pick:focus-visible .ub-bk-pick__value { outline: 3px solid var(--ub-focus); outline-offset: 2px; }
.wp-block-ub-booking-form .ub-bk-form__status { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.wp-block-ub-booking-form .ub-bk-form__status.is-error { color: var(--wp--custom--form--error); }
.wp-block-ub-booking-form .ub-bk-form__quote { padding: var(--wp--preset--spacing--30); border-color: var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--control); background: var(--wp--preset--color--base); }
.wp-block-ub-booking-form .ub-bk-quote__when strong { font-weight: 600; }
.wp-block-ub-booking-form .ub-bk-quote__lines { font-variant-numeric: tabular-nums; }
.wp-block-ub-booking-form .ub-bk-quote__lines :is(th, td) { border-color: var(--wp--preset--color--line); }
.wp-block-ub-booking-form .ub-bk-quote__total :is(th, td) { font-size: var(--wp--preset--font-size--medium); }
.wp-block-ub-booking-form .ub-bk-quote__deposit { margin-block-start: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--wp--preset--border-radius--control); background: var(--wp--preset--color--band); color: var(--wp--preset--color--ink); }
.wp-block-ub-booking-form .ub-bk-form__submit { min-block-size: 52px; margin-block-start: 0.5rem; font-size: var(--wp--preset--font-size--medium); }
.wp-block-ub-booking-form .ub-bk-form__note { color: var(--wp--preset--color--muted); }

/* ---- Tables (core/table: the price tables) --------------------------------------------------------------------- */

/* theme.json's table border colour doesn't reach core's cell borders: soft "line" rows in a framed box with 12 px
   corners, a sand head row, words kept whole (core breaks them in narrow columns), figures lined up. Phones: tighter
   cells and smaller type, so the five-column price table fits 360–390 px without scrolling (headers wrap at spaces;
   values stay whole with their non-breaking spaces); a wider table still scrolls inside its frame. */
.wp-block-table { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--control); }
.wp-block-table table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wp-block-table :is(thead, tfoot) { border: 0; }
.wp-block-table :is(td, th) {
	padding: 0.625rem 0.875rem; border: 0; border-block-end: 1px solid var(--wp--preset--color--line);
	text-align: start; vertical-align: top; word-break: normal; overflow-wrap: normal; hyphens: manual;
}
.wp-block-table thead th { background: var(--wp--preset--color--band); font-weight: 600; line-height: 1.3; vertical-align: bottom; }
.wp-block-table tbody tr:last-child > :is(td, th) { border-block-end: 0; }
.wp-block-table tbody td:first-child { font-weight: 600; }
.wp-block-table figcaption { margin-block-start: 0.5rem; padding-inline: 0.875rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
@media (width < 600px) {
	.wp-block-table :is(td, th) { padding: 0.5rem 0.375rem; font-size: 0.8125rem; }
	.wp-block-table :is(td, th):first-child { padding-inline-start: 0.625rem; }
	.wp-block-table :is(td, th):last-child { padding-inline-end: 0.625rem; }
}

/* ---- Questions (core/details: the FAQ) -------------------------------------------------------------------------- */

/* One question per row between soft dividers; the whole question a 56 px tap target in the headings' weight, a pine
   chevron that turns when open (instantly under reduced motion or the motion toggle) */
.wp-block-details { margin-block: 0; padding: 0; border-block-end: 1px solid var(--wp--preset--color--line); }
:not(.wp-block-details) + .wp-block-details, .wp-block-details:first-child { border-block-start: 1px solid var(--wp--preset--color--line); }
.wp-block-details > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3.5rem; padding-block: 0.75rem;
	font-family: var(--wp--preset--font-family--heading); font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: ""; flex: none; inline-size: 1.25rem; block-size: 1.25rem; background: var(--wp--preset--color--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.wp-block-details[open] > summary::after { transform: rotate(180deg); }
.wp-block-details > summary:hover { color: var(--wp--preset--color--accent); }
.wp-block-details > summary:focus-visible { outline: 3px solid var(--ub-focus); outline-offset: 2px; border-radius: 4px; }
.wp-block-details > :not(summary) { margin-block: 0 1rem; padding-inline-end: 2.25rem; }
.wp-block-details > :not(summary) + :not(summary) { margin-block-start: -0.25rem; }
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .wp-block-details > summary::after { transition: transform 0.2s var(--ub-ease-site); }
}

/* Checkout and cart summary: the caravan's long text has no place next to the dates and the breakdown (2026-11-09). */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-metadata__description { display: none; }