/* webfront/css/public.css — presentation of the literal legacy (Website Builder) page bodies on
 * the portal design tokens. Presentation only: never hide, clip, reorder or generate text.
 * Legacy text contains Font Awesome 4 private-use glyphs; "FontAwesome" is a FALLBACK font, so
 * those characters render as icons while the text itself stays byte-identical.
 */
.legacy-body { position: relative; z-index: 1; max-width: var(--cp-maxw); margin: 0 auto; padding: var(--cp-gap) var(--cp-pad) 0;
    font-family: var(--cp-font), 'FontAwesome'; font-size: 16px; line-height: 1.7; color: var(--cp-ink); }
.ss-main--bare.legacy-body { padding: 20px; }
.legacy-body h1, .legacy-body h2, .legacy-body h3, .legacy-body h4, .legacy-body h5, .legacy-body h6 {
    font-family: var(--cp-display), 'FontAwesome'; line-height: 1.2; margin: .4em 0 .45em; color: var(--cp-ink); }
.legacy-body h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.legacy-body h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.legacy-body h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.legacy-body h4 { font-size: 1.12rem; }
.legacy-body h5 { font-size: 1.05rem; color: var(--cp-ink-soft); font-weight: 600; }
.legacy-body h6 { font-size: .95rem; }
.legacy-body p { margin: 0 0 1em; }
.legacy-body ul, .legacy-body ol { margin: 0 0 1em; padding-left: 1.3em; }
.legacy-body li { margin: .25em 0; }
.legacy-body a { color: var(--cp-blue); }
.legacy-body a:hover { color: var(--cp-red-soft); }
/* Buttons carry their own colour: the two legacy link rules above are more specific than
 * `.cp-btn--primary`, which turned every primary button label blue on red inside a legacy body. */
.legacy-body a.cp-btn--primary,
.legacy-body a.cp-btn--primary:hover,
.legacy-body a.cp-btn--primary:focus,
.legacy-body a.cp-btn--primary:visited { color: #fff; }
.legacy-body a.cp-btn--ghost, .legacy-body a.cp-btn--ghost:hover { color: var(--cp-ink); }
.legacy-body a.cp-btn--ai, .legacy-body a.cp-btn--ai:hover { color: #fff; }
.legacy-body font { color: inherit !important; }
.legacy-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--cp-radius-sm); }
.legacy-body svg { max-width: 48px; max-height: 48px; }
.legacy-body .wb_button svg, .legacy-body [data-plugin="Button"] svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.legacy-body [data-plugin="Picture"] svg { width: 40px; height: 40px; fill: currentColor; }
.legacy-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 0 0 1em; }
/* The shared comparison table must stay a real table: `display:block` above turns it into a
 * content-width box, leaving a large empty area inside its panel (review 2026-10-26, R2.1). */
.legacy-body .cmp-table { display: table; overflow: visible; margin: 0; }
.legacy-body .cmp-wrap { display: block; }
.legacy-body th, .legacy-body td { padding: 10px 12px; border-bottom: 1px solid var(--cp-border); text-align: left; vertical-align: top; }
.legacy-body hr, .legacy-body [data-plugin="Line"] { border: 0; border-top: 1px solid var(--cp-border); margin: 18px 0; min-height: 0; }

/* Website Builder layout primitives -> responsive flow */
.legacy-body .wb_element { max-width: 100%; min-width: 0; }
.legacy-body .wb_content { min-width: 0; }
.legacy-body .wb-layout-vertical { display: flex; flex-direction: column; gap: 6px; }
.legacy-body .wb-layout-horizontal { display: flex; flex-wrap: wrap; gap: var(--cp-gap); align-items: stretch; }
.legacy-body .wb-layout-horizontal > .wb_element { flex: 1 1 260px; }
.legacy-body .wb-layout-absolute { display: block; }
.legacy-body .wb-layout-link { position: absolute; inset: 0; z-index: 1; }
.legacy-body .wb-layout-has-link { position: relative; }

/* Sections: each top-level block of the legacy body becomes a reading panel. The surface is nearly
 * opaque (per theme) so long-form text does not compete with the workshop photo behind it. */
.ss-public { --ss-read: rgba(12, 12, 15, .93); }
.ss-public.theme-dark { --ss-read: rgba(13, 19, 33, .93); }
.ss-public.theme-light { --ss-read: rgba(255, 255, 255, .95); }
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element { margin: 0 0 var(--cp-gap); padding: clamp(18px, 2.4vw, 36px);
    background: var(--ss-read, var(--cp-panel)); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); }
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child { background: linear-gradient(135deg, rgba(228,0,43,.14), transparent 60%), var(--ss-read, var(--cp-panel)); }
/* Utility-only sections (one short link such as "Go Back to Booking": tagged .ss-utility by
 * shell.js) do not need a full reading card: they become a compact pill. */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element.ss-utility {
    padding: 0; background: transparent; border-color: transparent; box-shadow: none; margin-bottom: var(--cp-gap);
}
.legacy-body .ss-utility .wb-layout-vertical { align-items: center; }
.legacy-body .ss-utility .wb-layout-has-link { align-self: center; width: auto; flex: 0 0 auto; padding: 9px 20px 9px 14px; border-radius: 999px;
    border: 1px solid var(--cp-border-strong); background: var(--ss-read, var(--cp-panel)); box-shadow: var(--cp-shadow); transition: border-color .15s ease, transform .15s ease; }
.legacy-body .ss-utility .wb-layout-has-link:hover { border-color: var(--cp-red-soft); transform: translateY(-1px); }
.legacy-body .ss-utility .wb-layout-has-link > .wb_content { flex-wrap: nowrap; align-items: center; gap: 10px; }
.legacy-body .ss-utility .wb-layout-has-link > .wb_content > .wb_element { flex: 0 0 auto; width: auto; }
.legacy-body .ss-utility [data-plugin="Picture"] svg { width: 22px; height: 22px; color: var(--cp-red-soft); }
.legacy-body .ss-utility [data-plugin="TextArea"] { width: auto; max-width: none; margin: 0; }
.legacy-body .ss-utility p { margin: 0; font-weight: 600; }
.legacy-body [data-plugin="TextArea"] { max-width: 920px; margin-left: auto; margin-right: auto; width: 100%; }
.legacy-body .wb-stl-subtitle, .legacy-body .wb-stl-heading5 { color: var(--cp-ink-soft); }

/* Buttons */
.legacy-body .wb_button, .legacy-body [data-plugin="Button"] a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px;
    border-radius: 11px; background: var(--cp-btn-bg); color: #fff !important; font-weight: 700; text-decoration: none; margin: 6px 0; }
.legacy-body .wb_button:hover, .legacy-body [data-plugin="Button"] a:hover { background: var(--cp-btn-bg-hover); }
.legacy-body [data-plugin="Button"] { display: flex; justify-content: center; }

/* Accordions / tabs (content always visible: no hidden SEO text) */
.legacy-body [data-plugin="Accordion"] ul { list-style: none; padding: 0; }

/* Galleries (hydrated by shell.js from the legacy GalleryLib data) */
.legacy-body [data-plugin="Gallery"] { width: 100%; }
.ss-gallery { position: relative; border-radius: var(--cp-radius); overflow: hidden; background: var(--cp-panel-2); touch-action: pan-y; }
/* Slideshow = absolutely stacked frames with a cross-fade. Deliberately NOT a scroll container:
 * an `overflow-x: auto` track swallows the vertical wheel/touch gesture while the pointer is over
 * the gallery, so the page would not scroll. */
.ss-gallery__track { position: relative; display: block; }
.ss-gallery:not(.ss-gallery--grid) .ss-gallery__track { height: clamp(240px, 42vw, 520px); overflow: hidden; }
.ss-gallery:not(.ss-gallery--grid) .ss-gallery__item { position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease; margin: 0; }
.ss-gallery:not(.ss-gallery--grid) .ss-gallery__item.is-active { opacity: 1; visibility: visible; }
.ss-gallery__item { margin: 0; position: relative; }
.ss-gallery__item img { width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; border-radius: 0; }
.ss-gallery--grid .ss-gallery__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; overflow: visible; }
.ss-gallery--grid .ss-gallery__item img { max-height: 260px; border-radius: var(--cp-radius-sm); }
.ss-gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .9rem; }
.ss-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.3rem; cursor: pointer; }
.ss-gallery__nav--prev { left: 10px; } .ss-gallery__nav--next { right: 10px; }

/* Form wrapper of a legacy form element */
.legacy-body [data-plugin="Form"] { width: 100%; }

/* Native components inside the legacy body */
.legacy-body [data-seo-region="addition"] { width: 100%; margin: 14px 0; }
.ss-card-title { font-family: var(--cp-display); font-size: 1.3rem !important; margin: 0 !important; }
.ss-subhead { font-family: var(--cp-display); font-size: 1.3rem; margin: 18px 0 12px; }
.ss-note { color: var(--cp-ink-soft); text-align: center; margin: 14px 0 0; }
.ss-cadence { margin: 0 auto 16px; display: flex; width: max-content; }
.ss-check { color: var(--cp-badge-green-ink); font-weight: 700; flex: 0 0 18px; }
.legacy-body .ss-offer .mc-price span:first-child { color: var(--cp-ink-soft); }
.ss-offer__quote b { font-size: 1.35rem !important; }
.legacy-body .ss-offer__quote-note { margin: -4px 0 0; color: var(--cp-ink-soft); font-size: .88rem; line-height: 1.5; }
.ss-offers > .ss-rental-offers + .ss-plans { margin-top: calc(var(--cp-gap) * 1.6); padding-top: calc(var(--cp-gap) * 1.2); border-top: 1px solid var(--cp-border); }

/* Rental offer cards: equal heights, price slot of one size, buttons on one line at the bottom. */
.ss-offer-grid { display: grid; gap: var(--cp-gap); grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); align-items: stretch; }
.ss-offer-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--cp-radius);
    background: var(--ss-read, var(--cp-panel)); border: 1px solid var(--cp-border); box-shadow: var(--cp-shadow); }
.legacy-body .ss-offer-card__name { margin: 0; font-family: var(--cp-display); font-size: 1.22rem; line-height: 1.25; }
.ss-offer-card__price { margin: 0; min-height: 2.5em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.ss-offer-card__price b { font-family: var(--cp-display); font-size: 1.75rem; line-height: 1.05; }
.ss-offer-card__price small { color: var(--cp-ink-soft); font-size: .86rem; font-weight: 600; }
.ss-offer-card__price--quote b { font-size: 1.15rem; letter-spacing: .01em; }
.legacy-body .ss-offer-card__desc { margin: 0; flex: 1 1 auto; color: var(--cp-ink-soft); font-size: .92rem; line-height: 1.5; }
/* Offer options (RentalOffer.options): a short check-list; with options the list - not the
 * description - takes the free height, so the description stays next to the price. */
.legacy-body .ss-offer-card__desc:has(+ .ss-offer-card__options) { flex: 0 0 auto; }
.legacy-body .ss-offer-card__options { list-style: none; margin: 0; padding: 0; flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 5px; }
.legacy-body .ss-offer-card__options li { position: relative; margin: 0; padding: 0 0 0 22px;
    color: var(--cp-ink); font-size: .9rem; font-weight: 600; line-height: 1.4; }
.legacy-body .ss-offer-card__options li::before { content: ''; position: absolute; left: 2px; top: .3em;
    width: 11px; height: 6px; border-left: 2px solid var(--cp-red); border-bottom: 2px solid var(--cp-red);
    transform: rotate(-45deg); }
.ss-offer-card__cta { margin-top: 4px; justify-content: center; }
.ss-offers__note { margin: 14px 0 0; padding: 11px 14px; border-radius: var(--cp-radius-sm); border: 1px solid var(--cp-border);
    background: var(--cp-panel-2); color: var(--cp-ink-soft); font-size: .86rem; line-height: 1.55; }
.ss-offers__note strong { color: var(--cp-ink); }

/* Age / safety / waiver banner (addition on the rental page). */
.ss-safety { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 20px; margin: 0 0 var(--cp-gap);
    border-radius: var(--cp-radius); border: 1px solid var(--cp-border); border-left: 4px solid var(--cp-amber, #f5a623);
    background: var(--ss-read, var(--cp-panel)); box-shadow: var(--cp-shadow); }
.ss-safety__badge { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px;
    border-radius: 12px; background: rgba(245, 166, 35, .16); color: var(--cp-amber, #f5a623); font-family: var(--cp-display); font-weight: 800; font-size: 1rem; }
.legacy-body .ss-safety__text { flex: 1 1 420px; margin: 0; font-size: .95rem; line-height: 1.6; }
.ss-safety__text a { font-weight: 600; }
/* FAQ addition (EX-FAQ-01): booking hours + savings, linked from the portal (#booking-hours). */
.ss-faqx { margin-top: 18px; scroll-margin-top: 96px; }
.ss-faqx__list { display: grid; gap: 10px; margin: 12px 0 16px; }
.ss-faqx__item { padding: 12px 16px; border-radius: var(--cp-radius-sm); border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-red, #d7263d); background: var(--ss-read, var(--cp-panel)); }
.ss-faqx__item dt { font-weight: 700; margin: 0 0 4px; }
.ss-faqx__item dd { margin: 0; line-height: 1.6; }
.ss-handoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(18px, 2vw, 28px); border-radius: var(--cp-radius); background: var(--cp-panel-2); border: 1px solid var(--cp-border-strong); }
.ss-handoff__text { flex: 1 1 320px; }
.ss-handoff__text p { margin: 0 0 8px; color: var(--cp-ink-soft); }
.ss-handoff__offers { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; }
.ss-handoff__cta { font-size: 1rem; padding: 13px 26px; }
.ss-products { display: grid; gap: var(--cp-gap); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ss-product { padding: 16px; border-radius: var(--cp-radius-sm); }
.ss-product img { max-height: 160px; object-fit: contain; margin-bottom: 10px; }
.ss-product__price b { font-family: var(--cp-display); font-size: 1.3rem; }
.ss-store__cta { text-align: center; margin: 16px 0 0; }
.ss-passes { padding: 20px; text-align: center; border-radius: var(--cp-radius); }
.ss-passes__balance b { font-family: var(--cp-display); font-size: 1.6rem; }
.ss-map { width: 100%; }
.ss-map__canvas { width: 100%; height: 380px; border-radius: var(--cp-radius); overflow: hidden; background: var(--cp-panel-2); }
.ss-map__frame { display: none; width: 100%; height: 380px; border: 0; border-radius: var(--cp-radius); background: var(--cp-panel-2); }
.ss-map--embed .ss-map__frame { display: block; }
.ss-map__link { display: inline-block; margin-top: 8px; font-size: .9rem; }
/* Key rejected and frames blocked as well: show the address card instead of an empty box. */
.ss-map__fallback { display: none; margin: 0; padding: 14px 16px; border-radius: var(--cp-radius); border: 1px solid var(--cp-border);
    background: var(--cp-panel-2); color: var(--cp-ink-soft); font-size: .92rem; line-height: 1.55; }
.ss-map--failed .ss-map__fallback { display: block; }
.ss-map--failed .ss-map__link { display: inline-flex; align-items: center; margin-top: 10px; padding: 9px 16px; border-radius: 11px;
    background: var(--cp-btn-bg); color: #fff !important; font-weight: 700; text-decoration: none; }
.ss-map--failed .ss-map__link:hover { background: var(--cp-btn-bg-hover); }

/* Shared membership cards (customer_portal/css/membership_cards.css). Only the legacy-body
 * resets live here: the frozen body styles ul/li/h2 globally, so the shared component needs a
 * scoped reset on public pages. */
.legacy-body .mc-head h2 { margin: 0; }
/* The plans heading follows the public H2 style (uppercase) of the other section titles. */
.legacy-body .mc-head .mc-head__title { text-transform: uppercase; }
.legacy-body .mc-head p { margin: 6px 0 0; }
.legacy-body .mc-head .ss-cadence { margin: 0; width: auto; }
.legacy-body .mc-card h2 { margin: 0; font-size: 1.35rem; }
.legacy-body .mc-card__desc { margin: 0; }
.legacy-body .mc-list { padding: 0 !important; margin: 4px 0 0; }
.legacy-body .mc-list li { margin: 0; }
.legacy-body .mc-card .cp-btn { color: #fff; }
.legacy-body .mc-card .cp-btn--ghost { color: var(--cp-ink); }
/* the reading panel is ~100px narrower than the portal workspace: let 4 plans sit on one row */
.legacy-body .mc-cards { grid-template-columns: repeat(auto-fit, minmax(222px, 1fr)); }

@media (max-width: 640px) {
    .legacy-body { padding-left: 12px; padding-right: 12px; }
    .legacy-body > [id^="wb_main"] > .wb_content > .wb_element { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-gallery:not(.ss-gallery--grid) .ss-gallery__item { transition: none; }
}

/* ============================== Hero: legacy "header gallery" pattern ==============================
 * Home carries the gallery in a .wb-layout-bg-element; the 12 content pages put the H1/subtitle in a
 * .wb-layout-absolute block followed by a full-width gallery. Both render as one full-bleed hero:
 * the gallery becomes an animated backdrop and the legacy headings overlay it.
 * Presentation only - no text, tag or attribute of the frozen legacy body is touched.
 */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: clamp(520px, 72vh, 760px);
    max-width: 100vw; width: auto;
    margin-top: calc(-1 * var(--cp-gap));
    margin-inline: calc(50% - 50vw);
    padding: clamp(64px, 9vw, 116px) clamp(20px, 5vw, 64px);
    border: 0; border-radius: 0; box-shadow: none; background: #0b0c10;
}
/* the gallery (and the legacy background-gallery wrapper) fill the hero box */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) :is(.wb-layout-bg-element, [data-plugin="Gallery"]) {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
}
/* frames, shade and the bottom control bar: components/hero_gallery.css (.ss-hg--legacy, built by shell.js) */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]).ss-hg--legacy .wb_content.wb-layout-absolute { padding-bottom: clamp(120px, 14vh, 150px); }

/* home: the background gallery sits in the same horizontal layout as the headings */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_content.wb-layout-horizontal:has(.wb-layout-bg-element) {
    flex-direction: column; align-items: center; width: 100%; gap: 0; text-align: center;
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_content.wb-layout-horizontal:has(.wb-layout-bg-element) > .wb_element {
    flex: 0 1 auto; width: 100%;
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb-layout-bg-element ~ .wb_content {
    position: relative; z-index: 2; align-items: center; text-align: center;
}
/* content pages: the legacy absolute text block becomes the hero overlay */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_content.wb-layout-absolute {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 0; padding: clamp(24px, 6vw, 72px);
}
/* the gallery of these pages lives inside the text block: lift the text above it */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_content.wb-layout-absolute > .wb_element:not([data-plugin="Gallery"]) {
    position: relative; z-index: 2; width: 100%;
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_content.wb-layout-absolute .wb-layout-vertical { align-items: center; }

/* hero typography - the hero is always a dark photo, so its text stays light in every theme */
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_text_element :is(p, span, li, strong, em) {
    color: rgba(255, 255, 255, .86);
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) :is(h1, h2, h3, h4, h5, h6) {
    color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, .62);
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) h1 {
    font-family: var(--cp-font); font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 900; letter-spacing: -.045em;
    margin: .14em 0 .22em; line-height: 1.06; text-shadow: 0 3px 45px rgba(0, 0, 0, .4);
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) h3 {
    font-family: var(--cp-font); font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; margin: 0 0 .9em; font-weight: 700;
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) :is(h5, .wb-stl-subtitle) {
    font-family: var(--cp-font); color: #f1f1f4; font-weight: 500; font-size: clamp(.95rem, 1.6vw, 1.2rem); line-height: 1.65; margin: .4em 0 .5em;
}
.legacy-body > [id^="wb_main"] > .wb_content > .wb_element:first-child:has([data-plugin="Gallery"]) .wb_button {
    margin-top: 22px; min-height: 52px; padding: 15px 26px; border-radius: 8px; box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

/* legacy social-share rows: they carry no href, two of the three icons use fonts the shell does not
 * load, and the footer already offers the real social links. Hidden everywhere (owner, 2026-10-26). */
.legacy-body [data-plugin="BookmarksShare"] { display: none; }

/* legacy entry animations (data-wb-anim-entry-* on the frozen markup), enabled by .ss-hero-anim */
@keyframes ss-hero-up    { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes ss-hero-left  { from { opacity: 0; transform: translate3d(-56px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ss-hero-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-hero-zoom  { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ss-hero-anim .wb-anim-entry {
    animation-duration: var(--ss-t, .6s); animation-delay: var(--ss-d, 0s); animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.19, 1, .22, 1);
}
.ss-hero-anim .wb-anim-fade-in-bottom { animation-name: ss-hero-up; }
.ss-hero-anim .wb-anim-slide-in-left { animation-name: ss-hero-left; }
.ss-hero-anim .wb-anim-zoom-in { animation-name: ss-hero-zoom; }
.ss-hero-anim .wb-anim-fade-in-none { animation-name: ss-hero-fade; }

/* ============================== Scroll reveal ==============================
 * .ss-reveal is added by shell.js only, so with JavaScript off nothing is hidden.
 */
.ss-reveal .ss-reveal-item { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.ss-reveal .ss-reveal-item.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ss-hero-anim .wb-anim-entry { animation: none !important; }
    .ss-reveal .ss-reveal-item { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ===================== Legacy article prev/next navigation =====================
 * Rows such as [< Home] [Next >] that the Website Builder rendered as two oversized circles.
 * shell.js tags the row .ss-pagenav (each control has a short label + exactly one arrow picture),
 * so content rows that merely contain a link card are never touched.
 */
.legacy-body .ss-pagenav { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 14px; }
.legacy-body .ss-pagenav > .wb_element { flex: 0 0 auto; max-width: 48%; min-width: 0;
    border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); background: var(--cp-panel-2);
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.legacy-body .ss-pagenav > .wb_element.wb-layout-has-link:hover {
    border-color: var(--cp-red-soft); background: var(--cp-panel-strong); transform: translateY(-2px); box-shadow: var(--cp-shadow); }
.legacy-body .ss-pagenav > .wb_element.wb-layout-has-link:focus-within { outline: 2px solid var(--cp-red-soft); outline-offset: 2px; }
.legacy-body .ss-pagenav > .wb_element > .wb_content.wb-layout-horizontal { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 12px 18px; }
.legacy-body .ss-pagenav > .wb_element > .wb_content.wb-layout-horizontal > .wb_element { flex: 0 0 auto; }
.legacy-body .ss-pagenav .wb_element.wb_text_element { max-width: none; width: auto; margin: 0; }
.legacy-body .ss-pagenav .wb_element.wb_text_element p { margin: 0; }
.legacy-body .ss-pagenav .wb_element.wb_text_element,
.legacy-body .ss-pagenav .wb_element.wb_text_element :is(span, b, font) {
    color: var(--cp-ink); font-weight: 600; font-size: .95rem; letter-spacing: .02em; line-height: 1.2; }
.legacy-body .ss-pagenav .wb_element.wb_element_picture { flex: 0 0 auto; display: flex; align-items: center; color: var(--cp-red-soft); }
.legacy-body .ss-pagenav .wb_element.wb_element_picture svg { width: 16px; height: 16px; display: block; fill: currentColor; }
@media (max-width: 640px) { .legacy-body .ss-pagenav { gap: 10px; } .legacy-body .ss-pagenav > .wb_element > .wb_content.wb-layout-horizontal { padding: 10px 14px; gap: 8px; } }

/* ===================== Legacy icon link list (wrench rows) =====================
 * shell.js tags the vertical stack .ss-linklist. Icons are halved (40px -> 20px), each title sits
 * next to its icon, and the list keeps the same 920px measure as the surrounding text blocks.
 */
.legacy-body .ss-linklist { width: 100%; max-width: 920px; margin-left: auto; margin-right: auto; gap: 2px; }
.legacy-body .ss-linklist > .wb_element { flex: 0 0 auto; }
.legacy-body .ss-linklist > .wb_element > .wb_content.wb-layout-horizontal {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px; padding: 7px 0; }
.legacy-body .ss-linklist > .wb_element > .wb_content.wb-layout-horizontal > .wb_element { flex: 0 0 auto; }
.legacy-body .ss-linklist .wb_element.wb_text_element { max-width: none; width: auto; margin: 0; text-align: left; }
.legacy-body .ss-linklist .wb_element.wb_text_element p { margin: 0; }
.legacy-body .ss-linklist h3, .legacy-body .ss-linklist .wb-stl-heading3 { margin: 0; font-size: clamp(1rem, 1.3vw, 1.1rem); }
.legacy-body .ss-linklist [data-plugin="Picture"] { display: flex; align-items: center; width: 20px; color: var(--cp-red-soft); }
.legacy-body .ss-linklist [data-plugin="Picture"] svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.legacy-body .ss-linklist > .wb_element:hover h3 { color: var(--cp-red-soft); }

/* ===================== Google rating badge =====================
 * Only the rating content is compact: the panel keeps the standard section width and the heading
 * keeps the standard H2 style of every other section on the page.
 */
.legacy-body .ss-rating > .wb_content.wb-layout-vertical { gap: 10px; }
.legacy-body .ss-rating > .wb_content.wb-layout-vertical > .wb_element { flex: 0 0 auto; max-width: 100%; }
.legacy-body .ss-rating h2 { text-transform: uppercase; }
.legacy-body .ss-rating .wb_element:has(> .wb_content.wb-layout-horizontal) { text-align: center; }
.legacy-body .ss-rating .wb_content.wb-layout-horizontal { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.legacy-body .ss-rating .wb_content.wb-layout-horizontal > .wb_element { flex: 0 0 auto; }
.legacy-body .ss-rating .wb_content.wb-layout-horizontal .wb_element.wb_text_element { max-width: none; width: auto; margin: 0; }
.legacy-body .ss-rating .wb_element.wb_text_element p { margin: 0; }
.legacy-body .ss-rating .wb_content.wb-layout-horizontal:has([data-plugin="Picture"]) .wb-stl-custom16 {
    font-size: 1.15rem; font-weight: 700; color: var(--cp-ink); margin-right: 2px; }
.legacy-body .ss-rating [data-plugin="Picture"] { display: flex; align-items: center; color: #f5b301; }
.legacy-body .ss-rating [data-plugin="Picture"] svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.legacy-body .ss-rating .wb_element.wb_text_element a { font-size: .88rem; color: var(--cp-ink-soft); }
.legacy-body .ss-rating .wb_element.wb_text_element a:hover { color: var(--cp-red-soft); }


/* EX-RENTAL-01: consolidated discount line under the first DIY AUTO CLUB title */
.legacy-body .ss-club-savings { margin: 6px 0 0; color: var(--cp-ink-soft); font-size: .98rem; line-height: 1.65; }
.legacy-body .ss-club-intro { margin: 10px 0 4px; }
.ss-club-cta { margin: 14px 0 0; }

/* EX-RENTAL-01: activation call-out closing the HOW IT WORKS section */
.legacy-body .ss-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px 22px; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
    border: 1px solid var(--cp-border); border-left: 3px solid var(--cp-red);
    border-radius: var(--cp-radius-sm); background: var(--cp-panel-2); }
.legacy-body .ss-notice__text { flex: 1 1 420px; margin: 0; font-size: .95rem; line-height: 1.55; color: var(--cp-ink); }
.legacy-body .ss-notice__lead { color: var(--cp-red-soft); letter-spacing: .06em; margin-right: 6px; }
.legacy-body .ss-notice__cta { flex: 0 0 auto; color: #fff; }

/* =========================================================================
   Owner review 2026-10-27 (website_pages_links_review) - shared presentation
   ========================================================================= */

/* F-10 / F-35: a quiet internal text link. Used for "Manage your membership in the portal" so the
 * link reads as part of the copy instead of competing with the plan buttons. */
.ss-textlink {
    display: inline-flex; align-items: center; gap: 6px; color: var(--cp-ink-soft);
    font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent;
    padding-bottom: 2px; transition: color .15s ease, border-color .15s ease;
}
.ss-textlink::after { content: "\203a"; transition: transform .15s ease; }
.ss-textlink:hover, .ss-textlink:focus-visible { color: var(--cp-ink); border-bottom-color: var(--cp-red-soft); }
.ss-textlink:hover::after, .ss-textlink:focus-visible::after { transform: translateX(3px); }

/* F-12 / F-32 / F-51: every legacy text block starts on the panel's content edge (the old rule
 * centred a 920px column, which left headings 83px to the right of the component sections). */
.legacy-body [data-plugin="TextArea"] { max-width: none; margin-left: 0; margin-right: 0; }
/* Long-form paragraphs keep a readable measure without moving their left edge. */
.legacy-body [data-plugin="TextArea"] > p { max-width: 84ch; }
/* F-11 / F-33 / F-49: legacy H2s read the same way as the component H2s (presentational only). */
.legacy-body [data-plugin="TextArea"] h2 { text-transform: uppercase; }

/* F-06: the "#rental" target must not hide under the sticky header. */
.legacy-body [id="rental"] { display: block; height: 0; scroll-margin-top: calc(var(--ss-header-h) + 14px); }

/* F-34: the club pass banner at half size (the wrapper keeps the full panel width). */
body[data-page="membership"] #a18f14370807005581f4496c5c885bdb img {
    display: block; max-width: 50%; height: auto; margin: 0 auto;
}

/* F-27: /car-pre-purchase-inspection/ - the legacy two-column article becomes one readable column
 * with the portrait of the article on the right and the signature at the end. */
body[data-page="inspection"] #a195540706c904fa5e749337d6e92967,
body[data-page="inspection"] #a195540706cc0be27628f78d2a40ad5e { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; }
body[data-page="inspection"] .wb_content.wb-layout-horizontal:has(> #a195540706c904fa5e749337d6e92967) { flex-wrap: wrap; }
body[data-page="inspection"] .ss-signature {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--cp-border); text-align: right;
}
body[data-page="inspection"] #a195540706c9068f1a51d0f47ecd0453 img {
    float: right; width: min(44%, 380px); height: auto; margin: 6px 0 18px 26px;
}
@media (max-width: 720px) {
    body[data-page="inspection"] #a195540706c9068f1a51d0f47ecd0453 img { float: none; width: 100%; margin: 0 0 16px; }
}

/* F-47 / F-48: /diy-auto-news/ - one closed card per announcement (picture column + reading
 * column), with real air between announcements. The legacy markup keeps a 520 px gallery box and
 * half-width columns, so the images were halved inside their old containers and the cards stayed
 * huge and half empty. `:has()` cannot be nested, so the card is matched by its gallery depth. */
body[data-page="news"] main .wb_content.wb-layout-horizontal:has(> .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Gallery"],
        > .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Picture"]) {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start;
    gap: clamp(18px, 2.2vw, 30px); padding: clamp(16px, 1.6vw, 24px);
    background: var(--ss-read, var(--cp-panel)); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius); box-shadow: var(--cp-shadow);
    margin: 0 0 clamp(20px, 2.6vw, 32px);
}
body[data-page="news"] main .wb_content.wb-layout-horizontal:has(> .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Gallery"],
        > .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Picture"]) > .wb_element { min-width: 0; }
body[data-page="news"] main .wb_content.wb-layout-horizontal:has(> .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Gallery"],
        > .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Picture"]) > .wb_element:has(.wb_gallery) > .wb_content { gap: 0; }
body[data-page="news"] main .wb_element_picture img { max-width: 100%; height: auto; }
body[data-page="news"] main .wb_gallery,
body[data-page="news"] main .wb_gallery .ss-gallery,
body[data-page="news"] main .wb_gallery .ss-gallery__track { height: auto; width: 100%; }
body[data-page="news"] main .wb_gallery .ss-gallery__item { position: absolute; inset: 0; }
body[data-page="news"] main .wb_gallery .ss-gallery__item.is-active { position: relative; inset: auto; }
body[data-page="news"] main .wb_gallery .ss-gallery__item img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; max-width: 100%;
}
body[data-page="news"] main .wb_gallery .ss-gallery:has(.ss-gallery__track > .ss-gallery__item:only-child) .ss-gallery__nav { display: none; }
/* Orphan icon badges left behind by the retired social links (D-R6): no link, no caption. */
body[data-page="news"] main #a18f192140a500e48339f841cde9d385 { display: none; }
@media (max-width: 860px) {
    body[data-page="news"] main .wb_content.wb-layout-horizontal:has(> .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Gallery"],
            > .wb_element > .wb_content > .wb_element > .wb_content > [data-plugin="Picture"]) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* F-50: the owner portrait sits above the About bio, capped at a portrait width. */
.ss-owner { margin: 0 0 20px; max-width: 320px; }
.ss-owner img {
    display: block; width: 100%; height: auto; border-radius: var(--cp-radius-sm);
    border: 1px solid var(--cp-border); box-shadow: var(--cp-shadow);
}
.ss-owner figcaption { margin-top: 8px; font-size: .82rem; color: var(--cp-ink-faint); }
body[data-page="about"] #a189b93fbe3002e4fdefbe2c6de42bd3 {
    width: 100% !important; max-width: none !important; flex: 1 1 100% !important;
}
body[data-page="about"] .wb_content.wb-layout-horizontal:has(> #a189b93fbe3002e4fdefbe2c6de42bd3) {
    flex-wrap: wrap;
}

/* F-44: public /store/ landing (guests reach it from the Store menu item). */
.ss-storeland {
    max-width: 760px; margin: 0 auto; padding: clamp(26px, 4vw, 52px) clamp(20px, 3vw, 40px);
    background: var(--ss-read, var(--cp-panel)); border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius); box-shadow: var(--cp-shadow);
}
.ss-storeland__eyebrow { margin: 0 0 6px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-red-soft); font-weight: 700; }
.ss-storeland__title { margin: 0 0 14px; font-size: clamp(1.6rem, 3vw, 2.3rem); text-transform: uppercase; }
.ss-storeland__lead { color: var(--cp-ink-soft); font-size: 1.02rem; line-height: 1.7; margin: 0 0 20px; }
.ss-storeland__list { margin: 0 0 24px; padding-left: 1.1em; color: var(--cp-ink-soft); line-height: 1.7; }
.ss-storeland__list strong { color: var(--cp-ink); }
.ss-storeland__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 0 0 18px; }
.ss-storeland__note { margin: 0; font-size: .88rem; color: var(--cp-ink-faint); }
.ss-storeland__note a { color: var(--cp-blue); }

/* F-23: backend-computed tools-page headline. */
.legacy-body .ss-toolsad {
    margin: 0; display: flex; flex-direction: column; gap: 4px; text-align: center;
}
.ss-toolsad__label { font-size: .8rem; letter-spacing: .16em; font-weight: 700; color: var(--cp-ink-faint); }
.ss-toolsad__price { font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--cp-ink); }
.ss-toolsad__price small { font-size: .5em; font-weight: 700; color: var(--cp-ink-soft); }
.ss-toolsad__bonus { font-weight: 700; color: var(--cp-red-soft); font-size: .95rem; }
.ss-toolsad__plan { font-size: .9rem; color: var(--cp-ink-soft); }
.ss-toolsad__plan strong { color: var(--cp-ink); }

/* F-29 / F-31: /service-pricing/ backend price list. */
.legacy-body .ss-prices { margin: 0; }
.legacy-body .ss-prices__wrap { overflow-x: auto; margin: 0 0 12px; }
.legacy-body .ss-prices__table { width: 100%; border-collapse: collapse; display: table; font-size: .92rem; }
.legacy-body .ss-prices__table caption { caption-side: top; text-align: left; color: var(--cp-ink-faint);
    font-size: .84rem; padding: 0 0 10px; }
.legacy-body .ss-prices__table th, .legacy-body .ss-prices__table td {
    padding: 11px 12px; border-bottom: 1px solid var(--cp-border); text-align: right; white-space: nowrap;
}
.legacy-body .ss-prices__table thead th {
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-ink-soft);
    border-bottom: 2px solid var(--cp-border-strong);
}
.legacy-body .ss-prices__table thead th small { display: block; font-size: .72rem; letter-spacing: 0;
    text-transform: none; color: var(--cp-ink-faint); font-weight: 500; }
.legacy-body .ss-prices__table thead th.is-base { color: var(--cp-ink); }
.legacy-body .ss-prices__table tbody th { text-align: left; font-weight: 600; color: var(--cp-ink); }
.legacy-body .ss-prices__table tbody tr:hover { background: var(--cp-panel-2); }
.ss-prices__amount { font-weight: 700; }
.ss-prices__save { display: block; font-size: .74rem; color: var(--cp-badge-green-ink); font-weight: 600; }
.ss-prices__quote { color: var(--cp-ink-faint); font-size: .84rem; }
.ss-prices__caption { display: none; }
.legacy-body .ss-prices__note { margin: 8px 0 0; font-size: .82rem; color: var(--cp-ink-faint); }

/* F-46 (D-R4): /how-to-save-on-car-maintenance/ - "Three ways to save big" becomes a full-width
 * article: the legacy two-column row (text + signature) is unwrapped, pictures float alternately so
 * the copy wraps around them, and the signature closes the article. */
body[data-page="popular-jobs"] #a18b5500647402edb4c2c37964d60803,
body[data-page="popular-jobs"] #a18b591278d8008446923ef7c6d419cf {
    width: 100% !important; max-width: none !important; flex: 1 1 100% !important;
}
body[data-page="popular-jobs"] .wb_content.wb-layout-horizontal:has(> #a18b5500647402edb4c2c37964d60803) {
    flex-wrap: wrap;
}
body[data-page="popular-jobs"] #a18b5500647402edb4c2c37964d60803 > .wb_content { display: block; }
body[data-page="popular-jobs"] #a18b5500647402edb4c2c37964d60803 [data-plugin="Picture"] {
    width: min(42%, 380px); float: right; margin: 6px 0 18px 26px;
}
body[data-page="popular-jobs"] #a18b5500647402edb4c2c37964d60803 [data-plugin="Picture"]:nth-of-type(even) {
    float: left; margin: 6px 26px 18px 0;
}
body[data-page="popular-jobs"] #a18b591278d8008446923ef7c6d419cf {
    margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--cp-border); text-align: right;
}
@media (max-width: 720px) {
    body[data-page="popular-jobs"] #a18b5500647402edb4c2c37964d60803 [data-plugin="Picture"] {
        float: none; width: 100%; margin: 0 0 16px;
    }
}

/* ---------------------------------------------------------------------------------------------
 * Blog / article pages (owner request 2026-11-06, EX-BLOG-01). Three rules, all presentation only:
 *   1. article paragraphs fill their panel from edge to edge (the 84ch reading cap of
 *      `[data-plugin="TextArea"] > p` is lifted for these pages only);
 *   2. a picture row is a real two-column split - the image takes the height of the copy beside it
 *      instead of sitting small in an empty 300px-wide gutter;
 *   3. the two pricing/booking buttons of the FAQ and of the maintenance article read as one pair
 *      (same width).
 * Add an alias to the selector lists to extend the pass to another article page.
 * ------------------------------------------------------------------------------------------- */
body[data-page="faq"] main [data-plugin="TextArea"] > p,
body[data-page="how-to-rent"] main [data-plugin="TextArea"] > p,
body[data-page="popular-jobs"] main [data-plugin="TextArea"] > p { max-width: none; }

body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) {
    flex: 0 0 clamp(230px, 34%, 380px);
}
body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) > .wb_content,
body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) :is([data-plugin="Picture"], .wb_picture_wrap, .wb-picture-wrapper) {
    width: 100%; max-width: 100%; height: 100%; float: none; margin: 0;
}
body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) img {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--cp-radius-sm);
}
@media (max-width: 860px) {
    body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) {
        flex: 1 1 100%;
    }
    body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) > .wb_content,
    body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) :is([data-plugin="Picture"], .wb_picture_wrap, .wb-picture-wrapper) {
        height: auto;
    }
    body[data-page="popular-jobs"] main .wb_content.wb-layout-horizontal > .wb_element:has(> .wb_content > [data-plugin="Picture"] img) img {
        height: auto; max-height: 320px;
    }
}

body[data-page="faq"] :is(#a18b54de8ebc072d8e4c805f69bfc6c7, #a18b54de8ebf036c0d31f61b3a33baa3) > .wb_button,
body[data-page="popular-jobs"] :is(#a18b55006473002d6b2c591438dfd76e, #a18b55006475021fb660edaf0a19e76c) > .wb_button {
    width: 250px; max-width: 100%;
}

/* The "full price list" target must not hide under the sticky header (EX-BLOG-01 link target). */
.legacy-body [id="full-price-list"] { scroll-margin-top: calc(var(--ss-header-h, 76px) + 16px); }