/* Kindly Edit elements: the base look of the plugin's own elements (blocks/300-*.html onward), for visitors and in the
   editor. Colours, type and corners come from the theme's tokens (--cb-*), so every site keeps its own design; a theme
   can restyle any of these classes from its stylesheet. :where() keeps every rule at zero specificity, so a theme's
   plain class rule, the Style tab's settings and an element's Advanced CSS always win. */

:where(.cb-spacer) { display: block; height: 48px; }
:where(.cb-icon-el) { margin: 0; line-height: 0; color: var(--cb-accent, currentColor); }
:where(.cb-icon-el svg) { width: 48px; height: 48px; }
:where(.cb-icon-el a) { display: inline-block; color: inherit; }

:where(.cb-image-box) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:where(.cb-image-box-media) { margin: 0; }
:where(.cb-image-box-media img) { display: block; width: 100%; height: auto; border-radius: var(--cb-radius, 0); }
:where(.cb-image-box-body > :first-child) { margin-top: 0; }
:where(.cb-image-box-body > :last-child) { margin-bottom: 0; }
/* a Feature box's picture beside its words (Picture position, the same classes as an icon's), stacked on phones */
:where(.cb-image-box.cb-icon-left, .cb-image-box.cb-icon-right) { flex-direction: row; align-items: flex-start; gap: 24px; }
:where(.cb-image-box.cb-icon-right) { flex-direction: row-reverse; }
:where(.cb-image-box.cb-icon-left, .cb-image-box.cb-icon-right) > :where(.cb-image-box-media) { flex: 0 0 40%; max-width: 320px; }
:where(.cb-image-box.cb-icon-left, .cb-image-box.cb-icon-right) > :where(.cb-image-box-body) { flex: 1 1 0; min-width: 0; }
:where(.cb-image-box.cb-center) { align-items: center; text-align: center; }
@media (max-width: 600px) {
	:where(.cb-image-box.cb-icon-left, .cb-image-box.cb-icon-right) { flex-direction: column; align-items: stretch; }
	:where(.cb-image-box.cb-icon-left, .cb-image-box.cb-icon-right) > :where(.cb-image-box-media) { flex-basis: auto; max-width: none; }
}

:where(.cb-icon-box) { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:where(.cb-icon-box-icon) { margin: 0; line-height: 0; color: var(--cb-accent, currentColor); }
:where(.cb-icon-box-icon svg) { width: 40px; height: 40px; }
:where(.cb-icon-box-body > :first-child) { margin-top: 0; }
:where(.cb-icon-box-body > :last-child) { margin-bottom: 0; }
:where(.cb-icon-box.cb-icon-left, .cb-icon-box.cb-icon-right) { flex-direction: row; align-items: flex-start; }
:where(.cb-icon-box.cb-icon-right) { flex-direction: row-reverse; }
:where(.cb-icon-box.cb-center) { align-items: center; text-align: center; }

:where(.cb-icon-list) { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
:where(.cb-icon-list > li) { display: flex; align-items: flex-start; gap: 10px; }
:where(.cb-icon-list > li > svg, .cb-icon-list > li > a > svg) { flex: none; width: 20px; height: 20px; margin-top: .15em; color: var(--cb-accent, currentColor); }
:where(.cb-icon-list > li > a) { display: inline-flex; align-items: flex-start; gap: 10px; color: inherit; }
:where(.cb-icon-list.cb-inline) { display: flex; flex-wrap: wrap; gap: 8px 24px; }

:where(.cb-counter) { text-align: center; }
:where(.cb-counter-number) { margin: 0; font-family: var(--cb-display, inherit); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.1; color: var(--cb-heading, inherit); font-variant-numeric: tabular-nums; }
:where(.cb-counter-title) { margin: .25em 0 0; color: var(--cb-muted, inherit); }

:where(.cb-progress) { margin: 0 0 1.25em; }
:where(.cb-progress-title) { margin: 0 0 6px; font-weight: 600; color: var(--cb-heading, inherit); }
:where(.cb-progress-track) { position: relative; height: 22px; background: var(--cb-tint, #eef0f3); overflow: hidden; border-radius: var(--cb-radius, 0); }
:where(.cb-progress-fill) { display: flex; align-items: center; justify-content: flex-end; height: 100%; width: var(--cb-percent, 50%); min-width: 2.75em; max-width: 100%; background: var(--cb-accent, #333); color: var(--cb-on-accent, #fff); border-radius: inherit; }
:where(.cb-progress-value) { padding: 0 8px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }

:where(.cb-testimonial) { margin: 0; }
:where(.cb-testimonial blockquote) { margin: 0 0 16px; font-size: 1.125em; }
:where(.cb-testimonial blockquote > :last-child) { margin-bottom: 0; }
:where(.cb-testimonial figcaption) { display: flex; align-items: center; gap: 12px; }
:where(.cb-testimonial figcaption img) { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; flex: none; }
:where(.cb-testimonial figcaption > span) { display: flex; flex-direction: column; }
:where(.cb-testimonial-name) { color: var(--cb-heading, inherit); }
:where(.cb-testimonial-role) { color: var(--cb-muted, inherit); font-size: .9375em; }

:where(.cb-social) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
:where(.cb-social a) { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--cb-on-accent, #fff); background: var(--cb-accent, #333); border-radius: 50%; }
:where(.cb-social a svg) { width: 20px; height: 20px; }
:where(.cb-social a:hover) { background: var(--cb-dark, #111); }
:where(.cb-social.cb-plain a) { background: none; color: var(--cb-accent, currentColor); }

:where(.cb-alert) { position: relative; margin: 0 0 1.25em; padding: 16px 20px; background: var(--cb-tint, #f3f4f6); border-inline-start: 4px solid var(--cb-accent, #555); }
:where(.cb-alert > :first-child) { margin-top: 0; }
:where(.cb-alert > :last-child) { margin-bottom: 0; }
:where(.cb-alert-title) { font-weight: 700; color: var(--cb-heading, inherit); }
:where(.cb-alert.cb-alert-success) { border-inline-start-color: #1f7a4d; background: #eef8f2; }
:where(.cb-alert.cb-alert-warning) { border-inline-start-color: #a15c00; background: #fff6e5; }
:where(.cb-alert.cb-alert-danger) { border-inline-start-color: #b42318; background: #fdf0ee; }
:where(.cb-callout[data-cb-dismiss]) { position: relative; } /* a Notice in the note tone can be closed too */
:where(.cb-alert-dismiss) { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }

:where(.cb-rating) { margin: 0; line-height: 1; }
:where(.cb-rating-stars) { font-size: 1.5rem; letter-spacing: 2px; background: linear-gradient(90deg, var(--cb-accent-2, #e0a800) calc(var(--cb-rating, 5) / var(--cb-scale, 5) * 100%), var(--cb-line, #d0d4da) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }

:where(.cb-carousel) { position: relative; }
:where(.cb-carousel-track) { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { :where(.cb-carousel-track) { scroll-behavior: auto; } }
:where(.cb-carousel-track > *) { flex: 0 0 var(--cb-slide, 100%); scroll-snap-align: start; margin: 0; min-width: 0; } /* anything added to the track is a slide */
:where(.cb-slide img) { display: block; width: 100%; height: auto; }
:where(.cb-slide figcaption) { margin-top: 8px; color: var(--cb-muted, inherit); }
:where(.cb-carousel.cb-show-2) { --cb-slide: calc(50% - 8px); }
:where(.cb-carousel.cb-show-3) { --cb-slide: calc(33.333% - 11px); }
@media (max-width: 767px) { :where(.cb-carousel.cb-show-2, .cb-carousel.cb-show-3) { --cb-slide: 85%; } }
:where(.cb-carousel-nav) { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
:where(.cb-carousel-nav button) { min-width: 40px; height: 40px; border: 0; background: var(--cb-tint, #eee); color: var(--cb-heading, #111); cursor: pointer; }
:where(.cb-carousel-nav button:focus-visible) { outline: 2px solid var(--cb-accent, #333); outline-offset: 2px; }
:where(.cb-carousel-nav [aria-current="true"]) { background: var(--cb-accent, #333); color: var(--cb-on-accent, #fff); }

:where(.cb-video) { position: relative; margin: 0; }
:where(.cb-video > .cb-video-play, .cb-video > iframe) { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; border: 0; }
:where(.cb-video > .cb-video-play) { background: var(--cb-dark, #111) center / cover no-repeat; color: #fff; cursor: pointer; }
:where(.cb-video > .cb-video-play svg) { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: rgba(0, 0, 0, .55); fill: currentColor; }
:where(.cb-video > .cb-video-play:focus-visible) { outline: 3px solid var(--cb-accent, #fff); outline-offset: 2px; }
:where(.cb-video figcaption) { margin-top: 8px; color: var(--cb-muted, inherit); }

:where(.cb-map) { margin: 0; }
:where(.cb-map > iframe, .cb-map-address) { display: block; width: 100%; height: 360px; border: 0; }
:where(.cb-map-address) { display: grid; place-items: center; margin: 0; padding: 16px; background: var(--cb-tint, #eef0f3); color: var(--cb-muted, inherit); text-align: center; }
:where(.cb-map-load) { cursor: pointer; }

:where(.cb-anchor) { display: block; height: 0; overflow: hidden; scroll-margin-top: var(--cb-anchor-offset, 0px); }

:where(.cb-price-list) { list-style: none; margin: 0 0 1.25em; padding: 0; display: grid; gap: 16px; }
:where(.cb-price-line) { display: flex; align-items: baseline; gap: 8px; margin: 0; }
:where(.cb-price-item) { color: var(--cb-heading, inherit); }
:where(.cb-price-leader) { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--cb-line, #ccc); }
:where(.cb-price-amount) { font-weight: 700; color: var(--cb-heading, inherit); white-space: nowrap; }
:where(.cb-price-note) { margin: 4px 0 0; color: var(--cb-muted, inherit); }

:where(.cb-price-table) { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: var(--cb-surface, #fff); text-align: center; box-shadow: 0 0 0 1px var(--cb-line, #e5e7eb); }
:where(.cb-price-table.cb-featured) { box-shadow: 0 0 0 2px var(--cb-accent, #333); }
:where(.cb-price-table-title) { margin: 0; }
:where(.cb-price-table-price) { margin: 0; display: flex; flex-direction: column; }
:where(.cb-price-table-amount) { font-family: var(--cb-display, inherit); font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: var(--cb-heading, inherit); }
:where(.cb-price-table-period) { color: var(--cb-muted, inherit); }
:where(.cb-price-table .cb-icon-list) { text-align: start; margin: 8px 0; }
:where(.cb-price-table .cb-actions) { margin: auto 0 0; }

:where(.cb-flip) { position: relative; min-height: 260px; perspective: 1000px; }
:where(.cb-flip-front, .cb-flip-back) { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px; backface-visibility: hidden; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
:where(.cb-flip-front) { background: var(--cb-tint, #eef0f3); color: var(--cb-ink, inherit); }
:where(.cb-flip-back) { background: var(--cb-dark, #222); color: var(--cb-on-dark, #fff); transform: rotateY(180deg); }
:where(.cb-flip-back) :is(h2, h3, h4) { color: inherit; }
:where(.cb-flip:hover, .cb-flip:focus-within) .cb-flip-front { transform: rotateY(-180deg); }
:where(.cb-flip:hover, .cb-flip:focus-within) .cb-flip-back { transform: rotateY(0); }
@media (prefers-reduced-motion: reduce) { :where(.cb-flip-front, .cb-flip-back) { transition: none; } }

:where(.cb-countdown) { display: flex; flex-wrap: wrap; gap: 12px; }
:where(.cb-countdown-part) { display: flex; flex-direction: column; align-items: center; min-width: 76px; margin: 0; padding: 12px; background: var(--cb-tint, #eef0f3); }
:where(.cb-countdown-part > span) { font-family: var(--cb-display, inherit); font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--cb-heading, inherit); font-variant-numeric: tabular-nums; }
:where(.cb-countdown-part > small) { color: var(--cb-muted, inherit); }
:where(.cb-countdown-done) { margin: 0; font-weight: 600; }

:where(.cb-headline-word) { color: var(--cb-accent, inherit); }
:where(.cb-headline-word.is-changing) { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) { :where(.cb-headline-word.is-changing) { opacity: 1; transition: none; } }

:where(.cb-toc) { margin: 0 0 1.5em; padding: 16px 20px; background: var(--cb-tint, #f3f4f6); }
:where(.cb-toc-title) { margin: 0 0 8px; font-weight: 700; color: var(--cb-heading, inherit); }
:where(.cb-toc-list) { margin: 0; padding-inline-start: 1.25em; }
:where(.cb-toc-list ol) { padding-inline-start: 1.25em; }
:where(.cb-toc-list a) { color: inherit; }

:where(.cb-share) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
:where(.cb-share a) { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--cb-tint, #eef0f3); color: var(--cb-heading, inherit); text-decoration: none; }
:where(.cb-share a svg) { width: 18px; height: 18px; }
:where(.cb-share a:hover) { background: var(--cb-accent, #333); color: var(--cb-on-accent, #fff); }

:where(.cb-hotspot) { position: relative; }
:where(.cb-hotspot > img) { display: block; width: 100%; height: auto; }
:where(.cb-hotspot-point) { position: absolute; transform: translate(-50%, -50%); }
:where(.cb-hotspot-point > summary) { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cb-accent, #333); color: var(--cb-on-accent, #fff); font-weight: 700; list-style: none; cursor: pointer; box-shadow: 0 0 8px 3px rgba(255, 255, 255, .75); }
:where(.cb-hotspot-point > summary::-webkit-details-marker) { display: none; }
:where(.cb-hotspot-point > :not(summary)) { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; margin: 0; padding: 10px 12px; background: var(--cb-surface, #fff); color: var(--cb-ink, inherit); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); z-index: 2; }

:where(.cb-code) { margin: 0 0 1.25em; padding: 16px 18px; overflow-x: auto; background: var(--cb-dark, #1e1e24); color: var(--cb-on-dark, #f3f3f6); font: .9375rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; white-space: pre; }
:where(.cb-code code) { font: inherit; background: none; color: inherit; padding: 0; }

:where(.cb-text-path) { margin: 0 auto; max-width: 420px; }
:where(.cb-text-path svg) { display: block; width: 100%; height: auto; overflow: visible; }
:where(.cb-text-path text) { font-family: var(--cb-display, inherit); font-size: 22px; fill: var(--cb-heading, currentColor); }

/* Off-canvas panel. It becomes visible at once when it opens (so focus can go into it) and stays visible until its
   exit has played. Side: right (default), cb-left, cb-top, cb-bottom; cb-tall: full height from the top or bottom;
   --cb-offcanvas-width for the sides. Animation: slide (default), cb-fade, cb-still. Overlay: data-cb-overlay. Without
   the script, a link to the panel's #id still shows it (:target); with it, only an open panel shows. */
:where(.cb-offcanvas-panel) { position: fixed; inset: 0 0 0 auto; z-index: 100000; box-sizing: border-box; width: min(var(--cb-offcanvas-width, 380px), 90vw); padding: 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--cb-surface, #fff); color: var(--cb-ink, inherit); box-shadow: -12px 0 40px #00000033; transform: translateX(105%); visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s; }
:where(.cb-offcanvas:not(.cb-offcanvas-ready) .cb-offcanvas-panel:target, .cb-offcanvas-panel.is-open) { transform: none; opacity: 1; visibility: visible; transition: transform .3s ease, opacity .3s ease, visibility 0s; }
:where(.cb-offcanvas.cb-left) .cb-offcanvas-panel { inset: 0 auto 0 0; transform: translateX(-105%); box-shadow: 12px 0 40px #00000033; }
:where(.cb-offcanvas.cb-top) .cb-offcanvas-panel { inset: 0 0 auto 0; width: auto; max-height: 100vh; transform: translateY(-105%); box-shadow: 0 12px 40px #00000033; }
:where(.cb-offcanvas.cb-bottom) .cb-offcanvas-panel { inset: auto 0 0 0; width: auto; max-height: 100vh; transform: translateY(105%); box-shadow: 0 -12px 40px #00000033; }
:where(.cb-offcanvas.cb-top.cb-tall, .cb-offcanvas.cb-bottom.cb-tall) .cb-offcanvas-panel { height: 100vh; }
:where(.cb-offcanvas.cb-fade) .cb-offcanvas-panel { transform: none; opacity: 0; }
:where(.cb-offcanvas:not(.cb-offcanvas-ready)) .cb-offcanvas-panel:target, :where(.cb-offcanvas) .cb-offcanvas-panel.is-open { transform: none; opacity: 1; }
:where(.cb-offcanvas.cb-still) :is(.cb-offcanvas-panel, .cb-offcanvas-overlay) { transition: none; }
:where(.cb-offcanvas-close) { margin: 0 0 12px; text-align: end; }
:where(.cb-offcanvas-overlay) { position: fixed; inset: 0; z-index: 99999; background: #00000066; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
:where(.cb-offcanvas-overlay.is-open) { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
:where(.cb-offcanvas[data-cb-overlay="dark"]) .cb-offcanvas-overlay { background: #000000b3; }
:where(.cb-offcanvas[data-cb-overlay="light"]) .cb-offcanvas-overlay { background: #ffffffb3; }
:where(.cb-offcanvas[data-cb-overlay="none"]) .cb-offcanvas-overlay { background: transparent; }
html.cb-offcanvas-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { :where(.cb-offcanvas-panel, .cb-offcanvas-overlay) { transition: none; } }

:where(.cb-back-to-top) { margin: 0; }
:where(.cb-back-to-top a) { display: inline-flex; align-items: center; gap: 6px; }
:where(.cb-back-to-top svg) { width: 18px; height: 18px; }

:where(.cb-toggle) > details + details { margin-top: 8px; }

/* Entrance motion (Advanced > Motion): content stays visible without the script and with reduced motion. */
html.cb-motion-ready [data-cb-motion]:not(.is-in) { opacity: 0; }
html.cb-motion-ready [data-cb-motion].is-in { animation: var(--cb-motion-name, cb-fade-in) var(--cb-motion-time, .6s) cubic-bezier(.2, .7, .2, 1) var(--cb-motion-delay, 0s) both; }
html.cb-motion-ready [data-cb-motion="fade-up"] { --cb-motion-name: cb-fade-up; }
html.cb-motion-ready [data-cb-motion="fade-down"] { --cb-motion-name: cb-fade-down; }
html.cb-motion-ready [data-cb-motion="fade-left"] { --cb-motion-name: cb-fade-left; }
html.cb-motion-ready [data-cb-motion="fade-right"] { --cb-motion-name: cb-fade-right; }
html.cb-motion-ready [data-cb-motion="zoom-in"] { --cb-motion-name: cb-zoom-in; }
html.cb-motion-ready [data-cb-motion="zoom-up"] { --cb-motion-name: cb-zoom-up; }
html.cb-motion-ready [data-cb-motion="zoom-out"] { --cb-motion-name: cb-zoom-out; }
html.cb-motion-ready [data-cb-motion="slide-up"] { --cb-motion-name: cb-slide-up; }
html.cb-motion-ready [data-cb-motion="slide-down"] { --cb-motion-name: cb-slide-down; }
html.cb-motion-ready [data-cb-motion="slide-left"] { --cb-motion-name: cb-slide-left; }
html.cb-motion-ready [data-cb-motion="slide-right"] { --cb-motion-name: cb-slide-right; }
html.cb-motion-ready [data-cb-motion="bounce-in"] { --cb-motion-name: cb-bounce-in; }
html.cb-motion-ready [data-cb-motion="bounce-up"] { --cb-motion-name: cb-bounce-up; }
html.cb-motion-ready [data-cb-motion="rotate-in"] { --cb-motion-name: cb-rotate-in; }
html.cb-motion-ready [data-cb-motion="flip-x"] { --cb-motion-name: cb-flip-x; }
html.cb-motion-ready [data-cb-motion="blur-in"] { --cb-motion-name: cb-blur-in; }
@keyframes cb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cb-fade-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes cb-fade-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes cb-fade-right { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes cb-zoom-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cb-zoom-up { from { opacity: 0; transform: scale(.92) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes cb-zoom-out { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes cb-slide-up { from { transform: translateY(48px); } to { transform: none; } }
@keyframes cb-slide-down { from { transform: translateY(-48px); } to { transform: none; } }
@keyframes cb-slide-left { from { transform: translateX(48px); } to { transform: none; } }
@keyframes cb-slide-right { from { transform: translateX(-48px); } to { transform: none; } }
@keyframes cb-bounce-in { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.04); } 80% { transform: scale(.98); } 100% { transform: none; } }
@keyframes cb-bounce-up { 0% { opacity: 0; transform: translateY(40px); } 60% { opacity: 1; transform: translateY(-8px); } 80% { transform: translateY(3px); } 100% { transform: none; } }
@keyframes cb-rotate-in { from { opacity: 0; transform: rotate(-12deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cb-flip-x { from { opacity: 0; transform: perspective(600px) rotateX(70deg); } to { opacity: 1; transform: none; } }
@keyframes cb-blur-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { html.cb-motion-ready [data-cb-motion] { opacity: 1 !important; animation: none !important; } }
/* Hover motion: a small, reversible change on pointer and keyboard focus. */
:where([data-cb-hover]) { transition: transform .2s ease, box-shadow .2s ease; }
:where([data-cb-hover="grow"]:is(:hover, :focus-within)) { transform: scale(1.04); }
:where([data-cb-hover="shrink"]:is(:hover, :focus-within)) { transform: scale(.96); }
:where([data-cb-hover="float"]:is(:hover, :focus-within)) { transform: translateY(-6px); }
:where([data-cb-hover="sink"]:is(:hover, :focus-within)) { transform: translateY(4px); }
:where([data-cb-hover="push"]:is(:hover, :focus-within)) { transform: scale(.94); }
:where([data-cb-hover="pop"]:is(:hover, :focus-within)) { transform: scale(1.08); }
:where([data-cb-hover="rotate"]:is(:hover, :focus-within)) { transform: rotate(4deg); }
:where([data-cb-hover="skew"]:is(:hover, :focus-within)) { transform: skewX(-6deg); }
:where([data-cb-hover="shadow"]:is(:hover, :focus-within)) { transform: translateY(-4px); box-shadow: 0 14px 28px -12px #00000059; }
:where([data-cb-hover="pulse"]:is(:hover, :focus-within)) { animation: cb-hover-pulse 1s ease-in-out infinite; }
:where([data-cb-hover="wobble"]:is(:hover, :focus-within)) { animation: cb-hover-wobble .8s ease-in-out 1; }
:where([data-cb-hover="buzz"]:is(:hover, :focus-within)) { animation: cb-hover-buzz .3s linear 2; }
@keyframes cb-hover-pulse { 50% { transform: scale(1.05); } }
@keyframes cb-hover-wobble { 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(5px) rotate(2deg); } 60% { transform: translateX(-3px) rotate(-1deg); } 80% { transform: translateX(2px); } }
@keyframes cb-hover-buzz { 25% { transform: translateX(2px) rotate(1deg); } 50% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { :where([data-cb-hover]) { transition: none; } :where([data-cb-hover]:is(:hover, :focus-within)) { transform: none; animation: none; } }
/* Sticky (Advanced > Motion): stays in view while its container scrolls past. */
:where([data-cb-sticky="top"]) { position: sticky; top: var(--cb-sticky-offset, 0px); z-index: 10; }
:where([data-cb-sticky="bottom"]) { position: sticky; bottom: var(--cb-sticky-offset, 0px); z-index: 10; }

/* While editing: the invisible and fixed elements stay reachable on the canvas. */
html.ce-on:not(.ce-previewing) .cb-anchor { height: auto; min-height: 24px; overflow: visible; outline: 1px dashed color-mix(in srgb, var(--ce-accent, #7c3aed) 55%, transparent); }
html.ce-on:not(.ce-previewing) .cb-anchor::before { content: "#" attr(id); display: block; padding: 2px 8px; font: 12px/20px system-ui, sans-serif; color: #6b6578; }
html.ce-on:not(.ce-previewing) .cb-spacer { outline: 1px dashed color-mix(in srgb, var(--ce-accent, #7c3aed) 35%, transparent); outline-offset: -1px; }
html.ce-on:not(.ce-previewing) .cb-offcanvas-panel { position: static; transform: none; opacity: 1; visibility: visible; transition: none; width: auto; height: auto; max-height: none; margin-top: 12px; box-shadow: 0 0 0 1px var(--cb-line, #ddd); }
html.ce-on:not(.ce-previewing) [data-cb-motion] { opacity: 1 !important; animation: none !important; }
html.ce-on:not(.ce-previewing) .cb-flip { min-height: 0; perspective: none; }
html.ce-on:not(.ce-previewing) :is(.cb-flip-front, .cb-flip-back) { position: static; transform: none; backface-visibility: visible; }
html.ce-on:not(.ce-previewing) .cb-hotspot-point > :not(summary) { display: block; }

/* WordPress's own content as elements (includes/providers.php): posts, menus, search, sign-in, sitemap, breadcrumbs,
   site identity, page fields, author box. The markup is WordPress's; these give it the theme's tokens. */
:where(.kw-posts) { display: grid; grid-template-columns: repeat(var(--kw-cols, 3), minmax(0, 1fr)); gap: 28px; margin: 0 0 1.5em; }
@media (max-width: 1024px) { :where(.kw-posts.kw-cols-3, .kw-posts.kw-cols-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { :where(.kw-posts) { grid-template-columns: minmax(0, 1fr); } }
:where(.kw-posts-empty) { display: block; color: var(--cb-muted, inherit); }
:where(.kw-post) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(.kw-post-image) { display: block; margin: 0 0 6px; }
:where(.kw-post-image img) { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--cb-radius, 0); }
:where(.kw-post-title) { margin: 0; font-size: 1.125rem; line-height: 1.3; }
:where(.kw-post-title a) { color: var(--cb-heading, inherit); text-decoration: none; }
:where(.kw-post-title a:hover) { text-decoration: underline; }
:where(.kw-post-date, .kw-post-author) { margin: 0; font-size: .875rem; color: var(--cb-muted, inherit); }
:where(.kw-post-excerpt) { margin: 0; color: var(--cb-ink, inherit); }
:where(.kw-menu) { margin: 0 0 1.25em; }
:where(.kw-menu-list) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
:where(.kw-menu-down .kw-menu-list) { flex-direction: column; gap: 6px; }
:where(.kw-menu-list a) { color: var(--cb-heading, inherit); text-decoration: none; }
:where(.kw-menu-list a:hover, .kw-menu-list .current-menu-item > a) { text-decoration: underline; }
:where(.kw-menu-list .sub-menu) { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px; }
:where(.kw-search) { display: flex; gap: 8px; max-width: 520px; }
:where(.kw-search input[type="search"]) { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; }
:where(.kw-search button) { min-height: 44px; padding: 0 18px; font: inherit; cursor: pointer; }
:where(.kw-login form) { display: grid; gap: 12px; max-width: 420px; }
:where(.kw-login input[type="text"], .kw-login input[type="password"]) { width: 100%; min-height: 44px; padding: 0 12px; font: inherit; }
:where(.kw-sitemap) { margin: 0 0 1.25em; padding-inline-start: 1.25em; }
:where(.kw-breadcrumbs ol) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9375rem; color: var(--cb-muted, inherit); }
:where(.kw-breadcrumbs li + li)::before { content: "/"; margin-inline-end: 6px; color: var(--cb-line, currentColor); }
:where(.kw-breadcrumbs a) { color: inherit; }
:where(.kw-site-title) { margin: 0; font-family: var(--cb-display, inherit); font-size: 1.5rem; font-weight: 700; }
:where(.kw-site-title a) { color: var(--cb-heading, inherit); text-decoration: none; }
:where(.kw-site-tagline) { margin: 0; color: var(--cb-muted, inherit); }
:where(.kw-site-logo img) { display: block; max-width: 220px; height: auto; }
:where(.kw-author) { display: flex; gap: 16px; align-items: flex-start; }
:where(.kw-author-avatar) { border-radius: 50%; flex: none; }
:where(.kw-author-name) { margin: 0; font-weight: 700; color: var(--cb-heading, inherit); }
:where(.kw-author-bio) { margin: 4px 0 0; color: var(--cb-muted, inherit); }
:where(.kw-post-nav) { display: flex; justify-content: space-between; gap: 16px; }
:where(.kw-provider-empty) { margin: 0; padding: 12px 16px; background: var(--cb-tint, #f3f4f6); color: var(--cb-muted, inherit); }

/* Form (blocks/580-form.html, includes/forms.php): fields in rows of halves or thirds, labels above, the theme's own
   type and colours; square fields with a clear border; messages and per-field errors in words */
:where(.cb-form) { display: grid; gap: 16px; }
.cb-form [hidden] { display: none !important; } /* a step, a button or a message the runtime hides stays hidden whatever its display */
:where(.cb-form-fields, .cb-form-step) { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.cb-form-step > legend) { padding: 0; margin-bottom: 4px; font-weight: 700; }
:where(.cb-field) { display: grid; gap: 6px; flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.cb-field.cb-w-50) { flex-basis: calc(50% - 8px); }
:where(.cb-field.cb-w-33) { flex-basis: calc(33.333% - 11px); }
@media (max-width: 767px) { :where(.cb-field.cb-w-50, .cb-field.cb-w-33) { flex-basis: 100%; } }
:where(.cb-field > label, .cb-field > legend) { font-weight: 600; }
:where(.cb-field input:not([type=checkbox]):not([type=radio]), .cb-field select, .cb-field textarea) { width: 100%; padding: 10px 12px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: inherit; }
:where(.cb-choices) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
:where(.cb-choices > legend) { flex-basis: 100%; }
:where(.cb-field [aria-invalid=true]) { outline: 2px solid #b42318; outline-offset: 1px; }
:where(.cb-field-error) { margin: 0; color: #b42318; font-size: .9em; }
:where(.cb-form-message) { margin: 0; padding: 10px 12px; background: color-mix(in srgb, currentColor 7%, transparent); }
:where(.cb-form-message.is-error) { color: #b42318; }
:where(.cb-form-steps) { display: flex; gap: 12px; margin: 0; }
:where(.cb-form-progress) { margin: 0; font-weight: 600; }
.cb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Popups (includes/popups.php; behaviour in elements.js): a fixed frame over the page that places the box by its
   position classes, an overlay when it is a modal, the close button inside or outside the box, and the entrance and
   exit animations (none when motion is reduced). The box's own look is its Style settings; these are defaults only. */
.ke-popup--h-left { --kp-jc: flex-start; } .ke-popup--h-center { --kp-jc: center; } .ke-popup--h-right { --kp-jc: flex-end; }
.ke-popup--v-top { --kp-ai: flex-start; } .ke-popup--v-center { --kp-ai: center; } .ke-popup--v-bottom { --kp-ai: flex-end; }
.ke-popup[hidden] { display: none !important; }
.ke-popup { position: fixed; inset: 0; z-index: 99990; pointer-events: none; }
.ke-popup-overlay { position: fixed; inset: 0; background: var(--kp-overlay, rgba(16, 24, 40, .6)); pointer-events: auto; }
.ke-popup-frame { position: relative; box-sizing: border-box; display: flex; justify-content: var(--kp-jc, center); align-items: var(--kp-ai, center); width: 100%; height: 100%; padding: 16px; pointer-events: none; }
:where(.ke-popup-box) { position: relative; box-sizing: border-box; width: min(var(--kp-width, 640px), 100%); height: var(--kp-height, auto); max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: 40px 32px 32px; background: var(--cb-surface, #fff); color: var(--cb-ink, inherit); box-shadow: 0 24px 64px rgba(16, 24, 40, .28); }
.ke-popup .ke-popup-box { pointer-events: auto; }
.ke-popup-box:focus { outline: none; }
.ke-popup-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: 400 28px/1 system-ui, sans-serif; cursor: pointer; }
.ke-popup-x:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.ke-popup-x[hidden] { display: none; }
.ke-popup--x-outside .ke-popup-box { overflow: visible; }
.ke-popup--x-outside .ke-popup-x { top: -48px; right: -4px; color: #fff; }
html.ke-popup-locked { overflow: hidden; }
@keyframes kp-fade { from { opacity: 0; } }
@keyframes kp-zoom { from { opacity: 0; transform: scale(.92); } }
@keyframes kp-up { from { opacity: 0; transform: translateY(40px); } }
@keyframes kp-down { from { opacity: 0; transform: translateY(-40px); } }
@keyframes kp-left { from { opacity: 0; transform: translateX(40px); } }
@keyframes kp-right { from { opacity: 0; transform: translateX(-40px); } }
.ke-popup.is-open .ke-popup-overlay { animation: kp-fade var(--kp-time, .3s) ease both; }
.ke-popup.is-closing .ke-popup-overlay { animation: kp-fade var(--kp-time, .3s) ease reverse both; }
.ke-popup.is-open[data-kp-in="fade"] .ke-popup-box { animation: kp-fade var(--kp-time, .3s) ease both; }
.ke-popup.is-open[data-kp-in="zoom"] .ke-popup-box { animation: kp-zoom var(--kp-time, .3s) ease both; }
.ke-popup.is-open[data-kp-in="up"] .ke-popup-box { animation: kp-up var(--kp-time, .3s) ease both; }
.ke-popup.is-open[data-kp-in="down"] .ke-popup-box { animation: kp-down var(--kp-time, .3s) ease both; }
.ke-popup.is-open[data-kp-in="left"] .ke-popup-box { animation: kp-left var(--kp-time, .3s) ease both; }
.ke-popup.is-open[data-kp-in="right"] .ke-popup-box { animation: kp-right var(--kp-time, .3s) ease both; }
.ke-popup.is-closing[data-kp-out="fade"] .ke-popup-box { animation: kp-fade var(--kp-time, .3s) ease reverse both; }
.ke-popup.is-closing[data-kp-out="zoom"] .ke-popup-box { animation: kp-zoom var(--kp-time, .3s) ease reverse both; }
.ke-popup.is-closing[data-kp-out="up"] .ke-popup-box { animation: kp-down var(--kp-time, .3s) ease reverse both; }
.ke-popup.is-closing[data-kp-out="down"] .ke-popup-box { animation: kp-up var(--kp-time, .3s) ease reverse both; }
.ke-popup.is-closing[data-kp-out="left"] .ke-popup-box { animation: kp-right var(--kp-time, .3s) ease reverse both; }
.ke-popup.is-closing[data-kp-out="right"] .ke-popup-box { animation: kp-left var(--kp-time, .3s) ease reverse both; }
@media (prefers-reduced-motion: reduce) { .ke-popup .ke-popup-box, .ke-popup .ke-popup-overlay { animation: none !important; } }
/* the stage a popup is edited on: the same placing, in the page's flow (the editor's bar and canvas stay usable) */
.ke-popup.ke-popup-stage { position: relative; inset: auto; z-index: auto; display: block; min-height: 100vh; background: var(--kp-overlay, rgba(16, 24, 40, .6)); pointer-events: auto; }
.ke-popup-stage:not(.ke-popup--modal) { background: repeating-linear-gradient(45deg, #f4f2f7 0 12px, #fff 12px 24px); }
.ke-popup-stage .ke-popup-frame { min-height: 100vh; height: auto; padding: 48px 16px; }
.ke-popup-stage .ke-popup-frame, .ke-popup-stage-body, .ke-popup-stage-body > [data-ce-root] { pointer-events: auto; }
.ke-popup-stage-body, .ke-popup-stage-body > [data-ce-root] { display: flex; flex: 1 1 auto; justify-content: var(--kp-jc, center); align-items: var(--kp-ai, center); min-width: 0; }
.ke-popup-stage .ke-popup-box { max-height: none; }

/* Loops and filters (includes/dynamic.php): pages of a loop, and the filter's terms, the chosen ones marked. */
.ke-loop-pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.ke-loop-pages a, .ke-loop-pages span { padding: 6px 12px; }
.ke-loop-pages [aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.ke-filter { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; }
.ke-filter-term { padding: 6px 2px; text-decoration: none; border-bottom: 2px solid transparent; }
.ke-filter-term:hover, .ke-filter-term.is-active { border-bottom-color: currentColor; }
.ke-filter-term.is-active { font-weight: 700; }
html.ce-on .ke-loop-empty, html.ce-on .ke-loop-alt { outline: 1px dashed currentColor; outline-offset: 4px; }

/* Larger on click (data-cb-lightbox): the picture over the page at its largest, with its caption */
:where([data-cb-lightbox] img, img[data-cb-lightbox]) { cursor: zoom-in; }
html.ce-on :where([data-cb-lightbox] img, img[data-cb-lightbox]) { cursor: inherit; }
.cb-lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 56px 64px; border: 0; background: transparent; color: #fff; display: grid; place-items: center; }
.cb-lightbox:not([open]) { display: none; }
.cb-lightbox::backdrop { background: rgba(10, 10, 14, .9); }
.cb-lightbox-figure { display: grid; justify-items: center; gap: 12px; max-width: 100%; max-height: 100%; margin: 0; }
.cb-lightbox-figure img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; }
.cb-lightbox-caption { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.4; text-align: center; }
.cb-lightbox-caption[hidden] { display: none; }
.cb-lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.cb-lightbox button:hover, .cb-lightbox button:focus-visible { background: rgba(255, 255, 255, .26); outline: 2px solid #fff; outline-offset: 2px; }
.cb-lightbox-x { top: 12px; right: 12px; }
.cb-lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.cb-lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .cb-lightbox { padding: 56px 8px; } .cb-lightbox-prev, .cb-lightbox-next { top: auto; bottom: 12px; transform: none; } }