:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #C7654F;
  --primaryLight: #D97E68;
  --secondary: #2D5F4C;
  --accent: #F5F1E8;
  --headerColor: #2d2d2d;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem 0 1rem;
  --headingFont: "Playfair Display", serif;
  --bodyFont: "Quattrocento Sans", sans-serif;
  --navHeight: 4.5rem;
}

body {
  font-family: var(--bodyFont);
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.25rem;
  display: block;
  font-family: var(--bodyFont);
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
  font-family: var(--headingFont);
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/*-- -------------------------- -->
<---        Hero Cover          -->
<--- -------------------------- -*/
#hero-cover {
  width: 100%;
}

.hero-cover-inner {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-cover-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}

.hero-cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-cover-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  color: var(--bodyTextColorWhite);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  text-align: right;
}

/* Improve topper contrast on the hero only */
#hero-cover .cs-topper {
  color: var(--bodyTextColorWhite);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
}

.hero-cover-title {
  font-size: clamp(3rem, 6vw, 4.5rem);
  margin: 0 0 0.75rem 0;
  color: var(--bodyTextColorWhite);
  font-family: var(--headingFont);
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

.hero-cover-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  max-width: 32rem;
  margin: 0 0 1.5rem auto;
  color: var(--bodyTextColorWhite);
}

.hero-cover-cta {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media only screen and (max-width: 48rem) {
  #hero-cover {
    display: none !important;
  }

  #gallery-404 {
    padding-top: calc(6rem + clamp(2rem, 4vw, 3rem)) !important;
  }

  #gallery-404 .cs-button-group {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  #gallery-404 .cs-button {
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
    min-width: auto;
    white-space: nowrap;
    border-width: 1.5px;
  }

  .cs-image-hero {
    display: block;
    width: 100%;
    max-width: 34.375rem;
    margin: 0 auto clamp(3rem, 6vw, 4rem) auto;
    border-radius: 1.25rem;
    overflow: hidden;
  }

  .cs-image-hero img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media only screen and (min-width: 48.0625rem) {
  .cs-image-hero {
    display: none;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
.cs-container {
  width: 100%;
  margin: auto;
  max-width: 80rem;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-404 {
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem 0 1rem;
    overflow: hidden;
    position: relative;
  }
  #gallery-404 .cs-container {
    max-width: 34.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery-404 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #gallery-404 .cs-title {
    max-width: 20ch;
  }
  #gallery-404 .cs-button-group {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    column-gap: 0.75rem;
  }
  #gallery-404 .cs-button {
    font-size: 0.95rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    background-color: white;
    border: 2px solid #e8e8e8;
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    transition: all 0.3s ease;
    font-weight: 600;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: var(--headingFont);
    letter-spacing: 0.02em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  #gallery-404 .cs-button:hover {
    color: var(--primary);
    background-color: #fafafa;
    border-color: var(--primary);
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  }
  #gallery-404 .cs-button.cs-active {
    color: white;
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(199, 101, 79, 0.25);
  }
  #gallery-404 .cs-gallery-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #gallery-404 .cs-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s,
      left 0.3s;
    /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
  }
  #gallery-404 .cs-gallery.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the top:0 value, the gallery won't go past that position when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
  }
  #gallery-404 .cs-gallery.cs-hidden .cs-image {
    /* when gallery is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-gallery */
    transform: translateY(2.1875rem);
    opacity: 0;
  }
  #gallery-404 .cs-image {
    border-radius: 1.25rem;
    width: 47%;
    aspect-ratio: 1;
    /* clips the image corners */
    overflow: hidden;
    display: block;
    position: relative;
    /* when .cs-hidden is removed from the .cs-gallery, reset these values and animate between their hidden styles */
    transform: translateY(0rem);
    opacity: 1;
    transition: opacity 0.6s, transform 0.6s;
    cursor: pointer;
  }

  #gallery-404 .cs-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 1;
    pointer-events: none;
  }

  #gallery-404 .cs-image::after {
    content: 'Click to enlarge';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    white-space: nowrap;
  }

  #gallery-404 .cs-image:hover::before {
    background: rgba(0, 0, 0, 0.25);
  }

  #gallery-404 .cs-image:hover::after {
    opacity: 1;
  }

  #gallery-404 .cs-image:hover img {
    transform: scale(1.05);
  }
  #gallery-404 .cs-image:nth-of-type(1) {
    /* changes transition delays at desktop */
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery-404 .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery-404 .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery-404 .cs-image:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  #gallery-404 .cs-image:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  #gallery-404 .cs-image:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  #gallery-404 .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-404 .cs-container {
    max-width: 80rem;
  }
  #gallery-404 .cs-content {
    text-align: left;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  #gallery-404 .cs-title {
    margin: 0;
  }
  #gallery-404 .cs-button-group {
    column-gap: 2rem;
  }
  #gallery-404 .cs-image {
    width: 31.8%;
    aspect-ratio: 1;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #gallery-404 .cs-flex {
    max-width: 34.375rem;
  }
  #gallery-404 .cs-gallery {
    align-items: stretch;
    justify-content: center;
  }
  #gallery-404 .cs-image {
    width: 39.375rem;
    max-width: 100%;
    height: 25rem;
  }
  #gallery-404 .cs-image:nth-of-type(2),
  #gallery-404 .cs-image:nth-of-type(3),
  #gallery-404 .cs-image:nth-of-type(4),
  #gallery-404 .cs-image:nth-of-type(5) {
    width: 19.0625rem;
  }
  #gallery-404 .cs-image:nth-of-type(1) {
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery-404 .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery-404 .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery-404 .cs-image:nth-of-type(4) {
    transition-delay: 0.15s;
  }
  #gallery-404 .cs-image:nth-of-type(5) {
    transition-delay: 0.3s;
  }
  #gallery-404 .cs-image:nth-of-type(6) {
    transition-delay: 0.45s;
  }
}

#airbnb-description {
  padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

#airbnb-description .cs-content p {
  font-size: larger;
  line-height: 1.5em;
}
.cs-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.cs-main-content {
  max-width: 100%;
}

.cs-sidebar {
  position: sticky;
  top: 6rem;
}

.cs-guidelines {
  font-size: 1.2rem; /* Increased from default */
  line-height: 1.2; /* Increased spacing between lines */
}

.cs-guidelines li {
  margin-bottom: 1rem; /* Add space between list items */
}

/* House Facilities Styles */
.cs-facilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0 0 0;
}

.facility-card {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--accent);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.facility-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.facility-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  opacity: 1;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.facility-card-title {
  font-family: var(--headingFont);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--headerColor);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.facility-card-description {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--bodyTextColor);
  margin: 0;
}

@media only screen and (max-width: 64rem) {
  .cs-two-column {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cs-sidebar {
    position: static;
  }
}

@media only screen and (max-width: 48rem) {
  .cs-facilities-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .facility-card {
    padding: 1.25rem 1rem;
  }

  .facility-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }

  .facility-card-title {
    font-size: 1rem;
  }

  .facility-card-description {
    font-size: 0.75rem;
  }
}

.cs-image-container {
  text-align: center;
}

.book-now-button {
  display: inline-block;
  background-color: var(--primary);
  color: white;
  padding: 1rem 2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.book-now-button:hover {
  background-color: var(--primaryLight);
  transform: translateY(-2px);
}

/* Section CTA button */
.section-cta {
  margin-top: 2rem;
  text-align: center;
  display: inline-block;
}

/* Adjust for mobile */
@media only screen and (max-width: 48rem) {
  .book-now-button {
    padding: 0.8rem 1.5rem;
  }
}

/* Restaurant Grid Styles */
.restaurant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.restaurant-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.restaurant-card:hover {
    transform: translateY(-5px);
}

.restaurant-image {
    width: 100%;
    height: 235px;
    overflow: hidden;
}

.restaurant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.restaurant-card:hover .restaurant-image img {
    transform: scale(1.05);
}

.restaurant-content {
    padding: 1.5rem;
}

.restaurant-content h3 {
    margin: 0 0 1rem 0;
    font-family: 'Quattrocento', serif;
    font-size: 1.5rem;
    color: var(--headerColor);
}

.restaurant-content p {
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
    color: var(--bodyTextColor);
}

.restaurant-links {
    display: flex;
    gap: 1rem;
}

.restaurant-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 4px;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.restaurant-links a:hover {
    background: var(--primary);
    color: white;
}

@media only screen and (max-width: 768px) {
    .restaurant-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem 0;
    }
}

/* Navigation Styles */
.cs-nav {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 50;
    height: var(--navHeight);
    padding: 0;
    background-color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    transform: translateY(-100%);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-nav.cs-nav-visible {
    transform: translateY(0);
}

.cs-nav.cs-nav-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cs-nav .cs-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.cs-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 2rem;
}

.cs-nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    color: #6b6b6b;
    text-decoration: none;
    font-family: var(--headingFont);
    font-size: 1.1rem;
    font-weight: 700;
    transition: color 0.3s ease;
}

.cs-nav-link:hover {
    color: var(--primary);
}

.cs-nav-link.active {
    color: var(--primary);
}

.cs-nav-cta {
    padding: 0.45rem 1.25rem;
    border-radius: 999px;
    background-color: var(--primary);
    color: white;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.cs-nav-cta:hover {
    background-color: var(--primaryLight);
    color: white;
    transform: translateY(-1px);
}

/* Adjust the sticky book now button to not overlap with nav */
.sticky-book-now {
    bottom: 1.5rem;
}

@media only screen and (max-width: 64rem) {
    .cs-nav-list {
        gap: 1rem;
    }

    .cs-nav-link {
        font-size: 0.95rem;
    }

    .cs-nav-cta {
        padding: 0.35rem 1rem;
        font-size: 0.85rem;
    }
}

@media only screen and (max-width: 48rem) {
    .cs-nav {
        height: auto;
        padding: 0.75rem 0;
    }

    .cs-nav-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0 0.5rem;
    }

    .cs-nav-list li {
        flex-shrink: 0;
    }

    .cs-nav-home {
        display: none;
    }

    .cs-nav-link {
        font-size: 0.85rem;
        padding: 0.25rem 0.5rem;
    }

    .cs-nav-cta {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }
}

#cafes-restaurants {
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem 0 1rem;
    overflow: hidden;
    position: relative;
}

#local-area {
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    background-color: #f5f5f5;
    text-align: center;
}

#local-area .cs-flex {
    align-items: center;
    max-width: 48rem;
    margin: 0 auto;
}

#local-area .cs-text {
    margin: 1.5rem auto 0;
    max-width: 42rem;
}

.local-area-cta {
    margin-top: 2rem;
}

@media only screen and (max-width: 48rem) {
    #local-area {
        padding: 3rem 1rem;
    }

    #local-area .cs-flex {
        text-align: center;
    }

    #local-area .cs-topper {
        font-size: 0.75rem;
    }

    #local-area .cs-title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    #local-area .cs-text {
        margin: 1rem auto 0;
        font-size: 0.95rem;
    }

    .local-area-cta {
        margin-top: 1.5rem;
    }
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--headerColor);
    text-decoration: none;
    font-family: var(--headingFont);
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.back-button:hover {
    color: var(--primary);
    transform: translateX(-4px);
}

#reviews {
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    background-color: #fafafa;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Reviews CTA container */
.reviews-cta {
    margin-top: 3rem;
    text-align: center;
}

/* Hide all review cards after the first 6 */
.reviews-grid .review-card:nth-child(n+7) {
    display: none;
}

.review-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.reviewer-info {
    flex: 1;
}

.reviewer-name {
    font-family: var(--headingFont);
    font-size: 1.1rem;
    color: var(--headerColor);
    margin: 0;
}

.reviewer-location {
    font-size: 0.9rem;
    color: var(--bodyTextColor);
    margin: 0.25rem 0 0 0;
}

.review-date {
    font-size: 0.9rem;
    color: var(--bodyTextColor);
    white-space: nowrap;
}

.review-rating {
    color: var(--primary);
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.review-text {
    color: var(--bodyTextColor);
    line-height: 1.6;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.review-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background: linear-gradient(transparent, white);
    pointer-events: none;
}

@media only screen and (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Show full review text on mobile */
    .review-text {
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .review-text::after {
        display: none;
    }

    /* Remove clickable behavior on mobile */
    .review-card {
        cursor: default;
    }

    .review-card:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* Hide modal on mobile */
    .review-modal {
        display: none !important;
    }
}

/* Review Modal Styles */
.review-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.review-modal.active {
    display: flex;
    opacity: 1;
}

.review-modal-content {
    position: relative;
    background-color: white;
    margin: auto;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.review-modal.active .review-modal-content {
    transform: translateY(0);
}

.review-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bodyTextColor);
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.review-modal-close:hover {
    color: var(--primary);
}

.review-modal-body {
    margin: 1rem 2rem;
}

.review-text-full {
    color: var(--bodyTextColor);
    line-height: 1.6;
    margin: 1rem 0 0 0;
    white-space: pre-wrap;
}

.review-modal-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.review-nav-button {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.review-nav-button:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.review-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media only screen and (max-width: 768px) {
    .review-modal-nav {
        left: -30px;
        right: -30px;
    }

    .review-modal-content {
        margin: 1rem;
        max-height: 80vh;
        padding: 1.5rem;
    }

    .review-modal-body {
        margin: 0.5rem 0;
    }
}

/* Make review cards clickable on desktop */
@media only screen and (min-width: 769px) {
    .review-card {
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .review-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

.cs-image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

/* Review overlay styles */
.review-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 2rem;
    color: white;
    opacity: 1;
}

/* Remove "Click to enlarge" from review overlay image */
.cs-image:has(.review-overlay)::after {
    display: none;
}

.cs-image:hover .review-overlay {
    opacity: 1;
}

.review-overlay-content {
    max-width: 600px;
    margin: 0 auto;
}

.review-overlay-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
}

.review-overlay-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.3s ease;
}

.review-overlay-link:hover {
    transform: translateX(5px);
}

@media only screen and (max-width: 768px) {
    .review-overlay {
        display: none;
    }

    .review-overlay-text {
        font-size: 1rem;
    }
}