@charset "UTF-8";
/* ============================================================
   Global Carousel Controls Standard (Swiper + Flickity)
   ------------------------------------------------------------
   Universal arrow-button and pagination-dot LOOK for every
   carousel, regardless of library. Canonical look adopted from
   carousel-section-2 (the chosen reference).

   Scoped under [data-carousel] — the attribute on every carousel
   container — so it only touches real carousels and outranks
   swiper-bundle.min.css / flickity.min.css (which load earlier).

   Override per block by EITHER:
     • setting the --swiper-* variables (vars.scss :root), or
     • re-declaring a rule under .block-name { } (block CSS loads
       after this sheet, so an equal-specificity rule wins).

   NOTE: responsive arrow-hide / size tweaks are behaviour, not
   look, and stay per-block.
   ============================================================ */
[data-carousel] {
  /* ---- Pagination dots: LOOK ONLY ----
     Only the bullet-row arrangement (centered flex row) is universal.
     The dot POSITION — relative vs absolute, bottom/top offset, padding —
     is set PER-BLOCK in each block's style.scss, because it genuinely
     varies (content carousels sit the dots in-flow below; hero sliders
     overlay them on the slide). Do NOT add position/bottom/top/width/
     padding here: this sheet loads AFTER the block CSS, so at equal
     specificity ([data-carousel] .swiper-pagination == .block .swiper-
     pagination) anything declared here would override the per-block rule. */
  /* ---- Arrow controls wrapper ---- */
  /* ---- Prev / Next arrow buttons (bordered circle + CSS chevron) ---- */
  /* ---- Flickity page dots: LOOK ONLY (match Swiper bullets).
     Flickity v3 markup: each dot is a `button.flickity-page-dot` (singular)
     inside `.flickity-page-dots` — NOT the v2 `.flickity-page-dots .dot`.
     Position (.flickity-page-dots offset) stays per-block, like Swiper. ---- */
  /* ---- Flickity native prev/next buttons (match Swiper arrows).
     Only render when a block sets prevNextButtons:true. carousel-3 uses
     its own external .button-prev/.button-next, aligned in that block. ---- */
}
[data-carousel] .swiper-pagination {
  display: flex;
  justify-content: center;
}
[data-carousel] .swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-size);
  height: var(--swiper-pagination-bullet-size);
  margin-top: var(--swiper-pagination-vertical-spacing) !important;
  opacity: 0.3;
  background: var(--swiper-pagination-bullet-color);
}
[data-carousel] .swiper-pagination-bullet-active {
  opacity: 1;
}
[data-carousel] .carousel-controls {
  position: absolute;
  top: calc(50% - (var(--swiper-button-size) / 2 + var(--swiper-pagination-vertical-spacing) / 2));
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}
[data-carousel] .swiper-button-next,
[data-carousel] .swiper-button-prev {
  position: relative;
  width: var(--swiper-button-size);
  height: var(--swiper-button-size);
  border: var(--swiper-button-border-width) solid var(--swiper-button-border-color);
  border-radius: 50%;
  left: 0;
  right: 0;
  margin-top: 0;
  top: 0;
  transition: border-color 0.2s ease;
}
[data-carousel] .swiper-button-next::after,
[data-carousel] .swiper-button-prev::after {
  content: "";
  width: 36%;
  height: 36%;
  position: absolute;
  left: 22%;
  top: 32%;
  border-left: 1px solid var(--swiper-button-chevron-color);
  border-bottom: 1px solid var(--swiper-button-chevron-color);
  transform: rotate(225deg);
  transition: border-color 0.2s ease;
}
[data-carousel] .swiper-button-next:hover,
[data-carousel] .swiper-button-prev:hover {
  border-color: var(--swiper-button-border-color-hover);
}
[data-carousel] .swiper-button-next:hover::after,
[data-carousel] .swiper-button-prev:hover::after {
  border-left-color: var(--swiper-button-chevron-color-hover);
  border-bottom-color: var(--swiper-button-chevron-color-hover);
}
[data-carousel] .swiper-button-next {
  margin-left: 10px;
}
[data-carousel] .swiper-button-prev::after {
  left: auto;
  right: 22%;
  transform: rotate(45deg);
}
[data-carousel] .flickity-page-dot {
  width: var(--swiper-pagination-bullet-size);
  height: var(--swiper-pagination-bullet-size);
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap);
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-color);
  opacity: 0.3;
}
[data-carousel] .flickity-page-dot:focus {
  box-shadow: 0 0 0 #19f;
}
[data-carousel] .flickity-page-dot.is-selected {
  opacity: 1;
}
[data-carousel] .flickity-prev-next-button {
  width: var(--swiper-button-size);
  height: var(--swiper-button-size);
  border: var(--swiper-button-border-width) solid var(--swiper-button-border-color);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.2s ease;
}
[data-carousel] .flickity-prev-next-button .flickity-button-icon {
  display: none;
}
[data-carousel] .flickity-prev-next-button::after {
  content: "";
  width: 36%;
  height: 36%;
  position: absolute;
  left: 22%;
  top: 32%;
  border-left: 1px solid var(--swiper-button-chevron-color);
  border-bottom: 1px solid var(--swiper-button-chevron-color);
  transform: rotate(225deg);
  transition: border-color 0.2s ease;
}
[data-carousel] .flickity-prev-next-button.previous::after {
  left: auto;
  right: 22%;
  transform: rotate(45deg);
}
[data-carousel] .flickity-prev-next-button:hover {
  border-color: var(--swiper-button-border-color-hover);
}
[data-carousel] .flickity-prev-next-button:hover::after {
  border-left-color: var(--swiper-button-chevron-color-hover);
  border-bottom-color: var(--swiper-button-chevron-color-hover);
}

/* ---- Section-level show/hide modifiers (these classes live on the
        block root, an ancestor of [data-carousel]) ---- */
.hide-dots-section .swiper-pagination {
  display: none;
}

.hide-arrows-section .carousel-controls {
  display: none;
}