/* =============================================================================
   Sunrise Auto Sales — page-level composition
   =============================================================================
   Homepage hero, inventory listing, vehicle detail, forms and content pages.
   Depends on tokens from sunrise.css.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Homepage hero slider
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink-950);
  color: var(--white);
  overflow: hidden;
}

/* All slides occupy the same grid cell, so the track is exactly as tall as its
   tallest slide. Absolutely positioning the slides instead would decouple the
   track height from the content and clip long headlines. */
.hero__track {
  position: relative;
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-in-out),
    visibility var(--duration-slow);
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* The photo fills the frame; a gradient scrim keeps the headline legible over
   whatever the vehicle photo happens to look like. */
.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink-900);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(11, 14, 19, 0.94) 0%,
      rgba(11, 14, 19, 0.82) 34%,
      rgba(11, 14, 19, 0.35) 62%,
      rgba(11, 14, 19, 0.15) 100%
    );
}

@media (max-width: 768px) {
  /* On narrow screens the text sits over the middle of the photo, so the scrim
     runs vertically instead of diagonally. Kept lighter at the top so the
     vehicle stays visible — the earlier values rendered it almost solid black. */
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(11, 14, 19, 0.35) 0%,
      rgba(11, 14, 19, 0.62) 45%,
      rgba(11, 14, 19, 0.88) 100%
    );
  }

  /* Anchor the photo's subject rather than its centre: vehicle shots put the
     car in the middle, which a tall narrow crop would otherwise cut off. */
  .hero__media img {
    object-position: center 40%;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  /* Tall enough to feel cinematic, capped so it never eats a laptop screen.
     Extra bottom padding leaves room for the absolutely-positioned controls. */
  min-height: clamp(500px, 74vh, 720px);
  padding-block: var(--space-16) var(--space-24);
}

@media (max-width: 640px) {
  .hero__inner {
    min-height: clamp(440px, 62vh, 560px);
    padding-block: var(--space-10) var(--space-16);
  }
}

.hero__content {
  max-width: 620px;
}

.hero__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--red-500);
  line-height: 1;
}

.hero__price small {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-300);
  letter-spacing: 0;
}

/* Slider headlines are editorial copy entered by staff ("Truck Sale | Powerful
   & Reliable | Easy Financing Available"), not short vehicle names, so this
   runs a step below the global display scale and caps its own width. At the
   larger --text-4xl/5xl sizes a real headline wraps to five lines and swamps
   the frame. */
.hero__title {
  /* Set explicitly rather than inherited from the h1 rule: only the first
     slide is an <h1>, the rest are <p> so the page has a single top-level
     heading. Both must look identical. */
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 3rem);
  line-height: 1.1;
  color: var(--white);
  margin-top: var(--space-4);
  max-width: 16ch;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .hero__title { max-width: none; }
}

.hero__desc {
  font-size: var(--text-lg);
  color: var(--ink-300);
  margin-top: var(--space-5);
  max-width: 52ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}

.hero__meta .icon {
  width: 16px;
  height: 16px;
  color: var(--red-500);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Slider controls ----------------------------------------------------------- */

.hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-8);
  z-index: 3;
}

.hero__controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.hero__dots {
  display: flex;
  gap: var(--space-2);
}

.hero__dot {
  width: 36px;
  height: 4px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.28);
  transition: background-color var(--duration) var(--ease-out),
    width var(--duration) var(--ease-out);
}

.hero__dot.is-active {
  width: 56px;
  background: var(--red-500);
}

.hero__arrows {
  display: flex;
  gap: var(--space-2);
}

.hero__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.hero__arrow:hover {
  background: var(--red-500);
  border-color: var(--red-500);
}

@media (max-width: 640px) {
  .hero__arrows { display: none; }
  .hero__controls-inner { justify-content: center; }
  /* Buttons stack full-width on mobile and would otherwise collide with the
     absolutely-positioned dots. */
  .hero__controls { bottom: var(--space-5); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* -----------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  background: var(--ink-900);
  color: var(--white);
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-item:last-child {
  border-right: none;
}

.trust-item .icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  color: var(--red-500);
  background: rgba(216, 39, 28, 0.14);
  border-radius: var(--radius);
  flex: none;
}

.trust-item h3 {
  font-size: var(--text-base);
  color: var(--white);
}

.trust-item p {
  font-size: var(--text-xs);
  color: var(--ink-400);
  margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   Inventory filters
   -------------------------------------------------------------------------- */

.filters {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.filters__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.filters__search {
  position: relative;
  margin-top: var(--space-4);
}

.filters__search .icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}

.filters__search .input {
  padding-left: var(--space-12);
}

.filters__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.filters__count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.filters__count strong {
  color: var(--text);
  font-weight: 700;
}

/* Grid / list view toggle ---------------------------------------------------- */

.view-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--ink-100);
  border-radius: var(--radius);
}

.view-toggle button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.view-toggle button[aria-pressed="true"] {
  background: var(--white);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------------------------
   Vehicle detail page
   -------------------------------------------------------------------------- */

.detail-layout {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
}

/* Grid items default to `min-width: auto`, so they refuse to shrink below their
   content's intrinsic width. The gallery thumbnail strip is a horizontally
   scrolling row 26 items wide, which would otherwise stretch this column by
   thousands of pixels instead of scrolling inside it. */
.detail-layout > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Gallery -------------------------------------------------------------------- */

.gallery__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-100);
}

.gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__badges {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 2;
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-800);
  box-shadow: var(--shadow);
  z-index: 2;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.gallery__nav:hover {
  background: var(--accent);
  color: var(--white);
}

.gallery__nav--prev { left: var(--space-4); }
.gallery__nav--next { right: var(--space-4); }

.gallery__zoom {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--white);
  background: rgba(11, 14, 19, 0.7);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  z-index: 2;
}

.gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 110px;
  gap: var(--space-3);
  margin-top: var(--space-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
}

.gallery__thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  scroll-snap-align: start;
  transition: border-color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  opacity: 0.65;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb[aria-current="true"] {
  border-color: var(--accent);
  opacity: 1;
}

/* Lightbox ------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: rgba(11, 14, 19, 0.94);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox img {
  max-width: min(1400px, 94vw);
  max-height: 88vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: none;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--accent);
}

.lightbox__close { top: var(--space-6); right: var(--space-6); }
.lightbox__nav--prev { left: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-6); top: 50%; transform: translateY(-50%); }

.lightbox__counter {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-sm);
  color: var(--ink-300);
}

@media (max-width: 640px) {
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: var(--space-2); }
  .lightbox__nav--next { right: var(--space-2); }
}

/* Detail header -------------------------------------------------------------- */

.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.detail-head__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.detail-head h1 {
  font-size: var(--text-3xl);
}

.detail-head__sub {
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Highlight tiles ------------------------------------------------------------ */

.highlights {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  margin-block: var(--space-8);
}

.highlight {
  padding: var(--space-5);
  text-align: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.highlight .icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  margin: 0 auto var(--space-3);
}

.highlight dt {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.highlight dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-1);
}

/* Sticky purchase panel ------------------------------------------------------ */

.buy-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (max-width: 1024px) {
  .buy-panel { position: static; }
}

.price-card {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.price-card__was {
  font-size: var(--text-base);
  color: var(--ink-400);
  text-decoration: line-through;
}

.price-card__now {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-1);
}

.price-card__note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.price-card__save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--green-500);
  background: var(--green-050);
  border-radius: var(--radius-full);
}

.price-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.price-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.price-card__contact a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-700);
  transition: color var(--duration-fast) var(--ease-out);
}

.price-card__contact a:hover {
  color: var(--accent);
}

.price-card__contact .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* Payment estimate ----------------------------------------------------------- */

.estimate {
  padding: var(--space-6);
  background: var(--ink-950);
  color: var(--white);
  border-radius: var(--radius-lg);
}

.estimate h3 {
  color: var(--white);
  font-size: var(--text-base);
}

.estimate__figure {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--red-500);
  margin-block: var(--space-3) var(--space-1);
}

.estimate__figure small {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-400);
}

.estimate__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.estimate__control label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--ink-300);
  margin-bottom: var(--space-2);
}

.estimate__control output {
  font-weight: 700;
  color: var(--white);
}

.estimate input[type="range"] {
  width: 100%;
  accent-color: var(--red-500);
  cursor: pointer;
}

.estimate__note {
  font-size: 0.6875rem;
  color: var(--ink-500);
  margin-top: var(--space-4);
  line-height: 1.5;
}

/* Detail sections ------------------------------------------------------------ */

.detail-section {
  padding-top: var(--space-10);
  margin-top: var(--space-10);
  border-top: 1px solid var(--border);
}

.detail-section > h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
}

/* -----------------------------------------------------------------------------
   Forms and content pages
   -------------------------------------------------------------------------- */

.form-card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  gap: var(--space-5);
}

.form-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  padding-bottom: var(--space-3);
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* Inline status message shown after an async form submit. */
.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
}

.form-status--ok {
  color: var(--green-500);
  background: var(--green-050);
}

.form-status--error {
  color: var(--red-700);
  background: var(--red-050);
}

/* Long-form content ---------------------------------------------------------- */

.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.prose h3 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p,
.prose ul,
.prose ol {
  margin-bottom: var(--space-4);
  color: var(--ink-700);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
}

.prose ul li {
  list-style: disc;
  margin-bottom: var(--space-2);
}

.prose ol li {
  list-style: decimal;
  margin-bottom: var(--space-2);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose > *:first-child {
  margin-top: 0;
}

/* Accordion (FAQ) ------------------------------------------------------------ */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion__item[open] {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

/* Hide the native disclosure triangle in both engines. */
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }

.accordion__summary:hover {
  color: var(--accent);
}

.accordion__summary .icon {
  color: var(--ink-400);
  transition: transform var(--duration) var(--ease-out);
}

.accordion__item[open] .accordion__summary .icon {
  transform: rotate(180deg);
}

.accordion__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Testimonials --------------------------------------------------------------- */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  height: 100%;
}

.testimonial__quote {
  color: var(--ink-200);
  line-height: 1.75;
  flex: 1;
}

.testimonial__stars {
  display: flex;
  gap: 2px;
  color: #f5a623;
}

.testimonial__stars svg {
  width: 16px;
  height: 16px;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.testimonial__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-family: var(--font-display);
  flex: none;
}

.testimonial__name {
  font-weight: 700;
  color: var(--white);
  font-size: var(--text-sm);
}

.testimonial__place {
  font-size: var(--text-xs);
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Stats ---------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.stat {
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.section--dark .stat__label {
  color: var(--ink-400);
}

/* Pagination ----------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink-700);
  transition: border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination [aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.pagination .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}