.your-custom-prev-icon, .your-custom-next-icon {
    font-size: 24px; /* Size of the arrow */
    color: #333; /* Color of the arrow */
  }
  
  /* Additional styles for positioning and appearance */
  .slick-prev, .slick-next {
    /* z-index left to style.css (9); this file was never linked until
       2026-09-22, and a 1 here would push the arrows behind the slides. */
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translate(0, -50%);
    background-color: #fff; /* Arrow background color */
    border-radius: 15px; /* Makes it circular, remove if you don't want this */
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Optional shadow */
  }
  
  /* .slick-prev {
    left: -1%;
  }
  
  .slick-next {
    right: -1%;
  } */
  
/* --- Compact sticky header -------------------------------------------------
   main.js (section 36) toggles .sticky-active on .ltn__header-sticky past
   445px of scroll. Only the pinned state is affected; the header at the top of
   the page keeps its full size. Sticky is already disabled under 992px by
   style.css (.sticky-active { position: inherit }), so this is desktop-only.
   Height knobs: the logo cap and the menu-link vertical padding. ----------- */
.ltn__header-5 .ltn__header-middle-area.sticky-active {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* style.css has no rule sizing the logo, so the 970x204 png renders ~75px
   tall and drives the whole bar's height. width:auto keeps the aspect ratio
   (.site-logo a is display:contents, so the img is a direct flex child). */
.ltn__header-5 .ltn__header-middle-area.sticky-active .site-logo img {
  max-height: 40px;
  width: auto;
}

.ltn__header-5 .ltn__header-middle-area.sticky-active .ltn__main-menu > ul > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Mobile: iOS input zoom -------------------------------------------------
   Safari zooms the whole page when a focused field is under 16px. style.css
   already sets 16px on input[type=text|email|password] (:1090), but the bare
   search input and jQuery niceSelect's rendered .nice-select are 14px, so
   tapping either on the Properties or Contact page zooms the layout and the
   visitor has to pinch back out. --------------------------------------------- */
@media (max-width: 767px) {
  /* !important on purpose. This is a guard, not styling: anything under 16px makes Safari zoom
     the page on focus, and the template has more specific rules that would otherwise win
     (.input-item .nice-select and .ltn__search-widget's input are both 0,2,0 against a bare
     element selector, and a media query adds no specificity). */
  input,
  select,
  textarea,
  .nice-select,
  .nice-select .current,
  .nice-select .list,
  .nice-select .option {
    font-size: 16px !important;
  }
}

/* --- Mobile: tap targets ----------------------------------------------------
   Apple and Android both put the floor at ~44px. The template's .btn sits
   under it, and FullCalendar's prev/next/today controls on the property page
   are smaller still -- those matter most, since the calendar is the thing
   renters are trying to use. ------------------------------------------------- */
@media (max-width: 767px) {
  .btn,
  .theme-btn-1,
  .theme-btn-2,
  button[type="submit"],
  input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .fc .fc-button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Drawer nav: these are the primary navigation on a phone. */
  .ltn__utilize-menu ul li a,
  .ltn__utilize-close,
  .mobile-menu-toggle > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .ltn__social-media a,
  .ltn__social-media-2 a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Responsive images ------------------------------------------------------
   Images now carry width/height attributes (so the browser can reserve space
   and avoid layout shift). Those attributes are presentational hints, so
   without an explicit height:auto the attribute height wins over the scaled
   width and the picture ends up letterboxed inside its own box.
   This applies at every width, not just mobile. ----------------------------- */
.product-image,
.slider-image,
.gallery-image,
.site-logo img {
  max-width: 100%;
  height: auto;
}

/* Listing cards look ragged when each photo keeps its own aspect ratio, and
   style.css:210 sets object-fit:contain with no box to fit into. Give the card
   photo a fixed frame and fill it. */
.ltn__product-item-4 .product-img img,
.ltn__product-item-5 .product-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Mobile: vertical rhythm ------------------------------------------------
   The template's spacing was drawn for a desktop canvas and has no mobile
   override anywhere, so a phone inherits it verbatim: 300px of padding above
   the hero copy, 205px between the Featured Listings heading and the cards,
   92px above the footer. That is several screens of empty space to scroll
   past before reaching anything. ------------------------------------------- */
@media (max-width: 767px) {
  .pt-115 { padding-top: 60px; }
  .pt-120 { padding-top: 60px; }
  .pb-90  { padding-bottom: 45px; }
  .pb-100 { padding-bottom: 50px; }
  .pb-65  { padding-bottom: 35px; }
  .mb-120 { margin-bottom: 60px; }
  .mb-100 { margin-bottom: 50px; }
  .mb-90  { margin-bottom: 45px; }
  .mb-60  { margin-bottom: 30px; }

  .footer-top-area { padding-top: 48px; }

  /* Hero: style.css:7840 pins it to calc(100vh) with 200px of top padding.
     100vh is also the wrong unit on iOS - it is the height with the address
     bar hidden, so the bottom is cut off until you scroll. dvh tracks the
     visible viewport. */
  .ltn__slide-item,
  .ltn__slide-item-2 {
    height: auto;
    min-height: 70dvh;
    padding-top: 110px;
    padding-bottom: 60px;
  }

  .ltn__slide-item-2 .slide-item-info { max-width: 100%; }

  /* Two justified columns of body text in ~340px is unreadable. */
  .description-container {
    column-count: 1;
    column-rule: none;
    text-align: left;
  }
}

/* --- Mobile: off-canvas drawer ---------------------------------------------
   style.css:6729 fixes the drawer at 400px with a single 300px override below
   479px, so 480-767px gets a 400px panel - most of the screen on a large
   phone, with no way to see what is behind it. --------------------------- */
@media (max-width: 991px) {
  .ltn__utilize {
    width: min(86vw, 360px);
  }
}

/* --- Mobile: header ---------------------------------------------------------
   The header is position:absolute over the hero and runs 217px tall on a
   phone: a three-row contact strip plus the logo row. The hero's top padding
   has to clear all of it, so every pixel here costs twice. --------------- */
@media (max-width: 767px) {
  .ltn__header-top-area {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 13px;
  }

  .ltn__top-bar-menu > ul > li {
    line-height: 1.5;
    margin-right: 12px;
  }

  /* The right-hand column of the strip is a language "menu" whose only entry is
     English, plus a Facebook icon that also appears in the drawer and the
     footer. On a phone they stack onto their own row and cost ~50px above the
     fold for nothing new. Desktop keeps both. */
  .ltn__header-top-area .top-bar-right { display: none; }

  .ltn__header-middle-area {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Enough to clear the absolutely-positioned header (see above) without the
     300px the desktop layout used. */
  .ltn__slide-item,
  .ltn__slide-item-2 {
    padding-top: 125px;
  }
}

/* --- Mobile drawer ----------------------------------------------------------
   The drawer is React-controlled (navbar-v3.jsx), not the template's jQuery
   ltn__utilize handler, so none of main.js's overlay/animation applies to it.
   These rules supply the backdrop, the slide-in and the submenu control. --- */
/* Mounted only while the drawer is open (navbar-v3.jsx), so there is no hidden
   state to style here - and no opacity/visibility toggle for the template's
   own rules to fight over. */
.lbi-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 28, 31, 0.55);
  z-index: 1000;
}
/* No fade here on purpose: a CSS animation on this element sat at
   animation-play-state:running and never advanced past its first frame, so the
   backdrop stayed at opacity 0 while covering the page - invisible, but still
   swallowing taps. The template's own animation machinery (WOW/main.js, which
   is re-injected on every route change) is the likely cause. Not worth a fade. */

.ltn__utilize.ltn__utilize-mobile-menu {
  z-index: 1001;
}

/* Expand/collapse control for the Properties submenu. */
.ltn__utilize-menu ul li.menu-icon {
  position: relative;
}

.lbi-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* The template puts a FontAwesome "+" on the link itself (style.css:5795,
   .menu-icon > a::before). It is decorative - tapping it just follows the link -
   so with a real toggle button beside it there were two plus signs. */
.ltn__utilize-menu .menu-icon > a::before {
  content: none;
}



/* --- Properties page filters ------------------------------------------------
   The filter panel renders after the listings in source order, so on a phone
   it landed ~4,200px down the page, past all six properties. Bootstrap order
   utilities pull it to the top on mobile; it collapses so it does not then
   push the listings off-screen instead. --------------------------------- */
.lbi-filter-toggle {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 10px 16px;
  border: 1px solid var(--border-color-13, #e5eaee);
  border-radius: 4px;
  background: var(--white, #fff);
  color: var(--ltn__heading-color, #071c1f);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.lbi-filter-toggle .lbi-filter-count {
  font-weight: 400;
  font-size: 13px;
  color: var(--ltn__paragraph-color, #5c727d);
}

@media (max-width: 991px) {
  /* Scoped to the id, not .ltn__shop-sidebar: the property-details page reuses
     that class for its Information + Calendar panel, which must stay visible. */
  #lbi-shop-filters {
    display: none;
  }

  #lbi-shop-filters.is-open {
    display: block;
    margin-bottom: 30px;
  }
}

/* --- Mobile: page header banner --------------------------------------------
   230px of top padding plus 110px below, to frame a 31px heading. The top
   padding has to clear the absolutely-positioned header (now ~158px on a
   phone), but the rest is decoration that pushes the actual page content most
   of a screen down. ------------------------------------------------------- */
@media (max-width: 767px) {
  .ltn__breadcrumb-area {
    padding-top: 175px;
    padding-bottom: 45px;
  }

  .ltn__breadcrumb-area .page-title {
    font-size: 26px;
  }

  /* Grid/list is a distinction without a difference at one column wide. */
  .ltn__shop-options .ltn__grid-list-tab-menu {
    display: none;
  }
}

/* --- Mobile action bar ------------------------------------------------------
   Fixed call/text/inquire bar on the property pages. env(safe-area-inset-bottom)
   keeps it clear of the iPhone home indicator - which needs viewport-fit=cover
   on the viewport meta tag (see index.html) to report anything but 0. ------ */
.lbi-action-bar {
  display: none;
}

@media (max-width: 991px) {
  .lbi-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    gap: 1px;
    background: var(--border-color-13, #e5eaee);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(7, 28, 31, 0.12);
  }

  .lbi-action-bar__item {
    flex: 1;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--white, #fff);
    color: var(--ltn__heading-color, #071c1f);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }

  .lbi-action-bar__item i {
    font-size: 16px;
    color: var(--ltn__secondary-color, #ff5a3c);
  }

  .lbi-action-bar__item--primary {
    background: var(--ltn__secondary-color, #ff5a3c);
    color: var(--white, #fff);
  }

  .lbi-action-bar__item--primary i {
    color: var(--white, #fff);
  }

  /* Keep the bar from covering the last of the footer. */
  body:has(.lbi-action-bar) .ltn__footer-area {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Property photo gallery -------------------------------------------------
   Counter on the inline strip, plus the full-screen viewer that replaces
   lightcase (see product-slider-v1.jsx). ---------------------------------- */
.lbi-gallery {
  position: relative;
}

.lbi-gallery__counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 28, 31, 0.65);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

.lbi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 17, 19, 0.94);
  padding: 16px;
}

.lbi-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lbi-lightbox__close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.lbi-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.lbi-lightbox__nav--prev { left: 12px; }
.lbi-lightbox__nav--next { right: 12px; }

.lbi-lightbox__counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* On a phone the arrows compete with swiping; swipe is the primary gesture. */
@media (max-width: 600px) {
  .lbi-lightbox__nav { display: none; }
}