/* Compiled from pb-components.scss — edit the .scss, not this file. */
.pb-button {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-sizing: border-box;
}
.pb-button .pb-button-text {
  white-space: normal;
}

.pb-listing-items.owl-carousel .owl-stage {
  display: flex;
}
.pb-listing-items.owl-carousel .owl-item {
  display: flex;
}
.pb-listing-items.owl-carousel .owl-item > .pb-listing-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pb-listing-items.owl-carousel .owl-item > .pb-listing-item > * {
  flex: 1;
}

/* Swiper — the recommended slider library (see the Page Builder guide's Sliders section). Its own
   base stylesheet gives every .swiper-slide height:100%: a PERCENTAGE, not the literal auto keyword,
   so a flex item's align-items:stretch (.swiper-wrapper is display:flex, so this is the default)
   never gets to act on it — stretch only ever overrides a cross-size that computes to auto. Slides
   with different content heights (one card's text wrapping to an extra line) sat at their own
   intrinsic height instead of matching the tallest one. Overriding it to auto here, once, is what
   makes that stretch happen — nowhere else in this file touches a Swiper's own classes, since every
   Swiper instance is markup the page author wrote themselves in the Listing's Item Template.
   Slide-by-slide sizing, navigation and pagination positioning still belongs to that page's own
   stylesheet — this is only the one behaviour that should be the same everywhere.
   Two classes, not one: Swiper's own rule is exactly as specific as a bare .swiper-slide would be,
   and which of the two stylesheets happens to load second is not something to depend on. */
.swiper .swiper-slide {
  height: auto;
}

.pb-section > .row,
.pb-section > .pb-content > .row {
  margin-inline: 0 0;
}

/* The row's own negative margins are zeroed above so it stops overflowing, but each column still
   carries its own Bootstrap gutter padding, and nothing cancels THAT against the section's edge -
   so the first and last column started a half-gutter shy of it, and a "Full" content-width section
   with a full-bleed background could never actually reach true edge-to-edge. Column-to-column
   gutters are untouched: an author asking for space between multiple columns has the explicit
   Column Gap field for that, so nothing here removes it. */
.pb-section > .row.pb-cols > [class*="col-"]:first-child,
.pb-section > .pb-content > .row.pb-cols > [class*="col-"]:first-child {
  padding-inline-start: 0;
}
.pb-section > .row.pb-cols > [class*="col-"]:last-child,
.pb-section > .pb-content > .row.pb-cols > [class*="col-"]:last-child {
  padding-inline-end: 0;
}

/* ---- Long unbroken text ----
   One token with no break opportunity (a URL, a hash, an ID, a compound word) used to widen the
   whole document and put a horizontal scrollbar on the page at any narrow viewport: nothing says
   how such a token may break, and a grid column's min-width:auto refuses to shrink below its
   content. break-word breaks only what cannot fit and leaves prose alone. */
.pb-section {
  overflow-wrap: break-word;
}
.pb-section > .row > [class*="col-"],
.pb-section > .pb-content > .row > [class*="col-"] {
  min-width: 0;
}

/* ---- Full Bleed vs. the scrollbar ----
   A "Full Bleed" section computes its width from 100vw (BuildSectionStyle), which is the width of
   the whole viewport INCLUDING a vertical scrollbar's own track - not the narrower area content
   actually has to lay out in. So on any page tall enough to scroll, every full-bleed section already
   measured a few pixels wider than the visible page, which is itself enough to force the vertical
   scrollbar that then widens 100vw further, and self-perpetuates from there. This is the general
   case of the "long unbroken text" bug fixed above - that fix stops one specific TRIGGER (a token
   wide enough to force a first scrollbar); a page can still gain its first scrollbar from ordinary
   height alone, and 100vw does not know the difference. Clipping horizontal overflow at the root is
   the standard pairing for this technique: nothing legitimate on a Page Builder page is ever meant to
   extend past 100vw, so there is nothing here for this to hide by mistake. */
/* `clip`, not `hidden`: `hidden` makes the root element a scroll container, and once the root
   scrolls, an `overflow` the page sets on <body> (the cookie disclaimer's `.pluginFixed` lock, say)
   no longer propagates to the viewport - it makes BODY a second scroll container instead, one that
   never scrolls. Anything inside then resolves `animation-timeline: view()/scroll()` against that
   dead scroller and freezes at 0%, so scroll-driven animations authored in the builder never ran on
   the live page. `clip` clips exactly the same overflow without becoming a scroll container. */
html {
  overflow-x: hidden; /* fallback for browsers without `overflow: clip` */
  overflow-x: clip;
}

/* A section whose Layout tab makes it a flex container turns .pb-content into a flex item, and a
   flex item will not shrink below its content's min-content width unless allowed to - so a form or
   a table inside overflowed the section and scrolled the page sideways. */
.pb-section > .pb-content {
  min-width: 0;
  max-width: 100%;
}

/* ---- HTML Block ----
   A list typed into the HTML Block came out unmarked: themes commonly reset ul{list-style:none}
   for their navigation and the reset reaches authored content too. */
.pb-text-editor ul,
.pb-text-editor ol {
  list-style: revert;
  padding-inline-start: 1.35em;
  margin-block: 0.5em;
}
.pb-text-editor li {
  list-style: inherit;
}

/* ---- Heading ----
   As with the Button: Text Color and Transform are painted on the WRAPPER and inherited, so a theme
   rule on the tag itself (this site colours and capitalises every h4) beat them and both fields
   looked dead on those tags. */
.pb-heading {
  color: inherit;
  text-transform: inherit;
}

.pb-listing {
  --pb-l-accent: var(--pb-accent, #d74114);
  --pb-l-ink: var(--pb-ink, #1e293b);
  --pb-l-muted: var(--pb-ink-soft, #64748b);
  --pb-l-line: var(--pb-border, #e2e8f0);
}

.pb-listing-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pb-listing-title {
  margin: 0;
  line-height: 1.25;
}

.pb-listing-subtitle {
  margin: 6px 0 0;
  font-weight: 400;
  color: var(--pb-l-muted);
}

.pb-listing-intro {
  margin-bottom: 16px;
  color: var(--pb-l-muted);
}

.pb-listing-intro-bottom {
  margin: 16px 0 0;
}

.pb-listing-items {
  display: block;
}

.pb-listing-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}

.pb-listing-pager .pb-pager-num,
.pb-listing-pager .pb-pager-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--pb-l-line);
  border-radius: 8px;
  color: var(--pb-l-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.pb-listing-pager a.pb-pager-num:hover,
.pb-listing-pager a.pb-pager-step:hover {
  border-color: var(--pb-l-accent);
  color: var(--pb-l-accent);
  text-decoration: none;
}

.pb-listing-pager .pb-pager-num.is-current {
  background: var(--pb-l-accent);
  border-color: var(--pb-l-accent);
  color: #fff;
  cursor: default;
}

.pb-listing-more {
  margin-top: 24px;
  text-align: center;
}

.pb-listing-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 26px;
  border: 1px solid var(--pb-l-accent);
  border-radius: 999px;
  color: var(--pb-l-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.pb-listing-more-btn:hover {
  background: var(--pb-l-accent);
  color: #fff;
  text-decoration: none;
}

.pb-listing-viewall {
  font-weight: 600;
}

.pb-listing-viewall-bottom {
  margin-top: 22px;
  text-align: center;
}

.pb-listing-viewall a {
  color: var(--pb-l-accent);
  text-decoration: none;
}

.pb-listing-viewall a:hover {
  text-decoration: underline;
}

.pb-listing-empty {
  padding: 30px 20px;
  border: 1px dashed var(--pb-l-line);
  border-radius: 12px;
  color: var(--pb-l-muted);
  text-align: center;
}

/* The Listing renders per-item templates as a real <ul>. These strip the list look while
   leaving the semantics, so Bootstrap grid classes lay the items out exactly as before. */
.pb-listing-plain{list-style:none;margin:0;padding:0}
.pb-listing-plain>li{list-style:none}


/* ---- Grid breakpoints ----
   grid-reset.css is a Bootstrap 3 grid (col-sm at 768, col-md at 992, col-lg at 1200) and loads
   after Bootstrap, so the col-sm-12 the builder always emits was re-asserted at full width from
   768px up and beat col-md-*: every builder column went full width on tablets, unlike the canvas.
   Restated at Bootstrap's breakpoints, scoped to the builder's own column track. */

@media (min-width: 768px) {
  .pb-cols > .col-md-1 { width: 8.33333333%; float: none; }
  .pb-cols > .col-md-2 { width: 16.66666667%; float: none; }
  .pb-cols > .col-md-3 { width: 25%; float: none; }
  .pb-cols > .col-md-4 { width: 33.33333333%; float: none; }
  .pb-cols > .col-md-5 { width: 41.66666667%; float: none; }
  .pb-cols > .col-md-6 { width: 50%; float: none; }
  .pb-cols > .col-md-7 { width: 58.33333333%; float: none; }
  .pb-cols > .col-md-8 { width: 66.66666667%; float: none; }
  .pb-cols > .col-md-9 { width: 75%; float: none; }
  .pb-cols > .col-md-10 { width: 83.33333333%; float: none; }
  .pb-cols > .col-md-11 { width: 91.66666667%; float: none; }
  .pb-cols > .col-md-12 { width: 100%; float: none; }
}

@media (min-width: 992px) {
  .pb-cols > .col-lg-1 { width: 8.33333333%; float: none; }
  .pb-cols > .col-lg-2 { width: 16.66666667%; float: none; }
  .pb-cols > .col-lg-3 { width: 25%; float: none; }
  .pb-cols > .col-lg-4 { width: 33.33333333%; float: none; }
  .pb-cols > .col-lg-5 { width: 41.66666667%; float: none; }
  .pb-cols > .col-lg-6 { width: 50%; float: none; }
  .pb-cols > .col-lg-7 { width: 58.33333333%; float: none; }
  .pb-cols > .col-lg-8 { width: 66.66666667%; float: none; }
  .pb-cols > .col-lg-9 { width: 75%; float: none; }
  .pb-cols > .col-lg-10 { width: 83.33333333%; float: none; }
  .pb-cols > .col-lg-11 { width: 91.66666667%; float: none; }
  .pb-cols > .col-lg-12 { width: 100%; float: none; }
}

@media (min-width: 1200px) {
  .pb-cols > .col-xl-1 { width: 8.33333333%; float: none; }
  .pb-cols > .col-xl-2 { width: 16.66666667%; float: none; }
  .pb-cols > .col-xl-3 { width: 25%; float: none; }
  .pb-cols > .col-xl-4 { width: 33.33333333%; float: none; }
  .pb-cols > .col-xl-5 { width: 41.66666667%; float: none; }
  .pb-cols > .col-xl-6 { width: 50%; float: none; }
  .pb-cols > .col-xl-7 { width: 58.33333333%; float: none; }
  .pb-cols > .col-xl-8 { width: 66.66666667%; float: none; }
  .pb-cols > .col-xl-9 { width: 75%; float: none; }
  .pb-cols > .col-xl-10 { width: 83.33333333%; float: none; }
  .pb-cols > .col-xl-11 { width: 91.66666667%; float: none; }
  .pb-cols > .col-xl-12 { width: 100%; float: none; }
}

/* The Listing's chrome took the brand accent with no v1 way to change it. It now follows the
   component's own Text Color when set (--pb-comp-color, emitted beside color) and falls back to
   the site accent otherwise. */
.pb-listing {
  --pb-l-accent: var(--pb-comp-color, var(--pb-accent, #d74114));
}