:root {
  /* lifted & adapted from Coming Soon page */
  --bb-bg: #efecea;
  --bb-bg-2: #e6e0dc;
  --bb-text: #1f1b1a;
  --bb-accent: #7b6962;
  /* main pink-bronze accent */
  --bb-accent-2: #63534d;
  /* hover shade */
  --bb-border: #d7ceca;
  /* soft border tone */
  --bb-featured-contrast: #d8cfcb;
  --bb-surface-soft: #f3efed;

  /* extras for glass / chip effect sections if needed later */
  --bb-glass: #f8f5f3cc;
  --bb-glass-stroke: #e3d9d5;
  --bb-muted: #6d625e;
}

html,
body {
  scroll-behavior: smooth
}

body {
  background: linear-gradient(-45deg, var(--bb-bg), var(--bb-bg-2), #f7f4f2, #d9d1cc);
  background-size: 400% 400%;
  animation: bbBgMove 12s ease infinite;
  color: var(--bb-text);
}

@keyframes bbBgMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

body {
  background: var(--bb-bg);
  color: var(--bb-text);
}

.navbar {
  background: #fff;
  border-bottom: 1px solid var(--bb-border);
}

.btn-bb {
  background: var(--bb-accent);
  color: #fff;
  border: none;
}

.btn-bb:hover {
  background: var(--bb-accent-2);
  color: #fff;
}

.badge-outline {
  border: 1px solid var(--bb-border);
}

.section {
  padding: 5rem 0;
}

.hero {
  background: linear-gradient(180deg, var(--bb-bg-2), #fff);
  padding: 5rem 0 4rem;
}

.card {
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: 16px;
}

.bb-pill {
  border: 1px solid var(--bb-border);
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
}

footer {
  border-top: 1px solid var(--bb-border);
  background: #fff;
}

.site-footer {
  background: linear-gradient(180deg, #fff, var(--bb-bg));
  border-top: 1px solid var(--bb-border);
  padding: 3rem 0;
}

.site-footer-main {
  display: grid;
  gap: 1.25rem;
}

.site-footer-brand strong {
  font-size: 1.05rem;
  letter-spacing: .2px;
}

.site-footer-tagline {
  margin: .4rem 0 0;
  color: var(--bb-muted);
}

.site-footer-links,
.site-footer-contact {
  display: grid;
  gap: .4rem;
  align-content: start;
}

.site-footer-links a,
.site-footer-contact a,
.site-footer-contact span {
  color: var(--bb-text);
  text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-contact a:hover {
  color: var(--bb-accent);
  text-decoration: underline;
}

.site-footer-bottom {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bb-border);
  color: var(--bb-muted);
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .site-footer-main {
    grid-template-columns: 1.35fr 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding: 2.25rem 0;
  }

  .site-footer-bottom {
    justify-content: flex-start;
    gap: .35rem .9rem;
  }
}

.logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.gallery img {
  border-radius: 16px;
  width: 100%;
  height: auto;
  display: block;
}

.small-muted {
  color: #6c757d;
}

/* Reviews overlay dropdown */
.review-toggle {
  position: relative;
}

.review-panel {
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
}

.review-toggle .btn {
  border-radius: 999px;
}

.object-fit-cover {
  object-fit: cover;
}

.carousel .ratio {
  max-height: 560px;
}

@media (min-width: 992px) {
  .carousel .ratio {
    max-height: 680px;
  }
}

/* This is a generic caption rule, we can leave it */
.carousel-caption {
  background: rgba(0, 0, 0, .45);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.carousel-indicators [data-bs-target] {
  background-color: var(--bb-accent);
}

/* --- Sticky Navbar & Hero Styles Update --- */
body {
  padding-top: 72px;
}

/* offset for fixed navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--bb-border);
}

.hero {
  position: relative;
  padding: 8rem 0 7rem;
  background: url('assets/img/hero-bg.svg') center/cover no-repeat;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}

.hero>.container {
  position: relative;
  z-index: 1;
  color: #fff;
}

.hero .overlay-box {
  display: inline-block;
  background: rgba(0, 0, 0, .45);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.hero .overlay-box .small {
  color: rgba(255, 255, 255, .88);
}

.btn-bb-outline {
  border: 1px solid var(--bb-accent);
  color: #fff;
}

.btn-bb-outline:hover {
  background: var(--bb-accent-2);
  color: #fff;
  border-color: transparent;
}

footer .credits {
  color: #6c757d;
}

footer a.small-link {
  color: #6c757d;
  text-decoration: none;
}

footer a.small-link:hover {
  color: var(--bb-text);
  text-decoration: underline;
}

/* Areas served */
#areas-served {
  background: linear-gradient(180deg, var(--bb-bg), var(--bb-bg-2));
  border-top: 1px solid var(--bb-border);
  border-bottom: 1px solid var(--bb-border);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.areas-served-inline {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

.area-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--bb-border);
  background: #fff;
  color: var(--bb-text);
  font-size: .875rem;
  font-weight: 500;
}

/* Location landing pages */
.location-subhero {
  padding: 5rem 0 2.5rem;
  background: linear-gradient(180deg, var(--bb-bg-2), #fff);
}

.location-landing .card {
  border-radius: 18px;
}

.location-hero-card {
  background: linear-gradient(165deg, #fff, var(--bb-surface-soft));
}

.location-kpi-card {
  border: 1px solid var(--bb-border);
  border-radius: 14px;
  background: #fff;
  padding: 1rem;
}

.location-feature-card {
  background: #fff;
}

.location-map-card {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--bb-border);
}

.location-faq-item+.location-faq-item {
  border-top: 1px solid var(--bb-border);
  padding-top: 1rem;
}

.location-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  padding: .75rem .85rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--bb-border);
  backdrop-filter: blur(8px);
}

.location-mobile-cta .btn {
  width: 100%;
  justify-content: center;
}

/* Featured section band */
#featured {
  padding: 3rem 0 3.5rem;
  /* section padding */
  background: var(--bb-bg);
  /* subtle band to separate sections */
  border-top: 1px solid var(--bb-border);
  border-bottom: 1px solid var(--bb-border);
}

@media (min-width: 768px) {
  #featured {
    padding: 4rem 0 4.5rem;
  }
}

/* Carousel sizing just for this section */
#featured .carousel .ratio {
  max-height: 520px;
}

@media (min-width: 992px) {
  #featured .carousel .ratio {
    max-height: 640px;
  }
}

/* Image fit helpers */
.object-fit-cover {
  object-fit: cover;
}

/* crops to fill (hero style) */
.object-fit-contain {
  /* fits whole image (no crop) */
  object-fit: contain;
  background: #00000012;
  /* soft backdrop if letterboxed */
}

/* Keep indicators on-brand */
#featured .carousel-indicators [data-bs-target] {
  background-color: var(--bb-accent);
}

/* Section title styling */
.section-title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2rem);
  letter-spacing: .3px;
  margin: 0;
}

.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: .75rem auto 0;
  background: var(--bb-accent);
  border-radius: 3px;
}

.section-subtitle {
  margin-top: .5rem;
  color: var(--bb-muted);
  font-size: .975rem;
}

/* Contact section band */
#contact {
  padding: 3rem 0 3.5rem;
  background: var(--bb-bg-2);
  border-top: 1px solid var(--bb-border);
  border-bottom: 1px solid var(--bb-border);
}

@media (min-width: 768px) {
  #contact {
    padding: 4rem 0 4.5rem;
  }
}

#contact .map-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bb-border);
}

/* Opening times */
.opening-wrap {
  margin-top: 1.75rem;
}

.opening-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: 12px;
  overflow: hidden;
}

.opening-table thead th {
  background: var(--bb-accent);
  /* soft bronze/mauve header */
  color: #fff;
  font-weight: 600;
  padding: .6rem .8rem;
  text-align: left;
  white-space: nowrap;
}

.opening-table tbody td {
  padding: .6rem .8rem;
  color: #333;
  background: #f7f4f2;
  /* light row like your screenshot */
}

.opening-table thead th+th,
.opening-table tbody td+td {
  border-left: 1px solid var(--bb-border);
}

.info-box {
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: 12px;
}

/* Contact layout polish */
#contact .contact-card,
#contact .info-box {
  border: 1px solid var(--bb-border);
  border-radius: 16px;
}

#contact .map-card {
  border: 1px solid var(--bb-border);
  border-radius: 16px;
  overflow: hidden;
}

#contact .map-card .ratio {
  /* keeps map tidy */
  max-height: 520px;
}

/* Centered titles inside contact cards */
#contact .card-title {
  text-align: center;
  font-weight: 700;
  margin: 0 0 .75rem;
}

#contact .card-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: .5rem auto 0;
  background: var(--bb-accent);
  border-radius: 3px;
}

/* Base navbar (your requested solid colour) */
.navbar {
  background: var(--bb-bg-2);
  border-bottom: 1px solid var(--bb-border);
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* On scroll: soften + blur */
.navbar.navbar-scrolled {
  background: rgba(230, 224, 220, 0.88);
  /* ~85% opacity */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

/* Keep background solid when mobile menu is open */
.navbar .navbar-collapse.show,
.navbar.navbar-expanded {
  background: var(--bb-bg-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

/* Optional: if you prefer the blur only on desktop */
@media (max-width: 991.98px) {
  .navbar.navbar-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Carousel sizing & captions */
#featured .carousel .ratio {
  max-height: 560px;
}

@media (min-width: 992px) {
  #featured .carousel .ratio {
    max-height: 640px;
  }
}

/* Image fit helpers (already added earlier but keeping here for clarity) */
.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
  background: #00000012;
}

/* --- Beauty & Bronze Pink-Blush theme overrides --- */

/* Navbar */
.navbar {
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-border);
}

.navbar.navbar-scrolled {
  background: rgba(239, 236, 234, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

/* Buttons */
.btn-bb {
  background: var(--bb-accent);
  color: #fff;
  border: none;
  box-shadow: 0 8px 22px rgba(123, 105, 98, .35);
}

.btn-bb:hover {
  background: var(--bb-accent-2);
  box-shadow: 0 10px 26px rgba(123, 105, 98, .45);
}

/* Hero overlay tint */
.hero::after {
  background: rgba(123, 105, 98, .35);
}

/* Section titles */
.section-title::after {
  background: var(--bb-accent);
}

/* Footer */
footer {
  background: var(--bb-bg);
  border-top: 1px solid var(--bb-border);
  color: var(--bb-text);
}

footer a.small-link:hover {
  color: var(--bb-accent);
}

/* --- NEW: Treatments Page Specific Styles --- */

/* Category filter pills */
.cat-pill {
  border: 1px solid var(--bb-border);
  border-radius: 8px;
  padding: .5rem 1rem;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  color: var(--bb-text);
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
  /* Keep pill text on one line */
}

.cat-pill:hover {
  background-color: var(--bb-bg-2);
  text-decoration: none;
}

.cat-pill.active {
  background: var(--bb-accent);
  color: #fff;
  border-color: var(--bb-accent);
}

.cat-pill.active:hover {
  background: var(--bb-accent-2);
  color: #fff;
}

/* Horizontal scroll for filter pills */
.cat-pill-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* smooth scroll on iOS */
  padding-bottom: 8px;
  /* space for scrollbar if it appears */
  margin-bottom: -8px;
  /* hide the space */
}

/* Hide scrollbar for aesthetics */
.cat-pill-container::-webkit-scrollbar {
  display: none;
}

.cat-pill-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Booking summary card */
.summary-card {
  background-color: var(--bb-bg-2, #e6e0dc);
  /* Lighter theme bg */
}

.summary-card.sticky-top {
  top: 88px;
  /* Offset from sticky nav */
}

/* Treatments page "premium" voucher card */
.bb-voucher-card {
  background: linear-gradient(145deg, #fffaf0, #f8f0e0);
  /* Soft gold/cream */
  border: 1px solid #e0ca90;
  /* Gold-ish border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, .07);
}

/* --- Treatments Page Cart List --- */

/* Hover-delete for booking summary (generic card icon) */
.bb-booking-card {
  position: relative;
}

.bb-booking-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
}

.bb-booking-card:hover .bb-booking-remove,
.bb-booking-card:focus-within .bb-booking-remove {
  opacity: 1;
  transform: scale(1);
}

.bb-booking-remove:hover {
  transform: scale(1.05);
}

.bb-booking-remove svg {
  width: 18px;
  height: 18px;
}

/* Line item hover + bin over price */
.bb-cart-line {
  position: relative;
  padding: .25rem 0 .5rem 0;
  border-radius: 12px;
  transition: background-color .15s ease;
}

.bb-cart-line:hover {
  background: var(--bb-bg, #faf7f5);
  /* Use main bg for hover */
}

/* Make the price area the anchor for the bin */
.bb-cart-price {
  position: relative;
  padding-right: 44px;
  /* room for bin */
  min-width: 90px;
  text-align: right;
}

/* The bin for each line (only on hover/focus) */
.bb-line-remove {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scale(.9);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}

.bb-cart-line:hover .bb-line-remove,
.bb-cart-line:focus-within .bb-line-remove {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.bb-line-remove:hover {
  transform: translateY(-50%) scale(1.05);
}

.bb-line-remove svg {
  width: 16px;
  height: 16px;
}

/* --- END Treatments Page --- */


.footer-credit {
  font-size: 0.85rem;
}

.footer-link {
  color: var(--bb-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--bb-text);
  text-decoration: underline;
}

.footer-logo {
  height: 18px;
  width: auto;
  max-width: 140px;
  display: inline-block;
  vertical-align: middle;
  filter: grayscale(100%) saturate(0) brightness(0);
  opacity: 0.8;
  margin-left: 0.35rem;
  transition: opacity 0.2s ease;
}

.footer-link:hover .footer-logo {
  opacity: 1;
}

@media (max-width: 575px) {
  .footer-credit {
    font-size: 0.8rem;
  }
}

/* REMOVED:
  The conflicting "--- REVISED: Featured Treatments Carousel with Side Overlays ---" 
  and "--- Mobile specific caption adjustments ---" blocks were here. 
  They were forcing all carousel items to be `display: block;`, 
  which caused the visual bug.
*/


/* --- NEW: Carousel Fixes and 3-Column Layout Styles --- */
@media (min-width: 768px) {

  /* 1. Ensure the new 3-column row stretches vertically */
  .featured-display {
    /* This row container holds the three columns (3/6/3) */
    border: 1px solid var(--bb-border);
    border-radius: 16px;
    overflow: hidden;
    /* Clips children to the rounded border */
  }

  .featured-display>div {
    /* Set a consistent minimum height for all columns */
    min-height: 480px;
    border: none !important;
    /* Remove individual column borders */
  }

  /* 2. Fix the underlying carousel overlap/sizing issue */
  #ftCarousel {
    height: 100%;
    /* Make the carousel fill the col-md-6 */
  }

  #ftCarousel .carousel-inner,
  #ftCarousel .carousel-item {
    height: 100%;
  }

  #ftCarousel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Use contain to show full image */
    background: #00000012;
    /* Add soft bg for letterboxing */
  }

  /* 3. Style the Left/Right Panels */
  .ft-info-panel {
    background-color: var(--bb-featured-contrast);
    /* White background for better text contrast */
    /* Removed transition from the panel */
  }

  #ft-text-wrapper {
    transition: opacity 0.5s ease-in-out;
    /* Softer fade (0.5s) on text only */
  }

  /* This class will be toggled by JS to trigger the fade */
  #ft-text-wrapper.text-fading {
    opacity: 0;
  }

  .featured-display .col-md-3:last-child {
    background-color: var(--bb-featured-contrast);
    /* Match the section background */
  }

  /* 4. Ensure no unwanted space/border appears between columns */
  .featured-display .col-md-3:first-child {
    border-right: 1px solid var(--bb-border);
  }

  .featured-display .col-md-3:last-child {
    border-left: 1px solid var(--bb-border);
  }

  #ftCarousel .carousel-control-prev-icon,
  #ftCarousel .carousel-control-next-icon {
    filter: invert(1) grayscale(1) brightness(0.32);
  }
}

/* ===== Treatments fade ===== */
#treatments-fade {
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#treatments-fade.is-fading {
  opacity: 0;
}

/* ===== Blend the filters bar ===== */
#filters-menu {
  background: rgba(230, 224, 220, 0.85);
  /* close to page bg */
  border: 1px solid rgba(215, 206, 202, 0.4);
  box-shadow: none;
  border-radius: 18px;
  backdrop-filter: blur(3px);
  /* optional, looks nice on light bg */
}

/* keep pills soft inside bar */
#filters-menu .cat-pill {
  background: rgba(255, 255, 255, 0.25);
}

#filters-menu .cat-pill.active {
  background: var(--bb-accent);
  color: #fff;
}

/* ===== Sticky booking summary ===== */
.booking-sticky {
  position: sticky;
  top: 88px;
  /* just below your fixed navbar */
}

/* smooth fade for the notice */
.review-notice-fade {
  opacity: 0;
  transition: opacity .4s ease;
}

.review-notice-fade.show {
  opacity: 1;
}

/* optional: subtle form pop when it reopens */
.review-panel.reopen-anim {
  animation: reviewReopen .35s ease;
}

@keyframes reviewReopen {
  from {
    transform: translateY(6px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==== TABLET RESPONSIVE FIXES ==== */

/* iPad Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Reduce column min-height for tablets */
  .featured-display>div {
    min-height: 400px;
    /* Down from 480px */
  }

  /* Adjust text sizing for limited space - MORE AGGRESSIVE */
  #ft-title {
    font-size: 1.4rem !important;
    /* Even smaller - was 1.75rem */
    line-height: 1.1;
    margin-bottom: 0.5rem !important;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  #ft-subtitle {
    font-size: 0.8rem !important;
    /* Even smaller - was 0.9rem */
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Reduce padding in text wrapper MORE */
  #ft-text-wrapper {
    padding: 1rem !important;
    /* Down from 1.5rem */
  }

  /* Featured Treatment label */
  .ft-info-panel .h6 {
    font-size: 0.75rem;
    margin-bottom: 0.25rem !important;
  }

  /* Adjust carousel indicators size */
  #ftCarousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
  }

  /* CRITICAL: Adjust column widths for more text space */
  .featured-display>.col-md-3:first-child {
    flex: 0 0 auto;
    width: 33.333333%;
    /* 4 columns worth instead of 3 - more space for text */
  }

  .featured-display>.col-md-6 {
    flex: 0 0 auto;
    width: 41.666667%;
    /* 5 columns worth instead of 6 */
  }

  .featured-display>.col-md-3:last-child {
    flex: 0 0 auto;
    width: 25%;
    /* 3 columns worth - unchanged */
  }
}

/* Tablet Landscape / iPad Pro (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {

  /* Slightly larger than portrait but still constrained */
  .featured-display>div {
    min-height: 440px;
  }

  #ft-title {
    font-size: 2rem !important;
  }

  #ft-subtitle {
    font-size: 0.95rem !important;
  }
}

/* Large Tablets / Small Desktops (1367px+) */
@media (min-width: 1367px) {

  /* Full size for larger screens */
  .featured-display>div {
    min-height: 480px;
    /* Original value */
  }
}

/* ==== GENERAL RESPONSIVE IMPROVEMENTS ==== */

/* Ensure touch targets are minimum 44px on tablets */
@media (max-width: 1024px) {
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1.25rem;
  }

  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }

  /* Carousel controls */
  #ftCarousel .carousel-control-prev,
  #ftCarousel .carousel-control-next {
    width: 44px;
  }
}

/* Mobile-specific adjustments (< 768px) */
@media (max-width: 767px) {

  body.location-page {
    padding-bottom: 140px;
  }

  /* Stack elements vertically with better spacing */
  #featured .card {
    margin-bottom: 1rem;
  }

  .area-chip-list {
    gap: .45rem;
  }

  /* Ensure mobile text is readable */
  .card h3 {
    font-size: 1.25rem;
  }

  .card p {
    font-size: 0.9rem;
  }
}