/* media (max-width: 991px) — sub-tier of theme-carousel--tablet-1200.css's range. */

.theme-carousel {
  --nav-inset: 0;
}

.theme-carousel__graphic {
  width: 180px;
}

/* position:sticky pins this to the viewport bottom only within .theme-carousel__swiper-wrap (its
   containing block) — not a page-wide fixed bar, it un-sticks once you scroll past that wrapper. */
.theme-carousel__nav {
  position: sticky;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: var(--sp3) 0;
  background: var(--clr-white);
  border-top: 1px solid var(--border-default);
  margin-top: var(--sp11);
}

/* Must stay position:relative (not static) so .theme-carousel__arrow-visual's absolute;inset:0 still
   sizes against this button, not against .theme-carousel__nav (the next positioned ancestor). */
.theme-carousel__arrow,
.theme-carousel__arrow--prev,
.theme-carousel__arrow--next {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp3);
  width: auto;
  height: auto;
  padding: var(--sp2) var(--sp4);
  transform: none;
  top: auto;
  left: auto;
  right: auto;
}

/* Fixed-size flex item, not absolute;inset:0 — otherwise it would stretch to cover the button's new icon+label width. */
.theme-carousel__arrow-visual {
  position: static;
  flex-shrink: 0;
  width: var(--nav-arrow-size);
  height: var(--nav-arrow-size);
}

/* Previous/Next text, always visible here (not a hover reveal) — same
   .theme-carousel__arrow-preview element theme-carousel--tablet-1200.css
   hides at rest, just switched to a plain static flex item instead of an
   absolutely-positioned hover tooltip. Only .theme-carousel__arrow-
   caption ("Prev"/"Next") shows — .theme-carousel__arrow-name (the
   dynamic destination theme name, meant for a hover preview) stays
   hidden, since there's no hover interaction driving it at this
   breakpoint. Every prev/--next-specific position/alignment override from
   theme-carousel.css's base rule needs neutralizing here too, not just
   the generic selector — they're equal specificity, and both would
   otherwise still apply on top of this. */
.theme-carousel__arrow-preview,
.theme-carousel__arrow--prev .theme-carousel__arrow-preview,
.theme-carousel__arrow--next .theme-carousel__arrow-preview {
  display: flex;
  position: static;
  opacity: 1;
  pointer-events: none;
  transform: none;
  width: auto;
  min-width: auto;
  padding-left: 0;
  padding-right: 0;
}

/* The base rule's :hover/:focus-visible variants (higher specificity
   than the rest-state selectors above) still set their own transform —
   translate(0, -50%) — so hovering/focusing the button was shifting the
   now-static, always-visible text. Same selectors, transform:none. */
.theme-carousel__arrow:hover .theme-carousel__arrow-preview,
.theme-carousel__arrow:focus-visible .theme-carousel__arrow-preview,
.theme-carousel__arrow--prev:hover .theme-carousel__arrow-preview,
.theme-carousel__arrow--prev:focus-visible .theme-carousel__arrow-preview,
.theme-carousel__arrow--next:hover .theme-carousel__arrow-preview,
.theme-carousel__arrow--next:focus-visible .theme-carousel__arrow-preview {
  transform: none;
}

/* Markup order is preview (text) then visual (icon) for BOTH buttons —
   fine for next ("Next [icon]"), but prev should read icon-then-text
   ("[icon] Prev"), not text-first. row-reverse flips the visual order
   only, without touching DOM/reading order. */
.theme-carousel__arrow--prev {
  flex-direction: row-reverse;
  padding-right: var(--sp5);
}

/* Vertical line between the two buttons — nav's own flex gap was removed
   above specifically so this line's left/right spacing can be set
   explicitly and equally here (prev's padding-right, next's padding-
   left, same value) instead of one side coming from gap and the other
   from padding, which didn't match (30px vs. 12px) and left the line
   visibly off-center. */
.theme-carousel__arrow--next {
  border-left: 1px solid var(--clr-gray-300) !important;
  padding-left: var(--sp5);
}

.theme-carousel__arrow-name {
  display: none;
}

.theme-carousel__arrow-caption {
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}