/*
 * The older modules' pagelet styles (B6c, loaded after skin.css): articles and the knowledge base, events and the
 * calendar, FAQ, forms and the contact form, galleries and the lightbox, links, news, products and the catalogue,
 * reviews and swatches, cart and checkout, documents and signing, the account's pages; the placement classes; the home
 * page's later bands; the style guide page (/style-guide/); and print. Colours only from the theme's custom properties
 * (theme.css, generated from docs/design/DESIGN.md), so every rule follows the light and dark themes and a re-brand.
 * Mobile first; breakpoints at 40em (tablet) and 60em (desktop), as skin.css.
 */

/* ---------- Shared ---------- */
/* Spam trap field on the contact form: off-screen, people never see it */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

[hidden] { display: none !important; }

/* Small forms inside text (Remove, Log Out) */
.inline-form { display: inline; margin: 0; }

/* Forms: labels above their fields; the old views' <br> between label and field is the layout's, not the text's */
.site-form fieldset { padding: .75em 1em 1em; margin: 0 0 1em; }
.site-form legend { padding: 0 .3em; margin-bottom: .25em; }
.site-form label + br, .site-form .form-choice + br { display: none; }
.site-form p > label:first-child { display: block; margin-bottom: .3rem; }
.site-form .form-choice, .site-form fieldset > label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 400; }

/* Lead text, section and category descriptions */
.section-description, .catalogue-description, .category-description, .gallery-description, .link-list-description,
.ws-news-intro, .ws-faq-intro, .ws-form-intro { max-width: 46rem; font-size: 1.05rem; color: var(--color-muted); }

/* A kicker on the page rather than the brand band (skin.css colours it for the band) */
.page-content .kicker { color: var(--color-link); }

/* ---------- Placement classes (a placement's style classes, B6c; the admin lists the same names) ---------- */
.ws-pagelet { margin: 0 0 1.5rem; }
.ws-pagelet > :first-child { margin-top: 0; }
.ws-pagelet > :last-child { margin-bottom: 0; }
.ws-pagelet.boxed { padding: 1.1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ws-pagelet.highlight { padding: 1.1rem 1.25rem; background: var(--color-callout); color: var(--color-on-callout); border-radius: 14px; }
.ws-pagelet.highlight :is(h1, h2, h3, h4, a, .muted, small) { color: var(--color-on-callout); }
.ws-pagelet.sunken { padding: 1.1rem 1.25rem; background: var(--color-sunken); border-radius: 14px; }
/* The band reaches the window's edges with a shadow and a clip, so the page never scrolls sideways */
.ws-pagelet.band {
    padding: 2rem 0; background: var(--color-band); color: var(--color-on-band);
    box-shadow: 0 0 0 100vmax var(--color-band); clip-path: inset(0 -100vmax);
}
.ws-pagelet.band :is(h1, h2, h3, h4, a) { color: var(--color-on-band); }
.ws-pagelet.band :is(p, li, .muted, small) { color: var(--color-on-band-muted); }
.ws-pagelet.band .kicker { color: var(--color-band-accent); }
.ws-pagelet.narrow { max-width: 46rem; }
.ws-pagelet.centered { text-align: center; margin-left: auto; margin-right: auto; }
.ws-pagelet.centered :is(ul, ol) { display: inline-block; text-align: left; }
.ws-pagelet.compact { font-size: .92rem; line-height: 1.45; }
.ws-pagelet.compact :is(h2, h3) { font-size: 1.15rem; margin: .75em 0 .4em; }
.ws-pagelet.compact :is(p, ul, ol) { margin-bottom: .6em; }
@media (min-width: 40em) {
    .ws-pagelet.two-columns :is(ul, ol) { columns: 2 12rem; column-gap: 2rem; }
    .ws-pagelet.two-columns li { break-inside: avoid; }
}
@media (max-width: 39.99em) {
    .ws-pagelet.hide-on-phone { display: none; }
}
@media (min-width: 60em) {
    .ws-pagelet.hide-on-desktop { display: none; }
}

/* ---------- Articles (pagelet "article-manager") ---------- */
#article-overview { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; }
@media (min-width: 40em) {
    #article-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#latest-articles, #article-categories { padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
#latest-articles h3, #article-categories h3 { margin-top: 0; }
#latest-articles p, #article-categories p, .category-wrapper > p { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
#latest-articles p:last-of-type, #article-categories p:last-of-type, .category-wrapper > p:last-of-type { border-bottom: 0; }
.article-date { color: var(--color-muted); font-size: .9em; }
#article { max-width: 46rem; }
#article h1 { margin-bottom: .25em; }
.article-meta { color: var(--color-muted); margin: 0 0 1.25rem; }
.article-sponsor { display: inline-block; padding: .2rem .6rem; border-radius: 4px; background: var(--color-sponsored-bg); color: var(--color-sponsored-text); font-size: .85rem; font-weight: 600; }
.article-page-title { font-size: 1.4rem; }
#article-page-content { font-size: 1.05rem; }
#article-page-content img { border-radius: 10px; }
.article-pages { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1.5rem 0; }
.article-pages a, .article-pages strong {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem;
    border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); text-decoration: none;
}
.article-pages strong { background: var(--color-band); border-color: var(--color-band); color: var(--color-on-band); }
.category > .category-wrapper + .category-wrapper { margin-top: 1rem; }
#category_content { max-width: 46rem; }

/* ---------- Knowledge base (article sections of type "kb", B7) ---------- */
.ws-kb .kb-search, .ws-documents .document-search {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 40rem; margin: 0 0 1.5rem; padding: .75rem;
    background: var(--color-sunken); border-radius: 12px;
}
.ws-kb .kb-search label, .ws-documents .document-search label { flex: 1 1 100%; font-weight: 600; }
.ws-kb .kb-search input[type="search"], .ws-documents .document-search input[type="search"] { flex: 1 1 14rem; }
.ws-kb .kb-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ws-kb .kb-categories > li { margin: 0; padding: 1rem 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ws-kb .kb-categories > li > a { font-weight: 700; font-size: 1.05rem; color: var(--color-heading); text-decoration: none; }
.ws-kb .kb-categories > li > a:hover { text-decoration: underline; }
.ws-kb .kb-categories ul { list-style: none; margin: .5rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--color-border); }
.ws-kb .kb-categories ul li { padding: .2rem 0; }
.ws-kb .kb-category-box .kb-categories { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.ws-kb .kb-category-box .kb-categories > li { padding: .6rem .8rem; }
.ws-kb .kb-articles { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ws-kb .kb-articles li { padding: .65rem 0; border-bottom: 1px solid var(--color-border); }
.ws-kb .kb-articles li:last-child { border-bottom: 0; }
.ws-kb .kb-articles a { font-weight: 600; }
.ws-kb .kb-count, .ws-kb .kb-where, .ws-kb .kb-meta { color: var(--color-muted); font-size: .9em; }
.ws-kb .kb-summary, .ws-kb .kb-category-description { margin: .2em 0 0; color: var(--color-muted); }
.ws-kb.kb-article { max-width: 46rem; }
.ws-kb .kb-content { font-size: 1.05rem; }
.ws-kb .kb-toc { margin: 0 0 1.5rem; padding: .85rem 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-link); border-radius: 10px; }
.ws-kb .kb-toc-title { margin: 0 0 .35em; font-weight: 700; color: var(--color-heading); }
.ws-kb .kb-toc ul { list-style: none; margin: 0; padding: 0; }
.ws-kb .kb-toc li { padding: .15rem 0; }
.ws-kb .kb-toc .kb-toc-h3 { padding-left: 1.2em; }
.ws-kb .kb-tags { color: var(--color-muted); }
.ws-kb .kb-helpful, .kb-helpful {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.5rem 0; padding: .75rem 1rem;
    background: var(--color-sunken); border-radius: 12px;
}
.kb-helpful form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.kb-helpful-question { font-weight: 600; margin-right: .5rem; }
.kb-helpful button { min-width: 4.5rem; background: transparent; color: var(--color-link); border-color: var(--color-link); }
.kb-helpful-thanks { margin: 0; }

/* ---------- FAQ (pagelet "faq"): each question a <details>; js/site/faq.js adds .ws-faq-tools to long FAQs ---------- */
.ws-faq-set { max-width: 52rem; }
.ws-faq-index ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ws-faq-index a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-surface); color: var(--color-heading); font-weight: 600; text-decoration: none;
}
.ws-faq-index a:hover { border-color: var(--color-link); }
.ws-faq-category { margin: 0 0 2rem; }
.ws-faq-category > h3 { margin: 0 0 .75rem; }
.ws-faq { margin: 0 0 .5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.ws-faq-q { font-weight: 600; color: var(--color-heading); }
details.ws-faq > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .7rem 1rem;
    cursor: pointer; list-style: none; border-radius: 12px;
}
details.ws-faq > summary::-webkit-details-marker { display: none; }
details.ws-faq > summary::after { content: "+" / ""; flex: none; font-size: 1.4rem; line-height: 1; color: var(--color-link); }
details.ws-faq[open] > summary::after { content: "\2212" / ""; }
details.ws-faq > summary:hover { background: var(--color-sunken); }
details.ws-faq[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: 12px 12px 0 0; }
.ws-faq-a { padding: .75rem 1rem .25rem; }
.ws-faq-open { padding: .75rem 1rem; }
.ws-faq-open .ws-faq-q { margin: 0 0 .25rem; font-size: 1.05rem; }
.ws-faq-open .ws-faq-a { padding: 0; }
.ws-faq-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.ws-faq-tools button { background: transparent; color: var(--color-link); border-color: var(--color-link); }

/* ---------- Form Manager forms (pagelet "forms") and the contact form ---------- */
.ws-form, #contact-form { max-width: 40rem; }
.ws-form-fields, #contact-form .site-form { padding: 1.25rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; }
.ws-form .form-field { margin: 0 0 1.1em; }
.ws-form .form-field > label:not(.form-choice) { display: block; margin-bottom: .3rem; }
.ws-form .form-field > br, .ws-form fieldset > br { display: none; }
.ws-form .form-field input:not([type="checkbox"]):not([type="radio"]), .ws-form .form-field select, .ws-form .form-field textarea { width: 100%; max-width: 100%; }
.ws-form .form-choice { cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 400; }
.ws-form .form-help { display: block; margin-top: .3rem; color: var(--color-muted); }
.ws-form .form-error { display: block; margin-top: .3rem; color: var(--color-danger); font-weight: 600; }
.ws-form .has-error input, .ws-form .has-error select, .ws-form .has-error textarea, .ws-form .has-error fieldset { border-color: var(--color-danger); }
.ws-form-required-note, #contact-form p.red { margin: 0; color: var(--color-muted); font-size: .9rem; }
.ws-form-sent { padding: 1rem 1.25rem; background: var(--color-success-bg); border: 1px solid var(--color-success); border-left-width: 4px; border-radius: 10px; }
#contact-form h3 { margin-top: 0; }
#contact-form .site-form textarea { width: 100%; max-width: 100%; }

/* ---------- Links Manager lists (pagelet "links") ---------- */
.ws-links { max-width: 52rem; }
.ws-links .link-category { margin: 0 0 1.75rem; }
.ws-links .link-category > h2 { margin: 0 0 .4rem; font-size: 1.4rem; }
.ws-links .link-category > h2 a { color: var(--color-heading); text-decoration: none; }
.ws-links .link-category > h2 a:hover { text-decoration: underline; }
.ws-links .link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .5rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.ws-links .link-list a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .65rem .9rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; font-weight: 600; text-decoration: none;
}
.ws-links .link-list a::after { content: "\2197" / ""; color: var(--color-muted); }
.ws-links .link-list a:hover { border-color: var(--color-link); }

/* Third menu level: ul.subnav.subnav-3 inside a level-2 item. Indented by default; :where() keeps the
   specificity at zero, so any rule in an install's own stylesheet wins. */
:where(ul.subnav-3) { margin-left: 1em; }

/* ---------- Events (pagelet "event-manager"): the list, an event, the boxes, the month calendar ---------- */
.event_date { display: block; margin: 0 0 .2rem; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-link); }
#news-events { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
#news-events > .event { padding: 1.1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
#news-events > .event-featured { border-left: 4px solid var(--color-link); }
#news-events > .event > h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
#news-events > .event > :last-child { margin-bottom: 0; }
#news-events .event-image { max-width: min(100%, 24rem); }
.event-image { display: block; max-width: 100%; height: auto; margin: 0 0 1rem; border-radius: 12px; }
.event > h1 .event_date { font-size: .9rem; margin-bottom: .4rem; }
.event-details { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; margin: .5rem 0 1rem; }
.event-details dt { font-weight: 600; }
.event-details dd { margin: 0; min-width: 0; }
.event-contact > * { display: block; }
.event-gallery h2 { font-size: 1.3rem; }
.event-gallery-strip { list-style: none; margin: .5em 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.event-gallery-strip img { display: block; height: 100px; width: auto; border-radius: 8px; }
.event-ics a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5em 1.1em; border: 1px solid var(--color-link); border-radius: 10px; font-weight: 700; text-decoration: none; }
.homepage-event { padding: .85rem 1rem; margin: 0 0 .6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.homepage-event h4 { margin: 0 0 .3rem; }
.homepage-event > :last-child { margin-bottom: 0; }
.ws-events-featured { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.ws-events-featured > li { position: relative; margin: 0; padding: 0 0 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.ws-events-featured .event-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; border-radius: 0; }
.ws-events-featured h3 { margin: .8rem 1rem .2rem; font-size: 1.15rem; }
.ws-events-featured .event_date, .ws-events-featured .event-location { margin: 0 1rem; }
.ws-events-featured .event-location { color: var(--color-muted); font-size: .9rem; }
.ws-event-calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.ws-event-calendar-month { margin: 0; font-size: 1.5rem; }
.ws-event-calendar-prev, .ws-event-calendar-next { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); text-decoration: none; font-weight: 600; }
.ws-event-calendar-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: .5em 0 1.5em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.ws-event-calendar-grid caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ws-event-calendar-grid th { padding: .5rem .25rem; text-align: center; background: var(--color-band); color: var(--color-on-band); border: 0; }
.ws-event-calendar-grid th abbr { text-decoration: none; }
.ws-event-calendar-grid td { height: 6em; padding: .3em; vertical-align: top; border: 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.ws-event-calendar-grid td:first-child { border-left: 0; }
.ws-event-calendar-grid td.other-month { background: var(--color-sunken); color: var(--color-muted); }
.ws-event-calendar-grid td.today { background: var(--color-callout); color: var(--color-on-callout); }
.ws-event-calendar-grid td.today a { color: var(--color-on-callout); }
.ws-event-calendar-grid .day { display: inline-block; min-width: 1.6em; font-weight: 600; }
.ws-event-calendar-grid td.today .day { font-weight: 800; }
.ws-event-calendar-grid ul { list-style: none; margin: .25em 0 0; padding: 0; font-size: .82em; }
.ws-event-calendar-grid li { margin: 0 0 .2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-event-calendar-grid li a { display: block; overflow: hidden; text-overflow: ellipsis; }
.ws-event-calendar-grid .time { font-weight: 700; }
.ws-event-calendar-list ul { list-style: none; margin: 0; padding: 0; }
.ws-event-calendar-list li { padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.ws-event-calendar-list .event-location { color: var(--color-muted); font-size: .9rem; }
@media (max-width: 37.5em) {
    .ws-event-calendar-grid { display: none; }
}

/* ---------- Galleries (pagelet "photo-gallery") and the lightbox (js/site/lightbox.js) ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .75rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.gallery li { margin: 0; }
.gallery a { display: block; height: 100%; text-decoration: none; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--color-photo-placeholder); }
.gallery a:hover img { outline: 2px solid var(--color-link); outline-offset: 2px; }
.gallery li.selected img, .gallery a[aria-current] img { outline: 3px solid var(--color-link); outline-offset: 2px; }
.gallery-covers a { padding: 0 0 .75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.gallery-covers img { border-radius: 0; }
.gallery-covers .gallery-name { display: block; margin: .6rem .85rem 0; font-weight: 600; color: var(--color-heading); }
.gallery-covers a:hover img { outline: 0; }
.gallery-covers a:hover { border-color: var(--color-link); }
.no-photos { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--color-photo-placeholder); color: var(--color-on-band-muted); font-size: .9rem; }
.photo { margin: 0 0 1.5rem; }
.photo-nav { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; color: var(--color-muted); }
.photo-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); text-decoration: none; font-weight: 600; }
.photo-full { display: block; max-width: 100%; height: auto; margin: 0 0 .75rem; border-radius: 12px; }
.photo-title { font-weight: 600; color: var(--color-heading); margin: 0 0 .25rem; }
.photo-description { color: var(--color-muted); }
.ws-lightbox { max-width: min(95vw, 1100px); max-height: 95vh; padding: .75em; border: 0; border-radius: 14px; background: var(--color-surface); color: var(--color-text); }
.ws-lightbox::backdrop { background: var(--color-overlay); }
.ws-lightbox-figure { margin: 0; text-align: center; }
.ws-lightbox-image { display: block; max-width: 100%; max-height: 80vh; height: auto; margin: 0 auto; border-radius: 8px; }
.ws-lightbox-nav { display: flex; gap: .5em; align-items: center; justify-content: flex-end; margin-top: .5em; }
.ws-lightbox-count { margin-right: auto; color: var(--color-muted); }

/* ---------- News and press releases (pagelet "news") ---------- */
.ws-news-title { margin-top: 0; }
.ws-news-categories ul, .ws-news-archive ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.ws-news-categories :is(a, strong), .ws-news-archive :is(a, strong) {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: .3rem .9rem; border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-surface); color: var(--color-heading); font-weight: 600; text-decoration: none;
}
.ws-news-categories strong, .ws-news-archive strong { background: var(--color-band); border-color: var(--color-band); color: var(--color-on-band); }
.ws-news-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.ws-news-item { display: flex; flex-direction: column; gap: 0; margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.ws-news-item--featured { border-left: 4px solid var(--color-link); }
.ws-news-item--featured .ws-news-headline { font-weight: 700; }
.ws-news-image { display: block; background: var(--color-photo-placeholder); }
.ws-news-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ws-news-text { flex: 1; min-width: 0; padding: 1rem 1.25rem; }
.ws-news-date { margin: 0 0 .3rem; font-size: .85em; color: var(--color-muted); }
.ws-news-headline { margin: 0 0 .35rem; font-size: 1.25rem; }
.ws-news-headline a { color: var(--color-heading); text-decoration: none; }
.ws-news-headline a:hover { text-decoration: underline; }
.ws-news-subheading { margin: 0 0 .35rem; font-style: italic; }
.ws-news-summary { margin: 0; }
@media (min-width: 40em) {
    .ws-news-item { flex-direction: row; }
    .ws-news-image { flex: 0 0 14rem; }
    .ws-news-image img { height: 100%; aspect-ratio: auto; min-height: 9rem; }
}
.ws-news-pages { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.ws-news-pages a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); text-decoration: none; font-weight: 600; }
.ws-news-empty { color: var(--color-muted); font-style: italic; }
.ws-news-feed a::before { content: "\25C9" / ""; margin-right: .35em; }
.ws-news-article { max-width: 46rem; }
.ws-news-article .ws-news-headline { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); margin: .2em 0 .3em; }
.ws-news-article .ws-news-picture img { max-width: 100%; height: auto; border-radius: 12px; }
.ws-news-body { font-size: 1.05rem; }
.ws-news-release-note { margin: 0 0 .5em; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--color-link); }
.ws-news-dateline { font-weight: bold; }
.ws-news-preview { padding: .6em 1em; background: var(--color-warning-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; }
.ws-news-boilerplate { margin: 1.5em 0 1em; padding-top: 1em; border-top: 1px solid var(--color-border); font-size: .92em; }
.ws-news-contact h3 { margin: 0 0 .25em; }
.ws-news-neighbours { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; margin: 2em 0 1em; padding-top: 1em; border-top: 1px solid var(--color-border); }
.ws-news-latest .ws-news-list { gap: 0; }
.ws-news-latest .ws-news-item { display: block; padding: .65rem 0; background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.ws-news-latest .ws-news-item--featured { border-left: 0; }
.ws-news-latest .ws-news-headline { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }
.ws-news-more { font-weight: 600; }

/* ---------- Document libraries (pagelet "documents"), My documents (B8) and signing (B8b) ---------- */
.ws-documents, .my-documents, .my-signatures { max-width: 52rem; }
.ws-documents .document-folders { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ws-documents .document-folders a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface); color: var(--color-heading); font-weight: 600; text-decoration: none;
}
.ws-documents .document-folders a:hover { border-color: var(--color-link); }
.document-folder-icon::before { content: "\1F4C1" / ""; margin-right: .4em; }
.document-up a::before { content: "\2190" / ""; margin-right: .35em; }
.document-list { list-style: none; margin: 0 0 1.25rem; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.document-list li { margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--color-border); }
.document-list li:last-child { border-bottom: 0; }
.document-list a { font-weight: 600; }
.document-type {
    display: inline-block; min-width: 3.2em; margin-right: .6em; padding: .1em .35em; border-radius: 4px;
    background: var(--color-band); color: var(--color-on-band); font-size: .72em; font-weight: 700; text-align: center; text-transform: uppercase; vertical-align: .1em;
}
.document-meta { display: inline-block; margin-left: .35em; color: var(--color-muted); font-size: .9em; }
.document-description { margin: .25em 0 0; color: var(--color-muted); }
.document-folder-description { color: var(--color-muted); max-width: 46rem; }
.document-signing { max-width: 46rem; }
.document-signing .signing-file { display: grid; grid-template-columns: max-content 1fr; gap: .3em 1em; margin: 0 0 1em; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.document-signing .signing-file dt { font-weight: 600; }
.document-signing .signing-file dd { margin: 0; min-width: 0; }
.document-signing .signing-hash { font-size: .85em; overflow-wrap: anywhere; }
.document-signing .signing-agreement { margin: 1em 0; padding: .85em 1.1em; border-left: 4px solid var(--color-link); background: var(--color-sunken); border-radius: 0 10px 10px 0; }
.document-signing .signing-agree { font-weight: bold; }
.document-signing .signing-note { color: var(--color-muted); font-size: .9em; }
.signing-done { padding: .85rem 1rem; background: var(--color-success-bg); border: 1px solid var(--color-success); border-radius: 10px; }

/* ---------- Products: cards, the catalogue and a category, a product's page ---------- */
.ws-grid, .ws-products-featured { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.ws-grid > li, .ws-products-featured > li { display: flex; min-width: 0; }
.ws-product-card, .ws-category-card {
    position: relative; flex: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: 0 0 1rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden;
}
.ws-product-card > :not(.ws-product-card-image), .ws-category-card > :not(.ws-category-card-image) { margin-left: 1rem; margin-right: 1rem; }
.ws-product-card-image, .ws-category-card-image { display: block; background: var(--color-photo-placeholder); }
.ws-product-card-image img, .ws-category-card-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ws-product-card-name, .ws-category-card-name { margin-top: .8rem; margin-bottom: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.ws-product-card-name a, .ws-category-card-name a { color: var(--color-text); text-decoration: none; }
.ws-product-card-name a:hover, .ws-category-card-name a:hover { text-decoration: underline; }
.ws-product-card-summary, .ws-category-card-text { margin-top: 0; margin-bottom: 0; color: var(--color-muted); font-size: .92rem; }
.ws-product-card-price { margin-top: 0; margin-bottom: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--color-heading); }
.ws-product-card .add-to-cart, .ws-product-card .ws-price-sign-in { margin-top: auto; padding-top: .4rem; }
.ws-product-card .add-to-cart button { width: 100%; }
.ws-badge-new { display: inline-block; padding: 0 .45em; border-radius: 4px; background: var(--color-success); color: var(--color-surface); font-family: var(--font-body); font-size: .72em; font-weight: 700; line-height: 1.7; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }
.ws-price-sign-in { margin: 0; }
.catalogue-categories { max-width: 46rem; margin: 0 0 1.5rem; }
.ws-category-thumb { float: left; margin: 0 .75em .5em 0; }
.ws-category-thumb img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 8px; }
.catalogue-categories > p { display: flow-root; margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--color-border); }
.catalogue-categories > p:last-of-type { border-bottom: 0; }
.catalogue-categories > p > a:not(.ws-category-thumb) { font-weight: 600; }
.category-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 1.5rem; margin: 0 0 .75rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.category-product dt, .category-product dd { margin: 0; font-weight: inherit; color: inherit; }
.category-product dd { order: -1; }
.category-product dd > p { margin: 0; }
.category-product dt p { margin: .35rem 0 0; font-weight: 700; color: var(--color-heading); }
@media (min-width: 40em) {
    .category-product { grid-template-columns: minmax(0, 1fr) 12rem; align-items: center; }
    .category-product dt { grid-column: 2; grid-row: 1; text-align: right; }
}
#category-text #product-photos { float: right; max-width: 40%; margin: 0 0 1rem 1.5rem; }
#product-photos img, #product-main-photo img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.product-wrapper { display: grid; gap: 1.5rem 2.5rem; }
.product-wrapper > * { min-width: 0; }
@media (min-width: 60em) {
    .product > .product-wrapper:has(> #product-photos) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
#product-text > .product-wrapper { display: block; }
#product-text h1 { margin-top: 0; }
#product-text h2 { font-size: 1.25rem; color: var(--color-muted); font-family: var(--font-body); font-weight: 500; margin-top: 0; }
#product-text h2.product-updated { font-size: .95rem; }
#product-text h3 { font-family: var(--font-display); font-size: 1.6rem; margin: .5rem 0 1rem; }
#product-buttons ul { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; list-style: none; margin: 0 0 1rem; padding: 0; }
#product-buttons .add-to-cart { margin: 0; }
#print-page { display: none; }
.js #print-page { display: list-item; }
#print-page .button { background: transparent; color: var(--color-link); border-color: var(--color-link); }
#product-content { max-width: 46rem; }
.ws-product-photos { list-style: none; margin: .75rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ws-product-photo { margin: 0; max-width: 6.5rem; }
.ws-product-photo img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--color-border); }
.ws-product-photo figcaption { font-size: .85em; color: var(--color-muted); }
/* Variant swatches (js/site/swatches.js): links without the script, buttons with aria-pressed with it */
.ws-product-swatches ul { list-style: none; margin: .5em 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.ws-product-swatch { display: inline-flex; align-items: center; gap: .4em; min-height: 2.75rem; padding: .2em .75em .2em .3em; border: 1px solid var(--color-input-border); border-radius: 999px; background: var(--color-surface); color: inherit; font: inherit; font-size: .9em; font-weight: 500; text-decoration: none; cursor: pointer; }
.ws-product-swatch:hover { filter: none; border-color: var(--color-link); }
.ws-product-swatch[aria-pressed="true"] { border-color: var(--color-heading); box-shadow: 0 0 0 2px var(--color-heading); }
.ws-product-swatch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ws-product-swatch-chip { display: inline-block; width: 1.6em; height: 1.6em; border-radius: 50%; border: 1px solid var(--color-input-border); object-fit: cover; }
.ws-product-swatch-current { margin: .5em 0 0; min-height: 1.2em; font-weight: bold; }
/* Specification table on the product page, comparison table on the category page */
.ws-specs, .ws-compare { border-collapse: separate; border-spacing: 0; margin: .5em 0 1.5em; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ws-specs caption, .ws-compare caption { text-align: left; font-weight: 700; color: var(--color-heading); padding: 0 0 .5em; }
.ws-specs th, .ws-specs td, .ws-compare th, .ws-compare td { border: 0; border-bottom: 1px solid var(--color-border); padding: .5em .8em; text-align: left; vertical-align: top; }
.ws-specs tr:last-child > *, .ws-compare tr:last-child > * { border-bottom: 0; }
.ws-specs th[scope="row"] { font-weight: 500; background: var(--color-sunken); color: var(--color-text); }
.ws-compare thead th { background: var(--color-band); color: var(--color-on-band); }
.ws-compare thead th a { color: var(--color-on-band); }
.ws-compare-wrap { max-width: 100%; overflow-x: auto; }
/* "Made by" line, manufacturer filter links */
.ws-product-manufacturer { display: flex; align-items: center; gap: .5em; margin: .5em 0; }
.ws-product-manufacturer-logo { max-height: 2.5em; max-width: 8em; width: auto; height: auto; }
.ws-manufacturer-filter ul { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.ws-manufacturer-filter a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .25rem .85rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); text-decoration: none; }
.ws-manufacturer-filter a[aria-current="page"] { font-weight: bold; background: var(--color-band); border-color: var(--color-band); color: var(--color-on-band); }
/* Pager and sort/view links */
.ws-pager ul { list-style: none; margin: 1.5em 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35em; }
.ws-sort-view { display: flex; flex-wrap: wrap; gap: .5em 2em; margin: 0 0 1em; padding: .6rem .9rem; background: var(--color-sunken); border-radius: 10px; }
.ws-sort-view p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em; }
.ws-sort-view [aria-current] { font-weight: 700; }
.ws-related, .ws-product-files { clear: both; margin: 2em 0 0; }
.ws-product-files ul { list-style: none; margin: 0; padding: 0; }
.ws-product-file { padding: .65em 0; border-bottom: 1px solid var(--color-border); }
.ws-product-file audio, .ws-product-file video { display: block; max-width: 100%; margin-top: .4em; }
.ws-product-file-size, .download-size { color: var(--color-muted); font-size: .9em; }
.ws-product-file-locked { display: block; color: var(--color-muted); font-size: .9em; }
/* The product search form */
.ws-product-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75em 1em; margin: 0 0 1.5em; padding: .9rem 1rem; background: var(--color-sunken); border-radius: 12px; }
.ws-product-search p, .ws-product-search fieldset { margin: 0; }
.ws-product-search-words { flex: 1 1 16rem; }
.ws-product-search-words label { display: block; font-weight: 600; margin-bottom: .3rem; }
.ws-product-search-words input { width: 100%; }
.ws-product-search-price { border: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.ws-product-search-price legend { padding: 0; font-weight: 600; margin-bottom: .3rem; }
.ws-product-search-price input { width: 6.5rem; }
.ws-product-search-error { flex-basis: 100%; color: var(--color-danger); font-weight: 600; }
.ws-product-search-count { color: var(--color-muted); }

/* ---------- Product reviews (B13) ---------- */
.ws-reviews { clear: both; margin: 2.5em 0 1em; padding-top: 1.25em; border-top: 1px solid var(--color-border); }
.ws-reviews .review-stars { color: var(--color-star); letter-spacing: .05em; }
.ws-reviews .reviews-summary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2.5rem; margin: 0 0 1rem; }
.ws-reviews .reviews-average { font-size: 1.15em; margin: 0 0 .5em; }
.ws-reviews .reviews-count, .ws-reviews .review-meta { color: var(--color-muted); font-size: .9em; }
.ws-reviews .reviews-bars { border-collapse: collapse; margin: 0 0 1em; }
.ws-reviews .reviews-bars th { padding: .15em .6em .15em 0; font-weight: normal; text-align: left; white-space: nowrap; border: 0; background: none; }
.ws-reviews .reviews-bars td { padding: .15em .4em; border: 0; }
.ws-reviews .reviews-bars .current th { font-weight: bold; }
.ws-reviews .reviews-bar { width: 12em; height: 1em; accent-color: var(--color-star); }
.ws-reviews .reviews-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.5em; margin: 0 0 1em; padding: .6rem .9rem; background: var(--color-sunken); border-radius: 10px; }
.ws-reviews .reviews-tools p, .ws-reviews .reviews-filter, .ws-reviews .reviews-sort { margin: 0; }
.ws-reviews .reviews-notice { padding: .5em .75em; background: var(--color-success-bg); border: 1px solid var(--color-success); border-radius: 8px; }
.ws-reviews .reviews-list { list-style: none; margin: 0; padding: 0; }
.ws-reviews .review { margin: 0 0 1rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ws-reviews .review-heading { margin: 0; font-size: 1.1rem; }
.ws-reviews .review-meta { margin: .2em 0 .5em; }
.ws-reviews .review-verified { margin-left: .5em; color: var(--color-success); font-weight: bold; }
.ws-reviews .review-reply { margin: .75em 0 0 1em; padding: .5em .9em; border-left: 3px solid var(--color-link); background: var(--color-sunken); border-radius: 0 8px 8px 0; }
.ws-reviews .review-reply-heading { margin: 0 0 .3em; font-size: 1rem; }
.ws-reviews .review-helpful { margin-top: .5em; color: var(--color-muted); font-size: .9em; }
.ws-reviews .review-vote { display: inline; margin: 0 0 0 .5em; }
.ws-reviews .review-voted { margin-left: .5em; }
.ws-reviews .review-report { margin-top: .5em; font-size: .9em; }
.ws-reviews .review-report summary { cursor: pointer; color: var(--color-muted); }
.ws-review-form { max-width: 40rem; }
.ws-review-form .review-form input[type="text"], .ws-review-form .review-form textarea { width: 100%; max-width: 40em; }
.ws-review-form .form-error, .ws-review-form .form-errors { display: block; color: var(--color-danger); }
.ws-review-form .review-delete { margin-top: 1em; }
.ws-reviews .review-photos, .ws-review-form .review-photos { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: .6em 0 0; padding: 0; }
.ws-reviews .review-photos img, .ws-review-form .review-photos img { display: block; max-width: 120px; max-height: 120px; border: 1px solid var(--color-border); border-radius: 8px; }
.ws-review-form .review-photos li { text-align: center; }
.ws-reviews .reviews-verified-filter { margin: 0 0 .5em; }
.ws-review-form .review-unverified-note { color: var(--color-muted); }
.ws-product-rating { margin-top: 0; margin-bottom: 0; font-size: .9em; }
.ws-product-rating .review-stars { color: var(--color-star); letter-spacing: .05em; }

/* ---------- Cart and checkout ---------- */
#cart-table { width: 100%; margin: 0 0 1rem; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
#cart-table th, #cart-table td { text-align: left; padding: .6em .8em; border: 0; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
#cart-table thead th { background: var(--color-band); color: var(--color-on-band); }
#cart-table tfoot th, #cart-table tfoot td { background: var(--color-sunken); }
#cart-table tfoot tr:last-child > * { border-bottom: 0; font-weight: 700; color: var(--color-heading); font-size: 1.05rem; }
#cart-table .amount { text-align: right; white-space: nowrap; }
.cart-qty { width: 5.5em; }
/* A phone: each line as a block, its cells labelled by their place */
@media (max-width: 39.99em) {
    #cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #cart-table, #cart-table tbody, #cart-table tr.cart-row, #cart-table tr.cart-row > td { display: block; }
    #cart-table tr.cart-row { padding: .5rem 0; border-bottom: 1px solid var(--color-border); }
    #cart-table tr.cart-row > td { padding: .2em .8em; border: 0; }
    #cart-table tr.cart-row > td:first-child { font-weight: 600; }
    #cart-table tr.cart-row > td.amount { text-align: left; }
    #cart-table tr.cart-row > td:nth-child(3)::before { content: "Unit price: "; color: var(--color-muted); }
    #cart-table tr.cart-row > td:nth-child(4)::before { content: "Cost: "; color: var(--color-muted); }
    #cart-table tfoot { display: table; width: 100%; }
}
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.5em; margin: .75em 0; }
.cart-note { font-size: .9em; color: var(--color-muted); }
#cart-footer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
#cart-footer .button:first-child { background: transparent; color: var(--color-link); border-color: var(--color-link); }
.checkout-ship-to address, .ws-order-ship-to { font-style: normal; }
.checkout-ship-to, .checkout-payment, .etransfer-details { margin: 0 0 1.25rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.checkout-ship-to h2, .checkout-payment h2, .etransfer-details h2 { margin-top: 0; font-size: 1.3rem; }
.shipping-address-form { max-width: 40rem; }
.shipping-address-form fieldset { border: 0; padding: 0; margin: 0 0 1em; }

/* ---------- The account's pages: orders, downloads, memberships ---------- */
.ws-order { margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.ws-order h2, .ws-order h3 { margin-top: 0; }
.ws-order-meta { color: var(--color-muted); }
.ws-order-status { display: inline-block; padding: .1rem .55rem; border-radius: 4px; background: var(--color-sunken); font-size: .85rem; font-weight: 600; }
.ws-order-items { width: 100%; border-collapse: collapse; }
.ws-order-items th, .ws-order-items td { padding: .35em .5em; text-align: left; border-bottom: 1px solid var(--color-border); }
.ws-order-items .amount { text-align: right; }
.downloads { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.downloads > li { padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.download-files { margin: .25em 0 .75em; }
.download-date { color: var(--color-muted); font-size: .9em; }
.account-memberships { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.account-memberships > li { padding: .75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.account-memberships > li.membership-expired { background: var(--color-sunken); }
.account-verify .inline-form { display: inline; }
.captcha { margin: 0 0 1rem; }

/* Businesses' and members' sections the skin's page rules don't cover (B22b, B22c, B16a) */
.business-gallery-heading, .business-products h2, .member-profile-listings h2 { margin-top: 2rem; }

/* ---------- Home page bands (B6c): category buttons, latest listings, the charters and sponsors slots, the call-out ---------- */
.home-band { margin: 2.5rem 0; }
.home-band > h2, .home-band-heading h2 { margin: 0 0 1rem; }
.home-band-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin: 0 0 1rem; }
.home-band-heading h2 { margin: 0; }
.home-band-more { font-weight: 600; }
.home-categories .chip-list { margin-bottom: 0; }
.home-band-charters {
    padding: 2.25rem 0; background: var(--color-band-alt); color: var(--color-on-band);
    box-shadow: 0 0 0 100vmax var(--color-band-alt); clip-path: inset(0 -100vmax);
}
.home-band-charters :is(h2, h3, a) { color: var(--color-on-band); }
.home-band-charters :is(p, li, small) { color: var(--color-on-band-muted); }
.home-band-sponsors { padding: 1.5rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.home-band-callout { padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-callout); color: var(--color-on-callout); border-radius: 16px; }
.home-band-callout :is(h2, h3, a) { color: var(--color-on-callout); }
.home-band-callout > :last-child, .home-band-callout .ws-snippet > :last-child { margin-bottom: 0; }

/* ---------- B55: the home page as the Deep Water mock-up (the regions card, the charters band, the sponsors) and the
   charters band above the site-wide sponsors on the directory and marketplace pages ---------- */
.home-hero .listing-search-box { margin-top: 1.25rem; }
/* B62 (VIFE QA T5): the hero's search field keeps the skin's field border (no border: 0 here): on a phone the button
   wraps below it, and a borderless field on the box's own fill was invisible */
.page-home .home-regions { margin-top: -2.75rem; position: relative; }
.home-regions .region-current { order: 3; flex: 1 1 100%; margin: 0; }
.home-regions .region-list { order: 4; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.charters-band {
    padding: 2.25rem 0; background: var(--color-band-alt); color: var(--color-on-band);
    box-shadow: 0 0 0 100vmax var(--color-band-alt); clip-path: inset(0 -100vmax);
}
.charters-strip { box-shadow: none; clip-path: none; padding: 2rem 0; }
.charters-band-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-start; }
.charters-band-intro { flex: 1 1 16rem; }
.charters-band-intro h2 { color: var(--color-on-band); margin: 0 0 .5rem; }
.charters-band-intro p { color: var(--color-on-band-muted); margin: 0 0 .75rem; }
.charters-band a { color: var(--color-on-band); }
.charters-band-more a { font-weight: 600; }
.charter-spots-label { font-size: .9rem; margin-bottom: .4rem !important; }
.charter-spots { display: flex; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.charter-spot { width: 1.6rem; height: .55rem; border-radius: 999px; border: 1px solid var(--color-slot-open); }
.charter-spot-taken { background: var(--color-slot-taken); border-color: var(--color-slot-taken); }
.charter-cards, .sponsor-cards {
    flex: 2 1 28rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem;
    list-style: none; margin: 0; padding: 0;
}
.charter-card {
    position: relative; padding: 1rem; border-radius: 12px; background: var(--color-band-deep); color: var(--color-on-band);
}
.charter-card:focus-within, .sponsor-card:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.charter-initials {
    display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
    background: var(--color-callout); color: var(--color-on-callout); font-weight: 700; font-size: .9rem;
}
.charter-card-name { margin: .6rem 0 .3rem; font-family: var(--font-body); font-size: 1.05rem; }
.charter-card-name a, .sponsor-card-name a { text-decoration: none; }
.charter-card-name a::after, .sponsor-card-name a::after { content: ""; position: absolute; inset: 0; }
.charter-card-name a:focus-visible, .sponsor-card-name a:focus-visible { outline: none; }
.charter-card p { margin: 0; color: var(--color-on-band-muted); font-size: .92rem; overflow-wrap: anywhere; }
/* B58: up to three of a charter's species and techniques */
.charter-card p.charter-card-highlights { margin-top: .35rem; color: var(--color-on-band); font-size: .85rem; font-weight: 600; }
.charters-band-empty { flex: 2 1 20rem; }
.charters-band-empty p { color: var(--color-on-band-muted); }
.home-sponsors-heading {
    font-family: var(--font-body); font-size: .85rem; font-weight: 700; letter-spacing: var(--tracking-kicker);
    text-transform: uppercase; color: var(--color-muted); margin: 0 0 1rem;
}
.sponsor-card {
    position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem 1rem; padding: 1rem;
    border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
}
.sponsor-card .charter-initials { grid-row: span 2; width: 3rem; height: 3rem; }
.sponsor-card-name { margin: 0; font-family: var(--font-body); font-size: 1.05rem; }
.sponsor-card-name a { color: var(--color-heading); }
.sponsor-card-meta { margin: 0; color: var(--color-muted); font-size: .9rem; overflow-wrap: anywhere; }
.region-listings-charters { margin: 0 0 1.5rem; }

/* ---------- The Listings page (VIFE 2026-10-23, the regions pagelet's own page): the region indicator, the chooser
   behind "Change Region" (hidden under html.js until regions.js takes over, so it doesn't flash), the listings ---------- */
.js .region-chooser[data-region-collapsed] { display: none; }
.region-indicator { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.region-indicator-text { margin: 0; font-size: 1.1rem; }
.region-indicator + .region-chooser { margin-top: 0; }
.region-listings { margin: 0 0 2rem; }
.region-listings-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin: 0 0 .75rem; }
.region-listings-heading :is(h1, h2, h3) { margin: 0; }
.region-listings-area { font-weight: 600; }

/* ---------- The style guide page (/style-guide/) ---------- */
.style-guide-lead { max-width: 46rem; font-size: 1.1rem; color: var(--color-muted); }
.style-guide-index ul { display: flex; flex-wrap: wrap; gap: .3rem .9rem; list-style: none; margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--color-sunken); border-radius: 12px; }
.style-guide-section { margin: 0 0 3rem; scroll-margin-top: 1rem; }
.style-guide-title { margin: 0 0 .15rem; }
.style-guide-note { margin: 0 0 .75rem; color: var(--color-muted); font-size: .9rem; }
.style-guide-sample { padding: clamp(1rem, 3vw, 1.75rem); background: var(--color-page); border: 1px dashed var(--color-input-border); border-radius: 16px; }
.style-guide-sample > :first-child { margin-top: 0; }
.style-guide-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.style-guide-card { padding: 1rem 1.25rem; max-width: 24rem; }
.style-guide-card h3 { margin-top: 0; }

/* ---------- Print: the page's content in dark text on white, without the controls ---------- */
@media print {
    @page { margin: 1.5cm; }
    /* Paper is light whatever the screen's theme: CanvasText is then black */
    :root, :root[data-theme] { color-scheme: light !important; }
    html { font-size: 11pt; }
    .site-main { padding: 0; }
    .container { max-width: none; padding: 0; }
    /* Controls and boxes that mean nothing on paper */
    .breadcrumb, .listing-search-box, .listing-search-more, .region-chooser, .kb-search, .kb-helpful, .document-search, .ws-product-search,
    .add-to-cart, .ws-price-sign-in, #product-buttons, .cart-actions, #cart-footer, .ws-faq-tools, .ws-faq-index, .gallery_pages, .ws-pager,
    .article-pages, .ws-news-pages, .ws-news-categories, .ws-news-archive, .ws-news-feed, .ws-sort-view, .ws-manufacturer-filter,
    .ws-event-calendar-nav a, .photo-nav, .ws-lightbox, .review-report, .review-vote, .reviews-tools, .reviews-write, .hp-field,
    .style-guide-index, .ws-pagelet.no-print, .home-band-more, .event-ics, .plans-combine, form button, [data-print-page] { display: none !important; }
    /* Every surface prints as paper: no backgrounds, thin rules instead of cards */
    *, *::before, *::after { background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
    body, h1, h2, h3, h4, h5, h6, a, .muted, small, .kicker, .event_date, th, td, dt, dd, .ws-pagelet, .home-band-charters, .charters-band, .charters-band *, .home-band-callout,
    .plans .plans-table thead th, #cart-table thead th, .ws-compare thead th, .ws-event-calendar-grid th, .document-type, .chip-list a { color: CanvasText !important; }
    .card, .listing-card, .ws-product-card, .ws-category-card, .ws-faq, .ws-news-item, #news-events > .event, .homepage-event, .document-list, .ws-order,
    .review, .business-facts, .member-profile-facts, .classified-listing-seller, .classified-listing-safety, .plans-table-wrap, #cart-table, .ws-specs, .ws-compare,
    .ws-pagelet.boxed, .ws-pagelet.highlight, .ws-pagelet.sunken, .style-guide-sample, .ws-kb .kb-categories > li, #latest-articles, #article-categories {
        border: 1px solid CanvasText !important; border-radius: 0 !important; break-inside: avoid;
    }
    .ws-pagelet.band, .home-band-charters, .charters-band { clip-path: none; padding: 0; }
    .charter-spots, .charters-strip, .charter-book-bar { display: none !important; }
    h1, h2, h3, h4 { break-after: avoid; }
    p, li, blockquote, tr, img, figure { break-inside: avoid; }
    img { max-width: 100% !important; }
    .listing-cards, .ws-grid, .ws-products-featured, .gallery, .ws-events-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5cm; }
    .listing-card-title a::after { content: none; }
    /* Where a link goes, after links in written content */
    :is(#article-page-content, .kb-content, .ws-news-body, #product-content, .business-page-content, .page-content > p) a[href^="http"]::after {
        content: " (" attr(href) ")"; font-size: .85em; word-break: break-all;
    }
    abbr[title]::after { content: " (" attr(title) ")"; }
    /* FAQ answers print open (skin.js opens every <details> before printing) */
    details.ws-faq > summary::after { content: none; }
    table { width: 100%; }
    .ws-event-calendar-grid { display: table !important; }
    .ws-event-calendar-list { display: none; }
}