/* ==========================================================================
   Leotanas Safaris — theme override
   Loaded LAST in header.html, after Bootstrap and the inline <style>.

   This file only restyles the existing markup. It adds no elements and
   removes none, so it is reversible by deleting one <link> tag.

   Fixes the two reported layout bugs at their source:
     1. The navbar no longer changes height. Its height came from
        `.navbar { padding: .5rem 0 }` plus a `.scrolled` variant plus a
        padded Book Now button — so content dictated the bar height. Now a
        min-height on the container owns it and the buttons are fixed height.
     2. Product cards no longer change height with their text. `.PRODUCT_LIST`
        becomes a flex column, the title is clamped to two lines, the image
        gets a fixed ratio, and the View Details / Explore row is pushed to
        the bottom with margin-top:auto — so every card's footer aligns.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette — the site already reads these vars, so redefining them here
      recolours every gradient, button and accent that uses them.
   -------------------------------------------------------------------------- */

:root {
  --primary-green: #12583A;
  --light-green: #17694A;
  --dark-green: #0B3B26;
  --nav-bg: rgba(250, 246, 239, 0.97);
  --nav-shadow: 0 1px 0 #E4D7C1;

  /* new tokens this file introduces */
  --leo-sand: #FAF6EF;
  --leo-sand-deep: #F2EADC;
  --leo-border: #E4D7C1;
  --leo-rule: #F0E7D8;
  --leo-ink: #1C1A14;
  --leo-muted: #6B6350;
  --leo-ochre: #A8540A;        /* booking CTAs only */
  --leo-ochre-dark: #7A3C06;
  --leo-green-tint: #E3EFE7;
  --leo-gold: #E8B74A;

  --leo-display: "Fraunces", Georgia, "Times New Roman", serif;
  --leo-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --leo-nav-h: 64px;
  --leo-btn-h: 42px;
  --leo-btn-h-sm: 40px;

  /* Bootstrap 5 variables */
  --bs-primary: #12583A;
  --bs-primary-rgb: 18, 88, 58;
  --bs-body-bg: #FAF6EF;
  --bs-body-color: #1C1A14;
  --bs-border-color: #E4D7C1;
  --bs-link-color: #A8540A;
  --bs-link-hover-color: #7A3C06;
  --bs-body-font-family: "Karla", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Ground and type
   -------------------------------------------------------------------------- */

body {
  background: var(--leo-sand);
  color: var(--leo-ink);
  font-family: var(--leo-body);
  overflow-x: hidden;          /* nothing may scroll the page sideways */
}

h1, h2, h3, h4, h5,
.navbar-brand,
.section-title,
.img-list-header {
  font-family: var(--leo-display);
  letter-spacing: -0.015em;
}

.section-title {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  color: var(--leo-ink);
}

.text-secondary { color: var(--leo-muted) !important; }

a { color: var(--leo-ochre); }
a:hover { color: var(--leo-ochre-dark); }

img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--primary-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Navbar — FIX 1. Height is owned by the container, not by the contents.
   -------------------------------------------------------------------------- */

.navbar {
  padding: 0 !important;
  background: var(--nav-bg);
  box-shadow: var(--nav-shadow);
  backdrop-filter: blur(10px);
}

/* The old rule shrank the bar on scroll, which made the page jump. */
.navbar.scrolled {
  padding: 0 !important;
  box-shadow: 0 2px 14px rgba(28, 26, 20, 0.08);
}

/* min-height, not height, so the mobile collapse can still open below it. */
.navbar > .container {
  min-height: var(--leo-nav-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.navbar-brand {
  font-family: var(--leo-display);
  font-weight: 700;
  color: var(--primary-green) !important;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-block: 0;
}
.navbar-brand .brand-logo,
.navbar-brand .logo-img {
  display: block;             /* kills the inline-descender gap under images */
}

.nav-link {
  font-family: var(--leo-body);
  font-weight: 500;
  color: var(--leo-ink) !important;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.nav-link:hover,
.nav-link.active {
  color: var(--primary-green) !important;
}

.dropdown-menu {
  border: 1px solid var(--leo-border);
  border-radius: 12px;
  box-shadow: 0 18px 34px -20px rgba(28, 26, 20, 0.35);
  padding: 8px;
}
.dropdown-item {
  border-radius: 8px;
  font-size: 14px;
  padding: 9px 12px;
  color: var(--leo-ink);
}
.dropdown-item:hover {
  background: var(--leo-green-tint);
  color: var(--primary-green);
}

.navbar-toggler {
  border: 1px solid var(--leo-border);
  background: transparent;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2818, 88, 58, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   4. Buttons — fixed height, horizontal padding only.
      Vertical padding and line-height are what make buttons grow their bars.
   -------------------------------------------------------------------------- */

.book-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--leo-btn-h);
  padding: 0 20px !important;
  line-height: 1;
  font-family: var(--leo-body);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--leo-ochre) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
  margin-left: 8px;
}
.book-now-btn:hover {
  background: var(--leo-ochre-dark) !important;
  color: #fff !important;
  transform: none;
  box-shadow: none;
}

.btn-stunning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--leo-btn-h-sm);
  padding: 0 18px !important;
  line-height: 1;
  font-family: var(--leo-body);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  background: var(--leo-ochre) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
}
.btn-stunning:hover {
  background: var(--leo-ochre-dark) !important;
  color: #fff !important;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  --bs-btn-bg: #12583A;
  --bs-btn-border-color: #12583A;
  --bs-btn-hover-bg: #0B3B26;
  --bs-btn-hover-border-color: #0B3B26;
}

/* --------------------------------------------------------------------------
   5. Product cards — FIX 2. Equal height, aligned footers.
   -------------------------------------------------------------------------- */

.PRODUCT_LIST {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--leo-border);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

/* Two lines, always — a one-word name and a twelve-word name now produce
   exactly the same card. */
.PRODUCT_LIST .img-list-header {
  order: 2;
  margin: 0;
  padding: 16px 18px 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--leo-ink);
  min-height: calc(2.6em + 16px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.PRODUCT_LIST > a { order: 1; display: block; }

.PRODUCT_LIST .pdc-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;        /* portrait and landscape photos now match */
  object-fit: cover;
}

.PRODUCT_LIST .hotel-rating {
  order: 0;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(20, 16, 10, 0.82);
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
}
.PRODUCT_LIST .hotel-rating .fa-star { color: var(--leo-gold); }

/* The body grows, so the footer below it can be pushed to the bottom. */
.PRODUCT_LIST .p-4 {
  order: 3;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 18px 18px !important;
  min-height: 0;
}

/* margin-top:auto eats the leftover space — this is what puts every
   "View Details" and "Explore" on the same line across the row. */
.PRODUCT_LIST .p-4 > .d-flex.justify-content-between {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--leo-rule);
  gap: 10px;
}

.PRODUCT_LIST .mb-3 { margin-bottom: 8px !important; }

.price-tag {
  display: inline-flex;
  align-items: center;
  height: var(--leo-btn-h-sm);
  padding: 0 14px;
  background: var(--leo-green-tint);
  color: var(--primary-green);
  border-radius: 8px;
  font-family: var(--leo-body);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.info-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--leo-sand-deep);
  color: var(--leo-ink);
  border: 1px solid var(--leo-border);
  border-radius: 999px;
  padding: 5px 11px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.info-pill i { color: var(--primary-green); }

.amenity-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--leo-green-tint);
  color: var(--primary-green);
  border-radius: 999px;
  padding: 5px 11px;
  margin: 2px 4px 2px 0;
  font-size: 12px;
  font-weight: 700;
}

.value-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--leo-border);
  border-radius: 14px;
  padding: 26px;
}
.value-card h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-green);
  margin-top: 14px;
}
.stat-img { object-fit: contain; }

/* --------------------------------------------------------------------------
   5b. Category cards — the home page now shows one card per category
       instead of every product, so the first load carries a handful of
       images rather than dozens.
   -------------------------------------------------------------------------- */

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--leo-border);
  background: var(--dark-green);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 32px -20px rgba(28, 26, 20, 0.45);
}

.cat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim is what makes the white text readable over any photograph. */
.cat-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 22px 20px;
  background: linear-gradient(to top,
    rgba(20, 16, 10, 0.94) 0%,
    rgba(20, 16, 10, 0.78) 45%,
    rgba(20, 16, 10, 0) 100%);
}

.cat-card__name {
  font-family: var(--leo-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}
.cat-card__count {
  font-size: 13px;
  font-weight: 600;
  color: #C9DCD0;
}
.cat-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leo-gold);
}
.cat-card:hover .cat-card__go { gap: 12px; }
.cat-card__go i { transition: transform 0.2s ease; }

@media (max-width: 575.98px) {
  .cat-card { min-height: 220px; }
  .cat-card__name { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   5c. Product page (template.html) — TourRadar-style layout:
       gallery, scannable sections, day-by-day itinerary, sticky booking rail.
   -------------------------------------------------------------------------- */

.tr-page { padding-block: 22px 0; background: var(--leo-sand); }

.tr-crumb { font-size: 13px; color: var(--leo-muted); margin-bottom: 16px; }
.tr-crumb a { color: var(--leo-muted); text-decoration: none; }
.tr-crumb a:hover { color: var(--primary-green); }
.tr-crumb span { margin-inline: 6px; }
.tr-crumb__here { color: var(--leo-ink); font-weight: 700; margin-inline: 0 !important; }

.tr-head__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.tr-title {
  font-family: var(--leo-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--leo-ink);
  margin: 0;
}

.tr-metarow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--leo-muted);
}
.tr-metaitem { display: inline-flex; align-items: center; gap: 7px; }
.tr-metaitem i { color: var(--primary-green); }
.tr-metaitem--rating i { color: var(--leo-gold); }
.tr-metaitem strong { color: var(--leo-ink); }
.tr-muted { color: var(--leo-muted); }

/* Gallery — fixed ratios, so the block never resizes with the photo. */
.tr-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.tr-gallery > * { min-width: 0; }
.tr-gallery__main,
.tr-gallery__cell {
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark-green);
}
.tr-gallery__main { aspect-ratio: 16 / 10; }
.tr-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; }
.tr-gallery__cell { min-height: 0; }
.tr-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two-column body with the booking rail on the right. */
.tr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.tr-main { min-width: 0; }

.tr-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--leo-border);
  margin-bottom: 26px;
}
.tr-jump a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leo-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tr-jump a:hover {
  color: var(--primary-green);
  border-bottom-color: var(--primary-green);
}

.tr-block { margin-bottom: clamp(30px, 4vw, 46px); scroll-margin-top: 90px; }

.tr-h2 {
  font-family: var(--leo-display);
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 600;
  color: var(--leo-ink);
  margin: 0 0 14px;
}
.tr-sub { font-size: 14px; margin: -8px 0 16px; }

.tr-h3 {
  font-family: var(--leo-body);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.tr-h3--yes { color: var(--primary-green); }
.tr-h3--no { color: #9A4A2F; }

.tr-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--leo-ink);
  margin: 0 0 14px;
}

/* The DB stores plain text with real newlines — honour them. */
.tr-prose {
  white-space: pre-line;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--leo-muted);
  max-width: 68ch;
}
.tr-prose p { margin: 0 0 10px; }

.tr-highlights {
  white-space: pre-line;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--leo-ink);
  background: var(--leo-green-tint);
  border-left: 3px solid var(--primary-green);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
}

/* Itinerary accordion */
.tr-itin { border: 1px solid var(--leo-border); border-radius: 14px; overflow: hidden; background: #fff; }
.tr-itin__item { border: 0; border-bottom: 1px solid var(--leo-rule); background: transparent; }
.tr-itin__item:last-child { border-bottom: 0; }

.tr-itin .accordion-button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: transparent;
  font-family: var(--leo-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--leo-ink);
  box-shadow: none;
}
.tr-itin .accordion-button:not(.collapsed) {
  background: var(--leo-sand-deep);
  color: var(--leo-ink);
}
.tr-itin .accordion-button:focus { box-shadow: none; outline: 2px solid var(--primary-green); outline-offset: -2px; }
.tr-itin .accordion-button::after { filter: grayscale(1) brightness(0.5); }

.tr-itin__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tr-itin__name { flex: 1 1 auto; min-width: 0; }

.tr-itin__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 20px;
  padding: 4px 18px 20px;
}
.tr-itin__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tr-itin__img { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.tr-itin__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tr-incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; }
.tr-incl__col { min-width: 0; background: #fff; border: 1px solid var(--leo-border); border-radius: 12px; padding: 18px; }

/* Sticky booking rail */
.tr-aside { position: sticky; top: 84px; min-width: 0; }

.tr-book {
  background: #fff;
  border: 1px solid var(--leo-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 18px 34px -26px rgba(28, 26, 20, 0.4);
}
.tr-book__priceline { display: flex; flex-direction: column; gap: 2px; }
.tr-book__from { font-size: 12px; color: var(--leo-muted); }
.tr-book__price {
  font-family: var(--leo-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--leo-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tr-book__range { font-size: 13px; color: var(--leo-muted); }

.tr-book__facts { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tr-book__facts li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--leo-ink); }
.tr-book__facts i { color: var(--primary-green); width: 16px; text-align: center; flex: 0 0 auto; }

.tr-book__cta { width: 100%; height: 50px; font-size: 16px; }
.tr-book__enquire {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-green);
  text-decoration: none;
  border: 1.5px solid var(--primary-green);
  border-radius: 8px;
}
.tr-book__enquire:hover { background: var(--primary-green); color: #fff; }

.tr-book__note {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--leo-muted);
}
.tr-book__note i { color: var(--primary-green); margin-top: 2px; }

.tr-related { background: var(--leo-sand-deep); padding-block: clamp(36px, 5vw, 60px); }

@media (max-width: 991.98px) {
  .tr-layout { grid-template-columns: minmax(0, 1fr); }
  /* The rail stops being sticky and moves above the long content, so the
     price and Book button are the first thing a phone user sees. */
  .tr-aside { position: static; order: -1; margin-bottom: 8px; }
  .tr-itin__body { grid-template-columns: minmax(0, 1fr); }
  .tr-itin__img { max-width: 320px; }
}

@media (max-width: 575.98px) {
  .tr-gallery { grid-template-columns: minmax(0, 1fr); }
  .tr-gallery__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .tr-gallery__cell { aspect-ratio: 4 / 3; }
  .tr-jump { overflow-x: auto; flex-wrap: nowrap; }
  .tr-jump a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   5d. Category listing (info.html) — the page every category card lands on.
       Its cards use .product-card, a different set of class names from the
       home page's .PRODUCT_LIST, so they need the equal-height treatment
       applied again here.
   -------------------------------------------------------------------------- */

/* A 90vh carousel on a listing page pushes every product below the fold and
   costs a full-screen image before anything useful renders. Cap it. */
.carousel-item { height: clamp(260px, 42vh, 420px) !important; }
.slider-cap {
  font-size: clamp(24px, 4vw, 44px) !important;
  font-family: var(--leo-display);
  letter-spacing: -0.01em !important;
}
.slider-btn {
  background: var(--leo-ochre) !important;
  background-image: none !important;
  border-radius: 8px !important;
  padding: 0 24px !important;
  height: var(--leo-btn-h);
  display: inline-flex !important;
  align-items: center;
  line-height: 1;
  font-weight: 700;
}
.slider-btn:hover { background: var(--leo-ochre-dark) !important; color: #fff !important; }

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--leo-border);
  border-radius: 14px;
  overflow: hidden;
}
.product-card > a { position: relative; display: block; flex: 0 0 auto; }

.product-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;      /* every card's photo occupies the same box */
  object-fit: cover;
}

.product-rating {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(20, 16, 10, 0.82);
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
}
.product-rating i { color: var(--leo-gold); }

.product-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
  min-height: 0;
}

/* Clamped to two lines with the space reserved, so a short name and a long
   one produce identical cards. */
.product-title {
  font-family: var(--leo-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--leo-ink);
  margin: 0;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-location {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--leo-muted);
}
.product-location i { color: var(--primary-green) !important; }

.product-category { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.category-tag {
  background: var(--leo-sand-deep);
  border: 1px solid var(--leo-border);
  color: var(--leo-ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}

.product-price {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--leo-ink);
  font-variant-numeric: tabular-nums;
}

/* Pinned to the bottom, so every button across the row lines up. */
.product-actions {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--leo-rule);
  display: flex;
  gap: 10px;
}
.btn-view,
.product-actions .btn,
.product-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 auto;
  height: var(--leo-btn-h-sm);
  padding: 0 16px !important;
  line-height: 1;
  font-family: var(--leo-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: var(--leo-ochre) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
}
.btn-view:hover,
.product-actions a:hover { background: var(--leo-ochre-dark) !important; color: #fff !important; }

.text-success { color: var(--primary-green) !important; }

/* --------------------------------------------------------------------------
   5e. Policies page (policies.html) — a bare accordion with no container,
       sitting flush against the header. Three footer links point here, so
       give it a page.
   -------------------------------------------------------------------------- */

#termsAccordion {
  width: 100%;
  max-width: 900px;
  margin: clamp(28px, 5vw, 56px) auto;
  padding-inline: var(--gutter, clamp(16px, 4vw, 60px));
  border: 0;
}
#termsAccordion .accordion-item {
  border: 1px solid var(--leo-border);
  border-radius: 12px !important;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
#termsAccordion .accordion-button {
  font-family: var(--leo-body);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--leo-ink);
  background: #fff;
  padding: 16px 18px;
  box-shadow: none;
}
#termsAccordion .accordion-button:not(.collapsed) {
  background: var(--leo-sand-deep);
  color: var(--leo-ink);
}
#termsAccordion .accordion-button:focus {
  box-shadow: none;
  outline: 2px solid var(--primary-green);
  outline-offset: -2px;
}
#termsAccordion .accordion-body {
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.75;
  color: var(--leo-muted);
  padding: 16px 18px 20px;
}

/* --------------------------------------------------------------------------
   5f. Footer map — the Leaflet block beside the contact details.
   -------------------------------------------------------------------------- */

/* The footer map is a plain OpenStreetMap iframe now. The previous version
   was a Leaflet map built in JS: it depended on unpkg, two SRI hashes, a
   DOMContentLoaded handler and an invalidateSize() timing dance, any one of
   which could leave the box blank with no visible reason. An iframe has one
   failure mode instead of five, needs no JavaScript at all, and drops ~150 KB
   of Leaflet from every page on the site. */
.footer-map-frame {
  display: block;
  width: 100%;
  height: 250px;
  border: 1px solid rgba(250, 246, 239, 0.16);
  border-radius: 10px;
  background: #14100A;
}
@media (max-width: 767.98px) {
  .footer-map-frame { height: 200px; }
}
.map-section h3 {
  font-family: var(--leo-body);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leo-gold) !important;
}

/* Placeholder for a team member with no photo. An unguarded
   {{ member.image.url }} raised ValueError and 500'd the whole About page,
   so the template now guards it and falls back to this. */
.team-member-img--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--leo-green-tint);
  color: var(--primary-green);
  font-size: 34px;
}

/* --------------------------------------------------------------------------
   5g. About page (about.html). Its inline CSS hardcodes Bootstrap's stock
       green (#198754) and #2c3e50 in a dozen places rather than reading the
       CSS variables, so the palette override could not reach it and the page
       stayed off-theme. These rules bring it in line.
   -------------------------------------------------------------------------- */

.about-hero {
  background: linear-gradient(140deg, var(--leo-sand-deep) 0%, var(--leo-green-tint) 100%) !important;
  border-radius: 0 0 20px 20px;
  padding: clamp(40px, 6vw, 72px) 0 !important;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
}

.company-title {
  font-family: var(--leo-display) !important;
  font-size: clamp(30px, 4.5vw, 46px) !important;
  font-weight: 600 !important;
  color: var(--leo-ink) !important;
  letter-spacing: -0.015em;
}
.company-intro { color: var(--leo-muted) !important; font-size: 16.5px; line-height: 1.75; }
.company-logo-large { max-height: 120px; width: auto; object-fit: contain; }

.about-hero .section-title,
.team-section .section-title,
.values-section .section-title,
.timeline-section .section-title,
.section-title {
  font-family: var(--leo-display) !important;
  font-size: clamp(26px, 3.4vw, 38px) !important;
  font-weight: 600 !important;
  color: var(--leo-ink) !important;
  letter-spacing: -0.015em;
}
/* the underline accent was a stock green gradient */
.section-title::after {
  background: var(--leo-ochre) !important;
  height: 3px !important;
  width: 52px !important;
}
.section-subtitle { color: var(--leo-muted) !important; }

/* Team cards: equal height and a consistent baseline, same rule as every
   other card grid on the site. */
.team-section .row > [class*="col-"] { display: flex; }
.team-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--leo-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 26px 20px !important;
}
.team-card:hover { border-color: var(--primary-green) !important; }

.team-member-img {
  width: 132px !important;
  height: 132px !important;
  border: 3px solid var(--leo-green-tint) !important;
  background: var(--leo-sand) !important;
  margin-bottom: 18px !important;
}
.team-member-name {
  font-family: var(--leo-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--leo-ink);
}
.team-member-role {
  color: var(--primary-green) !important;
  background: var(--leo-green-tint) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.team-member-bio { color: var(--leo-muted) !important; font-size: 14.5px; margin-top: auto; }

.values-section { background: transparent !important; }
.value-card {
  border: 1px solid var(--leo-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.value-card:hover { border-color: var(--primary-green) !important; }
.value-icon {
  background: var(--leo-green-tint) !important;
  width: 68px !important;
  height: 68px !important;
}
.value-icon i, .value-icon .fas { color: var(--primary-green) !important; }
.value-title {
  font-family: var(--leo-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--leo-ink) !important;
}
.value-description { color: var(--leo-muted) !important; font-size: 14.5px; }

.timeline-section {
  background: var(--leo-sand-deep) !important;
  border-radius: 18px !important;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 3vw, 32px) !important;
}
.timeline-item {
  border-left: 3px solid var(--leo-ochre) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border-top: 1px solid var(--leo-border);
  border-right: 1px solid var(--leo-border);
  border-bottom: 1px solid var(--leo-border);
  padding: 22px 24px !important;
}
.timeline-year {
  color: var(--leo-ochre) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.timeline-event { color: var(--leo-ink); }

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.footer-classic {
  background: #14100A;
  color: #9A9384;
}
.footer-classic h3 {
  font-family: var(--leo-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leo-gold);
}
.footer-classic a { color: #C9DCD0; text-decoration: none; }
.footer-classic a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   7. Responsive safety
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  :root { --leo-nav-h: 58px; }

  /* The collapse panel sits below the bar and scrolls on its own, so opening
     the menu can never push the page around. */
  .navbar-collapse {
    max-height: calc(100vh - var(--leo-nav-h) - 20px);
    overflow-y: auto;
    padding-bottom: 12px;
  }
  .book-now-btn {
    width: 100%;
    margin: 10px 0 0;
    padding: 0 16px !important;
  }
  .nav-link { padding-block: 10px; }
}

@media (max-width: 575.98px) {
  .PRODUCT_LIST .p-4 > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch;
  }
  .PRODUCT_LIST .price-tag,
  .PRODUCT_LIST .btn-stunning {
    width: 100%;
    justify-content: center;
  }
}