/**
 * cycle-filters.css
 * Specific styles for the cycle listing page with sidebar filters
 * Add this file after templatemo-onix-digital.css
 */

/* ===== LAYOUT STRUCTURE ===== */
.featured-page {
  display: flex;
  gap: 0;
  /* Center the layout */
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 107px !important;
}

/* Sidebar Filter Column */
.filters-sidebar {
  width: 280px;
  min-width: 280px;
  background: #ffffff;
  padding: 25px 20px 80px;
  border-right: 1px solid #e7eef1;
  position: sticky;
  height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: 13px;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.filters-sidebar::-webkit-scrollbar {
  display: none;
}

/* Main Content Area (Cycles Grid) */
.cycles-main-content {
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  background: #ffffff;
}

.header-area {
  z-index: 1010 !important;
}

.sticky-top {
  position: relative;
  z-index: 1000;
  background-color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 1024px) {
  .sticky-top {
    position: sticky;
    top: 61px !important;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* Remove overflow:hidden from container as it breaks sticky or causes layout issues */
/* Desktop: the page is ONE scroll surface. The grid used to be its own
   fixed-height scroll box (height: calc(100vh - 185px); overflow-y: auto),
   so the cards scrolled inside a clipped viewport-height window while the
   page scroll separately pulled the footer up behind it — cards read as
   sliding "into"/behind the footer, and there were two competing scrollbars.
   Letting the grid take its natural height means the footer always sits
   below the last card and scrolls up only after the grid is exhausted.
   Infinite scroll is unaffected: handleScroll() in cycle-filters.js already
   falls back to the #cycles-grid bounding-rect check when the window (rather
   than the container) fires the scroll event. */
@media (min-width: 1025px) {
  .featured.container {
    height: auto;
    overflow-y: visible;
    padding-bottom: 20px;
  }

  /* With the page scrolling as a whole, the sidebar pins under the navbar
     (.background-header is fixed at 80px once scrolled) instead of being a
     viewport-height box, and only scrolls internally when the filter list
     is taller than the screen.
     Selector needs BOTH classes: the aside is `filters-sidebar sticky-top`,
     and the `.sticky-top { position: relative }` rule above is declared later
     in this file at equal specificity — so a bare `.filters-sidebar` here
     loses the position battle and sticky silently never engages.
     align-self: flex-start is also required — .featured-page is a flex row
     whose default `stretch` would size the sidebar to the full column
     height, which likewise disables position: sticky. */
  /* Same offset as .cycles-main-content > .sticky-top below, so the sidebar
     and the title/chips bar pin flush against the navbar as one line. This
     used to sit at +10px, which left a visible white band between the navbar
     and the "Tyre Size" heading while the right-hand bar was tucked under —
     the two sticky elements pinned at different heights and the mismatch read
     as a rendering gap. The -1px tucks it a pixel under for the same reason
     it does there: a fractional layout height can otherwise leave a hairline. */
  .filters-sidebar.sticky-top {
    position: sticky;
    top: calc(var(--tt-nav-h, 80px) - 1px);
    align-self: flex-start;
    height: auto;
    /* Was a hardcoded 110px (80 nav + 10 gap + 20 breathing room). Now that
       the gap is gone, track the measured navbar height so the box still ends
       ~20px short of the viewport bottom at any nav height / zoom level. */
    max-height: calc(100vh - var(--tt-nav-h, 80px) - 20px);
  }

  /* Keep the title / chips / active-filter row reachable while scrolling —
     the old inner scroll box kept them permanently in view for free; now
     that the page scrolls, they need to be sticky to not scroll away. */
  /* --tt-nav-h is the pinned navbar's measured height, published by the scroll
     handler in cycle-rent-mumbai.php; 80px is the fallback before it first
     pins. The -1px is deliberate: it tucks the bar a pixel under the navbar so
     a fractional layout height (zoom levels, hidpi) can't leave a hairline of
     scrolling cards showing between the two. */
  .cycles-main-content > .sticky-top {
    position: sticky;
    top: calc(var(--tt-nav-h, 80px) - 1px);
  }

  /* Pinned navbar (class toggled by the scroll handler in cycle-rent-mumbai.php).
     This deliberately does NOT reuse the site's .background-header class:
     custom.js' "Header Type = Fixed" handler calls removeClass('background-header')
     in its else branch on every scroll event, and its if branch can never be
     true (it measures a .header-text element that exists nowhere in the
     codebase, so the comparison is against NaN). Anything we add under that
     name gets stripped again microseconds later. This class is ours alone.

     The full header is ~111px — a 26px marquee strip over an 85px nav — so the
     marquee is dropped and the nav trimmed while pinned. What stays is the
     logo/menu row at exactly the 80px the sticky offsets above are measured
     against. The marquee is untouched at the top of the page, where it's read. */
  .header-area.tt-pinned-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(156, 156, 156, 0.15);
  }

  .header-area.tt-pinned-header > h2 {
    display: none;
  }

  .header-area.tt-pinned-header .main-nav {
    min-height: 80px;
  }
}

@media (max-width: 1024px) {
  .featured.container {
    height: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0px;
    padding-top: 20px;
    min-height: 650px;
  }
}

.featured.container::-webkit-scrollbar {
  width: 8px;
  display: none;
}

.featured.container::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
  display: none;
}

.featured.container::-webkit-scrollbar-thumb {
  background: #ffffff00;
  border-radius: 4px;
  display: none;
}

/* Top Bar with Title and Filter Chips */
.cycles-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Align vertically center */
  margin-bottom: 0px;
  margin-top: 30px !important;
  padding: 0 15px;
  flex-wrap: nowrap;
  /* Prevent title and filters from wrapping rigidly */
  gap: 20px;
}

.cycles-header-bar .section-heading {
  padding-left: 0 !important;
  margin-bottom: 0;
  margin-top: 0px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cycles-header-bar .section-heading h1 {
  font-size: 30px !important;
  line-height: 26px;
  font-weight: 500;
  color: #000000;
  margin-top: 0px !important;
  font-family: "DM Sans", sans-serif;
  white-space: nowrap;
}

.filter-chips-container {
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}

/* Filter Chips Container */
.filter-chips-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Hide scrollbar for Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar for IE/Edge */
  flex: 1;
  min-width: 0;
}

.filter-chips-wrapper::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome/Safari */
}

.filter-chip {
  padding: 9px 16px;
  border-radius: 100px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.filter-chip.active {
  background: #00a5f1;
  color: #ffffff;
}

.filter-chip:not(.active) {
  background: #e6f8ff;
  color: #303030;
}

.filter-chip:hover:not(.active) {
  background: #d0e8f7;
}

/* Instock Toggle — sits in the same chip strip but is an independent
   on/off switch (not part of the mutually-exclusive chip group), so it
   layers on top of Non Gear/Gear/Kids/Women/Premium instead of clearing
   them. */
.instock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  color: #303030 !important;
  border: none !important;
  padding: 0 8px !important;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  outline: none !important;
  box-shadow: none !important;
}

.instock-toggle-track {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #d8dee2;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.instock-toggle.active .instock-toggle-track {
  background: #00a5f1;
}

.instock-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
}

.instock-toggle.active .instock-toggle-thumb {
  transform: translateX(12px);
}

/* Instock header switch — native iOS-style control shown next to the page
   title on mobile only (turned on in cycle-filters-mobile.css, which also
   hides the .instock-toggle chip there since it can scroll off-screen in
   the horizontal chip strip). Hidden here by default so desktop keeps using
   the chip.
   Label sits to the LEFT of the track, same row, vertically centered —
   mirrors the native iOS switch-row pattern (label left, switch right).
   Selectors below are scoped as ".instock-switch .instock-switch-x" (two
   classes) rather than a bare ".instock-switch-x" (one class) on purpose:
   templatemo-onix-digital.css has a global ".section-heading span" rule
   (one class + one tag = higher specificity than a single class) that was
   hijacking these spans — huge 60px gray font, 20px top margin — since our
   label/track/thumb are all <span> elements living inside .section-heading.
   The extra class keeps us above that rule's specificity regardless of
   stylesheet load order. */
.instock-switch,
.instock-switch:focus,
.instock-switch:active,
.instock-switch.active {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  outline: none !important;
  box-shadow: none !important;
}

.instock-switch .instock-switch-label,
.instock-switch.active .instock-switch-label,
.instock-switch:active .instock-switch-label,
.instock-switch:focus .instock-switch-label {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500 !important;
  color: #303030 !important;
  white-space: nowrap;
  text-align: center;
  align-self: center;
  margin: 0;
  line-height: 1;
}

.instock-switch .instock-switch-track {
  position: relative;
  display: inline-block;
  align-self: center;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #d8dee2;
  flex-shrink: 0;
  margin: 0;
  transition: background 0.25s ease;
}

.instock-switch.active .instock-switch-track {
  background: #00a5f1;
}

.instock-switch .instock-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  margin: 0;
  transition: transform 0.25s ease;
}

.instock-switch.active .instock-switch-thumb {
  transform: translateX(16px);
}

/* Sort Button */
.sort-button {
  padding: 8px 20px;
  border: 1px solid #00a5f1;
  background: #ffffff;
  border-radius: 100px;
  color: #00a5f1;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-button:hover {
  background: #f0f9ff;
}

/* Active Filter Badges Row - Refactored for smooth transitions.
   Inline layout: Clear All sits to the left of the badge strip on the same
   row. The transition properties below animate the row's reveal — the
   overall layout direction is `row`. */
.active-filters-row {
  padding: 0 15px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.active-filters-row.show {
  max-height: 200px;
  /* Enough for multiple lines */
  opacity: 1;
  margin-bottom: 15px;
  visibility: visible;
  padding-top: 5px;
}

.clear-all-btn {
  /* Match .filter-badge padding/font so the two pills line up at the same
     height when they sit side-by-side in the active-filters row. */
  padding: 10px 12px;
  background: #303030;
  color: #ffffff;
  border-radius: 100px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: "DM Sans", sans-serif;
}

.clear-all-btn:hover {
  background: #1a1a1a;
}

.filter-badge {
  padding: 10px 12px;
  background: #eaeef0;
  border-radius: 100px;
  font-size: 11px;
  line-height: 14px;
  color: #303030;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
}

.filter-badge .remove-icon {
  cursor: pointer;
  font-size: 16px;
  color: #303030;
}

/* Cycles Grid - 2 Column */
.featured.container.no-gutter .row.posts {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  /* row-gap kept tight (15px) so vertical card spacing doesn't read as a
     "white patch"; column-gap stays at 30px for horizontal breathing room. */
  gap: 15px 30px;
  padding: 0 15px;
  /* Override bootstrap row standard behavior if needed */
  margin-right: 0;
  margin-left: 0;
}

.row.posts .col-12 {
  grid-column: 1 / -1;
}

/* Holding spinner shown while a filter change is in flight (injected by
   fetchCycles in cycle-filters.js, which also pins the grid's outgoing height
   so the page doesn't collapse under the user).
   position: sticky is the point of it: the held area can be several screens
   tall, and the user may have applied the filter from anywhere in it, so a
   statically-placed spinner would often sit off-screen. Sticking it at 40% of
   the viewport keeps it in front of them wherever they were scrolled. */
.grid-refresh-loader {
  grid-column: 1 / -1;
  position: sticky;
  top: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
}

.grid-refresh-loader p {
  margin: 0;
  color: #95a1a7;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
}

/* Grid gap already handles card spacing — the base margin-bottom on featured-item
   would add ~25px of dead space inside each card on top of the gap. */
.featured.container.no-gutter .row.posts .featured-item {
  margin-bottom: 0 !important;
}

.row.posts .product-card {
  /* Override Bootstrap col-md-4 */
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0;
}

/* ===== SIDEBAR FILTERS ===== */

/* Price Filter */
.filter-section {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e7eef1;
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-section-title {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
  color: #303030;
  margin-bottom: 14px;
}

/* In-section search input for long lookup lists (Brand / Speed / Tyre Size).
   Mirrors .mobile-filter-search-wrap from cycle-filters-mobile.css but sized
   for the 280px desktop sidebar. Sits between the section title and the
   checkbox list so it stays visually attached to the filter it controls. */
.filter-search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.filter-search-wrap input.filter-search-input {
  width: 100%;
  padding: 7px 12px 7px 30px;
  border: 1px solid #dbe5e9;
  border-radius: 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 16px;
  color: #303030;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s ease;
}

.filter-search-wrap input.filter-search-input::placeholder {
  color: #95a1a7;
}

.filter-search-wrap input.filter-search-input:focus {
  border-color: #00a5f1;
}

.filter-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a1a7;
  pointer-events: none;
}

/* Monthly Price is the first filter section — its title should sit flush
   against the price-range-info row below, with no extra gap. */
/* .filters-sidebar .filter-section:first-child .filter-section-title {
  margin-bottom: 0;
} */

.price-label {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #303030;
  margin-bottom: 8px;
}

/* Price Range Slider */
.price-range-wrapper {
  position: relative;
}

.price-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 100px;
  background: linear-gradient(to right,
      #00a5f1 0%,
      #00a5f1 25%,
      #dbe5e9 25%,
      #dbe5e9 100%);
  outline: none;
  margin: 10px 0;
}

.price-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00a5f1;
  cursor: pointer;
}

.price-range-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00a5f1;
  cursor: pointer;
  border: none;
}

.price-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: #303030;
}

/* Filter Items (Checkboxes/Radios) */
.filter-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-item input[type="radio"],
.filter-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  position: relative;
}

.filter-item input[type="radio"]:checked,
.filter-item input[type="checkbox"]:checked {
  background: #00a5f1;
  border-color: #00a5f1;
}

.filter-item input[type="radio"]:checked::after,
.filter-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
}

.filter-item label {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #303030;
  cursor: pointer;
  margin: 0;
}

/* Show More/Less Links */
.show-more-link {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #00a5f1;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 10px;
  display: inline-block;
}

.extra-filters {
  animation: fadeIn 0.3s ease-out;
}

/* Scrollable filter list when "Show more" is expanded */
.filter-items-list.is-expanded {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #c8dfe9 #f0f4f6;
}

.filter-items-list.is-expanded::-webkit-scrollbar {
  width: 4px;
}

.filter-items-list.is-expanded::-webkit-scrollbar-track {
  background: #f0f4f6;
  border-radius: 4px;
}

.filter-items-list.is-expanded::-webkit-scrollbar-thumb {
  background: #c8dfe9;
  border-radius: 4px;
}

.filter-items-list.is-expanded::-webkit-scrollbar-thumb:hover {
  background: #00a5f1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

.show-more-link:hover {
  color: #0088cc;
}

/* Scrollbar Styling for Sidebar - Hidden now */
/* Kept clean to avoid conflicts with above rules */

/* ===== SEARCH BOX ===== */
#cycle-name-search {
  display: inline-block;
  margin-left: 10px;
}

#cycle-search-input {
  padding: 8px 12px;
  border-radius: 30px;
  border: 1px solid #dfdfdf;
  min-width: 220px;
  font-size: 13px;
  font-family: "DM Sans", sans-serif;
  outline: none;
}

#cycle-search-input:focus {
  border-color: #00a5f1;
}

#search-count {
  margin-left: 8px;
  color: #6b7280;
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .featured-page {
    flex-direction: column;
    margin-top: 50px !important;
  }

  .filters-sidebar {
    width: 100%;
    position: relative;
    top: 0;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e7eef1;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .cycles-header-bar {
    flex-direction: column;
    gap: 0px !important;
  }

  .featured.container.no-gutter .row.posts {
    grid-template-columns: 1fr;
  }

  .cycles-header-bar {
    margin-top: 1px !important;
  }
}

@media (max-width: 768px) {
  .cycles-header-bar .section-heading h1 {
    font-size: 18px !important;
  }

  .featured.container.no-gutter .row.posts {
    grid-template-columns: 1fr !important;
  }

  .filter-chips-wrapper {
    width: 100%;
  }

  /* sort-button hidden in 991px block */

  .cycles-header-bar {
    align-items: flex-start;
  }

  /* filter-chips-wrapper scroll handled in 991px block */

  .filter-chip {
    white-space: nowrap !important;
  }

  .filter-items-list {
    margin: 12px 0px;
  }

  .cycles-main-content {
    padding: 0px !important;
  }

  /* Tighten card internal text spacing on mobile */
  .featured.container.no-gutter .row.posts .featured-item {
    padding: 8px !important;
  }

  .featured.container.no-gutter .row.posts .featured-item h4 {
    padding-top: 8px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }

  /* Sub-text (MTB | height) — gap below the cycle name title */
  .featured.container.no-gutter .row.posts .featured-item>.row>h6 {
    padding-top: 5px !important;
  }

  /* Price h6 — sits tight under the sub-text line */
  .featured.container.no-gutter .row.posts .featured-item>.row>.col h6 {
    padding-top: 2px !important;
  }

  .featured.container.no-gutter .row.posts {
    gap: 16px !important;
  }

  /* Reclaim the left/right gutter on mobile — the top navbar sits flush to
     the viewport edge here, so the listing's 15px side padding reads as
     wasted space next to it. Tighten to 8px on the title row, filter-chip
     row, and card grid together so they stay aligned with each other. */
  .cycles-header-bar {
    padding: 0 8px !important;
    margin-top: 15px !important;
  }

  .active-filters-row {
    padding: 0 8px !important;
  }

  .featured.container.no-gutter .row.posts {
    padding: 0 8px !important;
  }
}

.badge-danger {
  background-color: #c71515;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.available-badge {
  overflow: hidden;
  background-color: #ffe6e6;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #4d4d4d;
}

/* Wishlist Overlay */
.wishlist-btn {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 20;
  cursor: pointer;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Right-align the bottom row (price + Pre-Book/Select button) with the
   wishlist icon. Wishlist sits at right: 22px from .featured-item's box,
   while .featured-item's padding (10px desktop / 8px mobile) leaves the
   bottom row's right edge shy of that — pad the right side to match. */
.featured.container.no-gutter .row.posts .featured-item>.row {
  padding-right: 5px;
}

@media (max-width: 767px) {
  .featured.container.no-gutter .row.posts .featured-item>.row {
    padding-right: 7px;
  }
}

/* .wishlist-btn:hover {
  transform: scale(1.1);
} */

.wishlist-btn img {
  width: 20px;
  height: auto;
  pointer-events: none;
  /* Let click pass through to btn */
  border-radius: 0px !important;
}

.tag {
  background: linear-gradient(88.74deg, #f9ffa1 0.67%, #fefff7 98.92%) !important;
}

/* Darker skeletons for white background */
.featured-item .skeleton-loading {
  background: #ebeef1;
  background-image: linear-gradient(to right,
      #ebeef1 0%,
      #dfe3e7 20%,
      #ebeef1 40%,
      #ebeef1 100%);
}

@keyframes shimmer {
  to {
    background-position-x: -200%;
  }
}

h4 {
  font-weight: 600 !important;
}

/* Card CTA: in-stock cycles get a filled "Select" (primary), out-of-stock
   keeps the outlined "Pre-Book" (secondary) style from the base stylesheet.
   Visual treatment matches the product page's "Add to cart" pill — same
   gradient, no border, same pill radius — so the primary CTA reads
   consistently across the listing and the product detail page. */
.featured-item .main-blue-button-stock.is-primary a {
  background: linear-gradient(180deg, #21b9ff 0%, #00a5f1 100%);
  color: #ffffff;
  border: none;
  border-radius: 30px;
  padding: 10px 22px;
  font-weight: 600;
  letter-spacing: 0.25px;
}

.featured-item .main-blue-button-stock.is-primary a:hover {
  background: linear-gradient(180deg, #21b9ff 0%, #00a5f1 100%);
  color: #ffffff;
  opacity: 0.9;
}

/* Mobile: shrink the WhatsApp "Live Chat" pill and the bottom Sort/Filter bar
   so the listing has more visible vertical room above the fold. Scoped to
   this page's stylesheet (the only one that includes the bottom bar), so
   other pages keep the global pill dimensions. */
@media (max-width: 1024px) {
  .floating {
    width: 110px;
    height: 42px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  .floating img {
    padding-top: 0 !important;
  }

  .floating span {
    font-size: 13px !important;
  }

  .mobile-bottom-bar {
    height: calc(48px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .mobile-bar-btn {
    font-size: 13px;
  }

  .mobile-bar-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Prevent footer clipping and allow complete scrolling into view above mobile bottom bar */
  footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  html,
  body {
    overflow-x: clip !important;
  }
}