/* WhatsMenu Site module: block CSS for composed pages and catalog-page
   slot blocks. Served as a file so the browser caches it; it was ~64 KB
   inlined on every page with blocks. Linked from
   site::storefront.block-styles, which also emits the one per-merchant
   rule (the :root accent variables) inline. */
.wm-block,
.wm-band {
    padding-top: var(--wm-block-top, var(--wm-block-y));
    padding-bottom: var(--wm-block-bottom, var(--wm-block-y));
}
.wm-sitecarousel .cx-hero, .wm-sitecarousel .lm-hero, .wm-sitecarousel .vl-hero { margin-top: 0; margin-bottom: 0; }
/* The carousel block deliberately has NO padding rule of its own: it takes
   .wm-block's, like every other block, so "none" means flush and nothing else
   does. It used to default to flush here, which inverted the scale — "normal"
   is the one setting that emits no inline vars, so it fell through to the 0
   fallback while "compact" set an explicit half-rhythm and ended up with MORE
   padding than normal. Removing spacing is the spacing control's job. */
/* A colour band spans the page while the block inside keeps the container's
   width, so a banded block sits on the same left edge as the plain ones above
   and below. A band that stopped at the container would read as one more card
   in a column of cards, and could not build the alternating rhythm a long page
   needs. The floor keeps a short block reading as a zone rather than a stripe. */
/* A photo band needs a height of its own. Every other band is as tall as
   its content, which is right for a colour: the colour has nothing to show.
   A photo does, and a band carrying one line of text over a 1920-wide
   landscape crops it to a 130px sliver where the moment in it is unreadable.
   A floor rather than a fixed height, so a photo band with a lot of copy
   still grows past it, and capped in px so it does not take over a tall
   desktop screen. The content centres in whatever height wins. */
/* The band above this one is the same colour, so the two are one panel and
   the seam should read as one gap rather than two stacked paddings. The
   remaining gap is the upper band's bottom padding, which is the spacing the
   page asked for in the first place.

   Doubled class on purpose: .wm-band redeclares its padding twice below,
   once inside a media query, so this needs to win on specificity rather
   than on source order. */
.wm-band.wm-band--joined { padding-top: 0; }
.wm-band--image {
    min-height: var(--wm-band-min, min(46vh, 460px));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wm-band {
    padding-top: max(var(--wm-block-top, var(--wm-block-y)), var(--wm-band-floor, 2rem));
    padding-bottom: max(var(--wm-block-bottom, var(--wm-block-y)), var(--wm-band-floor, 2rem));
}
html { overflow-x: clip; }
.wrapper:not(.wrapper-full) .wm-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* The band owns the rhythm; the block inside contributes none of its own.
   !important because of the template rules it has to beat: PromoCards' own
   padding rule renders after this sheet, and Spreader paints .wm-promocards
   white, which would cover the band it sits on. */
.wm-band > .wm-block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}
/* Card surfaces are derived from the text colour, not stated. A fixed grey
   line is nearly invisible on a dark band and slightly wrong on every tinted
   one, so the line and the fill are mixed from currentColor and follow the ink
   wherever the card is placed. The fill is what makes a card read as a card on
   a coloured band without repainting it in a second colour. It is deliberately
   faint: on the warm cream grounds these pages use, 5% read as a grey box, so
   the fill only has to separate the card from the ground, not tint it.
   Fallbacks first, for a browser without color-mix. */
.wm-block, .wm-band {
    --wm-card-line: rgba(127,127,127,.3);
    --wm-card-fill: transparent;
}
@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
    .wm-block, .wm-band {
        --wm-card-line: color-mix(in srgb, currentColor 22%, transparent);
        --wm-card-fill: color-mix(in srgb, currentColor 2.5%, transparent);
    }
}
/* Ink is derived from the band, so it must beat the template's own colours. */
.wm-ink-light, .wm-ink-light .page-content, .wm-ink-light .wm-promocards__heading, .wm-ink-light .wm-promocards__lead, .wm-ink-light .wm-catalogblock__heading, .wm-ink-light .wm-catalogblock__lead, .wm-ink-light .wm-locationsblock__heading, .wm-ink-light .wm-locationsblock__lead, .wm-ink-light .wm-enquiryblock__heading, .wm-ink-light .wm-enquiryblock__lead, .wm-ink-light .wm-reviewsblock__heading, .wm-ink-light .wm-reviewsblock__lead, .wm-ink-light .wm-faqblock__heading, .wm-ink-light .wm-faqblock__lead { color: #fff !important; }
/* The button opts out: it paints its own fill, so forcing the ink colour
   onto it puts white text on a white button. */
.wm-ink-light .page-content a:not(.wm-cta) { color: #fff !important; text-decoration: underline; }
/* A link inside a sentence, anywhere else. Only a LONE link becomes the
   block's call to action, so a phone number or a reference in running prose
   fell through to the framework's default blue — the one colour on the page
   that belongs to no palette. It takes the theme colour and keeps its
   underline, because in prose the underline is what marks it as a link. */
.wm-sitetext .page-content a:not(.wm-cta) { color: var(--wm-theme-text, var(--wm-theme, #333)); text-decoration: underline; }
/* A band carries its own ground, so the theme-as-text follows the band. */
@supports (color: oklch(from red l c h)) {
    .wm-ink-light { --wm-theme-text: oklch(from var(--wm-theme) max(l, 0.78) c h); }
    .wm-ink-dark { --wm-theme-text: oklch(from var(--wm-theme) min(l, 0.5) c h); }
}
/* Prose headings named explicitly: a template may pin their colour with
   !important (Lumea does), and an element selector outranks inheritance. */
.wm-ink-light .page-content h1, .wm-ink-light .page-content h2, .wm-ink-light .page-content h3, .wm-ink-light .page-content h4, .wm-ink-light .page-content h5, .wm-ink-light .page-content h6 { color: #fff !important; }
.wm-ink-dark .page-content h1, .wm-ink-dark .page-content h2, .wm-ink-dark .page-content h3, .wm-ink-dark .page-content h4, .wm-ink-dark .page-content h5, .wm-ink-dark .page-content h6 { color: #1a1a1a !important; }
.wm-ink-dark, .wm-ink-dark .page-content, .wm-ink-dark .wm-promocards__heading, .wm-ink-dark .wm-promocards__lead, .wm-ink-dark .wm-catalogblock__heading, .wm-ink-dark .wm-catalogblock__lead, .wm-ink-dark .wm-locationsblock__heading, .wm-ink-dark .wm-locationsblock__lead, .wm-ink-dark .wm-enquiryblock__heading, .wm-ink-dark .wm-enquiryblock__lead, .wm-ink-dark .wm-reviewsblock__heading, .wm-ink-dark .wm-reviewsblock__lead, .wm-ink-dark .wm-faqblock__heading, .wm-ink-dark .wm-faqblock__lead { color: #1a1a1a !important; }
/* THE BLOCK TYPE SCALE. Ten tokens, shared by every block type here and by
   PromoCards, so a promo row and a text block on one page read as one family.

     --wm-block-title      section headings: promo group, catalog, locations,
                           enquiry, reviews, FAQ, and "##" in a text block
     --wm-block-lead       the line under a section heading. Flat, not fluid:
                           a clamp floored under 1rem put this line BELOW the
                           body text it introduces on every screen narrower
                           than a large monitor, which is backwards.
     --wm-card-title       card names, and "###" in a text block. Flat, not
                           fluid: its old clamp only reached the top of its
                           range past 1430px, so every phone, tablet and
                           laptop sat on the floor — 2px above the card's own
                           description once that came up to 16px, which is not
                           a name and a paragraph, it is one grey block.
     --wm-card-text        card descriptions
     --wm-card-text-sm     the same, under 768px
     --wm-card-title-sm    card names, under 768px
     --wm-block-lead-sm    the line under a section heading, under 768px
     --wm-band-statement   a lone heading on a photo band
     --wm-prose-text       body paragraphs in a text block
     --wm-prose-text-sm    the same, under 768px
     --wm-block-align      where a section heading and its lead sit: center
                           (default) or start. Not the catalog page's category
                           headings, which are the template's own.

   THE RULE, and it is load-bearing: a module NEVER declares these in a :root
   rule. It only reads one, with the platform default in the var() fallback.
   Module CSS is emitted inline in the body, so a :root here would beat a
   template's :root in the head purely on source order, and the template could
   only win back with !important on every selector — which is exactly what
   Lumea had to do before this existed. With the default in the fallback there
   is nothing to out-rank: a template's :root is the only declaration of the
   property, so it wins by existing.

   A new template therefore gets a sensible scale for free, and overrides it by
   adding one line per token to the :root it already has for --wm-theme. It
   never touches a module, never restates these selectors, and cannot be
   defeated by which stylesheet happens to load last.

   Prose headings inside a text block take the same scale, so "## Our story"
   sits at the size of the promo block heading beside it. Scoped to blocks: a
   plain Markdown page keeps the template's own heading sizes. */
/* Heading levels inside a text block, as one ladder rather than two ends of
   one. h3 used to borrow --wm-card-title, which belongs to a different family
   entirely: h2 landed at 40px and h3 at 20px, an exact halving with nothing in
   between, and a merchant writing "###" watched their subheading collapse. h4
   and below were never sized at all, so they fell through to Bootstrap's 1.5rem
   and came out LARGER than the h3 above them.

   Each step is a fraction of the block title, so a template that sets one token
   moves the whole ladder and the intervals survive. --wm-h-base is private to
   this block — a local alias so the fallback is written once, not five times.
   It is deliberately not one of the five public tokens and is not on :root.

   The multipliers are a geometric 1.25 apart — a major third — so every step
   down is the same proportional drop. An eyeballed set is not: the first one
   I wrote ran 1.39, 1.24, 1.16, 1.09, which put the biggest jump between h2
   and h3, exactly where it is most visible and where a merchant writing "##"
   then "###" watches the size fall off a cliff.

   The max() floors stop the small end collapsing on a phone, where the base is
   30px and a bare multiple would put h5 and h6 under body text. */
.wm-sitetext .page-content { --wm-h-base: var(--wm-block-title, clamp(1.875rem, 3.2vw, 2.5rem)); }
/* Prose body size. Paragraphs in a text block had no rule at all, so they
   fell through to Bootstrap's 1rem at every width — the one piece of type on
   the page that never responded to anything. On a wide column 16px is fine;
   in a 343px phone column, under a 30px heading, it reads undersized, which
   is the shape of the complaint every time.

   A phone value rather than a clamp, because a clamp can only grow WITH the
   viewport and the need here runs the other way: the narrow screen is the one
   that wants the larger number. Two tokens, each with one job, so a template
   can move either end without touching this file. */
.wm-sitetext .page-content { font-size: var(--wm-prose-text, 1rem); }
.wm-sitetext .page-content h2 { font-size: var(--wm-h-base); font-weight: 700; line-height: 1.2; margin: 0 0 .75rem; }
.wm-sitetext .page-content h3 { font-size: max(1.25rem, calc(var(--wm-h-base) * .8)); font-weight: 700; line-height: 1.25; margin: 0 0 .5rem; }
.wm-sitetext .page-content h4 { font-size: max(1.0625rem, calc(var(--wm-h-base) * .64)); font-weight: 700; line-height: 1.3; margin: 0 0 .5rem; }
.wm-sitetext .page-content h5 { font-size: max(1rem, calc(var(--wm-h-base) * .512)); font-weight: 700; line-height: 1.35; margin: 0 0 .375rem; }
.wm-sitetext .page-content h6 { font-size: max(.9375rem, calc(var(--wm-h-base) * .41)); font-weight: 700; line-height: 1.4; margin: 0 0 .375rem; }
/* Bootstrap gives every <p> a 1rem bottom margin, so a block ending in a
   paragraph carries that gap on top of the block's own padding, and a short
   one-line block sits noticeably high in its band. The space around prose is
   the block's job, not the last paragraph's, so the outer margins go. */
.wm-sitetext .page-content > :last-child,
.wm-sitetext .wm-sitetext__prose > :last-child { margin-bottom: 0; }
.wm-sitetext .page-content > :first-child,
.wm-sitetext .wm-sitetext__prose > :first-child { margin-top: 0; }
/* A paragraph holding nothing but a link is the block's call to action;
   PageSection::markCallsToAction tags it.

   Two weights, decided by the band rather than by the author, since Markdown
   has no syntax for "this link matters more than that one".

   Only one of them is a button. A page that makes every lone link a button
   ends up with four or five of them, most pointing at pages already in the
   nav, and the one action the page actually wants stops standing out. A dark
   or photo band is a page saying "this is the moment", so that one gets the
   filled button. Everywhere else the link stays a link — bold, in the brand
   colour, with an arrow — which reads as "more this way" rather than as a
   footnote, without spending the page's one loud gesture on a shortcut. */
.wm-sitetext__cta { margin-top: 1.5rem; }
.wm-sitetext__cta > a.wm-cta {
    display: inline-block; text-decoration: none;
    font-weight: 600; line-height: 1.2;
    color: var(--wm-accent-line, var(--wm-theme-text, var(--wm-theme, #333)));
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease;
}
.wm-sitetext__cta > a.wm-cta::after { content: "\2192"; margin-left: .4em; display: inline-block; transition: transform .15s ease; }
.wm-sitetext__cta > a.wm-cta:hover, .wm-sitetext__cta > a.wm-cta:focus-visible {
    text-decoration: none; color: var(--wm-accent-line, var(--wm-theme-text, var(--wm-theme, #333)));
    border-bottom-color: currentColor;
}
.wm-sitetext__cta > a.wm-cta:hover::after, .wm-sitetext__cta > a.wm-cta:focus-visible::after { transform: translateX(.2em); }
/* A row of calls to action: two or more links alone in one paragraph. A
   flex row rather than inline text, so the buttons keep an even gap and wrap
   together on a phone instead of breaking mid-pair. text-align cannot move a
   flex child, hence the explicit justify-content for a centred block. */
.wm-sitetext__cta--row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.wm-sitetext--center .wm-sitetext__cta--row { justify-content: center; }
/* Beside a filled button, an arrow link reads as an afterthought and sits
   on the wrong baseline. In a row the plain links become bordered buttons,
   so the pair is a primary and a secondary. Alone, a plain link is still the
   arrow link — that is the whole point of the single-link case. */
.wm-sitetext__cta--row > a.wm-cta:not(.wm-cta--button) {
    padding: .625rem 1.5rem; border-radius: .5rem;
    border: 2px solid currentColor; border-bottom-color: currentColor;
}
.wm-sitetext__cta--row > a.wm-cta:not(.wm-cta--button)::after { content: none; }
.wm-sitetext__cta--row > a.wm-cta:not(.wm-cta--button):hover,
.wm-sitetext__cta--row > a.wm-cta:not(.wm-cta--button):focus-visible { opacity: .75; }
/* A bold lone link is the filled button on a light band as well: theme
   fill, its derived ink, the arrow kept. The page's one loud gesture, so the
   merchant asks for it with the bold rather than getting it on every link. */
.wm-sitetext__cta > a.wm-cta--button {
    padding: .625rem 1.5rem; border-radius: .5rem; border-bottom: 0;
    background: var(--wm-theme, #333); color: var(--wm-theme-ink, #fff);
    transition: opacity .15s ease;
}
.wm-sitetext__cta > a.wm-cta--button:hover, .wm-sitetext__cta > a.wm-cta--button:focus-visible {
    opacity: .85; color: var(--wm-theme-ink, #fff); border-bottom: 0;
}
/* The one filled button. On a photo the fill is the accent, or white when
   there is none: the band's overlay is usually a dark wash of the theme
   colour, so a theme-filled button would be competing with its own
   background. Hover softens the fill rather than emptying it, because a
   transparent button over a busy photo is the weakest state a call to action
   can have. */
.wm-ink-light .wm-sitetext__cta > a.wm-cta {
    padding: .625rem 1.5rem; border-radius: .5rem; border-bottom: 0;
    background: var(--wm-accent, #fff); color: var(--wm-accent-ink, var(--wm-theme-text-on-light, var(--wm-theme, #333)));
    transition: opacity .15s ease;
}
.wm-ink-light .wm-sitetext__cta > a.wm-cta::after { content: none; }
.wm-ink-light .wm-sitetext__cta > a.wm-cta:hover, .wm-ink-light .wm-sitetext__cta > a.wm-cta:focus-visible {
    opacity: .85; color: var(--wm-accent-ink, var(--wm-theme-text-on-light, var(--wm-theme, #333)));
}
.wm-ink-light .wm-sitetext__cta--row > a.wm-cta:not(.wm-cta--button) {
    background: transparent; color: #fff; border: 2px solid currentColor;
}
/* A heading that OPENS a photo band is a statement, not a section label, so
   it does not take the block-title scale the rest of the page uses. At section
   size over a 460px photograph it reads as a caption someone forgot to finish;
   the point of the block is that the line and the picture are one gesture.

   :first-child, not :only-child. The narrower test made the statement collapse
   to section size the moment the block gained a supporting line, which is a
   cliff nobody would predict from the editor — and it left a closing CTA over
   a photo, heading plus line plus button, at the same size as an ordinary
   section heading four blocks up.

   Its own token rather than a multiple of --wm-block-title, because it has to
   stay clearly above whatever a template sets its section headings to. */
.wm-band--image .wm-sitetext .page-content > h2:first-child {
    font-size: var(--wm-band-statement, clamp(2.25rem, 5vw, 3.5rem));
    line-height: 1.15;
    max-width: 16em;
}
/* The width cap is the statement's; where it sits follows the block's
   alignment. Auto margins only when the prose is centred, or a left-aligned
   band shows a centred heading over a left paragraph. */
.wm-band--image .wm-sitetext--center .page-content > h2:first-child { margin-left: auto; margin-right: auto; }
.wm-sitetext .page-content h2:not(:first-child) { margin-top: 1.5rem; }
.wm-sitetext .page-content h3:not(:first-child) { margin-top: 1.25rem; }
.wm-sitetext .page-content h4:not(:first-child) { margin-top: 1.125rem; }
.wm-sitetext .page-content h5:not(:first-child),
.wm-sitetext .page-content h6:not(:first-child) { margin-top: 1rem; }
/* Centred prose. The heading and paragraph rules above set no alignment, so
   this one class carries the whole block; lists keep their own left edge,
   because a centred bullet list has no edge for the eye to follow. */
.wm-sitetext--center .page-content{text-align:center}
.wm-sitetext--center .page-content ul,.wm-sitetext--center .page-content ol{text-align:left;display:inline-block}
.wm-sitetext--center .wm-sitetext__band{justify-items:center}
.wm-sitetext--medium .page-content{max-width:900px;margin-left:auto;margin-right:auto}
.wm-sitetext--narrow .page-content{max-width:720px;margin-left:auto;margin-right:auto}
.wm-sitetext picture{display:block}
.wm-sitetext img{max-width:100%;height:auto;display:block;border-radius:.5rem}
.wm-sitetext__cols{display:flex;gap:1.5rem;align-items:stretch}
.wm-sitetext__cols--left{flex-direction:row-reverse}
.wm-sitetext__prose{min-width:0}
.wm-sitetext__cols--t33 .wm-sitetext__prose{flex:0 0 33%}
.wm-sitetext__cols--t50 .wm-sitetext__prose{flex:0 0 50%}
.wm-sitetext__cols--t66 .wm-sitetext__prose{flex:0 0 66%}
.wm-sitetext__cols--t75 .wm-sitetext__prose{flex:0 0 75%}
.wm-sitetext__photos{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem}
.wm-sitetext__photos img{width:100%;height:auto}
/* Beside text, a photo's height follows its own aspect, so a portrait upload
   ends level with the second paragraph while a landscape one stops short.
   Photos here divide the column's height between them instead and crop to the
   middle, which is where the subject of a photo is, so both sides finish
   together whatever was uploaded.

   The height comes from `flex:1` on the <picture>, not a percentage on the
   <img>: the column's own height is decided by stretching against the prose,
   and a percentage against an auto height resolves to auto. The cap keeps a
   page-long block from stretching one photo into a smear. */
.wm-sitetext__cols .wm-sitetext__photos{justify-content:stretch;max-height:40rem}
.wm-sitetext__cols .wm-sitetext__photos picture{flex:1 1 0;min-height:8rem}
.wm-sitetext__cols .wm-sitetext__photos picture:only-child{min-height:12rem}
.wm-sitetext__cols .wm-sitetext__photos picture img{height:100%;object-fit:cover;object-position:center}
.wm-sitetext__band{display:grid;gap:1rem;margin:1.25rem 0}
.wm-sitetext__band--1{grid-template-columns:1fr}
.wm-sitetext__band--2{grid-template-columns:1fr 1fr}
.wm-sitetext__band--3{grid-template-columns:repeat(3,1fr)}
.wm-sitetext__band--4{grid-template-columns:repeat(4,1fr)}
.wm-sitetext__band img{width:100%;height:auto}
@media (max-width: 767.98px){
    .wm-sitetext__cols,.wm-sitetext__cols--left{flex-direction:column-reverse}
    .wm-sitetext__cols .wm-sitetext__prose{flex:1 1 auto}
    .wm-sitetext__photos{width:100%}
    /* Stacked, nothing is beside anything: let each photo be its own shape
       again, or the column height rules above would crop them into strips. */
    .wm-sitetext__cols .wm-sitetext__photos{max-height:none}
    .wm-sitetext__cols .wm-sitetext__photos picture{flex:0 0 auto;min-height:0}
    .wm-sitetext__cols .wm-sitetext__photos picture img{height:auto;object-fit:fill}
    .wm-sitetext__band--3,.wm-sitetext__band--4{grid-template-columns:1fr 1fr}
}
/* Products block: one card grid, template-agnostic like the text block, so a
   product reads the same on every template. Colours are inherited, never set,
   so a band's ink rule still wins.
   Type mirrors PromoCards so two blocks on one page read as one family:
   heading = .wm-promocards__heading, card name = .wm-promocard__title face and
   weight at a product-grid size, description = .wm-promocard__description.
   Change them together. Templates that restyle the promo heading (Lumea,
   Cosmika) extend the same selectors to these classes. */
/* Section headings sit centred by default: a page reads as a stack of
   sections, and a centred heading says "new section" where a left one lines
   up with the body and disappears into it. A flex column so the lead's width
   cap follows the same token — 'start' puts both on the left edge, 'center'
   puts both in the middle — with one declaration in a template's :root and
   no second token for the margins. Same rule in promocards::assets for the
   group header on the catalog page, where this file is not loaded. */
.wm-blockhead { display: flex; flex-direction: column; align-items: var(--wm-block-align, center); text-align: var(--wm-block-align, center); margin: 0 0 1.5rem; }
.wm-blockhead__title { margin: 0; }
.wm-blockhead__lead { margin: .5rem 0 0; max-width: 70ch; }
.wm-catalogblock__heading { font-weight: 700; font-size: var(--wm-block-title, clamp(1.875rem, 3.2vw, 2.5rem)); line-height: 1.2; }
.wm-catalogblock__lead, .wm-locationsblock__lead, .wm-enquiryblock__lead, .wm-reviewsblock__lead, .wm-faqblock__lead { font-size: var(--wm-block-lead, 1.0625rem); line-height: 1.5; opacity: .85; }
.wm-enquiryblock__heading, .wm-reviewsblock__heading, .wm-faqblock__heading, .wm-locationsblock__heading { font-weight: 700; font-size: var(--wm-block-title, clamp(1.875rem, 3.2vw, 2.5rem)); line-height: 1.2; }
/* FAQ block: native details/summary, so it opens with no template JS and
   still works for a keyboard, a screen reader and a printed page. The
   marker is drawn from borders rather than an icon font, which no template
   is guaranteed to load. currentColor throughout, so the block inherits
   whatever ink the band above it set. */
/* Full spans the block's container; the two caps are for an FAQ set beside
   narrower prose. */
.wm-faqblock--medium .wm-faqblock__list { max-width: 900px; margin-left: auto; margin-right: auto; }
.wm-faqblock--narrow .wm-faqblock__list { max-width: 720px; margin-left: auto; margin-right: auto; }
.wm-faqitem { border-bottom: 1px solid rgba(127,127,127,.25); border-color: var(--wm-card-line, rgba(127,127,127,.25)); }
.wm-faqitem:first-child { border-top: 1px solid rgba(127,127,127,.25); border-top-color: var(--wm-card-line, rgba(127,127,127,.25)); }
/* Roomier than a list row: the question is the thing a visitor scans, so it
   gets heading-adjacent size and real vertical air, the way the Loyalty page
   presents its own questions. */
/* Size and family come from a custom property, not a fixed scale: every
   template sets its own card-title size (Cosmika 15.5px, Lumea its body face)
   and a question that ignores it reads as a foreign element on the page. The
   default is plain body size, which is never wrong anywhere. */
.wm-faqitem__q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; cursor: pointer; font-family: var(--wm-faq-q-font, inherit); font-weight: var(--wm-faq-q-weight, 600); font-size: var(--wm-faq-q-size, 1rem); line-height: 1.45; list-style: none; }
.wm-faqitem__q::-webkit-details-marker { display: none; }
.wm-faqitem__q::marker { content: ''; }
.wm-faqitem__q:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* A plus drawn from two bars, turning into a cross when the answer opens.
   Built from borders rather than an icon font or an SVG asset: it inherits
   currentColor, so it follows whatever ink the band above it set, and no
   template has to load anything for it. */
.wm-faqitem__mark { position: relative; flex: 0 0 auto; width: .95rem; height: .95rem; opacity: .55; transition: transform .25s ease, opacity .25s ease; }
.wm-faqitem__mark::before, .wm-faqitem__mark::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px; }
.wm-faqitem__mark::after { transform: rotate(90deg); }
.wm-faqitem[open] .wm-faqitem__mark { transform: rotate(135deg); opacity: .9; }
/* overflow hidden is what lets the panel be animated to a height of zero
   without its text spilling over the question below it. */
.wm-faqitem__a { overflow: hidden; font-size: var(--wm-faq-a-size, .95rem); line-height: 1.7; opacity: .85; }
/* No reading cap here: the block's Width setting is what decides how wide
   the rows run, and a hidden max-width would quietly overrule the merchant's
   choice of Full. Pick Medium or Narrow for a measured reading column. */
.wm-faqitem__inner { padding: 0 0 1.35rem; }
@media (prefers-reduced-motion: reduce) { .wm-faqitem__mark { transition: none; } }
/* Reviews block: the storefront's review cards in the block family's type.
   Stars are the same gold every template uses; the summary stars are two
   stacked rows, the gold one clipped to the real average. */
.wm-reviewsblock__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 1.25rem; }
.wm-reviewsblock__avg { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.wm-reviewsblock__count { font-size: .9rem; opacity: .8; }
.wm-stars { position: relative; display: inline-block; line-height: 1; white-space: nowrap; font-size: 1.25rem; }
.wm-stars__bg { color: rgba(127,127,127,.4); letter-spacing: .1em; }
.wm-stars__fg { position: absolute; inset: 0; overflow: hidden; width: var(--wm-stars-fill, 0%); color: #f5b301; letter-spacing: .1em; }
.wm-reviewsblock__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.wm-reviewsblock--c1 .wm-reviewsblock__grid { grid-template-columns: 1fr; max-width: 720px; }
.wm-reviewsblock--c2 .wm-reviewsblock__grid { grid-template-columns: repeat(2, 1fr); }
.wm-reviewcard { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.25rem; border: 1px solid var(--wm-card-line); background: var(--wm-card-fill); border-radius: .5rem; }
.wm-reviewcard__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.wm-reviewcard__stars { color: rgba(127,127,127,.4); letter-spacing: .05em; line-height: 1; }
.wm-reviewcard__stars .on { color: #f5b301; }
.wm-reviewcard__who { font-weight: 700; font-size: .925rem; }
.wm-reviewcard__when { font-size: .8rem; opacity: .7; margin-left: auto; }
.wm-reviewcard__text { margin: 0; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.wm-reviewcard__reply { margin-top: .25rem; padding: .625rem .875rem; border-left: 3px solid var(--wm-theme, rgba(127,127,127,.5)); background: rgba(127,127,127,.08); border-radius: 0 .375rem .375rem 0; }
.wm-reviewcard__reply-from { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .25rem; }
.wm-reviewcard__reply-text { margin: 0; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
    .wm-reviewsblock--c3 .wm-reviewsblock__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .wm-reviewsblock__grid, .wm-reviewsblock--c2 .wm-reviewsblock__grid, .wm-reviewsblock--c3 .wm-reviewsblock__grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* Enquiry form: fixed fields, own controls so every template gets the same
   form. Inputs are always light with dark text: on a coloured band the
   field must stay readable whatever the ink. The button takes the theme
   colour every template exposes as --wm-theme. */
/* Markdown tables inside a text block. The shared prose wrapper carries
   Cosmika's `cx-content`, so only that template styled these; Lumea targets
   `.lm-content` and Spreader ships no table rules at all, leaving a borderless
   run of text. Scoped to the block so Markdown pages keep their template's
   own styling. */
/* The wrapper scrolls, not the table, so the table still fills the column
   at every width and only a genuinely wide one scrolls. */
.wm-sitetext .wm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .9em 0; }
.wm-sitetext table { display: table; border-collapse: collapse; width: 100%; margin: 0; }
.wm-sitetext th, .wm-sitetext td { padding: .5em .625em; border: 1px solid rgba(127,127,127,.35); }
.wm-sitetext th { font-weight: 700; text-align: inherit; background: rgba(127,127,127,.08); }

.wm-enquiryblock { position: relative; }
/* Heading, lead and form share one centred column. The form alone was capped
   at 720px inside a full-width container, so on a desktop band it sat left
   with half the block empty beside it. */
/* On its own the form is a centred reading column; with a panel beside it the
   block takes the container's full width, like every other two-column block. */
.wm-enquiryblock__heading, .wm-enquiryblock__lead, .wm-enquiryblock__cols { max-width: 720px; margin-inline: auto; }
.wm-enquiryblock--panel .wm-enquiryblock__heading,
.wm-enquiryblock--panel .wm-enquiryblock__lead,
.wm-enquiryblock__cols--panel { max-width: none; }
.wm-enquiryblock__cols--panel { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
/* The form keeps the wider share whichever side it takes: `order` moves the
   elements between tracks, so the track sizes have to swap with them. */
.wm-enquiryblock__cols--left { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.wm-enquiryblock__cols--left .wm-enquiryblock__main { order: 2; }
.wm-enquiryblock__cols--left .wm-enquiryblock__panel { order: 1; }
/* The panel reads as one object rather than loose text beside the form.
   Alpha-based border and tints, so it sits correctly on a light band, a dark
   band and a plain page without knowing which it is. */
.wm-enquiryblock__panel { border: 1px solid rgba(127,127,127,.28); border-radius: .625rem; padding: 1.25rem 1.375rem; }
.wm-enqpanel__group + .wm-enqpanel__group { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(127,127,127,.22); }
.wm-enqpanel__title { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin: 0 0 .875rem; }
.wm-enqpanel__icon { width: 1em; height: 1em; flex: 0 0 auto; }
.wm-enqpanel__title .wm-enqpanel__icon { width: 1.1em; height: 1.1em; opacity: .9; }
.wm-enqpanel__hours, .wm-enqpanel__contact { list-style: none; margin: 0; padding: 0; font-size: .925rem; }
.wm-enqpanel__day { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem .5rem; border-radius: .375rem; }
.wm-enqpanel__day + .wm-enqpanel__day { margin-top: .125rem; }
.wm-enqpanel__dayname { opacity: .85; }
.wm-enqpanel__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-enqpanel__closed { font-size: .875rem; opacity: .6; white-space: nowrap; }
/* Today is a tinted row, not just bold: bold alone disappears in a list. */
.wm-enqpanel__day.is-today { background: rgba(127,127,127,.14); font-weight: 700; }
.wm-enqpanel__day.is-today .wm-enqpanel__dayname { opacity: 1; }
.wm-enqpanel__contact li { display: flex; align-items: flex-start; gap: .625rem; padding: .3rem 0; line-height: 1.45; }
.wm-enqpanel__contact .wm-enqpanel__icon { margin-top: .25em; opacity: .7; }
.wm-enqpanel__contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(127,127,127,.4); }
.wm-enqpanel__contact a:hover { border-bottom-color: currentColor; }
/* Contact card: the enquiry block without its form. Buttons, then hours and details side by side. */
.wm-enquiryblock__cols--card { display: flex; flex-direction: column; gap: 1.5rem; }
.wm-contactcard__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: var(--wm-block-align, center); }
.wm-contactcard__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; line-height: 1.2; padding: .75rem 1.25rem; border: 1px solid rgba(127,127,127,.45); border-radius: .5rem; color: inherit; text-decoration: none; }
.wm-contactcard__btn:hover, .wm-contactcard__btn:focus-visible { color: inherit; text-decoration: none; background: rgba(127,127,127,.14); }
.wm-contactcard__btn:first-child { background: var(--wm-theme, #333); border-color: transparent; color: var(--wm-theme-ink, #fff); }
.wm-contactcard__btn:first-child:hover, .wm-contactcard__btn:first-child:focus-visible { background: var(--wm-theme, #333); color: var(--wm-theme-ink, #fff); filter: brightness(.9); }
.wm-enquiryblock__panel--card { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wm-enquiryblock__panel--card .wm-enqpanel__group + .wm-enqpanel__group { margin-top: 0; padding-top: 0; border-top: 0; }
/* List blocks: testimonials, features, team, logos. Items wrap and centre,
   so a last row that is not full sits in the middle rather than to one side. */
.wm-listblock__heading { font-weight: 700; font-size: var(--wm-block-title, clamp(1.875rem, 3.2vw, 2.5rem)); line-height: 1.2; }
.wm-listblock__lead { font-size: var(--wm-block-lead, 1.0625rem); line-height: 1.5; opacity: .85; }
.wm-ink-light .wm-listblock__heading, .wm-ink-light .wm-listblock__lead, .wm-ink-light .wm-listitem__title { color: #fff !important; }
.wm-ink-dark .wm-listblock__heading, .wm-ink-dark .wm-listblock__lead, .wm-ink-dark .wm-listitem__title { color: #1a1a1a !important; }
.wm-listblock__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.wm-listitem { flex: 0 1 calc((100% - (var(--wm-list-cols, 3) - 1) * 1.5rem) / var(--wm-list-cols, 3)); min-width: 0; }
.wm-listblock--cols-1 .wm-listblock__items { max-width: 760px; margin-inline: auto; }
.wm-quote { margin: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--wm-card-line); background: var(--wm-card-fill); border-radius: .625rem; text-align: left; }
.wm-quote__text { margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; color: inherit; }
.wm-quote__text::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 2.75rem; line-height: .8; opacity: .35; }
.wm-quote__by { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.wm-quote__photo { display: block; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.wm-quote__photo--initial, .wm-member__photo--initial { display: flex; align-items: center; justify-content: center; background: rgba(127,127,127,.18); font-weight: 700; }
.wm-quote__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wm-quote__name { font-weight: 700; }
.wm-quote__role { font-size: .875rem; opacity: .75; }
.wm-feature, .wm-member { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.wm-feature__mark { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: .375rem; border-radius: 50%; background: rgba(127,127,127,.16); font-size: 1.375rem; font-weight: 700; line-height: 1; }
.wm-feature__title, .wm-member__name { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.wm-feature__text, .wm-member__bio { margin: 0; font-size: .95rem; line-height: 1.55; opacity: .85; }
.wm-member picture { display: block; width: 100%; }
.wm-member__photo { display: flex; width: 100%; height: auto; aspect-ratio: 1 / 1; margin-bottom: .5rem; border-radius: .625rem; object-fit: cover; font-size: 2.5rem; }
.wm-member__role { margin: 0; font-size: .9rem; opacity: .75; }
.wm-listblock--logos .wm-listblock__items { gap: 1rem; }
.wm-listblock--logos .wm-listitem { flex-basis: calc((100% - (var(--wm-list-cols, 5) - 1) * 1rem) / var(--wm-list-cols, 5)); }
.wm-logo { display: flex; align-items: center; justify-content: center; height: 5.5rem; padding: .875rem 1.25rem; background: #fff; border: 1px solid rgba(127,127,127,.25); border-radius: .5rem; }
.wm-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
a.wm-logo:hover, a.wm-logo:focus-visible { border-color: rgba(127,127,127,.6); }
@media (min-width: 768px) and (max-width: 991.98px) {
    .wm-listblock--testimonials:not(.wm-listblock--cols-1) .wm-listitem,
    .wm-listblock--features .wm-listitem { flex-basis: calc((100% - 1.5rem) / 2); }
    .wm-listblock--team .wm-listitem { flex-basis: calc((100% - 3rem) / 3); }
    .wm-listblock--logos .wm-listitem { flex-basis: calc((100% - 3rem) / 4); }
}
@media (max-width: 767.98px) {
    .wm-listblock__lead { font-size: var(--wm-block-lead-sm, 1.0625rem); }
    .wm-listitem { flex-basis: 100%; }
    .wm-listblock--team .wm-listitem { flex-basis: calc((100% - 1.5rem) / 2); }
    .wm-listblock--logos .wm-listitem { flex-basis: calc((100% - 2rem) / 3); }
    .wm-logo { height: 4.25rem; padding: .625rem .75rem; }
    /* Title-only features: icon beside the title, one short row each. */
    .wm-listblock--terse .wm-listblock__items { flex-direction: column; align-items: center; gap: .75rem; }
    .wm-listblock--terse .wm-listitem { flex-basis: auto; width: 100%; max-width: 20rem; }
    .wm-listblock--terse .wm-feature { flex-direction: row; gap: .875rem; text-align: left; }
    .wm-listblock--terse .wm-feature__mark { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin-bottom: 0; }
    .wm-listblock--terse .wm-feature__mark svg { width: 20px; height: 20px; }
    .wm-listblock--terse .wm-feature__title { font-size: 1rem; }
}
/* Directory block: one card per sister company. Cards sit on half-opaque
   white so they read on any band without hiding it. */
.wm-dirblock__heading { font-weight: 700; font-size: var(--wm-block-title, clamp(1.875rem, 3.2vw, 2.5rem)); line-height: 1.2; }
.wm-dirblock__lead { font-size: var(--wm-block-lead, 1.0625rem); line-height: 1.5; opacity: .85; }
.wm-ink-light .wm-dirblock__heading, .wm-ink-light .wm-dirblock__lead { color: #fff !important; }
.wm-ink-dark .wm-dirblock__heading, .wm-ink-dark .wm-dirblock__lead { color: #1a1a1a !important; }
.wm-dirblock__grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.wm-dirblock--c2 .wm-dirblock__grid { grid-template-columns: repeat(2, 1fr); }
.wm-dirblock--c4 .wm-dirblock__grid { grid-template-columns: repeat(4, 1fr); }
.wm-dircard { display: flex; flex-direction: column; gap: .75rem; padding: .875rem 1rem; border: 1px solid rgba(127,127,127,.25); background: rgba(255,255,255,.5); border-radius: .625rem; color: inherit; text-decoration: none; min-width: 0; }
.wm-dircard:hover, .wm-dircard:focus-visible { color: inherit; text-decoration: none; border-color: rgba(127,127,127,.6); background: rgba(255,255,255,.7); }
/* On a dark storefront, an unbanded block sits on the page itself: its text
   takes the page ink (shared, from partials.storefront-ink). A band sets its own
   ink above, so banded blocks are left alone. Card fills and lines follow
   currentColor, so they adapt with it. Promo cards (also .wm-block) are their own
   light or merchant-coloured panels: nothing inside them is touched. */
.wm-bg-dark .wm-block:not(.wm-band .wm-block) { color: var(--wm-page-ink-2); }
.wm-bg-dark .wm-block:not(.wm-band .wm-block) :is(h1, h2, h3, h4, h5, h6, .wm-listblock__heading, .wm-dirblock__heading, .wm-listitem__title, .wm-feature__title, .wm-member__name, .wm-quote__name):not(.wm-promocard *) { color: var(--wm-page-ink) !important; }
.wm-bg-dark .wm-block:not(.wm-band .wm-block) :is(.wm-listblock__lead, .wm-dirblock__lead) { color: var(--wm-page-ink-2) !important; }
.wm-bg-dark .wm-block:not(.wm-band .wm-block) .page-content { color: var(--wm-page-ink-2) !important; }
.wm-bg-dark .wm-block:not(.wm-band .wm-block) .page-content :is(h1, h2, h3, h4, h5, h6, strong) { color: var(--wm-page-ink) !important; }
.wm-bg-dark .wm-block:not(.wm-band .wm-block) .wm-dircard { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.wm-bg-dark .wm-block:not(.wm-band .wm-block) .wm-dircard:hover,
.wm-bg-dark .wm-block:not(.wm-band .wm-block) .wm-dircard:focus-visible { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .28); }
.wm-dircard:hover .wm-dircard__name { text-decoration: underline; text-underline-offset: .15em; }
.wm-dircard__head { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.wm-dircard__media { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: .5rem; overflow: hidden; background: rgba(127,127,127,.14); display: flex; align-items: center; justify-content: center; }
.wm-dircard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-dircard__initial { font-size: 1.5rem; font-weight: 700; opacity: .7; }
.wm-dircard__body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.wm-dircard__name { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.wm-dircard__status { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.wm-dircard__status.is-open { color: #1a9a46; }
.wm-dircard__status.is-closed { color: #c2410c; }
.wm-dircard__desc { font-size: var(--wm-card-text, .875rem); line-height: 1.45; opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Logo style: the logo is the card, words centred under it. */
.wm-dircard--logo { align-items: center; text-align: center; padding: 1.25rem 1rem; }
.wm-dircard--logo .wm-dircard__head { flex-direction: column; gap: .75rem; width: 100%; }
.wm-dircard--logo .wm-dircard__media { width: 7rem; height: 7rem; border-radius: .75rem; }
.wm-dircard--logo .wm-dircard__initial { font-size: 2.75rem; }
.wm-dircard--logo .wm-dircard__body { align-items: center; }
/* Items style: a row of the company's first products under the head. */
.wm-dircard__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; padding-top: .75rem; border-top: 1px solid rgba(127,127,127,.2); }
.wm-diritem { display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-size: .8125rem; line-height: 1.3; }
.wm-diritem__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .375rem; display: block; background: rgba(127,127,127,.12); }
.wm-diritem__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 991.98px) {
    .wm-dirblock--c4 .wm-dirblock__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .wm-dirblock__lead { font-size: var(--wm-block-lead-sm, 1.0625rem); }
    .wm-dirblock__grid, .wm-dirblock--c2 .wm-dirblock__grid, .wm-dirblock--c4 .wm-dirblock__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .wm-dircard { padding: .75rem; gap: .625rem; }
    .wm-dircard__head { flex-direction: column; align-items: flex-start; gap: .625rem; }
    .wm-dircard__media { width: 3rem; height: 3rem; }
    .wm-dircard--logo .wm-dircard__head { align-items: center; }
    .wm-dircard--logo .wm-dircard__media { width: 5rem; height: 5rem; }
    /* Product rows need width: one card a row for that style. */
    .wm-dirblock--items .wm-dirblock__grid { grid-template-columns: 1fr; }
    .wm-dirblock--items .wm-dircard__head { flex-direction: row; align-items: center; }
}
@media (max-width: 767.98px) {
    /* Panel under the form on a phone, whichever side it takes on desktop.
       Both variants named: --left carries its own track sizes above. */
    .wm-enquiryblock__cols--panel,
    .wm-enquiryblock__cols--left { grid-template-columns: 1fr; gap: 2rem; }
    .wm-enquiryblock__cols--left .wm-enquiryblock__main,
    .wm-enquiryblock__cols--left .wm-enquiryblock__panel { order: 0; }
    /* Two buttons a row on a phone, so each is a full thumb target. */
    .wm-contactcard__btn { flex: 1 1 calc(50% - .375rem); }
}
.wm-enquiry { display: flex; flex-direction: column; gap: 1rem; }
.wm-enquiry__row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.wm-enquiry__field { display: flex; flex-direction: column; gap: .375rem; font-size: .925rem; font-weight: 600; min-width: 0; }
.wm-enquiry__field input, .wm-enquiry__field textarea { font: inherit; font-weight: 400; width: 100%; padding: .625rem .875rem; border: 1px solid rgba(127,127,127,.45); border-radius: .5rem; background: #fff; color: #1a1a1a; }
.wm-enquiry__field textarea { min-height: 7rem; resize: vertical; }
.wm-enquiry__field input:focus, .wm-enquiry__field textarea:focus { outline: 2px solid var(--wm-theme, #333); outline-offset: 1px; border-color: transparent; }
.wm-enquiry__hint { margin: -.5rem 0 0; font-size: .85rem; opacity: .75; }
.wm-enquiry__error { font-size: .85rem; font-weight: 500; color: #c0392b; }
.wm-ink-light .wm-enquiry__error { color: #ffb4a8; }
.wm-enquiry__consent-wrap { display: flex; flex-direction: column; gap: .375rem; }
.wm-enquiry__consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; cursor: pointer; }
.wm-enquiry__consent input { margin: .2em 0 0; flex: 0 0 auto; }
/* Same pairing as the CTA: the label follows the fill, so a light theme
   colour does not leave a white label on it. */
.wm-enquiry__btn { align-self: flex-start; font: inherit; font-weight: 600; padding: .75rem 1.5rem; border: 0; border-radius: .5rem; background: var(--wm-theme, #333); color: var(--wm-theme-ink, #fff); cursor: pointer; }
.wm-enquiry__btn:hover:not(:disabled) { filter: brightness(.9); }
.wm-enquiry__btn:disabled { opacity: .5; cursor: not-allowed; }
.wm-enquiry__hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.wm-enquiry__done { max-width: 720px; display: flex; gap: .625rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: .5rem; border: 1px solid rgba(46,160,67,.5); background: rgba(46,160,67,.12); font-weight: 600; line-height: 1.5; }
.wm-enquiry__done-icon { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #2ea043; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
@media (max-width: 767.98px) {
    .wm-enquiry__row { grid-template-columns: 1fr; }
}
/* Booking cards ride the product card: same media box, body, name and
   price. A service without a photo shows its initial on the theme colour; a
   person is a centred circle on a neutral tile, so faces are not cropped
   into squares. */
.wm-bookcard__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--wm-theme, #333); color: var(--wm-theme-ink, #fff); font-weight: 700; font-size: 2.2rem; line-height: 1; letter-spacing: .02em; }
.wm-bookcard--person .wm-catalogcard__media { display: flex; align-items: center; justify-content: center; }
.wm-bookcard--person .wm-catalogcard__media picture { display: contents; }
.wm-bookcard--person .wm-catalogcard__media img, .wm-bookcard--person .wm-bookcard__ph { width: 62%; height: 62%; border-radius: 50%; object-fit: cover; }
.wm-bookcard--person .wm-bookcard__ph { font-size: 1.9rem; }
.wm-bookingblock__group + .wm-bookingblock__group { margin-top: 2rem; }
.wm-bookingblock__subhead { margin: 0 0 1rem; font-weight: 700; }
.wm-bookingblock__cta { display: inline-block; font-weight: 600; padding: .75rem 1.5rem; border-radius: .5rem; background: var(--wm-theme, #333); color: var(--wm-theme-ink, #fff); text-decoration: none; }
.wm-bookingblock__cta:hover { filter: brightness(.9); color: var(--wm-theme-ink, #fff); }
/* Gallery. A grid crops every tile to one shape; a masonry is CSS columns,
   so each photo keeps its own height and the columns fill top to bottom.
   Video thumbnails are 16:9 whatever the layout: YouTube's frame is. */
.wm-gallery__item { margin: 0; }
.wm-gallery__media { position: relative; display: block; overflow: hidden; border-radius: .5rem; background: rgba(127,127,127,.12); color: inherit; }
.wm-gallery__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm-gallery__media picture { display: contents; }
a.wm-gallery__media { cursor: zoom-in; }
.wm-gallery__item--video .wm-gallery__media { aspect-ratio: 16 / 9; cursor: pointer; }
.wm-gallery__play { position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border-radius: 50%; background: rgba(0,0,0,.6); }
.wm-gallery__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -.6rem 0 0 -.35rem; border-style: solid; border-width: .6rem 0 .6rem 1.05rem; border-color: transparent transparent transparent #fff; }
.wm-gallery__media:hover .wm-gallery__play { background: var(--wm-theme, #c00); }
.wm-gallery__player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: .5rem; }
.wm-gallery__caption { margin-top: .5rem; font-size: var(--wm-card-text, .925rem); opacity: .8; line-height: 1.4; }
.wm-galleryblock--grid .wm-gallery { display: grid; gap: .75rem; }
.wm-galleryblock--grid.wm-galleryblock--square .wm-gallery__item--image .wm-gallery__media { aspect-ratio: 1 / 1; }
.wm-galleryblock--grid.wm-galleryblock--landscape .wm-gallery__item--image .wm-gallery__media { aspect-ratio: 4 / 3; }
.wm-galleryblock--grid.wm-galleryblock--wide .wm-gallery__item--image .wm-gallery__media { aspect-ratio: 16 / 9; }
.wm-galleryblock--grid.wm-galleryblock--c2 .wm-gallery { grid-template-columns: repeat(2, 1fr); }
.wm-galleryblock--grid.wm-galleryblock--c3 .wm-gallery { grid-template-columns: repeat(3, 1fr); }
.wm-galleryblock--grid.wm-galleryblock--c4 .wm-gallery { grid-template-columns: repeat(4, 1fr); }
.wm-galleryblock--grid.wm-galleryblock--c5 .wm-gallery { grid-template-columns: repeat(5, 1fr); }
.wm-galleryblock--masonry .wm-gallery { column-gap: .75rem; }
.wm-galleryblock--masonry .wm-gallery__item { break-inside: avoid; margin-bottom: .75rem; }
.wm-galleryblock--masonry .wm-gallery__item--image .wm-gallery__media img { height: auto; }
.wm-galleryblock--masonry.wm-galleryblock--c2 .wm-gallery { columns: 2; }
.wm-galleryblock--masonry.wm-galleryblock--c3 .wm-gallery { columns: 3; }
.wm-galleryblock--masonry.wm-galleryblock--c4 .wm-gallery { columns: 4; }
.wm-galleryblock--masonry.wm-galleryblock--c5 .wm-gallery { columns: 5; }
@media (max-width: 991.98px) {
    .wm-galleryblock--grid.wm-galleryblock--c4 .wm-gallery,
    .wm-galleryblock--grid.wm-galleryblock--c5 .wm-gallery { grid-template-columns: repeat(3, 1fr); }
    .wm-galleryblock--masonry.wm-galleryblock--c4 .wm-gallery,
    .wm-galleryblock--masonry.wm-galleryblock--c5 .wm-gallery { columns: 3; }
}
@media (max-width: 767.98px) {
    .wm-galleryblock--grid.wm-galleryblock--m1 .wm-gallery { grid-template-columns: 1fr; }
    .wm-galleryblock--grid.wm-galleryblock--m2 .wm-gallery { grid-template-columns: repeat(2, 1fr); }
    .wm-galleryblock--masonry.wm-galleryblock--m1 .wm-gallery { columns: 1; }
    .wm-galleryblock--masonry.wm-galleryblock--m2 .wm-gallery { columns: 2; }
    .wm-gallery, .wm-galleryblock--grid .wm-gallery { gap: .5rem; column-gap: .5rem; }
    .wm-galleryblock--masonry .wm-gallery__item { margin-bottom: .5rem; }
}
/* The lightbox: one fixed layer over the page, the item centred, arrows at
   the sides. A single-item gallery hides the arrows. */
.wm-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; background: rgba(0,0,0,.92); }
.wm-lightbox.is-open { display: block; }
.wm-lightbox__stage { position: absolute; inset: 3.5rem 4rem; display: flex; align-items: center; justify-content: center; }
.wm-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .25rem; }
.wm-lightbox__stage iframe { width: min(100%, calc((100vh - 7rem) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; background: #000; }
.wm-lightbox__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem; text-align: center; color: #fff; font-size: .95rem; line-height: 1.4; }
.wm-lightbox__btn { position: absolute; z-index: 1; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.wm-lightbox__btn:hover { background: rgba(255,255,255,.25); }
.wm-lightbox__close { top: .75rem; right: .75rem; }
.wm-lightbox__prev { left: .75rem; top: 50%; margin-top: -1.375rem; }
.wm-lightbox__next { right: .75rem; top: 50%; margin-top: -1.375rem; }
.wm-lightbox--single .wm-lightbox__prev, .wm-lightbox--single .wm-lightbox__next { display: none; }
@media (max-width: 767.98px) {
    .wm-lightbox__stage { inset: 3rem .5rem 3rem; }
    .wm-lightbox__prev, .wm-lightbox__next { top: auto; bottom: .5rem; margin: 0; }
    .wm-lightbox__prev { left: .75rem; }
    .wm-lightbox__next { right: .75rem; }
    .wm-lightbox__caption { bottom: 3.5rem; }
}
.wm-catalogblock__grid { display: grid; gap: 1.25rem; }
.wm-catalogblock--c2 .wm-catalogblock__grid { grid-template-columns: repeat(2, 1fr); }
.wm-catalogblock--c3 .wm-catalogblock__grid { grid-template-columns: repeat(3, 1fr); }
.wm-catalogblock--c4 .wm-catalogblock__grid { grid-template-columns: repeat(4, 1fr); }
.wm-catalogblock--c5 .wm-catalogblock__grid { grid-template-columns: repeat(5, 1fr); }
.wm-catalogcard { display: block; color: inherit; text-decoration: none; }
.wm-catalogcard__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: .5rem; background: rgba(127,127,127,.12); }
.wm-catalogcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.wm-catalogcard:hover .wm-catalogcard__name { text-decoration: underline; text-underline-offset: .15em; }
.wm-catalogcard__soldout { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.72); color: #fff; font-size: .75rem; font-weight: 600; padding: .125rem .5rem; border-radius: .25rem; }
.wm-catalogcard__body { display: flex; flex-direction: column; gap: .25rem; padding-top: .625rem; }
.wm-catalogcard__name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.wm-catalogcard__desc { font-size: var(--wm-card-text, .925rem); opacity: .8; line-height: 1.5; }
.wm-catalogcard__price { font-weight: 600; }
.wm-catalogcard__was { opacity: .6; text-decoration: line-through; font-weight: 400; margin-right: .375rem; }
/* Without a photo there is no media box to pin the badge to. */
.wm-catalogcard__soldout--inline { position: static; display: inline-block; margin-left: .375rem; vertical-align: middle; }
@media (max-width: 991.98px) {
    .wm-catalogblock--c4 .wm-catalogblock__grid,
    .wm-catalogblock--c5 .wm-catalogblock__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .wm-catalogblock--m1 .wm-catalogblock__grid { grid-template-columns: 1fr; }
    .wm-catalogblock--m2 .wm-catalogblock__grid { grid-template-columns: repeat(2, 1fr); }
    .wm-catalogblock__grid { gap: 1rem; }
}
/* Locations block: one static map, then a card per area. Same type scale as
   the products block (heading, card name, description); cards size
   themselves, so one outlet and twelve both read well with no column setting.
   The pin colour matches the marker Google draws. */
/* The map box carries the aspect ratio per height and breakpoint; the JS map
   fills it, and the static fallback (no JS, failed SDK) covers it. The
   ratios match the frames PageSection::MAP_HEIGHTS asks Google for, so the
   fallback is not cropped either. */
.wm-locationsblock__map { position: relative; margin: 0 0 1.25rem; border-radius: .5rem; overflow: hidden; background: rgba(127,127,127,.12); }
.wm-locationsblock__map--short { aspect-ratio: 3 / 1; }
.wm-locationsblock__map--normal { aspect-ratio: 21 / 9; }
.wm-locationsblock__map--tall { aspect-ratio: 16 / 9; }
.wm-locationsblock__canvas, .wm-locationsblock__map noscript picture { position: absolute; inset: 0; display: block; }
.wm-locationsblock__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Google's own controls inherit the page font; keep the map's UI on its default sans. */
.wm-locationsblock__canvas .gm-style { font-family: Roboto, Arial, sans-serif; }
.wm-locationsblock__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wm-locationcard { display: flex; flex-direction: column; gap: .375rem; padding: 1rem 1.25rem; border: 1px solid var(--wm-card-line); background: var(--wm-card-fill); border-radius: .5rem; }
.wm-locationcard__name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; display: flex; align-items: center; gap: .5rem; }
.wm-locationcard__pin { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #EA4335; color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.wm-locationcard__desc { margin: 0; font-size: var(--wm-card-text, .925rem); opacity: .8; line-height: 1.5; }
.wm-locationcard__links { display: flex; flex-wrap: wrap; gap: .375rem 1rem; margin-top: auto; padding-top: .25rem; font-size: .925rem; }
.wm-locationcard__links a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 767.98px) {
    .wm-locationsblock__map--mshort { aspect-ratio: 16 / 9; }
    .wm-locationsblock__map--mnormal { aspect-ratio: 4 / 3; }
    .wm-locationsblock__map--mtall { aspect-ratio: 1 / 1; }
    .wm-locationsblock__grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* ONE PHONE SCALE FOR EVERY BLOCK.

   Last in the file on purpose. Every rule below restates a selector declared
   earlier at the same specificity, and a media query adds none of its own, so
   source order is the only thing deciding the winner. Put this block anywhere
   but the end and half of it silently loses — which is exactly what happened
   to the first version of the card-description rule.

   THE LINE IT DRAWS: nothing a customer READS sits under 16px on a phone.
   Sentences — prose, leads, card descriptions and subtitles, FAQ answers,
   review text, the hours and phone number in the enquiry panel — come up to
   16px. Labels, timestamps, badges and hints stay where they are; they are
   quiet on purpose and lifting them would flatten the page into one size.
   Buttons floor at 15px: short, bold, and already large targets.

   Desktop is untouched throughout. Where the source is a clamp only its floor
   moves, and a floor only applies below the width where the fluid middle term
   overtakes it — so these numbers reach phones and small tablets and stop. */
@media (max-width: 767.98px) {
    .wm-sitetext .page-content { font-size: var(--wm-prose-text-sm, 1.0625rem); }
    .wm-catalogblock__lead,
    .wm-locationsblock__lead,
    .wm-enquiryblock__lead,
    .wm-reviewsblock__lead,
    .wm-faqblock__lead { font-size: var(--wm-block-lead-sm, 1.0625rem); }
    /* The three card families together, so a page showing promo cards above
       location cards does not change size halfway down. The promo card's own
       copy of this lives in promocards::assets. */
    .wm-catalogcard__desc,
    .wm-locationcard__desc { font-size: var(--wm-card-text-sm, 1rem); }
    .wm-catalogcard__name,
    .wm-locationcard__name { font-size: var(--wm-card-title-sm, 1.25rem); }
    .wm-locationcard__links { font-size: 1rem; }
    /* FAQ and reviews: the question and the answer are both read, so they
       sit together rather than the answer trailing the question. */
    .wm-faqitem__q { font-size: var(--wm-faq-q-size, 1.0625rem); }
    .wm-faqitem__a { font-size: var(--wm-faq-a-size, 1rem); }
    .wm-reviewcard__text,
    .wm-reviewcard__reply-text { font-size: 1rem; }
    .wm-enqpanel__hours,
    .wm-enqpanel__contact { font-size: 1rem; }
}