/* ==========================================================================
   Allrise Rentals — Medical Equipment Rental Platform
   Main stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Base & helpers
   3.  Buttons
   4.  Top bar / Navbar
   5.  Hero
   6.  Quick category strip
   7.  Section headings
   8.  Category tabs (home) + filter bar (pill dropdowns)
   9.  Equipment cards
   10. Category cards
   11. Trust strip / How it works
   12. Stats band & testimonials
   13. Page header (inner pages)
   14. Listing page (sidebar filters, toolbar, list view)
   15. Detail page (gallery, rate selector, specs)
   16. Cart page
   17. Contact page
   18. About page
   19. CTA bar & Footer
   20. Floating WhatsApp / toasts
   21. Swiper overrides
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Brand */
  --primary: #8F4064;        /* buttons, links, icons, active states */
  --primary-deep: #682D49;   /* accent hover + the dark brand bands */
  --secondary: #D4649E;      /* decorative accents */
  --secondary-dark: #B24879; /* secondary on white, where text must stay legible */
  --secondary-light: #E38AB6;/* accents sitting on the dark bands */
  --primary-050: #FBF4F7;    /* tinted section backgrounds */

  /* Background & Borders */
  --gray-bg: #F7F6F9;
  --border: #E5DDE2;

  /* Typography */
  --text-dark: #2B2026;      /* headings, body copy, footer background */
  --text-gray: #675B63;
  --text-muted: #8E858B;     /* placeholders only — 3.6:1 on white, too low for copy */

  /* Status — deliberately outside the brand palette */
  --green: #22A55E;
  --amber: #F5A623;
  --red: #D9534F;
  --whatsapp: #25D366;

  --shadow-sm: 0 4px 12px -6px rgba(43, 32, 38, .18);
  --shadow-md: 0 20px 40px -20px rgba(43, 32, 38, .22);
  --radius: .9rem;
}

/* 2. Base & helpers ------------------------------------------------------ */
body {
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  background: #fff;
}

/* Sideways-scroll containment ---------------------------------------------
   Scoped to full-bleed bands only. Each of these spans edge to edge with no
   .container absorbing its children's negative row margins, which is the usual
   source of a few stray pixels of horizontal scroll.

   'clip' rather than 'hidden' so no scroll container is created, and applied
   ONLY to sections that hold no position:sticky descendants — the navbar
   (child of body), the detail-page gallery and the cart summary card are all
   deliberately outside this list. */
.hero,
.quickcat-wrap,
.page-header,
.cat-band,
.cta-bar,
.site-footer {
  overflow-x: clip;
}

/* NOTE: do not put overflow-x (hidden OR clip) on html/body. Either one stops
   the sticky navbar holding to the top of the viewport in some browsers, and
   both only mask sideways scroll rather than fix it. If horizontal overflow
   turns up, find the element that is too wide and constrain that element. */

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-dark);
  font-weight: 800;
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* The teal/navy in these class names is historical — they are the brand
   accent and heading/dark-band roles, and now resolve to the plum palette.
   Same for .btn-teal / .btn-outline-teal / .btn-outline-navy below. */
.text-teal {
  color: var(--primary) !important;
}

.text-navy {
  color: var(--text-dark) !important;
}

.bg-navy-deep {
  background: var(--primary-deep) !important;
}

.bg-gray {
  background: var(--gray-bg) !important;
}

.bg-band {
  background: var(--primary-050) !important;
}

.small-muted {
  color: var(--text-gray);
}

.lead-muted {
  color: var(--text-gray);
  font-size: 1.02rem;
  line-height: 1.7;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary-deep);
  color: #fff;
  padding: .5rem 1rem;
  z-index: 2000;
}

.skip-link:focus {
  left: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(143, 64, 100, .15);
}

/* 3. Buttons ------------------------------------------------------------- */
.btn-teal {
  background: var(--primary);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: .5rem;
  padding: 0.7rem 1.3rem;
  font-size: 1rem;
}

.btn-teal:hover,
.btn-teal:focus {
  background: var(--primary-deep);
  color: #fff;
}

.btn-teal:disabled {
  background: #C9A9B9;
}

.btn-outline-teal {
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  border-radius: .5rem;
  padding: 0.7rem 1.3rem;
}

.btn-outline-teal:hover {
  background: var(--primary);
  color: #fff;
}

.btn-outline-navy {
  border: 1.5px solid #fff;
  background: #fff;
  color: var(--primary-deep);
  font-weight: 700;
  border-radius: .5rem;
  padding: .7rem 1.4rem;
}

.btn-outline-navy:hover {
  background: var(--gray-bg);
  color: var(--primary-deep);
}

.btn-whatsapp {
  background: var(--whatsapp);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: .5rem;
  padding: .7rem 1.4rem;
  font-size: 1rem;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background: #1DA851;
  color: #fff;
}

/* 4. Top bar / Navbar ---------------------------------------------------- */
.topbar {
  background: var(--primary-deep);
  color: #EBD7E1;
  font-size: .8rem;
}

.topbar a {
  color: #EBD7E1;
}

.topbar a:hover {
  color: #fff;
}

.topbar .sep {
  opacity: .35;
  margin: 0 .55rem;
}

.topbar i {
  color: var(--secondary-light);
  margin-right: .35rem;
}

.navbar-allrise {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-allrise .nav-link {
  color: var(--text-dark);
  font-weight: 600;
  font-size: .95rem;
  margin: 0 .45rem;
}

.navbar-allrise .nav-link:hover,
.navbar-allrise .nav-link.active {
  color: var(--primary);
}

.navbar-allrise .dropdown-item.active,
.navbar-allrise .dropdown-item:active {
  background: var(--primary-050);
  color: var(--text-dark);
}

/* Header logo is a bitmap; height auto keeps its ratio if the brand slot is
   ever squeezed, and max-width stops it forcing the header wider. */
.navbar-allrise .navbar-brand img {
  height: auto;
  max-width: 100%;
}

.brand-name {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text-dark);
  /* 1.02 crops the capitals inside any clipping ancestor — 1.15 keeps the
     wordmark tight without letting the glyphs escape their line box. */
  line-height: 1.15;
  letter-spacing: .02em;
}

.brand-sub {
  font-size: .66rem;
  letter-spacing: .26em;
  color: var(--primary);
  font-weight: 700;
}

.icon-btn {
  color: var(--text-dark);
  font-size: 1.02rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
}

.icon-btn:hover {
  color: var(--primary);
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  font-size: .68rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cart-count.is-visible {
  display: inline-flex;
}

/* Mobile header ----------------------------------------------------------
   App-style bar below lg: menu + back left, logo centred, cart right.
   Centring is done with equal-weight side groups rather than absolute
   positioning — both groups flex from a 0 basis, so they always end up the
   same width and the brand sits dead centre without being taken out of flow.
   Nothing can overflow the viewport: when space runs short the brand shrinks
   rather than spilling. Do NOT add overflow-x:hidden to html/body to paper
   over layout bugs — it makes the element a scroll container and kills the
   sticky navbar. */
.nav-slot {
  display: none;
}

@media (max-width: 991.98px) {
  .navbar-allrise > .container {
    display: flex;
    align-items: center;
    /* MUST wrap: the collapse panel is a flex sibling, and with nowrap it gets
       forced onto the header row and blows the layout out sideways. */
    flex-wrap: wrap;
    min-height: 44px;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
  }

  .nav-actions--start {
    justify-content: flex-start;
  }

  .navbar-allrise .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .nav-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    position: relative;
    padding: 0;
    color: var(--text-dark);
    font-size: 1.05rem;
    background: none;
    border: none;
  }

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


  .nav-cart .cart-count {
    top: 2px;
    right: 2px;
  }

  /* Full-height drawer sliding in from under the bar. Overrides Bootstrap's
     .collapse:not(.show){display:none} — same specificity, and this sheet
     loads later. --nav-h is measured in main.js so the drawer always starts
     exactly below the header, whatever it currently stands at. */
  .navbar-allrise .navbar-collapse {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-h, 76px);
    bottom: 0;
    z-index: 1035;
    background: #fff;
    padding: .5rem 0 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s;
  }

  .navbar-allrise .navbar-collapse.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }

  /* Menu rows read as a list rather than a squeezed navbar. */
  .navbar-allrise .navbar-collapse .navbar-nav {
    padding: 0 1.1rem;
  }

  .navbar-allrise .navbar-collapse .nav-link {
    margin: 0;
    padding: .95rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .navbar-allrise .navbar-collapse .dropdown-menu {
    border: none;
    padding: .2rem 0 .6rem .9rem;
    margin: 0;
    background: var(--gray-bg);
    border-radius: .5rem;
  }

  .navbar-allrise .navbar-collapse .nav-actions-desk {
    padding: 1.2rem 1.1rem 0;
  }

  /* Page behind must not scroll under the open drawer. Scoped to this media
     query so the desktop body is never given an overflow (it would break the
     sticky navbar). */
  body.nav-open {
    overflow: hidden;
  }

  /* The utility strip is not part of the mobile design — the phone number is
     still in the footer and on the contact page. */
  .topbar {
    display: none;
  }
}

/* Hamburger that morphs into a close cross. Three real bars rather than
   Bootstrap's background-image icon, so they can be rotated. */
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle__bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: #000;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              top .28s cubic-bezier(.4, 0, .2, 1),
              opacity .18s linear;
}

.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }

.nav-toggle.is-open .nav-toggle__bars i:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bars i:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars i,
  .navbar-allrise .navbar-collapse {
    transition: none;
  }
}

/* Very small phones (320px): the centred brand would otherwise run under the
   cart/menu group, so trim the wordmark rather than let them collide. */
@media (max-width: 359.98px) {
  .navbar-allrise .navbar-brand img {
    width: 84px;
  }

  .nav-slot {
    flex-basis: 40px;
    width: 40px;
  }
}

/* 5. Hero ---------------------------------------------------------------- */
.hero {
  background: url(../img/bg.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}

.hero-heading {
  font-size: 1.8rem;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
}

@media (min-width: 768px) {
  .hero-heading {
    font-size: 2.7rem;
  }
}

/* Compact hero on phones — the catalogue is what people came for, so the
   intro is trimmed to get the quick-category strip and product grid above or
   near the fold instead of a screen and a half down. */
@media (max-width: 575.98px) {
  .hero > .container {
    padding-top: 1.6rem !important;
    padding-bottom: 1.6rem !important;
  }

  .hero > .container > .row {
    --bs-gutter-y: 1.4rem;
  }

  .hero-lede {
    font-size: .95rem;
    line-height: 1.55;
  }
}

.hero-lede {
  color: var(--text-gray);
  font-size: 1.02rem;
  max-width: 38rem;
  line-height: 1.65;
}

.search-box {
  background: #fff;
  border-radius: .7rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  padding: .35rem;
  max-width: 40rem;
}

.search-box input {
  border: none;
  font-size: .92rem;
}

.search-box input:focus {
  box-shadow: none;
}

.hero-media {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.hero-media .swiper-slide img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  display: block;
}

@media (max-width: 991.98px) {
  .hero-media .swiper-slide img {
    height: 260px;
  }
}

@media (max-width: 575.98px) {
  .hero-media .swiper-slide img {
    height: 180px;
  }
}

.hero-media .swiper-pagination {
  bottom: 12px !important;
}

/* 6. Quick category strip ------------------------------------------------ */
/* Sits across the hero's bottom edge, so the first thing under the fold is
   a route into the catalogue. */
.quickcat-wrap {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid #e3e3e3;
}

.quickcat-card {
  background: #fff;
}

.quickcat-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding:0rem .5rem;
  border-right: 1px solid #e3e3e3;
  border-radius: 0;
}


.quickcat-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.02rem;
  flex: none;
}

.quickcat-item:hover .quickcat-ic {
  border-color: var(--primary);
  background: var(--primary-050);
}

.quickcat-item span.label {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-dark);
}

.section-after-quickcat {
  padding-top: 2rem;
}

/* 7. Section headings ---------------------------------------------------- */
.section-title {
  font-size: 1.8rem;
  font-weight: 700;
}

.section-sub {
  color: var(--text-gray);
  font-size: .92rem;
  margin-top: .25rem;
}

.view-all {
  color: var(--primary);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}

.view-all:hover {
  text-decoration: underline;
}

/* 8. Category tabs (home) ------------------------------------------------ */
/* The rail scrolls sideways on narrow screens rather than wrapping, so the
   tabs stay on one line and read as a set. */
.cat-tabs-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
}

.cat-tabs {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cat-tabs::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  flex: none;
  border: none;
  background: none;
  padding: .7rem .9rem;
  margin-bottom: -1px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-gray);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .15s ease, border-color .15s ease;
}

.cat-tab:hover {
  color: var(--text-dark);
}

.cat-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.cat-tab__count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-gray);
  background: var(--gray-bg);
  border-radius: 1rem;
  padding: .1rem .45rem;
  line-height: 1.5;
}

.cat-tab.is-active .cat-tab__count {
  color: var(--primary-deep);
  background: var(--primary-050);
}

.cat-tabs-views {
  flex: none;
  padding-bottom: .4rem;
}

/* 8b. Filter bar (pill dropdowns — listing page) -------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.filter-pill {
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .9rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dark);
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.filter-pill:hover {
  border-color: var(--primary);
  color: var(--primary-deep);
}

.filter-pill .fa-chevron-down {
  font-size: .6rem;
  opacity: .55;
}

.filter-pill.is-active {
  border-color: var(--primary);
  background: var(--primary-050);
  color: var(--primary-deep);
}

.filter-pill.dropdown-toggle::after {
  display: none;
}

.filter-pill__badge {
  background: var(--primary);
  color: #fff;
  border-radius: 1rem;
  font-size: .7rem;
  padding: .05rem .4rem;
  font-weight: 700;
}

.filter-menu {
  border: 1px solid var(--border);
  border-radius: .6rem;
  box-shadow: var(--shadow-md);
  padding: .45rem;
  min-width: 15rem;
}

.filter-menu .menu-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-gray);
  padding: .35rem .55rem .25rem;
}

.filter-opt {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .55rem;
  border-radius: .4rem;
  font-size: .88rem;
  cursor: pointer;
  color: var(--text-dark);
}

.filter-opt:hover {
  background: var(--gray-bg);
}

.filter-opt input {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  flex: none;
}

.filter-opt .count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-gray);
}

.view-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  background: #fff;
}

.view-toggle.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-050);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--primary-050);
  color: var(--primary-deep);
  border: 1px solid rgba(143, 64, 100, .25);
  border-radius: 2rem;
  padding: .25rem .7rem;
  font-size: .8rem;
  font-weight: 600;
}

.chip button {
  border: none;
  background: none;
  color: inherit;
  line-height: 1;
  padding: 0;
  font-size: .9rem;
}

/* 9. Equipment cards ----------------------------------------------------- */
.equip-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}

.equip-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.equip-img-wrap {
  position: relative;
  background: #fff;
  display: block;
}

.equip-img-wrap img {
  height: 158px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.equip-tag {
  position: absolute;
  top: .65rem;
  left: .65rem;
  background: var(--secondary-dark);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border-radius: .35rem;
}

.equip-body {
  padding: .3rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.equip-body h3 {
  font-size: .97rem;
  font-weight: 700;
  margin-bottom: .35rem;
  line-height: 1.35;
}

.equip-body h3 a {
  color: var(--text-dark);
}

.equip-body h3 a:hover {
  color: var(--primary);
}
.navbar-brand img{
  width: 180px;
}
.equip-desc {
  font-size: .82rem;
  color: var(--text-gray);
  margin: .35rem 0 0;
}

.price-line {
  font-size: .86rem;
  color: var(--text-gray);
  margin: .45rem 0 .3rem;
}

.price-line strong {
  color: var(--text-dark);
  font-size: 1.05rem;
  font-weight: 800;
}

.price-alt {
  font-size: .76rem;
  color: var(--text-gray);
}

.avail-line {
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .8rem;
}

.avail-line i {
  font-size: .5rem;
  vertical-align: middle;
  margin-right: .15rem;
}

.avail-available {
  color: var(--green);
}

.avail-booked {
  color: var(--amber);
}

.avail-maintenance {
  color: var(--text-gray);
}

.equip-actions {
  margin-top: auto;
}

.btn-rent {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .87rem;
  border: none;
  border-radius: .5rem;
  padding: .55rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

.btn-rent:hover {
  background: var(--primary-deep);
  color: #fff;
}

.btn-rent:disabled {
  background: #D6C2CC;
  cursor: not-allowed;
}

/* Cards are static markup and carry all three rates; the grid's data-period
   decides which one is on show, so the daily/weekly/monthly switch never has
   to re-render a card. Daily is the default, so it survives with JS off. */
.price-line .rate-week,
.price-line .rate-month {
  display: none;
}

.equip-grid[data-period="week"] .rate-day,
.equip-grid[data-period="month"] .rate-day {
  display: none;
}

.equip-grid[data-period="week"] .rate-week {
  display: inline;
}

.equip-grid[data-period="month"] .rate-month {
  display: inline;
}

/* The short description stays in the markup (crawlable) but is only shown in
   list view, where there is room for it. */
.equip-grid:not(.is-list) .equip-desc {
  display: none;
}

/* 10. Category cards ----------------------------------------------------- */
/* Illustrated band behind the category carousel. Three stacked layers, all
   drawn in CSS — a tiled motif built from the Allrise plus-mark, two soft
   colour washes for depth, and a tinted base. No image asset involved, and it
   recolours by editing the two rgba values below. */
.cat-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background-color: var(--primary-050);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%20viewBox%3D%220%200%20180%20180%22%3E%3Cg%20fill%3D%22%238F4064%22%20opacity%3D%22.15%22%20transform%3D%22rotate(12%2028%2030)%22%3E%3Crect%20x%3D%2223.5%22%20y%3D%2213.0%22%20width%3D%229%22%20height%3D%2234%22%20rx%3D%223.5%22%2F%3E%3Crect%20x%3D%2211.0%22%20y%3D%2225.5%22%20width%3D%2234%22%20height%3D%229%22%20rx%3D%223.5%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23D4649E%22%20opacity%3D%22.16%22%20transform%3D%22rotate(-18%20118%2074)%22%3E%3Crect%20x%3D%22115.0%22%20y%3D%2263.0%22%20width%3D%226%22%20height%3D%2222%22%20rx%3D%222.3%22%2F%3E%3Crect%20x%3D%22107.0%22%20y%3D%2271.0%22%20width%3D%2222%22%20height%3D%226%22%20rx%3D%222.3%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238F4064%22%20opacity%3D%22.12%22%20transform%3D%22rotate(-8%2066%20126)%22%3E%3Crect%20x%3D%2262.3%22%20y%3D%22112.0%22%20width%3D%227.5%22%20height%3D%2228%22%20rx%3D%222.9%22%2F%3E%3Crect%20x%3D%2252.0%22%20y%3D%22122.3%22%20width%3D%2228%22%20height%3D%227.5%22%20rx%3D%222.9%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23D4649E%22%20opacity%3D%22.14%22%20transform%3D%22rotate(22%20150%20148)%22%3E%3Crect%20x%3D%22147.5%22%20y%3D%22140.0%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.9%22%2F%3E%3Crect%20x%3D%22142.0%22%20y%3D%22145.5%22%20width%3D%2216%22%20height%3D%225%22%20rx%3D%221.9%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%238F4064%22%20opacity%3D%22.10%22%20transform%3D%22rotate(-14%20150%2014)%22%3E%3Crect%20x%3D%22148.0%22%20y%3D%227.5%22%20width%3D%224%22%20height%3D%2213%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%22143.5%22%20y%3D%2212.0%22%20width%3D%2213%22%20height%3D%224%22%20rx%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(38rem 22rem at 10% 12%, rgba(212, 100, 158, .07), transparent 62%),
    radial-gradient(34rem 20rem at 92% 88%, rgba(143, 64, 100, .06), transparent 64%);
  background-size: 180px 180px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.cat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  height: 100%;
  display: block;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.cat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--secondary);
  transform: translateY(-3px);
}

.cat-img-wrap {
  position: relative;
}

/* Plum scrim over the foot of the photo — grounds the icon badge and keeps the
   image from butting straight into the white body. Drawn, not an asset. */
.cat-img-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(104, 45, 73, .5), rgba(104, 45, 73, 0));
}

.cat-img-wrap img {
  height: 140px;
  width: 100%;
  object-fit: cover;
}

.cat-badge {
  position: absolute;
  bottom: -20px;
  left: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border: 3px solid #fff;
  transition: transform .2s ease, background .2s ease;
}

.cat-card:hover .cat-badge {
  background: var(--primary-deep);
  transform: scale(1.08);
}

.cat-body {
  padding: 1.7rem 1rem 1.1rem;
  position: relative;
}

/* Dot-grid motif in the empty corner of the body — a CSS-drawn texture rather
   than an image, so it costs nothing and recolours with the palette. */
.cat-body::before {
  content: '';
  position: absolute;
  right: .85rem;
  bottom: .9rem;
  width: 52px;
  height: 34px;
  color: var(--secondary);
  opacity: .3;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 9px 9px;
}

.cat-body > * {
  position: relative;
  z-index: 1;
}

.cat-body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .25rem;
}

.cat-body p {
  font-size: .83rem;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.5;
}

.cat-count {
  font-size: .75rem;
  color: var(--primary);
  font-weight: 700;
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Arrow affordance — the whole card is a link, so it should look like one. */
.cat-count::after {
  content: '→';
  font-size: .85rem;
  line-height: 1;
  transition: transform .2s ease;
}

.cat-card:hover .cat-count::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card,
  .cat-badge,
  .cat-count::after {
    transition: none;
  }

  .cat-card:hover {
    transform: none;
  }
}

/* 11. Trust strip / How it works ----------------------------------------- */
.trust-strip {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.2rem 1rem;
}

.trust-item i {
  color: var(--primary);
  font-size: 1.25rem;
  margin-top: .15rem;
}

.trust-item h4 {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .15rem;
}

.trust-item p {
  font-size: .79rem;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.45;
}

.vline {
  border-left: 1px solid var(--border);
}

@media (max-width: 991.98px) {
  .vline {
    border-left: 0;
  }
  .hero{
    text-align: center;
  }
  .hero-lede{
    display: none;
  }
  .quickcat-wrap{
    display: none;
  }
  .section-sub{
    display: none;
  }
  .section-title{
    font-size: 1.4rem;
  }
}

.steps-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem .75rem;
}

.step-col {
  position: relative;
}

/* dashed rail between steps, as in the design */
@media (min-width: 992px) {
  .step-col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1rem;
    width: 2rem;
    border-top: 2px dashed var(--border);
  }
}

.step-wrap {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.step-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-deep);
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.step-ic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gray-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex: none;
}

.step-title {
  font-size: .93rem;
  font-weight: 700;
  margin-bottom: .15rem;
}

.step-desc {
  font-size: .81rem;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.45;
}

/* 12. Stats band & testimonials ------------------------------------------ */
.band-heading {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
}

.stat-item {
  text-align: center;
  padding: 0 .4rem;
}

.stat-item i {
  color: var(--primary);
  font-size: 1.05rem;
  margin-bottom: .45rem;
  display: inline-block;
}

.stat-value {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
}

.stat-label {
  font-size: .75rem;
  color: var(--text-gray);
  line-height: 1.4;
  margin-top: .15rem;
}

.stat-vline {
  border-left: 1px solid rgba(143, 64, 100, .25);
}

.testi-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.3rem;
  box-shadow: var(--shadow-md);
  height: 100%;
}

.testi-quote-mark {
  color: var(--secondary);
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 800;
}

.testi-text {
  font-size: .88rem;
  color: var(--text-dark);
  line-height: 1.6;
}

.testi-stars {
  color: var(--amber);
  font-size: .8rem;
}

.testi-name {
  font-size: .83rem;
  font-weight: 700;
  color: var(--text-gray);
}

.testi-role {
  font-size: .76rem;
  color: var(--text-gray);
}

/* 13. Page header (inner pages) ------------------------------------------ */
.page-header {
  background: var(--primary-deep);
  color: #fff;
  padding: 2.6rem 0;
}

.page-header h1 {
  color: #fff;
  font-size: 1.9rem;
  margin-bottom: .4rem;
}

.page-header p {
  color: #E3C9D6;
  margin: 0;
  font-size: .95rem;
}

/* Compact variant — for pages where the banner is just orientation and the
   real content should start straight away (the cart). */
.page-header--sm {
  padding: 1.35rem 0;
}

.page-header--sm h1 {
  font-size: 1.35rem;
  margin-bottom: 0;
}

.page-header--sm .crumbs {
  margin-bottom: 0 !important;
}

/* Breadcrumbs -------------------------------------------------------------
   One component, two skins: .crumbs on light surfaces, .crumbs--light on the
   dark plum bands. Dividers are CSS-drawn chevrons rather than Bootstrap's
   slash or a Font Awesome glyph, so they inherit colour and never depend on
   the icon font having loaded. */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .82rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.crumbs::-webkit-scrollbar {
  display: none;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.crumbs li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: none;
  margin: 0 .6rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .5;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-gray);
  font-weight: 600;
  border-radius: .3rem;
}

.crumbs a:hover {
  color: var(--primary);
}

.crumbs a i {
  font-size: .78rem;
  opacity: .85;
}

/* The page you are on is the anchor of the trail — it gets the weight, not
   the washed-out grey Bootstrap gives it. */
.crumbs [aria-current="page"] {
  color: var(--text-dark);
  font-weight: 700;
}

.crumbs--light {
  color: #C8A8B8;
}

.crumbs--light a {
  color: #EBD7E1;
}

.crumbs--light a:hover {
  color: #fff;
}

.crumbs--light [aria-current="page"] {
  color: #fff;
}

/* Long trails: drop the middle steps first, then let the rest scroll. */
@media (max-width: 575.98px) {
  .crumbs li:not(:first-child):not(:nth-last-child(-n+2)) {
    display: none;
  }
}

/* Standalone breadcrumb strip (detail page, no dark header above it) */
.crumb-bar {
  background: var(--gray-bg);
  padding: .75rem 0;
}

/* 14. Listing page ------------------------------------------------------- */
.filter-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  background: #fff;
}

.filter-group + .filter-group {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

.filter-group h3 {
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dark);
  margin-bottom: .8rem;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: var(--text-dark);
  margin-bottom: .55rem;
  cursor: pointer;
}

.filter-check input {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex: none;
}

.filter-check .count {
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-gray);
}

.filter-range output {
  font-weight: 700;
  color: var(--primary);
  font-size: .9rem;
}

input[type=range] {
  accent-color: var(--primary);
}

.toolbar {
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .6rem .8rem;
  background: #fff;
}

/* "Clear all" is a Bootstrap .btn-link — pull it onto the brand colour */
.toolbar .btn-link {
  color: var(--primary);
}

.toolbar .btn-link:hover {
  color: var(--primary-deep);
}

/* Rental-period switch: lets customers compare daily/weekly/monthly prices
   across the whole catalogue without opening each product. */
.period-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: .5rem;
  overflow: hidden;
  background: #fff;
}

.period-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.period-switch label {
  padding: .38rem .8rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-gray);
  cursor: pointer;
  margin: 0;
  border-right: 1px solid var(--border);
}

.period-switch label:last-of-type {
  border-right: none;
}

.period-switch input:checked + label {
  background: var(--primary-050);
  color: var(--primary-deep);
}

.period-switch input:focus-visible + label {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* List view variant */
.equip-grid.is-list .equip-col {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.equip-grid.is-list .equip-card {
  flex-direction: row;
}

.equip-grid.is-list .equip-img-wrap {
  width: 210px;
  flex: none;
}

.equip-grid.is-list .equip-img-wrap img {
  height: 100%;
  min-height: 170px;
}

.equip-grid.is-list .equip-body {
  padding-top: 1.1rem;
}

.equip-grid.is-list .equip-actions {
  max-width: 220px;
}

@media (max-width: 575.98px) {
  .equip-grid.is-list .equip-card {
    flex-direction: column;
  }

  .equip-grid.is-list .equip-img-wrap {
    width: 100%;
  }
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-gray);
}

.empty-state i {
  font-size: 2rem;
  color: #DCD2D8;
  margin-bottom: .8rem;
  display: block;
}

/* 15. Detail page -------------------------------------------------------- */
/* The buy box runs much taller than the gallery now that the availability
   calendar lives in it, so the images follow the customer down the page.
   align-self stops the Bootstrap column stretching to the row height — a
   full-height sticky element has nothing to travel against. */
@media (min-width: 992px) {
  .detail-gallery {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
}

.gallery-main {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.gallery-main .swiper-slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .gallery-main .swiper-slide img {
    height: 215px;
  }
}

.gallery-thumbs {
  margin-top: .7rem;
}

.gallery-thumbs .swiper-slide {
  border: 1px solid var(--border);
  border-radius: .55rem;
  overflow: hidden;
  cursor: pointer;
  opacity: .6;
  background: #fff;
}

.gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--primary);
}

.detail-title {
  font-size: 1.6rem;
  margin-bottom: .4rem;
}

.detail-meta {
  font-size: .85rem;
  color: var(--text-gray);
}
.detail-meta a{
  color: var(--primary) !important;
}
.detail-price-box {
  border-radius: var(--radius);
  background: #fff;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: .5rem;
  overflow: hidden;
}

.qty-control button {
  width: 36px;
  height: 38px;
  border: none;
  background: #fff;
  color: var(--text-dark);
  font-size: .9rem;
}

.qty-control button:hover {
  background: var(--gray-bg);
  color: var(--primary);
}

.qty-control input {
  width: 48px;
  height: 38px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font-weight: 700;
}

.qty-control input:focus {
  outline: none;
}

.estimate-box {
  background: var(--primary-050);
  border-radius: .6rem;
  padding: .9rem 1rem;
}

.estimate-box .label {
  font-size: .8rem;
  color: var(--primary-deep);
  font-weight: 600;
}

.estimate-box .value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-dark);
}

.estimate-save {
  font-size: .8rem;
  font-weight: 600;
  color: var(--green);
  border-top: 1px dashed var(--border);
  padding-top: .5rem;
}

/* Buy-box layout ----------------------------------------------------------
   The calendar is width-capped, which left dead space beside it in a wide
   column. From xl up the quantity and estimate move into that space; below
   that there is not enough room for two useful columns, so it stacks and the
   quantity sits inline with the delivery note instead. */
.buy-grid__side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem 1rem;
  align-items: end;
}

@media (max-width: 575.98px) {
  .buy-grid__side {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.buy-grid__side .form-note{
  font-size: 13px;
}
.buy-grid__side .estimate-box {
  grid-column: 1 / -1;
}

.estimate-box__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.estimate-box__meta {
  text-align: right;
}

@media (min-width: 1200px) {
  .buy-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .buy-grid .rental-calendar {
    max-width: 19rem;
  }

  /* Stacked in the narrow side column — a space-between row would collide. */
  .buy-grid__side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
  }

  .buy-grid__side .estimate-box__row {
    display: block;
  }

  .buy-grid__side .estimate-box__meta {
    text-align: left;
    margin-top: .35rem;
  }
}

/* Availability calendar ---------------------------------------------------
   Shared by the detail-page buy box and the cart's "change dates" modal. */
.rental-calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem;
  background: #fff;
}

/* On phones the calendar runs full width — the screen is already narrow, so
   the extra room goes into bigger tap targets rather than dead margin.
   From sm up it needs a cap instead: day cells are square (aspect-ratio: 1),
   so an uncapped calendar in a wide column produces enormous rows. */
@media (min-width: 576px) {
  .rental-calendar {
    max-width: 21rem;
  }
}

.modal-body .rental-calendar {
  margin: 0 auto;
}

.rc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}

.rc-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-dark);
}

.rc-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--text-dark);
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rc-arrow:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.rc-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.rc-dow,
.rc-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.rc-dow span {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding-bottom: .3rem;
}

.rc-cell {
  padding: 1px 0;
}

.rc-cell.is-range {
  background: var(--primary-050);
}

.rc-cell.is-range-start {
  border-radius: 999px 0 0 999px;
}

.rc-cell.is-range-end {
  border-radius: 0 999px 999px 0;
}

.rc-cell.is-range-start.is-range-end {
  border-radius: 999px;
}

.rc-day {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  background: none;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1;
}

.rc-day:hover:not(:disabled) {
  background: var(--border);
}

.rc-day.is-outside {
  visibility: hidden;
}

.rc-day.is-past {
  color: var(--text-muted);
  opacity: .45;
  cursor: not-allowed;
  background: #ececec;
}

.rc-day.is-booked {
  color: var(--red);
  background: rgba(217, 83, 79, .1);
  text-decoration: line-through;
  cursor: not-allowed;
}

.rc-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--border);
}

.rc-day.is-selected {
  color: var(--primary-deep);
}

.rc-day.is-edge {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

.rc-day:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.rc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .9rem;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
  font-size: .72rem;
  color: var(--text-gray);
}

.rc-legend span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.rc-key {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.rc-key--free { border: 1.5px solid var(--border); background: #fff; }
.rc-key--sel { background: var(--primary); }
.rc-key--booked { background: rgba(217, 83, 79, .25); border: 1.5px solid var(--red); }

.rc-range {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  padding: .6rem .8rem;
  border-radius: .6rem;
  background: var(--gray-bg);
  font-size: .82rem;
}

.rc-range__leg span {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.rc-range__leg strong {
  font-size: .85rem;
  color: var(--text-dark);
}

.rc-range__arrow {
  color: var(--primary);
}

.rc-range__days {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .74rem;
  font-weight: 700;
}

.rc-range__hint {
  color: var(--text-gray);
}

.rc-note {
  display: none;
  margin: .6rem 0 0;
  font-size: .78rem;
  color: var(--primary-deep);
  background: var(--primary-050);
  border-radius: .5rem;
  padding: .45rem .65rem;
}

.rc-note.is-visible {
  display: block;
}

/* Compact calendar for short screens — a 1366×768 laptop has roughly 600px of
   usable height, and the buy box has to fit the calendar, quantity, estimate
   and three buttons into it. Trims the grid, not the information. */
@media (max-height: 850px) and (min-width: 992px) {
  .rental-calendar {
    max-width: 18rem;
    padding: .7rem;
  }

  .rc-nav {
    margin-bottom: .4rem;
  }

  .rc-title {
    font-size: .88rem;
  }

  .rc-arrow {
    width: 27px;
    height: 27px;
    font-size: .68rem;
  }

  .rc-dow span {
    font-size: .64rem;
    padding-bottom: .15rem;
  }

  .rc-day {
    font-size: .75rem;
  }

  .rc-legend {
    margin-top: .5rem;
    padding-top: .45rem;
    font-size: .68rem;
    gap: .1rem .6rem;
  }

  .rc-range {
    margin-top: .55rem;
    padding: .45rem .6rem;
    gap: .5rem;
    font-size: .78rem;
  }

  .rc-range__leg strong {
    font-size: .8rem;
  }

  .rc-note {
    font-size: .74rem;
    padding: .38rem .55rem;
  }
}

.spec-table {
  width: 100%;
  font-size: .9rem;
}

.spec-table th {
  width: 42%;
  font-weight: 600;
  color: var(--text-gray);
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.spec-table td {
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  font-weight: 600;
}

/* Mobile action bar ------------------------------------------------------
   Below lg the buy box scrolls away long before the customer has finished
   reading, so the two primary actions pin to the bottom of the viewport. It is
   the SAME button group restyled — not a duplicate — so the ids stay unique
   and equipment-detail.js binds to them unchanged. */
@media (max-width: 991.98px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    gap: .6rem;
    margin: 0;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px -12px rgba(43, 32, 38, .45);
  }

  .action-bar .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: .6rem;
    padding-right: .6rem;
    font-size: .95rem;
    white-space: nowrap;
  }

  /* Two actions only, matching the design. Reaching the cart stays available
     from the header badge and from the toast shown after adding. */
  .action-bar #goToCart {
    display: none !important;
  }

  /* Clear the bar so the closing note and footer are never trapped under it. */
  .has-action-bar {
    padding-bottom: 5.25rem;
  }

  /* The bar already carries a WhatsApp action — two would collide. */
  .has-action-bar .wa-float,
  .has-action-bar .call-float {
    display: none;
  }
}

/* Specifications block — rides along under the buy box in the right column,
   so the spec sheet is beside the product rather than hidden behind a tab. */
.detail-block {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

.detail-block__title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .4rem;
}

/* Description / Rental Terms — plain stacked sections, no tab chrome. */
.detail-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  font-size: .92rem;
  color: var(--text-dark);
}

.feature-list li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  position: absolute;
  left: 0;
  top: .05rem;
}

/* 16. Cart page ---------------------------------------------------------- */
.cart-table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.cart-row {
  display: flex;
  gap: 1rem;
  padding: 1.1rem;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.cart-row:last-child {
  border-bottom: none;
}

.cart-row__img {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: .6rem;
  background: #fff;
  object-fit: cover;
}

.cart-row__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .15rem;
}

.cart-row__title a {
  color: var(--text-dark);
}

.cart-row__title a:hover {
  color: var(--primary);
}

.cart-row__meta {
  font-size: .8rem;
  color: var(--text-gray);
  margin-bottom: .6rem;
}

.cart-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.cart-row__controls .form-select {
  width: auto;
  font-size: .85rem;
  padding: .4rem 2rem .4rem .7rem;
}

/* Rental dates, editable — reopens the availability calendar in a modal */
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 38px;
  padding: 0 .35rem 0 .7rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: #fff;
  font-size: .82rem;
  color: var(--text-dark);
}

.date-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.date-pill > i {
  color: var(--primary);
}

.date-pill__range {
  font-weight: 600;
  white-space: nowrap;
}

.date-pill__days {
  background: var(--gray-bg);
  border-radius: .35rem;
  padding: .15rem .45rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-gray);
}

.date-pill.is-warn {
  border-color: var(--red);
  color: var(--red);
}

.date-pill.is-warn > i {
  color: var(--red);
}

.cart-row__warn {
  margin: .5rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--red);
}

.cart-row__amount {
  text-align: right;
  min-width: 110px;
}

.cart-row__amount .amt {
  font-size: 1.05rem;
  font-weight: 800;
}

.cart-row__amount .unit {
  font-size: .75rem;
  color: var(--text-gray);
}

.btn-remove {
  border: none;
  background: none;
  color: var(--text-gray);
  font-size: .82rem;
  font-weight: 600;
  padding: 0;
}

.btn-remove:hover {
  color: var(--red);
}

@media (max-width: 575.98px) {
  .cart-row {
    flex-wrap: wrap;
  }

  .cart-row__amount {
    text-align: left;
    width: 100%;
  }
}

.summary-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
  background: #fff;
  position: sticky;
  top: 96px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--text-gray);
  margin-bottom: .6rem;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: .8rem;
  margin-top: .8rem;
}

.summary-total .label {
  font-weight: 700;
}

.summary-total .value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
}

.notice-box {
  background: var(--primary-050);
  border-radius: .6rem;
  padding: .8rem .9rem;
  font-size: .82rem;
  color: var(--primary-deep);
}

/* Booking confirmation page ---------------------------------------------- */
.success-hero {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem;
  border-radius: var(--radius);
  background: var(--primary-050);
  border: 1px solid var(--border);
}

.success-hero__ic {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.success-hero__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: .25rem;
}

.success-hero__sub {
  font-size: .9rem;
  color: var(--text-gray);
}

.order-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .9rem 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.order-meta__label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.order-meta__value {
  font-size: .95rem;
  color: var(--text-dark);
}

.next-steps {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-gray);
  font-size: .92rem;
  line-height: 1.65;
}

.next-steps li {
  margin-bottom: .5rem;
}

.next-steps strong {
  color: var(--text-dark);
}

/* Definition list for the delivery details block. */
.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1.2rem;
  font-size: .9rem;
}

.detail-list dt {
  font-weight: 600;
  color: var(--text-gray);
}

.detail-list dd {
  margin: 0;
  color: var(--text-dark);
  white-space: pre-line;
}

@media (max-width: 575.98px) {
  .detail-list {
    grid-template-columns: 1fr;
    gap: .15rem;
  }

  .detail-list dd {
    margin-bottom: .6rem;
  }
}

/* 17. Contact page ------------------------------------------------------- */
.contact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  height: 100%;
  background: #fff;
}

.contact-card .ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-050);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .9rem;
}

.contact-card h3 {
  font-size: 1rem;
  margin-bottom: .35rem;
}

.contact-card p,
.contact-card a {
  font-size: .9rem;
  color: var(--text-gray);
  margin: 0;
}

.contact-card a:hover {
  color: var(--primary);
}

.map-frame {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: var(--radius);
}

.form-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-dark);
}

.form-note {
  font-size: 15px;
  color: var(--text-gray);
}

/* 18. About page --------------------------------------------------------- */
.about-img {
  border-radius: var(--radius);
  width: 100%;
  object-fit: cover;
}

.value-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  height: 100%;
  background: #fff;
}

.value-card .ic {
  width: 48px;
  height: 48px;
  border-radius: .7rem;
  background: var(--primary-050);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: .9rem;
}

.value-card h3 {
  font-size: 1rem;
  margin-bottom: .4rem;
}

.value-card p {
  font-size: .88rem;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.65;
}

.vm-card {
  border-left: 3px solid var(--primary);
  padding: .2rem 0 .2rem 1.2rem;
}

.vm-card h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

.vm-card p {
  color: var(--text-gray);
  font-size: .94rem;
  line-height: 1.7;
  margin: 0;
}

/* 19. CTA bar & Footer --------------------------------------------------- */
.cta-bar {
  background: var(--primary-deep);
  color: #fff;
}

.cta-ic-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
}

.site-footer {
  background: var(--text-dark);
  color: #CBB6C0;
  padding: 3rem 0 0;
  font-size: .88rem;
}

.site-footer h4 {
  color: #fff;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 1rem;
}

.site-footer a {
  color: #CBB6C0;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: .55rem;
}

.footer-brand-text {
  line-height: 1.75;
  max-width: 22rem;
}

.footer-social {
  display: flex;
  gap: .55rem;
  margin-top: 1rem;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}

.footer-social a:hover {
  background: var(--primary);
}

.footer-contact li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.footer-contact i {
  color: var(--primary);
  margin-top: .25rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem;
  padding: 1.2rem 0;
  font-size: .8rem;
}

/* 20. Floating WhatsApp / toasts ----------------------------------------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 60px;
  z-index: 1050;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px -6px rgba(37, 211, 102, .6);
}

.wa-float:hover {
  background: #1DA851;
  color: #fff;
}

.toast-stack {
  position: fixed;
  right: 18px;
  /* Clears both floating buttons (2 × 54px + gaps), not just WhatsApp. */
  bottom: 150px;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.app-toast {
  background: var(--primary-deep);
  color: #fff;
  border-radius: .6rem;
  padding: .7rem 1rem;
  font-size: .86rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: .6rem;
  animation: toast-in .22s ease;
}

.app-toast i {
  color: var(--green);
}

.app-toast a {
  color: #8FE3B4;
  font-weight: 700;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 21. Swiper overrides --------------------------------------------------- */


.swiper-button-next,
.swiper-button-prev {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--text-dark);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: .85rem;
  font-weight: 800;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.swiper-button-disabled {
  opacity: .35;
}

.swiper-pagination-bullet {
  background: var(--border);
  opacity: 1;
  width: 7px;
  height: 7px;
}

.swiper-pagination-bullet-active {
  background: var(--primary);
  width: 18px;
  border-radius: 4px;
}

.hero-media .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .6);
}

.hero-media .swiper-pagination-bullet-active {
  background: #fff;
}

.carousel-wrap {
  position: relative;
}

.carousel-wrap .swiper-button-next {
  right: -6px;
}

.carousel-wrap .swiper-button-prev {
  left: -6px;
}

@media (max-width: 991.98px) {
  .carousel-wrap .swiper-button-next,
  .carousel-wrap .swiper-button-prev {
    display: none;
  }
  .navbar-brand img {
    width: 130px;
  }
    .page-header--sm {
        padding: 1rem 0;
    }
    .trust-item{
        padding:0 1rem;
    }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .topbar,
  .navbar-allrise,
  .wa-float,
  .call-float,
  .site-footer,
  .cta-bar,
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}

/* Per-card contact shortcuts -------------------------------------------
   Sits under the Rent Now / View Details button inside .equip-actions.
   Cards get narrow at row-cols-2 on phones, so the labels drop away below
   480px and the buttons fall back to icon-only. */
.equip-contact {
  display: flex;
  gap: .4rem;
  margin-top: .4rem;
}

.equip-ico {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .42rem .35rem;
  border-radius: .5rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.equip-ico i {
  font-size: .92rem;
}

.equip-ico span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equip-ico-wa {
    background: var(--whatsapp);
    border-color: rgba(37, 211, 102, .35);
    color: #fff;
}

.equip-ico-wa:hover,
.equip-ico-wa:focus {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
}

.equip-ico-call {
  background: var(--gray-bg);
  border-color: rgba(0, 0, 0, .12);
  color: var(--primary-deep);
}

.equip-ico-call:hover,
.equip-ico-call:focus {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: #fff;
}

@media (max-width: 479.98px) {
  .equip-ico span {
    display: none;
  }

  .equip-ico {
    padding: .45rem .3rem;
  }
}

/* Enquiry replaces the cart while checkout is switched off ------------- */
button.btn-rent {
  cursor: pointer;
}

button.nav-slot {
  border: none;
  cursor: pointer;
}

/* Rental-duration picker (product detail, enquiry mode) -----------------
   The only input on the page while checkout is off, so it gets the same
   tinted panel as .estimate-box plus an accent edge — enough to read as
   "fill this in" without competing with the two action buttons below it. */
.duration-picker {
  background: var(--primary-050);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: .6rem;
  padding: .9rem 1rem;
}

.duration-picker__label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--primary-deep);
}

.duration-picker__label i {
  font-size: .95rem;
  color: var(--primary);
}

.duration-picker__select {
  background-color: #fff;
  border-color: var(--border);
  padding: .6rem .75rem;
  font-weight: 600;
  color: var(--text-dark);
}

.duration-picker__select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(143, 64, 100, .18);
}

/* Enquiry actions share one row from lg up. Below that the mobile .action-bar
   block further up already lays them out side by side in the pinned bar. */
@media (min-width: 992px) {
  .action-bar .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Enquiry confirmation page -------------------------------------------- */
.thankyou-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.thankyou-card__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(34, 165, 94, .12);
  color: var(--green);
  font-size: 1.7rem;
}

.thankyou-card__title {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-dark);
}

.thankyou-card__lead {
  margin: 0;
  color: var(--text-gray);
  font-size: 1.02rem;
}

.thankyou-card__lead strong {
  color: var(--primary-deep);
}

.thankyou-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.6rem;
}

@media (max-width: 575.98px) {
  .thankyou-card {
    padding: 2rem 1.15rem;
  }

  .thankyou-card__actions .btn {
    flex: 1 1 100%;
  }
}

.thankyou-card__note {
  margin: .75rem 0 0;
  font-size: .88rem;
  color: var(--text-gray);
}

.thankyou-card__note a {
  color: var(--primary);
  font-weight: 700;
}

/* In-place enquiry confirmation (replaces the form once it is sent) ------ */
.enquiry-sent {
  text-align: center;
  padding: 1.75rem 1rem;
}

.enquiry-sent__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: rgba(34, 165, 94, .12);
  color: var(--green);
  font-size: 1.45rem;
}

.enquiry-sent__title {
  margin: 0 0 .4rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
}

.enquiry-sent__lead {
  margin: 0;
  color: var(--text-gray);
  font-size: .95rem;
}

.enquiry-sent__lead strong {
  color: var(--primary-deep);
}

/* "Starting from" label ahead of the rate. Longer than the old "From", so on
   the two-up phone grid it takes its own line rather than orphaning the price. */
.price-line__prefix {
  font-size: .78rem;
}

@media (max-width: 575.98px) {
  .price-line__prefix {
    display: block;
  }
}

/* Floating call button --------------------------------------------------
   Sits directly above the WhatsApp float in the same bottom-right stack, in
   brand colour so the two read as one set of contact actions rather than two
   competing badges. */
.call-float {
  position: fixed;
  right: 18px;
  bottom: 130px; /* 18px offset + the 54px WhatsApp button + a 12px gap */
  z-index: 1050;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 8px 20px -6px rgba(143, 64, 100, .6);
  transition: background .18s ease;
}

.call-float:hover,
.call-float:focus {
  background: var(--primary-deep);
  color: #fff;
}

/* No WhatsApp number configured, so the call button takes the bottom slot. */
.call-float--solo {
  bottom: 18px;
}