/* Hide filters + results count */
#featured #public-inventory-filters,
#featured .listing-filters,
#featured .listing-filters-toggle,
#featured .listing-filters-backdrop,
#featured .results-header {
  display: none !important;
}

/* Full width container */
#featured .listings,
#featured .listings-container,
#featured .inventory-container {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  justify-self: stretch !important;
}

/* Keep the embed centered within the page */
#featured,
#featured .ic-hosted-site.ic-inventory.listings-container,
#featured .inventory-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
}

#featured .elementor-widget-container,
#featured .elementor-widget-html,
#featured .elementor-widget-wrap,
#featured .elementor-element {
  background: transparent !important;
}

/* Force the inventory container to span the full grid/row */
#featured .inventory-container {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  position: relative;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
}

#featured .inventory-container::before,
#featured .inventory-container::after {
  background: transparent !important;
}

/* Avoid the embed wrapper constraining width */
#featured .ic-hosted-site.ic-inventory.listings-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Carousel base */
#featured .listing-cards,
#featured .listing-cards.ready.grid-view.carousel-auto {
  /* Carousel base */
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: 320px !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  inline-size: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 100% !important;
  flex: 1 1 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: start !important;
  align-content: start !important;
  height: auto !important;
  min-height: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding: 0 40px !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 40px 8px !important;
  margin: 0 auto !important;
  justify-content: start !important;
  background: transparent !important;
}

/* Keep card content left-aligned even if container centers */
#featured .listing-card,
#featured .listing-card * {
  text-align: left !important;
}

/* Ensure cards fill the carousel column width */
#featured .listing-card {
  width: 100% !important;
}

/* Keep CTA text centered */
#featured .listing-card .btn,
#featured .listing-card .btn-primary,
#featured .listing-card .btn-primary-dark {
  text-align: center !important;
}

/* Hide location metadata */
#featured .listing-card .card-metadata-section {
  display: none !important;
}

/* Keep card heights uniform by fixing the title row height */
#featured .listing-card .card-title-section {
  min-height: 3rem !important;
}

/* Match inventory card image behavior (no crop) */
#featured .listing-card-image-container img,
#featured .listing-card-image {
  object-fit: contain;
  background: #f2f2f2;
}

#featured .listing-card:hover .listing-card-image {
  transform: none;
}

#featured .listing-cards.grid-view .listing-card-image-container {
  aspect-ratio: 239 / 211;
}

#featured .listing-cards.grid-view .listing-card-image-container .ratio {
  --bs-aspect-ratio: 88.3%;
}

/* Hide per-card image slider arrows */
#featured .listing-card-image-container .listing-card-nav {
  display: none !important;
}

/* Home only: hide image indicators/dots, keep them on other pages */
body.home #featured .listing-card-image-container .position-absolute.bottom-0.start-50.translate-middle-x,
body.home #featured .listing-card-indicator {
  display: none !important;
}

/* Align attribute labels left and values right */
#featured .attributes-section .spec-item {
  display: flex !important;
  justify-content: space-between !important;
}

#featured .attributes-section .spec-label {
  text-align: left !important;
}

#featured .attributes-section .spec-value {
  text-align: right !important;
  margin-left: auto !important;
}

/* Mobile nav buttons */
#featured .carousel-nav {
  display: none;
  gap: 8px;
  justify-content: center;
  margin: 8px auto 0;
}

#featured .carousel-nav button {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #111;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Remove plugin background panels but keep card styling intact */
#featured .inventory-container .results-header,
#featured .inventory-container .listing-cards,
#featured .inventory-container .listing-cards.ready.grid-view.carousel-auto {
  background: transparent !important;
}

/* Hide Load More button */
#featured .inventory-container .d-flex.justify-content-center.mt-4.mb-4 {
  display: none !important;
}

/* Trim extra space below the grid */
#featured .inventory-container,
#featured .ic-hosted-site.ic-inventory.listings-container,
#featured .listing-cards {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide scrollbar while keeping scrollability */
#featured .listing-cards::-webkit-scrollbar {
  height: 0;
}

#featured .listing-cards,
#featured .listing-cards.ready.grid-view.carousel-auto {
  scrollbar-width: none;
}

/* Auto-rotate (requires --carousel-count to be set) */
#featured .listing-cards[data-carousel="auto"] {
  --carousel-gap: 12px;
  --carousel-card: 260px;
  --carousel-step: calc(var(--carousel-card) + var(--carousel-gap));
  --carousel-duration: calc(var(--carousel-count) * 3s);
  animation: featured-carousel var(--carousel-duration) linear infinite;
  scroll-snap-type: none !important;
}

@keyframes featured-carousel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--carousel-step) * (0 - var(--carousel-count))));
  }
}

/* Pause on hover/focus */
#featured .listing-cards[data-carousel="auto"]:hover,
#featured .listing-cards[data-carousel="auto"]:focus-within {
  animation-play-state: paused;
}

/* Responsive sizing */
@media (max-width: 560px) {
  #featured .listing-cards {
    scroll-padding: 0 16px !important;
    padding: 0 16px 8px !important;
    justify-content: start !important;
  }

  #featured .listing-card {
    scroll-margin-left: 16px !important;
  }

  #featured .carousel-nav {
    display: flex;
    position: static;
    transform: none;
    flex-direction: row;
    pointer-events: auto;
  }
}

.buttons-row {
  --cut-bg: #f2f2f2;
  --cut-accent: rgba(255, 255, 255, 0.55);
  --cut-shadow: rgba(0, 0, 0, 0.18);
  --cut-slope: 4%;
  --cut-seam: #ffffff;
  --cut-seam-width: 3px;
  position: relative;
  z-index: 10;
}

.slant-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateZ(0);
  transition: box-shadow 220ms ease, filter 220ms ease;
}

/* Trapezoid shapes that meet at a diagonal seam */
.slant-left {
  clip-path: polygon(0 0, calc(100% - var(--cut-slope)) 0, 100% 100%, 0 100%);
}

.slant-right {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut-slope) 100%);
}

/* White diagonal seam between the two buttons */
.buttons-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cut-seam-width);
  height: 100%;
  background: var(--cut-seam);
  transform: translateX(-50%) skewX(25deg);
  z-index: 6;
  pointer-events: none;
}

/* Keep both cards below the shared cutout */
.slant-left,
.slant-right {
  z-index: 2;
}

.slant-card > * {
  position: relative;
  z-index: 4;
}

.slant-left::after {
  box-shadow:
    -1px 0 0 rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

/* Elevate the cutout buttons */
.slant-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 45%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.slant-card:hover {
  filter: brightness(1.03);
  box-shadow:
    0 16px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.slant-card:focus-within {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.hero-shape {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 55%;
}

/* left shape, desktop */
.hero-shape-left {
  clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
  opacity: 0.85;
}

/* right shape, desktop */
.hero-shape-right {
  left: auto;
  right: 0;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

/* tablet */
@media (max-width: 1024px) {
  .hero-shape {
    width: 70%;
  }
  .hero-shape-left {
    clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
  }
  .hero-shape-right {
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* mobile */
@media (max-width: 767px) {
  .hero-shape {
    position: relative;
    width: 100%;
    height: auto;
    clip-path: none;
  }
}