/* =========================================================
   blocks-pending.css

   Structural CSS for blocks added since the last Vite build.

   WHY THIS FILE EXISTS, and when it should stop existing.

   Block CSS belongs in resources/css/blocks/, imported by
   app.css and compiled by Vite. That is still where it should
   end up. But a Vite rebuild regenerates public/build/, and
   doing that has already silently deleted a tracked file once
   (the entrypoints.json regression). There is also no Node on
   the servers, so the build can only be run locally and then
   committed.

   So a block added between builds has nowhere to put its CSS
   without either running a build or writing the styles into a
   client's brand file. The second option is what produced an
   81KB per-client stylesheet on the first site: with no working
   shared layer, every value gets written per client.

   This is the third way, and it follows a precedent already set
   twice in this theme: public/editor-defaults.js and
   public/hero-art.js are both plain files deliberately outside
   the build. A plain CSS file in public/ is enqueued directly,
   is shared by every client, and needs no build.

   ⬜ AT THE NEXT VITE BUILD: move each block below into its own
   file in resources/css/blocks/, add the @import to app.css,
   delete it from here, and check public/build/entrypoints.json
   still exists afterwards.

   STRUCTURE ONLY. Colour, type and finish are set by the
   client brand file through the custom properties named at the
   top of each block. Neutral fallbacks keep a block readable on
   a site with no brand file at all.
   ========================================================= */


/* =========================================================
   Hero - buttons and credential row
   Shared by every hero variant.

     --bp-hero-btn-bg          solid button fill
     --bp-hero-btn-ink         solid button text
     --bp-hero-btn-ghost-ink   outline button text and border
   ========================================================= */

.bp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bp-hero--align-center .bp-hero__ctas {
  justify-content: center;
}

.bp-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--bp-hero-btn-radius, 2px);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.bp-hero__btn--solid {
  background: var(--bp-hero-btn-bg, #1a1a1a);
  color: var(--bp-hero-btn-ink, #fff);
}

.bp-hero__btn--ghost {
  background: transparent;
  color: var(--bp-hero-btn-ghost-ink, currentColor);
  border-color: currentColor;
}

.bp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
}

.bp-hero--align-center .bp-hero__meta {
  justify-content: center;
}

.bp-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
}

.bp-hero__meta-value {
  font-size: 15px;
  font-weight: 700;
}

.bp-hero__meta-label {
  opacity: .72;
}


/* =========================================================
   Hero - "art" variant
   Copy on one side, a drawn chart on the other. Laid out like
   the split variant, but the second column is generated SVG
   rather than a photograph.

     --bp-hero-art-bg      panel behind the chart
     --bp-hero-art-ink     replay button text
   ========================================================= */

.bp-hero.bp-hero--art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.bp-hero--art .bp-hero__panel {
  display: flex;
  align-items: center;
}

.bp-hero--art .bp-hero__inner {
  max-width: none;
  padding: 56px clamp(28px, 5vw, 72px);
}

.bp-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 40px clamp(20px, 4vw, 56px);
  background: var(--bp-hero-art-bg, transparent);
}

.bp-hero__art-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  /* The level chips are drawn past the right edge of the viewBox. */
  overflow: visible;
}

.bp-hero__art-replay {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: 22px;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: var(--bp-hero-art-ink, currentColor);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
}

/* The button only appears once the drawing has finished, so it never
   invites a replay of something still playing. */
.bp-hero__art.is-done .bp-hero__art-replay {
  opacity: .55;
}

.bp-hero__art-replay:hover,
.bp-hero__art-replay:focus-visible {
  opacity: 1;
}

@media (max-width: 780px) {
  .bp-hero.bp-hero--art {
    grid-template-columns: 1fr;
  }

  .bp-hero--art .bp-hero__inner {
    padding: 48px 28px 32px;
  }

  .bp-hero__art {
    padding: 0 24px 40px;
  }
}


/* =========================================================
   Plans  (block: acf/plans)

     --bp-plans-card-bg       card fill
     --bp-plans-card-border   card border colour
     --bp-plans-radius        card corner
     --bp-plans-accent        ribbon, featured border, featured button
     --bp-plans-accent-ink    text on the accent
     --bp-plans-ink           headings and price
     --bp-plans-muted         sub-line and feature text
     --bp-plans-btn-bg        default button fill
     --bp-plans-btn-ink       default button text
   ========================================================= */

.bp-plans__head {
  max-width: 620px;
  margin: 0 0 40px;
}

.bp-plans--align-center .bp-plans__head {
  margin-inline: auto;
  text-align: center;
}

.bp-plans__heading {
  margin: 0 0 10px;
  color: var(--bp-plans-ink, inherit);
}

.bp-plans__intro {
  margin: 0;
  color: var(--bp-plans-muted, inherit);
}

.bp-plans__grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

.bp-plans__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.bp-plans__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.bp-plans__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.bp-plans__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid var(--bp-plans-card-border, #e2e2e2);
  border-radius: var(--bp-plans-radius, 3px);
  background: var(--bp-plans-card-bg, #fff);
}

.bp-plans__card.is-featured {
  border-color: var(--bp-plans-accent, #1a1a1a);
  /* A second inset ring rather than a thicker border, so the flagged card
     does not sit 1px taller than the one beside it. */
  box-shadow: inset 0 0 0 1px var(--bp-plans-accent, #1a1a1a);
}

.bp-plans__ribbon {
  position: absolute;
  top: 0;
  right: 24px;
  transform: translateY(-50%);
  padding: 5px 12px;
  border-radius: 2px;
  background: var(--bp-plans-accent, #1a1a1a);
  color: var(--bp-plans-accent-ink, #fff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bp-plans__tier {
  margin: 0 0 6px;
  color: var(--bp-plans-muted, #666);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bp-plans__name {
  margin: 0 0 4px;
  color: var(--bp-plans-ink, inherit);
  font-size: 22px;
  line-height: 1.25;
}

.bp-plans__sub {
  margin: 0 0 18px;
  color: var(--bp-plans-muted, #666);
  font-size: 14px;
}

.bp-plans__price {
  margin: 0 0 20px;
  color: var(--bp-plans-ink, inherit);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
}

.bp-plans__term {
  font-size: 14px;
  font-weight: 500;
  color: var(--bp-plans-muted, #666);
}

.bp-plans__feats {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: var(--bp-plans-muted, #444);
  font-size: 15px;
  line-height: 1.5;
}

.bp-plans__feats li {
  position: relative;
  padding: 0 0 10px 24px;
}

.bp-plans__feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .48em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--bp-plans-accent, #1a1a1a);
  border-bottom: 1.6px solid var(--bp-plans-accent, #1a1a1a);
  transform: rotate(-45deg);
}

.bp-plans__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Pushes every button to the foot of its card, so a tier with fewer
     features still lines its button up with the others. */
  margin-top: auto;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--bp-plans-radius, 3px);
  background: var(--bp-plans-btn-bg, #1a1a1a);
  color: var(--bp-plans-btn-ink, #fff);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.bp-plans__btn.is-accent {
  background: var(--bp-plans-accent, #1a1a1a);
  color: var(--bp-plans-accent-ink, #fff);
}

.bp-plans__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding: 22px 28px;
  border: 1px dashed var(--bp-plans-card-border, #cfcfcf);
  border-radius: var(--bp-plans-radius, 3px);
}

.bp-plans__band-copy {
  flex: 1 1 260px;
}

.bp-plans__band-text {
  margin: 0;
  color: var(--bp-plans-ink, inherit);
  font-weight: 600;
}

.bp-plans__band .bp-plans__btn {
  margin-top: 0;
  margin-left: auto;
}

@media (max-width: 900px) {
  .bp-plans__grid[data-cols="3"],
  .bp-plans__grid[data-cols="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  .bp-plans__grid[data-cols="2"],
  .bp-plans__grid[data-cols="3"],
  .bp-plans__grid[data-cols="4"] {
    grid-template-columns: 1fr;
  }

  .bp-plans__band .bp-plans__btn {
    margin-left: 0;
  }
}


/* =========================================================
   Icon row  (block: acf/icon-row)

   The block reuses the class names of the hand-built rows it
   replaced -- v-badge / v-label / v-sub -- so an existing
   client stylesheet keeps styling it unchanged. Only the grid
   is new, and only the grid belongs here.
   ========================================================= */

.bp-iconrow { display: grid; gap: var(--bp-iconrow-gap, 32px); align-items: start; }
.bp-iconrow--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bp-iconrow--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bp-iconrow--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bp-iconrow__item > *:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .bp-iconrow--cols-3, .bp-iconrow--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bp-iconrow--cols-2, .bp-iconrow--cols-3, .bp-iconrow--cols-4 { grid-template-columns: 1fr; }
}


/* =========================================================
   Split  (block: acf/split)

   The media column collapses out of the grid when the block
   carries no image, so a copy-only Split does not sit in a
   half-width gutter.
   ========================================================= */

.split { display: grid; gap: var(--bp-split-gap, 48px); align-items: center; }
.split--2 { grid-template-columns: 1fr 1fr; }
/* NOT :empty -- the Blade @foreach leaves whitespace text nodes inside the
   media column, so :empty never matches and a copy-only Split sat in a
   half-width gutter. :not(:has(*)) asks whether there are child ELEMENTS.
   The parent test is :not(:has(...)) and NOT :has(:has(...)) -- :has cannot
   be nested inside :has, and a browser discards the whole selector if it is. */
.split--2:not(:has(.split__media > *)) { grid-template-columns: 1fr; }
.split__media:not(:has(*)) { display: none; }
.split--reverse .split__copy { order: 2; }
.split--reverse .split__media { order: 1; }
.split__copy > *:last-child { margin-bottom: 0; }
.split__media img, .split__media video { display: block; width: 100%; height: auto; }
.split__ticks { margin: 0 0 18px; padding: 0; list-style: none; }
.split__ticks li { position: relative; padding: 0 0 10px 26px; }

@media (max-width: 780px) {
  .split--2 { grid-template-columns: 1fr; }
  .split--reverse .split__copy, .split--reverse .split__media { order: 0; }
}


/* =========================================================
   Posts  (block: acf/posts)

   Article cards, from a live query or a hand-typed list. Both
   sources render identical markup, so a section can be built
   by hand now and switched to a query later without a restyle.

     --bp-posts-radius     card corner
     --bp-posts-border     card border
     --bp-posts-card-bg    card fill
     --bp-posts-accent     hover border, date, stamp
     --bp-posts-thumb-bg   panel behind a card with no image
   ========================================================= */

.bp-posts__head { max-width: 640px; margin: 0 0 40px; }
.bp-posts--align-center .bp-posts__head { margin-inline: auto; text-align: center; }
.bp-posts__heading { margin: 0 0 10px; }
.bp-posts__intro { margin: 0; }

.bp-posts__grid { display: grid; gap: 22px; align-items: stretch; }
.bp-posts__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.bp-posts__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.bp-posts__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

.bp-posts__card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bp-posts-border, #e2e2e2);
  border-radius: var(--bp-posts-radius, 10px);
  background: var(--bp-posts-card-bg, transparent);
  transition: transform .15s ease, border-color .2s ease;
}
.bp-posts__card:hover { transform: translateY(-4px); border-color: var(--bp-posts-accent, #1a1a1a); }

.bp-posts__thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  /* A ratio on the PANEL, never on an img. Trap 27: an aspect-ratio set on the
     image crops the picture while the file itself still looks fine. */
  aspect-ratio: 16 / 9;
  background-color: var(--bp-posts-thumb-bg, #ececf2);
  background-size: cover; background-position: center;
}

.bp-posts__stamp {
  position: absolute; left: 12px; top: 12px; padding: 3px 8px;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: 10px; letter-spacing: .1em;
}
.bp-posts__lock {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 2px; font-size: 10px; letter-spacing: .08em;
}
.bp-posts__lock svg { width: 12px; height: 12px; flex: none; }
.bp-posts__play { width: 46px; height: 46px; opacity: .8; }

.bp-posts__meta { padding: 18px; }
.bp-posts__date { margin: 0; font-size: 11px; letter-spacing: .08em; }
.bp-posts__title { margin: 8px 0; font-size: 18px; line-height: 1.25; }
.bp-posts__title a { color: inherit; text-decoration: none; }
.bp-posts__excerpt { margin: 0; font-size: 13.5px; }

@media (max-width: 820px) {
  .bp-posts__grid[data-cols="2"],
  .bp-posts__grid[data-cols="3"],
  .bp-posts__grid[data-cols="4"] { grid-template-columns: 1fr; }
}

/* =========================================================
   Panel  (block: acf/panel)

   A bordered card with an optional dark header bar and rows
   of label / value. Covers a lesson preview, a spec table and
   a comparison without three separate blocks.

     --bp-panel-bg      card fill
     --bp-panel-border  card border and row rules
     --bp-panel-radius  card corner
     --bp-panel-bar-bg  header bar fill
   ========================================================= */

.bp-panel {
  overflow: hidden;
  border: 1px solid var(--bp-panel-border, #e2e2e2);
  border-radius: var(--bp-panel-radius, 10px);
  background: var(--bp-panel-bg, #fff);
}

.bp-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bp-panel-bar-bg, #1a1a1a);
  color: #fff;
}

.bp-panel__bar-label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.bp-panel__bar-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.bp-panel__bar-note svg { width: 12px; height: 12px; flex: none; }

.bp-panel__body { padding: 26px 26px 30px; }
.bp-panel__heading { margin: 0 0 16px; font-size: 24px; line-height: 1.2; }

.bp-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bp-panel-border, #e2e2e2);
  font-size: 14px;
}

/* The last row closes the list, so it carries no rule. */
.bp-panel__row:last-child { border-bottom: 0; padding-bottom: 0; }

.bp-panel__label { display: inline-flex; align-items: center; }

.bp-panel__swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 2px;
  flex: none;
}

/* --- the media half -------------------------------------
   Structure only. The play control's colour and the type on
   the foot are the client's, set in the brand file.

     --bp-panel-play-bg   play control fill
     --bp-panel-play-ink  play control glyph
     --bp-panel-chip-bg   corner label fill
     --bp-panel-chip-ink  corner label text
   -------------------------------------------------------- */

.bp-panel__media { line-height: 0; background: var(--bp-panel-bar-bg, #1a1a1a); }
.bp-panel__embed iframe,
.bp-panel__embed video { display: block; width: 100%; border: 0; }

.bp-panel__frame { position: relative; display: block; }
.bp-panel__still { display: block; width: 100%; height: auto; }

.bp-panel__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--bp-panel-chip-bg, #fff);
  color: var(--bp-panel-chip-ink, #1a1a1a);
}

.bp-panel__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bp-panel-play-bg, #fff);
  color: var(--bp-panel-play-ink, #1a1a1a);
  transition: transform .18s ease;
}

.bp-panel__play svg { width: 34px; height: 34px; margin-left: 4px; }
.bp-panel__frame--play:hover .bp-panel__play { transform: scale(1.06); }

.bp-panel__foot { padding: 18px 22px 20px; }
.bp-panel__media-title { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
.bp-panel__media-meta { margin: 0; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .bp-panel__frame--play:hover .bp-panel__play { transform: none; }
}

/* ---------------------------------------------------------------------------
   Compare — a feature matrix, two columns of ticks, crosses or values.
   Structure only. The look comes from the client brand file through the
   custom properties below, so this file stays client-neutral (trap 31).
   --------------------------------------------------------------------------- */

.bp-compare__heading { margin: 0 0 12px; }
.bp-compare__intro { margin: 0 0 28px; max-width: 62ch; }

/* The table can always scroll rather than force the page wide. On a phone the
   rows restack below, so this only ever catches an unusually wide table. */
.bp-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bp-compare__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--bp-compare-size, 15px);
}

.bp-compare__table thead th {
  padding: 14px 18px;
  font-size: var(--bp-compare-head-size, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bp-compare-head-bg, #1a1a1a);
  color: var(--bp-compare-head-ink, #fff);
  white-space: nowrap;
}

.bp-compare__table thead th:not(.bp-compare__feature),
.bp-compare__table td { text-align: center; }

.bp-compare__table tbody th,
.bp-compare__table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--bp-compare-rule, #e6e6ec);
  vertical-align: middle;
}

.bp-compare__table tbody tr:last-child th,
.bp-compare__table tbody tr:last-child td { border-bottom: 0; }

.bp-compare__table tbody tr:nth-child(even) th,
.bp-compare__table tbody tr:nth-child(even) td {
  background: var(--bp-compare-stripe, transparent);
}

.bp-compare__feature { font-weight: 500; }

.bp-compare__mark { display: inline-flex; }
.bp-compare__mark svg { width: var(--bp-compare-mark, 20px); height: var(--bp-compare-mark, 20px); }
.bp-compare__mark--yes { color: var(--bp-compare-yes, #1a1948); }
.bp-compare__mark--no { color: var(--bp-compare-no, #c20000); }

.bp-compare__value { font-weight: 600; white-space: nowrap; }

/* Mobile: the table restacks into one card per row, each cell labelled with the
   column it came from, so nothing depends on a horizontal scroll being noticed.
   Mobile is the primary viewport on this estate. */
@media (max-width: 720px) {
  .bp-compare__table,
  .bp-compare__table tbody,
  .bp-compare__table tr,
  .bp-compare__table tbody th,
  .bp-compare__table tbody td { display: block; }

  .bp-compare__table thead { display: none; }

  .bp-compare__table tbody tr {
    margin: 0 0 14px;
    border: 1px solid var(--bp-compare-rule, #e6e6ec);
    border-radius: var(--bp-compare-radius, 10px);
    overflow: hidden;
  }

  .bp-compare__table tbody th {
    background: var(--bp-compare-stack-head-bg, #f4f4f7);
    border-bottom: 1px solid var(--bp-compare-rule, #e6e6ec);
  }

  .bp-compare__table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: right;
  }

  .bp-compare__table tbody td::before {
    content: attr(data-col);
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .75;
    text-align: left;
  }

  /* Restacked rows already carry the card border. */
  .bp-compare__table tbody tr:last-child td { border-bottom: 1px solid var(--bp-compare-rule, #e6e6ec); }
  .bp-compare__table tbody tr td:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------
   Carousel (acf/carousel), 2026-09-22. Structure only: the
   scroll-snap row, one slide in view, the controls' layout.
   Type, colour and size belong to the client's brand file.
   --------------------------------------------------------- */
.bp-carousel { position: relative; }
.bp-carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  outline-offset: 6px;
}
.bp-carousel__viewport::-webkit-scrollbar { display: none; }
.bp-carousel__track {
  display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none;
}
.bp-carousel.is-ready .bp-carousel__viewport { transition: height .28s ease; }
.bp-carousel__slide {
  flex: 0 0 100%; min-width: 0; box-sizing: border-box;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.bp-carousel__quote, .bp-carousel__media { margin: 0; }
.bp-carousel__media img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.bp-carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.bp-carousel__btn {
  appearance: none; background: none; border: 1px solid currentColor; border-radius: 50%;
  width: 40px; height: 40px; padding: 0; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.bp-carousel__btn svg { width: 20px; height: 20px; }
.bp-carousel__dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bp-carousel__dots[hidden] { display: none; }
.bp-carousel__dot {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .35;
}
.bp-carousel__dot.is-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bp-carousel__viewport,
  .bp-carousel.is-ready .bp-carousel__viewport { scroll-behavior: auto; transition: none; }
}