/* Content safeguards shared by every bundled theme, including generated CSS builds. */
body { overflow-wrap: anywhere; }
:where(main, header, footer, #announcement-bar) :where(*) { min-width: 0; }
:where(main, header, footer) :where(img, video, iframe, input, select, textarea) { max-width: 100%; }
/* A picture printed with its width and height keeps its shape: the attributes reserve its place, CSS sets its size. */
:where(main, header, footer) :where(img[width][height]) { height: auto; }
:where(main, header, footer) a { max-width: 100%; }
.btn-pill, .loom-button, .loom-nav__item > a { white-space: normal; max-width: 100%; }
.btn-pill > *, .loom-button > * { min-width: 0; }
#announcement-bar .flex { flex-wrap: wrap; }
/* A footer row with more in it than fits (thirteen legal links, a long copyright beside them) wraps to another line instead of
   squeezing its words letter by letter. Zero specificity: a theme's own flex-wrap wins. */
:where(footer) :where(.flex:not(.flex-nowrap)) { flex-wrap: wrap; }
/* The same for a row of links or buttons in the page (thirteen social profiles under a team member, seven buttons in a
   hero): they wrap instead of shrinking over each other. */
:where(main) :where(.flex:not(.flex-nowrap):not(.flex-col):not(.overflow-x-auto):not([class*="snap-x"]):not(.swiper-wrapper)):where(:has(> a + a, > button + button, > a + button)) { flex-wrap: wrap; }
#site-header nav[class*="lg:flex"], .loom-nav--desktop { flex-wrap: wrap; }
#site-header :is(.h-14, .h-16, .h-20) { height: auto; min-height: 4rem; padding-block: .5rem; gap: .75rem; }
#site-header nav .group:focus-within > .invisible { opacity: 1; visibility: visible; }
#site-header nav .group > .absolute { max-width: calc(100vw - 2rem); }
#site-header nav .group > .absolute > * { min-width: min(200px, calc(100vw - 2rem)); }
.loom-nav__children { visibility: hidden; }
.loom-nav__item:is(:hover, :focus-within) > .loom-nav__children { visibility: visible; }
.loom-nav--mobile .loom-nav__children { visibility: visible; }

/* Switch crowded desktop navigation to the existing menu, not clipped links (resilience.js measures; the header declares its
   parts with data-site-nav, data-site-menu-button, data-site-cta and data-site-phone). The call to action stays in the bar
   unless it does not fit there either (theme-nav-compact-cta); the menu holds it then. */
#site-header.theme-nav-compact :is([data-site-nav], [data-theme-desktop-nav], [data-site-nav-row], [data-site-phone]),
#site-header.theme-nav-compact-cta [data-site-cta],
#site-header.theme-nav-compact > div > .hidden.lg\:flex { display: none !important; }
/* Themes without the contract (made before it): their old parts. */
#site-header.theme-nav-compact:not(:has([data-site-cta])) .hidden.lg\:inline-block,
#site-header.theme-nav-compact:not(:has([data-site-phone])) a[href^="tel:"]:not(.mobile-nav *),
#site-header.theme-nav-compact:not(:has([data-site-cta])) .loom-header__actions > .loom-button { display: none !important; }
#site-header.theme-nav-compact :is([data-site-menu-button], .mobile-menu-btn),
#site-header.theme-nav-compact .loom-menu-button { display: inline-flex !important; flex-shrink: 0; }
#site-header.theme-nav-compact .loom-menu-button { display: grid !important; }
/* The parts left in a compact bar keep one line each. */
#site-header.theme-nav-compact [data-site-cta], #site-header.theme-nav-compact [data-site-cta] * { white-space: nowrap; }
.loom-mobile-panel:not([hidden]) .loom-menu-close { display: grid; }
#site-header.theme-nav-compact .mobile-nav:not(.hidden),
#site-header.theme-nav-compact > div > .flex.lg\:hidden { display: flex !important; }
#site-header.theme-nav-compact .loom-header__inner { grid-template-columns: minmax(0, 1fr) auto; }

/* A picture whose file is missing (resilience.js): a quiet tint in the picture's place instead of the broken-image sign; a
   missing logo gives way to the website's name. */
img.theme-picture-missing { background: color-mix(in srgb, currentColor 8%, transparent); object-fit: cover; min-height: 2.5rem; }
img.theme-picture-missing--logo { display: none !important; }
.theme-logo-missing { display: inline-block; max-width: min(18rem, 60vw); overflow: hidden; font-weight: 700; font-size: 1.1em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* With JavaScript disabled, navigation and answers remain available. */
@media (scripting: none) {
  .mobile-menu-btn, .loom-menu-button, .loom-menu-close, .loom-nav__submenu-toggle { display: none !important; }
  .mobile-nav.hidden { display: block !important; max-height: none !important; }
  .loom-mobile-panel[hidden] { display: block; position: static; }
  .loom-nav--mobile .loom-nav__children[hidden] { display: block; }
  .faq-answer { max-height: none !important; opacity: 1 !important; }
}

/* White text on an accent fill reads the palette's on-accent colour: a light accent (amber, sage, lavender) gets dark text. Palettes
   and custom colours set --on-accent; without it the text stays white. */
[class~="bg-accent"][class~="text-white"],
[class~="bg-accent/90"][class~="text-white"],
[class~="hover:bg-accent"][class~="hover:text-white"]:hover { color: var(--on-accent, #fff) !important; }

/* Tables in written text (articles, Markdown pages, rich text): one layout for every theme. The Markdown parser puts each
   table in .kit-table and marks a column of amounts; themes give only the colours and type of the lines and headings.
   The table is as wide as the text column, so tables on a page line up; one too wide for a phone scrolls inside the
   wrapper, never the page; a long text column wraps while a short amount keeps its line. */
.kit-table { max-width: 100%; margin: 0 0 1.5em; overflow-x: auto; overscroll-behavior-x: contain; }
.kit-table:last-child { margin-bottom: 0; }
.kit-table > table { display: table; width: 100%; max-width: none; margin: 0; border-collapse: collapse; table-layout: auto; font-variant-numeric: tabular-nums; }
.kit-table :is(th, td) { padding: 0.65em 0.9em; text-align: start; vertical-align: top; overflow-wrap: break-word; }
.kit-table :is(th, td):first-child { padding-inline-start: 0; }
.kit-table :is(th, td):last-child { padding-inline-end: 0; }
.kit-table thead th { vertical-align: bottom; }
:where(.kit-table) :where(th, td) { border-bottom: 1px solid color-mix(in srgb, var(--text-primary, currentColor) 14%, transparent); }
:where(.kit-table) :where(thead th) { border-bottom-color: color-mix(in srgb, var(--text-primary, currentColor) 32%, transparent); font-weight: 600; }
.kit-table .kit-table__num { text-align: end; }
.kit-table .kit-table__nowrap { white-space: nowrap; }
/* A long amount still wraps, but not into a sliver beside a long name. */
.kit-table td.kit-table__num:not(.kit-table__nowrap) { min-width: min(11em, 40vw); }

/* Marked text takes the website's accent in the two themes without a rule of their own (the others set theirs). */
html:is([data-theme="chic"], [data-theme="universal"]) ::selection { background: color-mix(in srgb, var(--accent, #2563eb) 26%, transparent); color: var(--text-primary, inherit); }

/* A box that scrolls sideways inside the page gets no system scrollbar. Content a visitor has to scroll (a wide table,
   code, a slider that has not started) shows a slim bar in the colour of its own text, with no arrows; browsers without
   these parts (Firefox) take the standard pair. A row of things to tap (tabs, thumbnails) shows none: a swipe, the keyboard
   or a trackpad moves it, and its cut-off last item says there is more. Neither scrollbar-width nor scrollbar-color may be
   set on the first kind elsewhere: Chrome then ignores this look. */
:is(.kit-table, .kit-cookie-table__scroll, .kit-rich-text pre, [class*="-prose"] pre, .prose pre, .theme-swiper:not(.swiper-initialized))::-webkit-scrollbar { width: 6px; height: 6px; }
:is(.kit-table, .kit-cookie-table__scroll, .kit-rich-text pre, [class*="-prose"] pre, .prose pre, .theme-swiper:not(.swiper-initialized))::-webkit-scrollbar-track,
:is(.kit-table, .kit-cookie-table__scroll, .kit-rich-text pre, [class*="-prose"] pre, .prose pre, .theme-swiper:not(.swiper-initialized))::-webkit-scrollbar-corner { background: transparent; }
:is(.kit-table, .kit-cookie-table__scroll, .kit-rich-text pre, [class*="-prose"] pre, .prose pre, .theme-swiper:not(.swiper-initialized))::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, currentColor 30%, transparent); }
:is(.kit-table, .kit-cookie-table__scroll, .kit-rich-text pre, [class*="-prose"] pre, .prose pre, .theme-swiper:not(.swiper-initialized))::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, currentColor 48%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  :is(.kit-table, .kit-cookie-table__scroll, .kit-rich-text pre, [class*="-prose"] pre, .prose pre, .theme-swiper:not(.swiper-initialized)) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 30%, transparent) transparent; }
}
:is(.kit-tabs__list, .kit-account-nav, .kit-gallery__thumbs, .loom-project-card__thumbs) { scrollbar-width: none; }
:is(.kit-tabs__list, .kit-account-nav, .kit-gallery__thumbs, .loom-project-card__thumbs)::-webkit-scrollbar { display: none; }

/* Lists, quotes and rules in a table-less piece of written text keep their theme's look; these only stop a quote or a
   list from running past the column on a phone. */
:where(.kit-rich-text, [class*="-prose"], .prose) :where(ul, ol) { padding-inline-start: 1.35em; }
:where(.kit-rich-text, [class*="-prose"], .prose) :where(blockquote, pre) { max-width: 100%; }

/* A gallery tile in the shape its gallery takes (theme_gallery_ratio and theme_tile_classes in helpers.php: the picture
   shape the website chose, or the one that suits its pictures). The picture fills the tile and is cropped around its
   focus; the shape wins over a theme's own fixed height or aspect ratio on the tile and its picture. */
.theme-tile { display: block; width: 100%; height: auto !important; min-height: 0 !important; overflow: hidden; }
.theme-tile--4-3 { aspect-ratio: 4 / 3 !important; }
.theme-tile--1-1 { aspect-ratio: 1 / 1 !important; }
.theme-tile--3-4 { aspect-ratio: 3 / 4 !important; }
.theme-tile img { display: block; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; }

/* Grids whose rows fill (theme_balanced_grid_classes in helpers.php picks the columns from the number of items): each
   item spans two of twice as many tracks, so a short last row can start half a column in and sit centred. One set of
   column counts for a phone, a tablet and a desktop. */
/* A template may keep one of these grids for wider screens only (hidden md:grid, beside a list for phones): the grid
   must not undo that. */
.kit-balanced:not(.hidden) { display: grid; }
.kit-balanced > * { grid-column-end: span 2; min-width: 0; }
@media (max-width: 639.98px) {
  .kit-balanced.kit-bal-phone--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-phone--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-phone-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .kit-balanced.kit-bal-mid--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-mid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-mid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-mid-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
  .kit-balanced.kit-bal-mid-last--3-1 > :nth-last-child(1) { grid-column-start: 3; }
  .kit-balanced.kit-bal-mid-last--3-2 > :nth-last-child(2) { grid-column-start: 2; }
}
@media (min-width: 1024px) {
  .kit-balanced.kit-bal--1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--5 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .kit-balanced.kit-bal--6 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kit-balanced.kit-bal-last--2-1 > :nth-last-child(1) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--3-1 > :nth-last-child(1) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--3-2 > :nth-last-child(2) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--4-1 > :nth-last-child(1) { grid-column-start: 4; }
  .kit-balanced.kit-bal-last--4-2 > :nth-last-child(2) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--4-3 > :nth-last-child(3) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--5-1 > :nth-last-child(1) { grid-column-start: 5; }
  .kit-balanced.kit-bal-last--5-2 > :nth-last-child(2) { grid-column-start: 4; }
  .kit-balanced.kit-bal-last--5-3 > :nth-last-child(3) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--5-4 > :nth-last-child(4) { grid-column-start: 2; }
  .kit-balanced.kit-bal-last--6-1 > :nth-last-child(1) { grid-column-start: 6; }
  .kit-balanced.kit-bal-last--6-2 > :nth-last-child(2) { grid-column-start: 5; }
  .kit-balanced.kit-bal-last--6-3 > :nth-last-child(3) { grid-column-start: 4; }
  .kit-balanced.kit-bal-last--6-4 > :nth-last-child(4) { grid-column-start: 3; }
  .kit-balanced.kit-bal-last--6-5 > :nth-last-child(5) { grid-column-start: 2; }
}

/* The steps block (kit-blocks/process_steps.php, .kit-steps) on a phone, where the steps stand in one column: the number, the
   icon and the title share one line and the description runs under them, instead of number, title and icon stacked. */
@media (max-width: 639.98px) {
  .kit-steps .kit-card__content { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; }
  .kit-steps .kit-card__eyebrow { grid-column: 1; grid-row: 1; margin: 0; }
  .kit-steps .kit-card__body { display: contents; }
  .kit-steps .kit-card__body > .kit-icon:first-child { grid-column: 2; grid-row: 1; margin: 0; }
  .kit-steps .kit-card__title { grid-column: 3; grid-row: 1; margin: 0; }
  .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__title { grid-column: 2 / -1; }
  .kit-steps .kit-card__body > :not(.kit-icon:first-child) { grid-column: 1 / -1; margin-top: 0.5rem; }
  /* With an icon the icon leads the line and the number follows it as a quiet label (kit.css), then the title. */
  .kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow { grid-column: 2; }
  .kit-steps .kit-card__body > .kit-icon:first-child { grid-column: 1; }
}

/* A masonry gallery (image_gallery with layout masonry): every picture whole, in two columns on a phone, three on a
   tablet and up to four on a desktop, for a gallery page of 20 to 40 pictures. */
/* A picture that asked to be shown whole (its media object's fit: "whole", CMS 4.21.1: a map, a plan, a poster) is never
   cropped: its frame takes the picture's own shape. A picture with a focus keeps that part in view (object-position on
   the picture itself, from ResponsiveImages::img). */
img[data-fit="whole"] { object-fit: contain !important; }
.kit-picture:has(img[data-fit="whole"]) { aspect-ratio: auto !important; height: auto !important; align-self: start; }
.kit-picture:has(img[data-fit="whole"]) img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; animation: none !important; }

/* A flat shade a theme lays over a picture or video (Chic, Universal): the layer names its own strength (--shade) and
   follows the block's tint (--pgs-tint, 1 unless the block asked for a lighter or a darker shade; CMS 4.21.2). */
.theme-shade { background-color: rgb(0 0 0 / min(0.94, calc(var(--shade, 0.55) * var(--pgs-tint, 1)))) !important; }

/* width: inside a stack that starts its children at the left, the columns would shrink to fit their pictures and leave
   the rest of a wide window empty (4.21.1). */
.kit-masonry { columns: 2; column-gap: 0.75rem; width: 100%; }
.kit-masonry > * { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: auto; margin: 0 0 0.75rem; break-inside: avoid; }
.kit-masonry img { display: block; width: 100%; height: auto; }
@media (min-width: 640px) { .kit-masonry { columns: 3; column-gap: 1rem; } .kit-masonry > * { margin-bottom: 1rem; } }
@media (min-width: 1024px) { .kit-masonry--4 { columns: 4; } .kit-masonry--2 { columns: 2; } }

/* The top of the page on a phone: the announcement's message keeps to at most two lines, and its link is never cut or
   hidden (it is often the phone number): beside the message when both fit, on a line of its own when they do not, whole
   and tall enough to tap. The close button keeps its place at the end of the band, out of the flow, so it never moves
   to a line of its own. The phone and email band above the header gives way to the action bar's Call button (or keeps to
   one short line when there is no phone), so the page itself starts within about 120 px. */
@media (max-width: 639.98px) {
  .theme-announcement__row { position: relative !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.15rem 0.6rem !important; padding-block: 0.4rem !important; font-size: 0.8125rem !important; line-height: 1.3 !important; text-align: center !important; }
  .theme-announcement__row:has(> button) { padding-inline-end: 2.5rem !important; }
  .theme-announcement__row > :not(a, button) { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
  .theme-announcement__row > a { display: inline-flex !important; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 1.75rem; max-width: 100%; margin: 0; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
  .theme-announcement__row > button { position: absolute !important; inset-inline-end: 0.25rem; inset-inline-start: auto !important; top: 50% !important; flex: none; width: 2rem; height: 2rem; margin: 0 !important; transform: translateY(-50%) !important; }
  .theme-announcement__message { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-align: center; }
  body:has(> .theme-action-bar .theme-action-bar__call) :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar, .loom-topline) { display: none; }
  :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar) { font-size: 0.8rem; }
  :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar) > * { flex-wrap: nowrap !important; padding-block: 0.3rem !important; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  :is(.atelier-topbar, .encore-topbar, .forge-topbar, .grove-topbar, .kite-topbar, .muse-topbar, .pulse-topbar, .saffron-topbar) [class$="__social"] { display: none; }
}

/* The parts of a stock enquiry form a theme draws with theme_enquiry_fields_html and theme_enquiry_after_html (CMS 4.21.0):
   a yes/no question and its two answers, a ticked box with its words, the notes under the button and the call line. The
   theme's own classes give the inputs their look; these only lay out what every theme draws the same way. */
.theme-enquiry-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-enquiry-legend { display: block; margin-bottom: 0.5rem; padding: 0; font-size: 0.875rem; font-weight: 500; }
.theme-enquiry-choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.theme-enquiry-check { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; cursor: pointer; }
.theme-enquiry-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent, currentColor); }
.theme-enquiry-notes { display: grid; gap: 0.35rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.5; opacity: 0.85; }
.theme-enquiry-notes li { position: relative; padding-inline-start: 1.1rem; }
.theme-enquiry-notes li::before { content: ""; position: absolute; inset-inline-start: 0.2rem; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent, currentColor); }
.theme-enquiry-call { margin: 0.85rem 0 0; font-size: 0.9375rem; text-align: center; }
.theme-enquiry-call__link { font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.2em; color: inherit; }
.kit-enquiry .kit-form__call { text-align: center; }

/* Each theme's main button, for the parts every theme shares and draws outside the Theme Kit: the phone action bar below
   and the cookie notice (cookie-consent.php). The values repeat what the theme's kit-theme.css gives its primary button
   (cms/tests/theme-chrome.test.mjs holds the two together), so these parts never look borrowed from another website.
   Zero specificity: a client theme sets its own on :root. */
:where(:root) {
  --chrome-radius: 0.5rem;
  --chrome-button-radius: 0.5rem;
  --chrome-button-fill: var(--primary, #1a1a1a);
  --chrome-button-ink: var(--on-primary, #fff);
  --chrome-button-font: var(--font-body, inherit);
  --chrome-button-size: 1rem;
  --chrome-button-weight: 600;
  --chrome-button-tracking: 0;
  --chrome-button-case: none;
  --chrome-button-border: 0;
  --chrome-button-shadow: none;
  --chrome-button-clip: none;
}
:where(html[data-theme="atelier"]) { --chrome-radius: 0; --chrome-button-radius: 0; --chrome-button-size: 0.72rem; --chrome-button-weight: 500; --chrome-button-tracking: 0.18em; --chrome-button-case: uppercase; }
:where(html[data-theme="bankside"]) { --chrome-radius: 0; --chrome-button-radius: 0; --chrome-button-size: 0.75rem; --chrome-button-tracking: 0.08em; --chrome-button-case: uppercase; }
:where(html[data-theme="chic"]) { --chrome-radius: 0; --chrome-button-radius: 0; --chrome-button-size: 0.8125rem; --chrome-button-tracking: 0.08em; --chrome-button-case: uppercase; }
:where(html[data-theme="encore"]) { --chrome-radius: 0; --chrome-button-radius: 0; --chrome-button-fill: var(--accent, #1a1a1a); --chrome-button-ink: var(--on-accent, #fff); --chrome-button-size: 0.78rem; --chrome-button-tracking: 0.2em; --chrome-button-case: uppercase; }
:where(html[data-theme="forge"]) { --chrome-radius: 0; --chrome-button-radius: 0; --chrome-button-fill: var(--accent, #1a1a1a); --chrome-button-ink: var(--on-accent, #fff); --chrome-button-font: var(--font-heading, inherit); --chrome-button-size: 1.05rem; --chrome-button-tracking: 0.04em; --chrome-button-case: uppercase; --chrome-button-clip: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0.7rem 100%, 0 calc(100% - 0.7rem)); }
:where(html[data-theme="grove"]) { --chrome-radius: 1.5rem; --chrome-button-radius: 1.25rem 0.35rem; --chrome-button-fill: var(--accent, #1a1a1a); --chrome-button-ink: var(--on-accent, #fff); }
:where(html[data-theme="haven"]) { --chrome-radius: 0.875rem; --chrome-button-radius: 999px; --chrome-button-size: 0.9375rem; --chrome-button-weight: 500; --chrome-button-tracking: 0.01em; }
:where(html[data-theme="kite"]) { --chrome-radius: 1.5rem; --chrome-button-radius: 999px; --chrome-button-fill: var(--accent, #1a1a1a); --chrome-button-ink: var(--on-accent, #fff); --chrome-button-weight: 700; --chrome-button-border: 2px solid var(--text-primary, #231942); --chrome-button-shadow: 3px 3px 0 var(--text-primary, #231942); }
:where(html[data-theme="loom"]) { --chrome-radius: 1.25rem; --chrome-button-radius: 999px; --chrome-button-size: 0.86rem; --chrome-button-weight: 750; }
:where(html[data-theme="modern"]) { --chrome-radius: 1.15rem; --chrome-button-radius: 9999px; --chrome-button-size: 0.9rem; }
:where(html[data-theme="muse"]) { --chrome-radius: 1.5rem; --chrome-button-radius: 999px; --chrome-button-size: 0.95rem; --chrome-button-weight: 500; --chrome-button-tracking: 0.01em; }
:where(html[data-theme="pulse"]) { --chrome-radius: 0; --chrome-button-radius: 0; --chrome-button-fill: var(--accent, #1a1a1a); --chrome-button-ink: var(--on-accent, #fff); --chrome-button-size: 0.875rem; --chrome-button-tracking: 0.09em; --chrome-button-case: uppercase; --chrome-button-clip: polygon(0.6rem 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%); }
:where(html[data-theme="saffron"]) { --chrome-radius: 0.6rem; --chrome-button-radius: 0.45rem; --chrome-button-fill: var(--accent, #1a1a1a); --chrome-button-ink: var(--on-accent, #fff); --chrome-button-size: 0.9rem; --chrome-button-tracking: 0.08em; --chrome-button-case: uppercase; --chrome-button-shadow: inset 0 -3px 0 color-mix(in srgb, #000 16%, transparent); }
:where(html[data-theme="universal"]) { --chrome-radius: 0.75rem; --chrome-button-radius: 0.5rem; --chrome-button-size: 0.9375rem; }

/* The phone action bar (theme_action_bar_html, shown by resilience.js): the page's main action and a Call button fixed to
   the bottom of a phone screen, above the safe area. It slides in once the visitor has scrolled past the first screen
   and away while a form field has focus, while the place its action leads to is on screen and near the footer. The
   page keeps room for it below its last line, so nothing shifts when it appears. Its two buttons are the theme's own
   (the --chrome-button values above): the filled one for the action, the outlined one for the call. */
.theme-action-bar { display: none; }
@media (max-width: 767.98px) {
  /* The bar steps aside near the footer, so only a page without one needs room below its last line. */
  body:has(> .theme-action-bar):not(:has(footer)) { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .theme-action-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem max(0.75rem, env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
    border-top: 1px solid color-mix(in srgb, var(--text-primary, #1a1a1a) 12%, transparent);
    background: color-mix(in srgb, var(--surface, #fff) 96%, transparent);
    box-shadow: 0 -8px 24px -16px color-mix(in srgb, var(--text-primary, #1a1a1a) 45%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    will-change: transform;
  }
  .theme-action-bar.is-shown { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
  .theme-action-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: var(--chrome-button-radius);
    font-family: var(--chrome-button-font);
    font-size: var(--chrome-button-size);
    font-weight: var(--chrome-button-weight);
    letter-spacing: var(--chrome-button-tracking);
    text-decoration: none;
    text-transform: var(--chrome-button-case);
    -webkit-tap-highlight-color: transparent;
  }
  .theme-action-bar a:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
  .theme-action-bar__primary {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.35rem 1rem;
    border: var(--chrome-button-border);
    background: var(--chrome-button-fill);
    box-shadow: var(--chrome-button-shadow);
    clip-path: var(--chrome-button-clip);
    color: var(--chrome-button-ink);
    line-height: 1.15;
    text-align: center;
  }
  .theme-action-bar__primary[hidden] { display: none; }
  .theme-action-bar__label, .theme-action-bar__note { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .theme-action-bar__note { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; opacity: 0.9; text-transform: none; }
  .theme-action-bar__note[hidden] { display: none; }
  .theme-action-bar__call {
    flex: 0 0 auto;
    gap: 0.4rem;
    padding: 0 1rem;
    border: 1.5px solid color-mix(in srgb, var(--text-primary, #1a1a1a) 22%, transparent);
    color: var(--text-primary, #1a1a1a);
  }
  .theme-action-bar__primary[hidden] + .theme-action-bar__call { flex: 1 1 auto; }
  .theme-action-bar__call svg { flex: none; width: 1.25rem; height: 1.25rem; }
  /* The small cookie button stands above the bar, never on its first button. */
  body:has(> .theme-action-bar.is-shown) .pagestic-cookie-manage { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .theme-action-bar, .theme-action-bar.is-shown { transition: none; }
}

/* The first section under the breadcrumb starts close to it: the breadcrumb already opens the page, so a full band of
   empty space above the first heading (about 130 px) only pushes the content down. */
main > nav[aria-label]:first-child + .kit-root:not(.pgs-page-title) > .kit-section:first-child { padding-top: clamp(1.5rem, 3.5vw, 3rem); }
main > nav[aria-label]:first-child + section { padding-top: clamp(1.5rem, 3.5vw, 3rem); }
/* With the page title header between them (kit.css, .pgs-page-title: its own compact top, nothing below), the first
   section follows the title as closely as a section follows its heading, so breadcrumb, title and content read as one. */
.pgs-page-title + .kit-root > .kit-section:first-child,
.pgs-page-title + section { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
/* A page whose first block opens with its own heading gets no title header: that heading is the page's h1 (PageHead::
   promoteOpeningHeading). It keeps its block's look, eyebrow, ornament and spacing, a step larger (about the size of the
   title header's) so it reads as the page's heading, not a section's. Here, not in kit.css: a theme's own block may open the
   page on a page that draws nothing with the kit. */
h1.pgs-page-heading { zoom: 1.15; }

/* A logo in its own colours that would vanish into what is behind it (resilience.js decides from its pixels) sits on a
   plate of the opposite lightness. */
.brand-logo-original.brand-logo-plate { box-sizing: content-box; padding: 0.4rem 0.65rem; border-radius: 0.6rem; }
.brand-logo-original.brand-logo-plate--light { background: #fbfaf7; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.brand-logo-original.brand-logo-plate--dark { background: #1d1f22; }

/* The footer's large name (theme_footer_wordmark, site setting footer_wordmark) in a theme with no look of its own for it: the
   heading face in a faded shade of the footer's text, as large as its length lets it be on one line of the screen (capped),
   centred under the footer, never wider than the page. Decoration: hidden from screen readers, not selectable. */
.theme-footer-wordmark {
  display: block;
  max-width: 100%;
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  overflow: hidden;
  color: currentColor;
  font-family: var(--font-heading, inherit);
  font-size: clamp(2rem, calc(min(100vw, 80rem) * 0.88 / (var(--theme-wordmark-chars, 10) * 0.62)), 9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.95;
  opacity: 0.12;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: center;
  user-select: none;
}

/* The website's name beside its mark in a footer is never cut: the header keeps it to one line (and an ellipsis) to hold its
   bar together, but a footer has the room, so the name wraps under itself instead ("Baidarių nu…" in a footer column, CMS
   4.20). Important: the Tailwind themes write the header's limits inline (render_brand_text). */
footer .brand-lockup-text {
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* On a phone, where the header bar is narrowest, a name that does not fit one line beside the menu button takes a second,
   balanced line ("Baidarių / nuomėlė") instead of an ellipsis; only a name longer than two lines is cut, at the end of the
   second. A desktop header keeps the theme's one line. */
@media (max-width: 639.98px) {
header .brand-lockup-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}
}
/* A menu entry or footer link that leads to another website ends in a small drawn arrow, in the link's own colour, so nobody
   types one into the label: OutsideLinks puts an empty .pgs-outside-arrow at the end of such a link on the finished page (an
   element, because themes draw their own underlines with a link's ::after). It shows in a header, a menu, a drawer and a
   footer; anywhere else (a link in the page's text) it stays hidden. */
.pgs-outside-arrow { display: none; }
:is(header, footer, nav, dialog, [data-site-nav], [data-site-drawer], [class*="mobile"]) .pgs-outside-arrow {
  display: inline-block;
  flex: none;
  width: 0.62em;
  height: 0.62em;
  margin-inline-start: 0.3em;
  vertical-align: 0.06em;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) {
  :is(header, footer, nav, dialog, [data-site-nav], [data-site-drawer], [class*="mobile"]) .pgs-outside-arrow { forced-color-adjust: none; background: LinkText; }
}