/* Brand palette */
:root {
  --cs-ink: #2C1B18;
  --cs-accent: #B76E79;
  --cs-panel: #FAF7F2;

  /* chip carousel fade defaults (white) */
  --cs-chip-fade: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Hero */
.cs-hero {
  background: var(--cs-panel);
  border-radius: 16px;
  padding: clamp(18px, 4vw, 32px);
  margin-bottom: 0px;
}
.cs-hero__title { margin: 0 0 4px; color: var(--cs-ink); font-size: clamp(1.6rem, 2.2vw + 1rem, 2.2rem); letter-spacing: .02em; }
.cs-hero__sub   { margin: 0 0 12px; color: #695651; }

/* True, responsive background hero */
.cs-hero {
  position: relative;
  border-radius: 16px;
  min-height: clamp(320px, 42vw, 520px);
  padding: clamp(18px, 4vw, 32px);
  background: var(--cs-panel);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.cs-hero.cs-hero--hasimg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.12) 40%,
    rgba(0,0,0,0.00) 100%
  );
  pointer-events: none;
}
.cs-hero__inner { position: relative; z-index: 1; }
.cs-hero--hasimg .cs-hero__title,
.cs-hero--hasimg .cs-hero__sub {
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Full-bleed hero */
.cs-hero.alignfull {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  min-height: clamp(320px, 42vw, 560px);
  padding: 0;
}
.cs-hero__inner {
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px);
  position: relative; z-index: 1;
}

/* Visually hidden labels */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Search layout */
.cs-search {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 12px;
}
@media (max-width: 720px){
  .cs-search { grid-template-columns: 1fr; }
}

.cs-combo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  min-height: 42px;
  flex: 0 0 auto;
}
.cs-seg { display: flex; align-items: center; flex: 0 0 auto; }
.cs-seg + .cs-seg { border-left: 1px solid #eadfd7; }

.cs-seg input,
.cs-seg select {
  width: auto; min-width: 12ch; max-width: 24ch;
  padding: 8px 12px; border: 0; outline: 0; background: transparent;
  font: inherit; color: inherit; white-space: nowrap;
}
.cs-seg:focus-within { background: #fffaf7; }

@media (max-width: 720px){
  .cs-combo { display: flex; flex-direction: column; width: 100%; }
  .cs-seg { width: 100%; }
  .cs-seg + .cs-seg { border-left: 0; border-top: 1px solid #eadfd7; }
  .cs-seg input, .cs-seg select { width: 100%; min-width: 0; max-width: none; }
}

/* Button */
.cs-btn.cs-btn--wide {
  padding: 10px 16px; border-radius: 10px;
  background: var(--cs-ink, #4B2E2A); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
}
.cs-btn.cs-btn--wide:hover { background: var(--cs-accent, #B76E79); }
@media (max-width: 720px){ .cs-btn.cs-btn--wide { width: 100%; } }
.cs-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Section title */
.cs-sec-title { margin: 0 0 8px; color: var(--cs-ink); font-size: 1.25rem; }

/* ===== Alternating section backgrounds (after hero) ===== */
.cs-sections { /* wrapper for all content sections below hero */ }
.cs-sections > section {
  background: #fff;                         /* odd: white */
  padding: clamp(16px, 3vw, 24px) 0;        /* vertical rhythm */
}
.cs-sections > section:nth-of-type(even) {
  background: var(--cs-panel);              /* even: panel */
  /* ensure chip fades match panel when needed */
  --cs-chip-fade: linear-gradient(to right, rgba(250,247,242,1), rgba(250,247,242,0));
}

/* Explore */
.cs-explore { /* margin handled by section padding now */ }

/* ========== SECTION 1 Explore by vibe: horizontal carousel ========== */
.cs-explore--vibes { position: relative; }

/* Carousel shell */
.cs-chip-carousel {
  position: relative;
  padding: 0 32px; /* room for arrows */
}

/* Scrollable track */
.cs-chip-track {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 6px 2px;
  scrollbar-width: none;
}
.cs-chip-track::-webkit-scrollbar { display: none; }

/* Pills */
.cs-chip {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #404205;
  border: 1px solid #eadfd7;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  white-space: nowrap;
}
.cs-chip:hover { background: var(--cs-accent); color: #fff; border-color: var(--cs-accent); }

/* Remove underline on pills in all states */
.cs-chip,
.cs-chip:visited,
.cs-chip:hover,
.cs-chip:focus,
.cs-chip:focus-visible,
.cs-chip:active {
  text-decoration: none !important;
}

/* Nav arrows (shown only when overflow) */
.cs-chip-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid #e4e0dd; background: #fff; color: var(--cs-ink);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); cursor: pointer;
}
.cs-chip-nav:disabled { opacity: .4; cursor: not-allowed; }
.cs-chip-nav--prev { left: 4px; }
.cs-chip-nav--next { right: 4px; }

/* Gradient edge fades */
.cs-chip-fade {
  position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; display: none;
}
.cs-chip-fade--left  { left: 0;  background: var(--cs-chip-fade); transform: scaleX(-1); }
.cs-chip-fade--right { right: 0; background: var(--cs-chip-fade); }

/* Reveal arrows & fades only when overflow is detected by JS */
.cs-chip-carousel.is-overflow .cs-chip-nav,
.cs-chip-carousel.is-overflow .cs-chip-fade { display: flex; }

/* Small screens */
@media (max-width: 560px){
  .cs-chip-carousel { padding: 0 28px; }
  .cs-chip-nav--prev { left: 2px; }
  .cs-chip-nav--next { right: 2px; }
}


/* ===== SECTION 2 Curated stays (3 cards): grid on desktop, swipe carousel on tablet/mobile ===== */
.cs-curated { /* background alternates via .cs-sections rules */ }

.cs-curated-carousel {
  position: relative;
  padding: 0 32px; /* room for arrows when in carousel mode */
}

/* Track defaults to a 3-col grid (desktop) */
.cs-curated-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Arrows hidden by default; shown when overflow via JS */
.cs-curated-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid #e4e0dd; background: #fff; color: var(--cs-ink);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); cursor: pointer;
}
.cs-curated-nav:disabled { opacity: .4; cursor: not-allowed; }
.cs-curated-nav--prev { left: 4px; }
.cs-curated-nav--next { right: 4px; }

/* Fades (match alternating background using --cs-chip-fade already set by .cs-sections even rows) */
.cs-curated-fade {
  position: absolute; top: 0; bottom: 0; width: 32px;
  pointer-events: none; display: none;
}
.cs-curated-fade--left  { left: 0;  background: var(--cs-chip-fade); transform: scaleX(-1); }
.cs-curated-fade--right { right: 0; background: var(--cs-chip-fade); }

/* Show arrows & fades when overflow is detected */
.cs-curated-carousel.is-overflow .cs-curated-nav,
.cs-curated-carousel.is-overflow .cs-curated-fade { display: flex; }

/* Card (reuses your existing editorial style) */
.cs-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eadfd7;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cs-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.cs-card__media { width: 100%; aspect-ratio: 16/10; background: #eee center/cover no-repeat; margin: 0; }
.cs-card__body { padding: 12px; }
.cs-card__title { margin: 0 0 6px; font-size: 1.06rem; color: var(--cs-ink); }
.cs-card__copy { margin: 0; color: #6b5f5c; }

/* ===== Switch to swipeable carousel on tablet & mobile ===== */
@media (max-width: 900px){
  .cs-curated-carousel { padding: 0 28px; }

  .cs-curated-track {
    display: flex;
    gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 6px 2px;
    scrollbar-width: none;
  }
  .cs-curated-track::-webkit-scrollbar { display: none; }

  /* Each card becomes a slide; width tuned for nice peeking of next card */
  .cs-curated-track .cs-card {
    flex: 0 0 82vw;               /* slide width on small screens */
    scroll-snap-align: start;
  }

  /* Nudge arrow positions a touch inward on very small screens */
  .cs-curated-nav--prev { left: 2px; }
  .cs-curated-nav--next { right: 2px; }
}


/* ===== STYLING Center section titles + add a small downward arrow under them ===== */
.cs-explore--vibes .cs-sec-title,
.cs-curated .cs-sec-title {
  text-align: center;
  position: relative;
  padding-bottom: 12px;  /* space above the line */
  margin-bottom: 10px;   /* space below the line */
}

/* vertical line (overrides previous arrow) */
.cs-explore--vibes .cs-sec-title::after,
.cs-curated .cs-sec-title::after {
  content: "";
  display: block;
  width: 2px;                  /* line thickness */
  height: 20px;                /* line length */
  margin: 10px auto 0;         /* centers the line and adds a gap */
  background: var(--cs-ink);
  opacity: .35;
  border: 0;                   /* reset any arrow borders */
}


/* ===== Curated cards: remove underline in all states + center text ===== */
.cs-curated .cs-card,
.cs-curated .cs-card:visited,
.cs-curated .cs-card:hover,
.cs-curated .cs-card:focus,
.cs-curated .cs-card:active {
  text-decoration: none !important;
}

.cs-curated .cs-card__body {
  text-align: center;
}

/* Curated: tidy spacing with vertical line + centered subheading */
.cs-curated .cs-sec-title {
  /* keep the vertical line inside the title, but remove extra outer gap */
  margin-bottom: 0;
  padding-bottom: 0;
}
.cs-curated .cs-sec-title::after {
  /* shorter, neat line; sits right above the subheading */
  margin: 8px auto 0;
  height: 18px;           /* tweak if you want longer line */
}

/* Subheading under the Curated title */
.cs-curated .cs-sec-sub {
  text-align: center;
  color: #7a6c67;
  margin: 10px auto 16px;     /* space from line + to cards */
  max-width: 60ch;            /* keeps it from running too wide */
}


/* ===== Activities section ===== */
.cs-activities { /* background alternates via .cs-sections */ }

.cs-activities__wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* image a touch larger */
  gap: 18px;
  align-items: center;
}

@media (max-width: 900px){
  .cs-activities__wrap { grid-template-columns: 1fr; }
}

.cs-activities__media {
  border-radius: 14px;
  overflow: hidden;
}

.cs-activities__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/11; /* keeps a nice proportion */
}

.cs-activities__body .cs-sec-title {
  text-align: left;           /* keep this section’s title left-aligned */
  margin: 0 0 8px;
}

/* paragraph and spacing */
.cs-activities__text {
  color: #6b5f5c;
  margin: 0 0 14px;
  max-width: 55ch;
}

/* button inherits .cs-btn styling */
.cs-activities .cs-btn {
  display: inline-block;
}

/* === Activities: image LEFT, text RIGHT (desktop) === */
@media (min-width: 901px){
  .cs-activities__media { order: 1 !important; }  /* left column */
  .cs-activities__body  { order: 2 !important; }  /* right column */
}

/* Center the content inside the right column */
.cs-activities__body {
  text-align: center;      /* center text lines */
  justify-self: center;    /* center the block in its grid column */
  align-self: center;      /* vertical centering safeguard */
  max-width: 52ch;
}

/* Bigger, bold, centered section title in Activities */
.cs-activities .cs-sec-title {
  text-align: center;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 10px;
}

/* Square button + remove underline */
.cs-activities .cs-btn {
  border-radius: 0;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
}

/* Remove underlines from any links in Activities */
.cs-activities a,
.cs-activities a:visited,
.cs-activities a:hover,
.cs-activities a:focus,
.cs-activities a:active {
  text-decoration: none !important;
}

/* ===== Trust section ===== */
.cs-trust { /* background alternates via .cs-sections (panel here) */ }

/* Center title with vertical line under it (matches your pattern) */
.cs-trust .cs-sec-title {
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 0;
}
.cs-trust .cs-sec-title::after {
  content: "";
  display: block;
  width: 2px;
  height: 18px;
  margin: 8px auto 0;
  background: var(--cs-ink);
  opacity: .35;
}

/* Subheading under title */
.cs-trust .cs-sec-sub {
  text-align: center;
  color: #7a6c67;
  margin: 10px auto 18px;
  max-width: 70ch;
}

/* Grid of three cards */
.cs-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .cs-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cs-trust__grid { grid-template-columns: 1fr; } }

/* Card */
.cs-trust__item {
  background: #fff;                     /* contrast against panel row */
  border: 1px solid #eadfd7;
  border-radius: 14px;
  padding: 16px;
}

/* Icon circle */
.cs-trust__icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--cs-panel);
  border: 1px solid #eadfd7;
  color: var(--cs-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Titles and body */
.cs-trust__title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--cs-ink);
  font-size: 1.06rem;
}
.cs-trust__text {
  margin: 0;
  color: #6b5f5c;
  line-height: 1.5;
}

/* === Trust cards: seamless + centered === */

/* remove card chrome so they blend with the row background */
.cs-trust__item {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 10px;
  text-align: center;        /* center all text inside */
}

/* center the icon and make it feel lighter */
.cs-trust__icon {
  margin: 0 auto 10px;       /* center horizontally */
  background: transparent;   /* no fill so it blends */
  border: 0;                 /* remove ring */
  width: 48px;
  height: 48px;
  color: var(--cs-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* center titles and copy; keep a comfy width for text */
.cs-trust__title {
  text-align: center;
  margin: 6px 0 6px;
  font-weight: 700;
}

.cs-trust__text {
  text-align: center;
  margin: 0 auto;
  max-width: 60ch;
  color: #6b5f5c;
}

/* tighten grid gaps a touch so the seamless look reads as one surface */
.cs-trust__grid { gap: 12px; }

/* Trust icons: accent-coloured circles */
.cs-trust__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid var(--cs-accent);   /* brand accent ring */
  background: rgba(183,110,121,.08);    /* soft accent tint (B76E79) */
  color: var(--cs-accent);              /* SVGs use currentColor for strokes */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;                  /* centered */
}

.cs-trust__icon svg {
  width: 26px;
  height: 26px;
}

/* Bigger, bolder section titles */
.cs-explore--vibes .cs-sec-title,
.cs-curated .cs-sec-title,
.cs-trust .cs-sec-title {
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 1.5rem); /* was ~1.25rem */
  font-weight: 600; /* bolder */
  line-height: 1.15;
}

/* ===== Popular destinations (FIX): 1-line horizontal carousel with ~3 cards ===== */

/* Shell leaves room for arrows */
.cs-destinations-carousel {
  position: relative;
  padding: 0 32px;
}

/* TRACK: keep cards on ONE LINE and scroll horizontally */
.cs-destinations-track {
  display: flex;
  flex-wrap: nowrap;                /* <-- critical: no wrapping */
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 8px 2px;
  align-items: stretch;
  scrollbar-width: none;
}
.cs-destinations-track::-webkit-scrollbar { display: none; }

/* NAV + fades only appear when overflow is detected by JS (is-overflow) */
.cs-destinations-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid #e4e0dd; background: #fff; color: var(--cs-ink, #4B2E2A);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); cursor: pointer;
}
.cs-destinations-nav--prev { left: 4px; }
.cs-destinations-nav--next { right: 4px; }
.cs-destinations-nav:disabled { opacity: .4; cursor: not-allowed; }

.cs-destinations-fade {
  position: absolute; top: 0; bottom: 0; width: 32px; display: none; pointer-events: none;
  /* neutral fade for white background; switch to var(--cs-panel) if this row is panel-coloured */
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.cs-destinations-fade--left  { left: 0;  transform: scaleX(-1); }
.cs-destinations-fade--right { right: 0; }

.cs-destinations-carousel.is-overflow .cs-destinations-nav,
.cs-destinations-carousel.is-overflow .cs-destinations-fade { display: flex; }

/* ===== Card: ~3 visible on desktop; original-colour image; zoom effects ===== */
.cs-dest-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  flex: 0 0 clamp(300px, 31.5vw, 420px);  /* <-- keeps about 3 in view */
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: #eee;
  scroll-snap-align: start;
}

/* Image: keep original colour + subtle zoom on hover */
.cs-dest-card__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1);
  transition: transform .35s ease;
  will-change: transform;
}
.cs-dest-card:hover .cs-dest-card__media { transform: scale(1.05); }

/* Remove any old dark scrim that might linger */
.cs-dest-card::after { content: none !important; }

/* Bottom-centered stack: PIN → TITLE → CTA (clear spacing; no overlap) */
.cs-dest-card__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 10px;                           /* spacing between rows */
  text-align: center;
  padding: 18px 12px 22px;             /* comfy bottom padding */
  z-index: 1; color: #fff;

  transform: scale(1);
  transform-origin: center bottom;
  transition: transform .28s ease;     /* text zoom on hover */
  will-change: transform;
}
.cs-dest-card:hover .cs-dest-card__inner { transform: scale(1.06); }

/* Pin icon (white) */
.cs-dest-card__icon { color: #fff; opacity: .95; }
.cs-dest-card__icon svg { display: block; }

/* Destination title: bold, slightly smaller for balance */
.cs-dest-card__label {
  display: block;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(1rem, 0.9vw + 0.85rem, 1.4rem);
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  margin: 0;
}

/* CTA sits clearly BELOW the title; underline on hover */
.cs-dest-card__cta {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  text-decoration: none;
  opacity: .98;
  cursor: pointer;
}
.cs-dest-card__cta:hover,
.cs-dest-card__cta:focus,
.cs-dest-card:focus-visible .cs-dest-card__cta {
  text-decoration: underline;
}

/* === Popular destinations: centered, bigger/bolder title with line === */
.cs-destinations .cs-sec-title {
  text-align: center;
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 1.5rem); /* matches other sections */
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  padding-bottom: 0;
}

.cs-destinations .cs-sec-title::after {
  content: "";
  display: block;
  width: 2px;
  height: 18px;
  margin: 8px auto 0;
  background: var(--cs-ink);
  opacity: .35;
}

/* === Popular destinations: subheading + centered action button === */

.cs-destinations .cs-sec-sub {
  text-align: center;
  color: #7a6c67;
  margin: 10px auto 16px;
  max-width: 70ch;
}

/* center the "View all destinations" button under the carousel */
.cs-destinations__actions {
  text-align: center;
  margin-top: 12px;
}
.cs-destinations__actions .cs-btn {
  padding: 10px 16px;
}

/* ==== Explore by vibe: image cards in one-row scroller ==== */
.cs-explore--vibes { background: var(--cs-panel); padding: 16px 0; }

.cs-vibes-carousel { position:relative; max-width:min(1200px, 92vw); margin:0 auto; }
.cs-vibes-track {
  display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:4px 2px 8px; scroll-snap-type:x mandatory;
}

.cs-vibe-card{
  position:relative; flex:0 0 260px; min-width: 240px; max-width: 320px;
  aspect-ratio: 16/9; border-radius:14px; overflow:hidden; text-decoration:none;
  background:#eee; color:#fff; scroll-snap-align:start; transform:translateZ(0);
}
@media (max-width: 640px){ .cs-vibe-card { flex-basis: 80%; min-width: 260px; } }

.cs-vibe-card__media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition: transform .5s ease;
}
.cs-vibe-card:hover .cs-vibe-card__media{ transform: scale(1.06); } /* subtle zoom */

.cs-vibe-card::after{
  /* gradient for readability */
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.55) 100%);
}

.cs-vibe-card__overlay{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width: calc(100% - 16px); text-align:center; z-index:1;
}

.cs-vibe-card__title{
  margin:0 0 4px; font-weight:800; letter-spacing:.01em;
  font-size: clamp(1.0rem, 1.1vw + 0.8rem, 1.25rem);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.cs-vibe-card__copy{
  margin:0; font-size:.95rem; line-height:1.35; color:#f7f2ef;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* nav buttons + fade edges (match other carousels) */
.cs-vibes-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:999px; border:1px solid #eadfd7; background:#fff;
  display:grid; place-items:center; color:var(--cs-ink); box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.cs-vibes-nav[disabled]{ opacity:.4; cursor:not-allowed; }
.cs-vibes-nav--prev{ left:-6px; } .cs-vibes-nav--next{ right:-6px; }

.cs-vibes-fade{ position:absolute; top:0; bottom:0; width:42px; pointer-events:none; }
.cs-vibes-fade--left{ left:0; background:linear-gradient(to right, rgba(250,247,242,1), rgba(250,247,242,0)); }
.cs-vibes-fade--right{ right:0; background:linear-gradient(to left, rgba(250,247,242,1), rgba(250,247,242,0)); }

/* Explore by vibe — title-only, centered, white */
.cs-vibe-card__overlay{
  position:absolute; inset:0;       /* fill card */
  display:grid; place-items:center; /* center title */
  text-align:center; z-index:1;
}
.cs-vibe-card__title{
  margin:0;
  color:#fff;                       /* white text */
  font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(1.0rem, 1.1vw + 0.8rem, 1.25rem);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* Keep the subtle image zoom on hover */
.cs-vibe-card__media{ transition: transform .5s ease; }
.cs-vibe-card:hover .cs-vibe-card__media{ transform: scale(1.06); }

/* Ensure the CTA row is centered */
.cs-featured__more{ margin-top:12px; text-align:center; }

/* === Full-bleed vibes scroller & no edge fades === */
.cs-vibes-carousel--fullbleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(12px, 4vw, 28px);
  padding-right: clamp(12px, 4vw, 28px);
}
.cs-vibes-fade{ display:none !important; } /* remove faded edges */

/* Ensure titles are truly centered on the card */
.cs-explore--vibes .cs-vibe-card__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
.cs-explore--vibes .cs-vibe-card__title{
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(1.05rem, 1.2vw + 0.85rem, 1.35rem);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Card sizing so they read well across the full width */
.cs-explore--vibes .cs-vibe-card{
  flex: 0 0 280px;      /* base width */
  min-width: 260px;
  max-width: 360px;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: #eee;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transform: translateZ(0);
}
@media (max-width: 640px){
  .cs-explore--vibes .cs-vibe-card{ flex-basis: 80%; min-width: 260px; }
}

/* Subtle image zoom on hover */
.cs-explore--vibes .cs-vibe-card__media{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.cs-explore--vibes .cs-vibe-card:hover .cs-vibe-card__media{ transform: scale(1.06); }

/* Keep gradient soft for readability without fighting center */
.cs-explore--vibes .cs-vibe-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.28) 75%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Track spacing */
.cs-explore--vibes .cs-vibes-track{
  display:flex; gap:12px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
}

/* Nav buttons */
.cs-explore--vibes .cs-vibes-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:999px;
  border:1px solid #eadfd7; background:#fff;
  display:grid; place-items:center; color:var(--cs-ink);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.cs-explore--vibes .cs-vibes-nav[disabled]{ opacity:.4; cursor:not-allowed; }
.cs-explore--vibes .cs-vibes-nav--prev{ left: 6px; }
.cs-explore--vibes .cs-vibes-nav--next{ right: 6px; }

/* Center the 'View all vibes' button */
.cs-featured__more{ margin-top: 12px; text-align: center; }

/* === HARD RESET: center vibe titles inside each card === */
.cs-explore--vibes .cs-vibes-track .cs-vibe-card {
  position: relative; /* ensure overlay anchors to the card */
}

.cs-explore--vibes .cs-vibes-track .cs-vibe-card .cs-vibe-card__overlay{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;

  /* perfect centering */
  display: grid !important;
  place-items: center !important;
  text-align: center !important;

  /* kill any old offsets */
  transform: none !important;
  margin: 0 !important;
  padding: 0 16px;            /* breathing room for long titles */
  box-sizing: border-box;
}

.cs-explore--vibes .cs-vibes-track .cs-vibe-card .cs-vibe-card__title{
  display: block;
  margin: 0 auto;
  max-width: 90%;
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(1.05rem, 1.2vw + 0.85rem, 1.35rem);
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}


/* === TRUST: horizontal scroll on small screens === */
/* Desktop/tablet unchanged (3-up grid) */

/* Mobile: turn grid into a horizontal scroller */
@media (max-width: 900px){
  .cs-trust__grid{
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 2px 10px;      /* room for the thumb */
    scroll-snap-type: x mandatory;
  }
  .cs-trust__item{
    flex: 0 0 85%;              /* width of each card in the scroller */
    min-width: 260px;           /* ensures readable card width */
    scroll-snap-align: start;
    /* keep the centered look from your existing styles */
    background: transparent;
    border: 0;
    text-align: center;
  }

  /* optional: hide scrollbar on WebKit (still scrolls) */
  .cs-trust__grid::-webkit-scrollbar { display: none; }
  .cs-trust__grid { scrollbar-width: none; } /* Firefox */
}