:root {
  --navy: #061f36;
  --deep: #082b48;
  --blue: #0075ff;
  --blue-2: #00c6ff;
  --cyan: #2fe7ff;
  --ink: #10243a;
  --muted: #5f7186;
  --line: #d9e8f4;
  --panel: #ffffff;
  --soft: #f4fbff;
  --green: #7bdc30;
  --orange: #ff5e29;
  --gold: #ffce3a;
  --shadow: 0 16px 42px rgba(7, 48, 84, 0.14);
  --radius: 8px;
  --container: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, #f7fdff 0%, #ffffff 42%, #f7fcff 100%);
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

.sprite {
  display: none;
}

.container {
  width: min(calc(100% - 64px), var(--container));
  margin-inline: auto;
}

@media (min-width: 1121px) {
  body.home-page main > .container:not(.search-section) {
    width: min(calc(100% - 64px), 1360px);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button,
button {
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #0a74ff 0%, #03a9ff 100%);
  box-shadow: 0 12px 24px rgba(0, 111, 255, 0.25);
}

.button.ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.08);
}

.button.light {
  color: #006edc;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 62, 120, 0.18);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  color: #fff;
  background: #001830;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/hero-dive-center-sale.1d717b7b0538.jpg") center / cover no-repeat;
  transform: scale(1.15);
  transform-origin: center center;
  animation: hero-background-zoom 24s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(0, 24, 48, 0.35), rgba(0, 24, 48, 0.35)),
    linear-gradient(180deg, rgba(0, 33, 53, 0) calc(100% - 120px), rgba(0, 23, 37, 0.1));
  pointer-events: none;
}

@keyframes hero-background-zoom {
  from {
    transform: scale(1.15);
  }

  to {
    transform: scale(1);
  }
}

.topbar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 70px;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--blue-2);
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.24);
}

.brand-mark svg {
  width: 21px;
  height: 21px;
}

.brand strong {
  display: block;
  font-size: 18px;
  line-height: 1;
}

.brand strong span {
  color: var(--blue-2);
}

.brand small {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 700;
}

.nav-wrap a {
  color: rgba(255, 255, 255, 0.92);
}

.nav-wrap a:hover,
.footer a:hover {
  color: var(--cyan);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -14px;
  right: -14px;
  height: 14px;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  font: inherit;
  font-weight: inherit !important;
  line-height: inherit;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--cyan);
}

.nav-dropdown-arrow {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.nav-dropdown:hover:not(.is-click-closed) .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow {
  transform: translateY(1px) rotate(225deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 214px;
  padding: 10px;
  border: 1px solid rgba(207, 224, 237, 0.9);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(8, 37, 61, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  z-index: 20;
}

.nav-dropdown:hover:not(.is-click-closed) .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(207, 224, 237, 0.9);
  border-top: 1px solid rgba(207, 224, 237, 0.9);
  transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  color: #102c46;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: #006edc;
  background: #edf8ff;
}

/* Logged-in profile menu: pill-shaped trigger with a first-letter avatar (PoC port). */
.nav-profile .nav-dropdown-trigger {
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  transition: border-color 160ms ease, background 160ms ease;
}

.nav-profile .nav-dropdown-trigger:hover,
.nav-profile.is-open .nav-dropdown-trigger {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.nav-profile__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.nav-profile__email {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

/* Anchor the profile menu to the right so it doesn't overflow the topbar edge. */
.nav-profile .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(8px);
}

.nav-profile.is-open .nav-dropdown-menu,
.nav-profile:hover:not(.is-click-closed) .nav-dropdown-menu {
  transform: translateY(0);
}

.nav-profile .nav-dropdown-menu::before {
  display: none;
}

.nav-dropdown-head {
  padding: 4px 12px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Scoped under .nav-profile so the home page's `.hero p` rule can't win and
   render this email white-on-white. */
.nav-profile .nav-dropdown-email {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.nav-dropdown-logout {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.nav-dropdown-logout-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #b91c1c;
  cursor: pointer;
}

.nav-dropdown-logout-btn:hover {
  background: #fef2f2;
}

.nav-actions {
  display: flex;
  gap: 14px;
}

.favorites-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: color 160ms ease;
}

.favorites-nav-link:hover,
.favorites-nav-link:focus-visible {
  color: var(--cyan);
}

.favorites-nav-icon {
  color: currentColor;
  font-size: 18px;
  line-height: 1;
}

.favorites-nav-icon.is-saved,
.mobile-favorites-link span.is-saved {
  color: #FACC15;
}

.favorites-nav-link strong,
.mobile-favorites-link strong {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  color: currentColor;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.mobile-favorites-link {
  display: none;
}

.menu-button {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #fff;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.menu-button svg {
  width: 22px;
  height: 22px;
}

.hero-inner {
  position: relative;
  z-index: 2;
  min-height: 490px;
  display: flex;
  align-items: center;
  padding: 30px 0 104px;
}

.hero-copy {
  max-width: 590px;
}

.hero h1 {
  margin: 0;
  max-width: 570px;
  font-size: 62px;
  line-height: 0.98;
  font-weight: 900;
}

.hero h1 span {
  display: block;
  color: var(--cyan);
}

.hero p {
  max-width: 430px;
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
}

.hero-tags a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.hero-tags svg {
  width: 22px;
  height: 22px;
  color: #c8f7ff;
}

@media (min-width: 1121px) {
  .hero-tags {
    flex-wrap: nowrap;
  }

  .hero-tags a {
    white-space: nowrap;
  }
}

.search-section {
  position: relative;
  z-index: 5;
  margin-top: -66px;
}

.search-card {
  display: grid;
  grid-template-columns: 1.04fr 1.04fr 1.04fr 1.06fr 184px;
  gap: 18px;
  align-items: end;
  padding: 22px 24px;
  border: 1px solid rgba(174, 199, 219, 0.48);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow);
}

.field {
  min-width: 0;
}

.field span:first-child {
  display: block;
  margin-bottom: 7px;
  color: #7c8ea4;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.select-trigger,
.range-value {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  gap: 10px;
  padding: 0 36px 0 14px;
  color: #143351;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.select-trigger {
  text-align: left;
}

.select-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7991a7;
  border-bottom: 2px solid #7991a7;
  transform: translateY(-70%) rotate(45deg);
}

.select-trigger svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--deep);
}

.dropdown-field {
  position: relative;
}

.dropdown-field.is-open {
  z-index: 20;
}

.dropdown-field.is-open .select-trigger {
  border-color: #74b8ff;
  box-shadow: 0 0 0 3px rgba(0, 117, 255, 0.12);
}

.dropdown-field.is-open .select-trigger::after {
  transform: translateY(-30%) rotate(225deg);
}

.select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 248px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #cddfed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(7, 42, 76, 0.16);
}

.select-menu[hidden] {
  display: none;
}

.select-menu button {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  color: #15334c;
  border-radius: 5px;
  background: transparent;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
}

.select-menu button:hover,
.select-menu button[aria-selected="true"] {
  color: #006edc;
  background: #edf8ff;
}

.range-value {
  padding-right: 14px;
}

.range-value::after {
  display: none;
}

.budget-slider {
  position: relative;
  height: 18px;
  margin: -1px 2px 0;
  --range-start: 0%;
  --range-end: 100%;
}

.range-track {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 4px;
  border-radius: 999px;
  background: #d8edff;
}

.range-track i {
  position: absolute;
  display: block;
  left: var(--range-start);
  right: calc(100% - var(--range-end));
  top: 8px;
  height: 4px;
  border-radius: 999px;
  background: var(--blue);
}

.budget-slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.budget-slider input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.budget-slider input::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 3px 8px rgba(0, 117, 255, 0.34);
  pointer-events: auto;
}

.budget-slider input::-moz-range-track {
  height: 4px;
  background: transparent;
}

.budget-slider input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 3px 8px rgba(0, 117, 255, 0.34);
  pointer-events: auto;
}

/* The Equipment Type field replaces the taller Budget slider when Business Type =
   Equipment (only one of the two ever shows). Reserve the Budget field's height and
   bottom-align the control so the filter panel keeps a constant height across the
   toggle and the select stays on the same baseline as its sibling selects. */
.field--equipment-type {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 80.5px;
}

.search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  color: #fff;
  border-radius: 6px;
  background: linear-gradient(135deg, #0872ff, #0ba9ff);
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(0, 117, 255, 0.24);
}

.search-button svg {
  width: 18px;
  height: 18px;
}

.button.ghost-light {
  color: #0874dc;
  border: 1px solid #cfe5f5;
  background: #fff;
  box-shadow: 0 10px 20px rgba(8, 59, 97, 0.07);
}

.button.ghost-light:hover,
.button.ghost-light:focus-visible {
  border-color: #95cdf4;
  color: #005eb8;
}

/* Detail-page "Save to favourites" — a star button aligned with the action
   stack. The star turns gold when saved, matching the header favourites star. */
.save-favourite-form {
  margin: 0;
}

.save-favourite__star {
  flex: none;
}

.save-favourite.is-saved .save-favourite__star {
  color: #facc15;
}

.listings-hero {
  color: #fff;
  background:
    linear-gradient(rgba(0, 24, 48, 0.35), rgba(0, 24, 48, 0.35)),
    url("assets/hero-dive-center-sale.1d717b7b0538.jpg") center 58% / cover no-repeat;
}

/* Browse + map share a fixed-height hero band (391px) so the two marketplace
   entry points line up; the home `.hero` keeps its taller marketing height.
   min-height (not height) lets the band grow gracefully if content wraps on
   narrow viewports rather than clipping. */
.marketplace-hero,
.map-browse-hero {
  min-height: 391px;
}

.listings-hero-inner {
  padding: 64px 0 112px;
}

.listings-hero-inner span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.listings-hero-inner h1 {
  max-width: 720px;
  margin: 12px 0 14px;
  font-size: 48px;
  line-height: 1.02;
}

.listings-hero-inner p {
  max-width: 630px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  font-weight: 650;
}

/* Browse + Map-Browse: vertically centre the hero copy within the fixed band —
   the header becomes a flex column so the nav stays at the top and the copy fills
   + centres in the remaining height (mirrors the home hero). Horizontal alignment
   stays left throughout. */
.marketplace-hero,
.map-browse-hero {
  display: flex;
  flex-direction: column;
}

.marketplace-hero .listings-hero-inner,
.map-browse-hero .listings-hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Browse reuses .detail-header (for the hero image) whose padding (136/40) drops
   the copy onto the overlapping filter card. Override it and reserve the filter's
   ~68px overlap at the bottom so the copy sits centred in the gap between the nav
   and the filter, not touching it. The 3-class selector beats the 2-class
   `.detail-header .listings-hero-inner` regardless of stylesheet order. */
.listings-hero.marketplace-hero .listings-hero-inner {
  padding: 24px 0 92px;
}

.listings-filter-section {
  position: relative;
  z-index: 4;
  margin-top: -68px;
}

.marketplace-filter {
  grid-template-columns: 1fr 1fr 1fr 1.08fr 1fr 176px;
}

.marketplace-page {
  padding-bottom: 8px;
}

.marketplace-section {
  padding-top: 38px;
}

.marketplace-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.marketplace-toolbar span {
  color: #0077f2;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketplace-toolbar h2 {
  margin: 6px 0 0;
  color: #0d2d4a;
  font-size: 30px;
  line-height: 1.1;
}

.marketplace-toolbar p {
  margin: 0 0 3px;
  color: #60758a;
  font-size: 14px;
  font-weight: 800;
}

.marketplace-toolbar strong {
  color: #0b2d4c;
}

.marketplace-list {
  display: grid;
  gap: 14px;
}

/* Numbered pager under the results (Prev · 1 · 2 · … · Next). The .button.ghost
   defaults are tuned for the dark hero, so restyle the controls for the light
   marketplace section here. */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.pagination .button.ghost,
.pagination .pagination-page {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.pagination .button.ghost:hover,
.pagination .button.ghost:focus-visible {
  color: var(--blue);
  border-color: var(--blue);
}

.pagination .pagination-page.is-current {
  color: #fff;
  background: linear-gradient(135deg, #0a74ff 0%, #03a9ff 100%);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 111, 255, 0.22);
}

.pagination .pagination-gap {
  min-width: 24px;
  text-align: center;
  color: var(--muted);
}

.marketplace-row {
  position: relative;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 206px;
  gap: 22px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #dbe9f3;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(8, 48, 82, 0.07);
}

.marketplace-row[hidden] {
  display: none;
}

.marketplace-row > img {
  width: 100%;
  height: 100%;
  min-height: 211px;
  border-radius: 6px;
  object-fit: cover;
}

/* Sold "rubber stamp" — a red rounded-rectangle tag hugging the "SOLD" text,
   overlaid on the thumbnail of sold teasers and shared by the marketplace rows
   and the reusable listing card. Sized to its content (not the thumbnail). */
.listing-sold-badge {
  display: inline-grid;
  place-items: center;
  padding: 8px 22px;
  border: 5px solid #dc2626;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.24);
  color: #dc2626;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px rgba(220, 38, 38, 0.3);
  opacity: 0.92;
  pointer-events: none;
  z-index: 3;
}

/* Browse row: the stamp shares the thumbnail's grid cell so it stays centred
   over the image at every breakpoint without disturbing the image sizing. The
   image is pinned to the same cell explicitly — otherwise the stamp's definite
   placement would push the auto-placed image into the next column. */
.marketplace-row-sold > img,
.marketplace-row-sold > .listing-media-empty {
  grid-column: 1;
  grid-row: 1;
}

.marketplace-row-sold .listing-sold-badge {
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  transform: rotate(-14deg);
}

/* Reusable listing card: centre over the relatively-positioned media. */
.listing-card-sold .listing-sold-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
}

.marketplace-row-main {
  min-width: 0;
  padding: 3px 0;
}

.marketplace-row-main h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 7px;
  color: #0072db;
  font-size: 21px;
  line-height: 1.16;
}

.listing-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

.favorite-button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-top: -2px;
  color: #05243e;
  border-radius: 999px;
  background: transparent;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  transition: color 160ms ease, transform 160ms ease, background 160ms ease;
}

.marketplace-row > .favorite-button {
  display: none;
}

.favorite-button:hover,
.favorite-button:focus-visible {
  color: #EF4444;
  background: #fff1f2;
  transform: translateY(-1px);
}

.favorite-button[aria-pressed="true"] {
  color: #EF4444;
}

.favorite-button.is-clicked {
  animation: favorite-pop 220ms ease;
}

@keyframes favorite-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

.listing-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: #1b3e5e;
  font-size: 14px;
  font-weight: 800;
}

.listing-location svg {
  width: 15px;
  height: 15px;
  color: #0a76e8;
}

.row-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.marketplace-row-main .row-details {
  margin-top: 20px;
}

.row-details li {
  padding: 5px 8px;
  color: #375d78;
  border-radius: 5px;
  background: #edf8ff;
  font-size: 12px;
  font-weight: 850;
}

.row-description {
  max-width: 620px;
  margin: 0 0 11px;
  color: #415d75;
  font-size: 14px;
  font-weight: 600;
}

.view-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0074dc;
  font-size: 14px;
  font-weight: 900;
}

.marketplace-row-side {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 3px 0 0 12px;
  border-left: 1px solid #e2edf6;
}

.row-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-height: 25px;
}

.row-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: #fff;
  border-radius: 999px;
  background: #087aff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.row-badges span:nth-child(2) {
  color: #043150;
  background: #8df0ff;
}

.row-badges .row-badge-featured {
  color: #fff;
  background: #087aff;
}

.row-badges .row-badge-verified {
  color: #043150;
  background: #8df0ff;
}

.row-badges .row-badge-new {
  color: #043150;
  background: #a7f3d0;
}

.row-price {
  display: block;
  color: #061f36;
  font-size: 25px;
  line-height: 1.05;
  text-align: right;
}

.marketplace-row-side .button {
  width: 100%;
  min-height: 40px;
  padding-inline: 14px;
}


.listing-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-top: 2px;
  white-space: nowrap;
}

.listing-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 0;
  color: #66788d;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

.listing-action:hover,
.listing-action:focus-visible {
  color: #0074dc;
  transform: translateY(-1px);
}

.listing-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

.listing-action-icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.listing-save-action.is-saved .listing-action-icon {
  color: #FACC15;
}

.listing-action.is-clicked {
  animation: favorite-pop 220ms ease;
}

.detail-listing-actions {
  justify-content: center;
  padding-top: 4px;
}
.marketplace-empty {
  margin: 18px 0 0;
  padding: 34px 20px;
  color: #315f80;
  border: 1px solid #d8eaf4;
  border-radius: var(--radius);
  background: #f4fbff;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.marketplace-empty[hidden] {
  display: none;
}

.favorites-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  padding: 11px 15px;
  color: #fff;
  border-radius: 6px;
  background: rgba(3, 28, 48, 0.94);
  box-shadow: 0 16px 34px rgba(2, 26, 44, 0.22);
  font-size: 14px;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.favorites-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.marketplace-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.marketplace-pagination button {
  display: inline-grid;
  min-width: 36px;
  height: 36px;
  place-items: center;
  padding: 0 10px;
  color: #0a68c7;
  border: 1px solid #d5e8f5;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(9, 49, 83, 0.06);
}

.marketplace-pagination button:hover,
.marketplace-pagination button:focus-visible,
.marketplace-pagination button[aria-current="page"] {
  color: #fff;
  border-color: #087aff;
  background: #087aff;
}

.marketplace-pagination button:disabled {
  cursor: default;
  opacity: 0.45;
}

.industry-strip {
  padding: 42px 0 34px;
  background:
    linear-gradient(90deg, rgba(231, 251, 255, 0.65), rgba(255, 255, 255, 0.94), rgba(231, 251, 255, 0.65));
  border-bottom: 1px solid #e5f3fb;
}

.industry-strip h2 {
  max-width: 650px;
  margin: 0 auto 30px;
  color: #0b2b4e;
  font-size: 28px;
  line-height: 1.12;
  text-align: center;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.industry-grid article {
  min-width: 0;
  padding: 0 26px;
  text-align: center;
  border-right: 1px solid #e1edf5;
}

.industry-grid article:last-child {
  border-right: 0;
}

.industry-grid svg {
  width: 54px;
  height: 54px;
  color: #006fff;
}

.industry-grid h3 {
  margin: 10px 0 6px;
  font-size: 14px;
  color: #123451;
}

.industry-grid p {
  margin: 0;
  color: #476179;
  font-size: 13px;
  font-weight: 600;
}

.section {
  padding: 36px 0 0;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.section-heading h2,
.center-title,
.how h2 {
  margin: 0;
  font-size: 29px;
  line-height: 1.1;
  color: #0d2d4a;
}

.section-heading a,
.listing-card a,
.blog-card a {
  color: #0074dc;
  font-size: 14px;
  font-weight: 900;
}

.heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.carousel-arrows {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.carousel-arrow {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #0d73d6;
  border: 1px solid #d4e8f6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(9, 49, 83, 0.08);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  color: #005eb8;
  border-color: #9fd0f5;
  box-shadow: 0 12px 24px rgba(9, 49, 83, 0.13);
  transform: translateY(-1px);
}

.carousel-arrow:disabled {
  cursor: pointer;
  opacity: 0.65;
  box-shadow: none;
}

.listing-carousel {
  position: relative;
}

.listing-viewport {
  overflow: hidden;
  margin: -2px -2px -28px;
  padding: 2px 2px 28px;
}

.listing-grid {
  display: flex;
  /* Horizontal spacing between cards. The carousel JS reads this gap so card
     widths and page translation account for it (6 cards @ 1360px ≈ 213px each,
     giving a ~213×180 photo via the .listing-card img aspect-ratio). */
  gap: 16px;
  transition: transform 420ms ease;
  will-change: transform;
}

.listing-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(var(--cards-per-slide, 6), minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  padding: 0 1px;
}

.listing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dceaf4;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 30px rgba(9, 49, 83, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.listing-media {
  position: relative;
  overflow: hidden;
  background: #eaf3f9;
}

.listing-card:hover,
.listing-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(9, 49, 83, 0.14);
}

.listing-card.is-hidden {
  display: none;
}

.no-results {
  margin: 24px 0 0;
  padding: 26px;
  color: #35627f;
  border: 1px solid #d8eaf4;
  border-radius: var(--radius);
  background: #f4fbff;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.no-results[hidden] {
  display: none;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 14px;
  margin-top: 16px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #b8c9d6;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.carousel-dot:hover,
.carousel-dot:focus-visible {
  background: #61a9ed;
  transform: translateY(-1px);
}

.carousel-dot.is-active {
  background: #087aff;
}

.listing-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.18;
  object-fit: cover;
}

.listing-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 15px 14px 16px;
}

.listing-body h3 {
  margin: 0 0 4px;
  min-height: 38px;
  color: #0f2c45;
  font-size: 15px;
  line-height: 1.22;
  /* Clamp to 2 lines so every title block is the same height — keeps the
     location, price and button aligned across cards of varying title length. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-body p {
  margin: 0 0 12px;
  color: #63758a;
  font-size: 12px;
  font-weight: 650;
  /* Single line + ellipsis so the price below it stays aligned across cards. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-media .listing-type {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  min-height: 22px;
  margin: 0;
  padding: 5px 8px;
  color: #071a2e;
  border-radius: 5px;
  background: #FAF7F0;
  box-shadow: 0 8px 18px rgba(0, 20, 40, 0.12);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.marketplace-row > .listing-type {
  display: inline-flex;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  align-items: center;
  overflow: hidden;
  max-width: 220px;
  min-height: 22px;
  margin: 0;
  padding: 3px 7px;
  color: #071a2e;
  border-radius: 5px;
  background: #FAF7F0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: #557083;
  font-size: 12px;
  font-weight: 700;
}

.listing-body li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.listing-body li svg {
  width: 14px;
  height: 14px;
  color: #183a56;
}

.price {
  display: block;
  margin-bottom: 12px;
  color: #061f36;
  font-size: 17px;
}

.listing-card-button {
  width: 100%;
  min-height: 36px;
  /* Slack in a stretched (equal-height) card goes here so the button stays
     bottom-aligned while name/location/price stay tightly clustered up top. */
  margin-top: auto;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(0, 111, 255, 0.18);
}

.listing-card-button:hover,
.listing-card-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 111, 255, 0.24);
}

.how {
  padding-top: 38px;
  text-align: center;
}

.steps {
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.steps article {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 118px;
  padding: 22px 26px;
  text-align: left;
  border: 1px solid #dceaf4;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 53, 89, 0.06);
}

.steps article > svg {
  width: 58px;
  height: 58px;
  color: #0a70df;
}

.steps h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.steps p {
  margin: 0;
  color: #536b82;
  font-size: 13px;
  font-weight: 650;
}

.step-number {
  position: absolute;
  top: 13px;
  left: 58px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #0777f8;
  font-size: 14px;
  font-weight: 900;
}

.step-arrow {
  color: #0179ec;
  font-size: 31px;
  font-weight: 900;
}

.map-section {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 44px;
  align-items: center;
  padding: 72px 0 0;
}

.map-copy span {
  color: #0077f2;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.map-copy h2 {
  margin: 12px 0 14px;
  max-width: 250px;
  font-size: 31px;
  line-height: 1.05;
}

.map-copy p {
  margin: 0 0 22px;
  color: #60758a;
  font-size: 16px;
  font-weight: 600;
}

.map-frame {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  min-height: 260px;
  border: 1px solid #cce7ef;
  border-radius: var(--radius);
  background: #03172d;
  box-shadow: 0 12px 32px rgba(12, 86, 112, 0.12);
}

.map-frame img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
}

.map-counters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.continent-counter {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: rgba(4, 42, 77, 0.84);
  box-shadow: 0 14px 30px rgba(0, 98, 188, 0.22);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-18px, -50%);
  transition: background 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.continent-counter:hover,
.continent-counter:focus-visible {
  background: rgba(5, 61, 105, 0.92);
  box-shadow: 0 18px 34px rgba(0, 132, 255, 0.26);
  filter: brightness(1.08);
}

.continent-counter:hover strong,
.continent-counter:focus-visible strong {
  background: #0aa4ff;
  box-shadow: 0 10px 22px rgba(0, 155, 255, 0.4);
}

.continent-counter[hidden] {
  display: none;
}

.continent-counter strong {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #087aff;
  box-shadow: 0 8px 18px rgba(0, 117, 255, 0.34);
  font-size: 13px;
  line-height: 1;
}

.continent-counter span {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.counter-north-america {
  left: 23%;
  top: 38.5%;
}

.counter-south-america {
  left: 31.2%;
  top: 71.1%;
}

.counter-europe {
  left: 46.2%;
  top: 40.6%;
}

.counter-africa {
  left: 51.6%;
  top: 67.9%;
}

.counter-asia {
  left: 67.2%;
  top: 50.4%;
}

.counter-oceania {
  left: 76.6%;
  top: 68.2%;
}

.counter-canary-islands {
  left: 42.2%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -14px);
}

.counter-canary-islands:hover,
.counter-canary-islands:focus-visible {
  background: transparent;
  box-shadow: none;
}

.counter-canary-islands span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(4, 42, 77, 0.84);
  box-shadow: 0 14px 30px rgba(0, 98, 188, 0.22);
}

.counter-canary-islands:hover span,
.counter-canary-islands:focus-visible span {
  background: rgba(5, 61, 105, 0.92);
}

.center-title {
  margin-bottom: 20px;
  text-align: center;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.type-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #082a43;
  box-shadow: 0 12px 24px rgba(7, 40, 70, 0.08);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.type-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 20, 34, 0.01) 0%, rgba(4, 20, 34, 0.06) 46%, rgba(1, 10, 18, 0.18) 100%);
  pointer-events: none;
}

.type-card:hover,
.type-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(7, 40, 70, 0.16);
}

.type-card:hover img,
.type-card:focus-visible img {
  transform: scale(1.04);
}

.type-card img {
  width: 100%;
  aspect-ratio: 1.53;
  object-fit: cover;
  transition: transform 180ms ease;
}

.type-card-content {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 17px;
  z-index: 2;
  color: #fff;
  text-shadow:
    0 2px 9px rgba(0, 0, 0, 0.58),
    0 1px 2px rgba(0, 0, 0, 0.48);
}

.type-title {
  display: block;
  margin-bottom: 5px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
}

.type-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.95);
}

.type-card:hover .type-link,
.type-card:focus-visible .type-link {
  color: #9defff;
}

.cta {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  gap: 32px;
  min-height: 174px;
  margin-top: 28px;
  padding: 28px 32px;
  color: #fff;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(2, 27, 57, 0.58) 0%, rgba(0, 84, 176, 0.38) 46%, rgba(0, 118, 218, 0.26) 100%),
    linear-gradient(180deg, rgba(0, 15, 36, 0.12), rgba(0, 24, 50, 0.34)),
    url("assets/cta-dive.7b49858cba51.jpg") center center / cover no-repeat,
    #0071e7;
  box-shadow: 0 20px 44px rgba(0, 55, 112, 0.24);
}


.cta.dive-listing-cta {
  min-height: 230px;
  background:
    linear-gradient(90deg, rgba(2, 27, 57, 0.41) 0%, rgba(0, 84, 176, 0.27) 46%, rgba(0, 118, 218, 0.18) 100%),
    linear-gradient(180deg, rgba(0, 15, 36, 0.08), rgba(0, 24, 50, 0.24)),
    url("assets/dive-listing-cta.d7e70d106464.jpg") center center / cover no-repeat,
    #0071e7;
}
.cta h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.1;
}

.cta p {
  max-width: 510px;
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
}


.cta.promo-cta {
  grid-template-columns: minmax(280px, 680px);
  justify-content: start;
  min-height: 230px;
  background:
    linear-gradient(90deg, rgba(2, 18, 40, 0.82) 0%, rgba(4, 32, 67, 0.64) 42%, rgba(4, 32, 67, 0.24) 70%, rgba(4, 32, 67, 0.08) 100%),
    url("assets/divegear-cta.cc6db5f6aab7.jpg") center center / cover no-repeat,
    #003b75;
}

.cta.promo-cta .cta-copy,
.cta.promo-cta p {
  max-width: 680px;
}

.cta .promo-code {
  color: var(--gold);
  font-weight: bold;
}
.cta-points {
  display: flex;
  gap: 36px;
  align-items: center;
  padding-right: 24px;
}

.cta-points span {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 96px;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.cta-points svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  color: #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.blog-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 138px;
  padding: 10px;
  border: 1px solid #e0edf6;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 26px rgba(7, 45, 76, 0.06);
}

.blog-card img {
  width: 130px;
  height: auto;
  aspect-ratio: 44 / 30;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.blog-card div > span {
  display: block;
  margin-bottom: 5px;
  color: #0074e8;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 0 0 7px;
  font-size: 17px;
  line-height: 1.2;
}

.blog-card p {
  margin: 0 0 9px;
  color: #63778b;
  font-size: 13px;
  font-weight: 600;
}

.blog-card a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer {
  margin-top: 42px;
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, #04243f 0%, #02172b 100%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 0.8fr) 1.2fr;
  gap: 44px;
  padding: 34px 0 32px;
}

.footer-brand {
  margin-bottom: 16px;
}

.footer p {
  margin: 0 0 18px;
  max-width: 230px;
  font-size: 13px;
  font-weight: 600;
}

.footer h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}

.footer nav {
  display: grid;
  align-content: start;
}

.footer nav a {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
}

.socials a {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: #06243b;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.socials a:hover,
.socials a:focus-visible {
  color: #02172b;
  background: #72e9ff;
  box-shadow: 0 14px 28px rgba(0, 190, 255, 0.2);
  transform: translateY(-2px);
}

.socials svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

.newsletter {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.newsletter h3,
.newsletter p {
  grid-column: 1 / -1;
}

.newsletter input {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
}

.newsletter button {
  min-height: 36px;
  padding: 0 16px;
  color: #fff;
  border-radius: 5px;
  background: #087aff;
  font-size: 13px;
  font-weight: 900;
}

.newsletter-success {
  color: #9fe6b0;
  font-weight: 600;
}

.newsletter-error {
  margin: 0;
  color: #ffd2d2;
  font-size: 12px;
}

@media (max-width: 1120px) {
  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .topbar {
    grid-template-columns: auto auto 1fr;
  }

  .menu-button {
    display: grid;
    justify-self: end;
  }

  .nav-wrap {
    position: absolute;
    top: 66px;
    right: 0;
    display: none;
    width: min(320px, calc(100vw - 40px));
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    border-radius: var(--radius);
    background: rgba(3, 28, 48, 0.97);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.32);
  }

  .nav-wrap.is-open {
    display: flex;
  }

  .nav-wrap a {
    padding: 10px 8px;
  }

  .nav-actions {
    justify-self: end;
  }

  .search-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketplace-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-button {
    min-height: 48px;
  }

  .marketplace-row {
    grid-template-columns: 168px minmax(0, 1fr) 156px;
    gap: 16px;
    align-items: start;
  }

  .marketplace-row > .listing-type {
    top: 18px;
    left: 18px;
    max-width: 152px;
  }

  .marketplace-row > img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.48;
  }

  .marketplace-row-main h3 {
    font-size: 18px;
  }

  .row-price {
    font-size: 21px;
  }

  .marketplace-row-side {
    padding-left: 10px;
  }

  .industry-grid,
  .type-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .step-arrow {
    display: none;
  }

  .map-section {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .map-copy h2,
  .map-copy p {
    max-width: 640px;
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .marketplace-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }

  .marketplace-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    height: 100%;
    padding: 10px;
  }

  .marketplace-row > .listing-type {
    top: 14px;
    left: 14px;
    max-width: calc(100% - 36px);
  }

  .marketplace-row > img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.57;
    padding: 0;
    object-fit: cover;
  }

  .marketplace-row-main {
    display: flex;
    flex-direction: column;
    padding: 13px 2px 11px;
  }

  .marketplace-row-main h3 {
    min-height: 42px;
    font-size: 18px;
  }

  .listing-location {
    font-size: 13px;
  }

  .row-details {
    gap: 6px;
  }

  .row-details li {
    padding: 4px 7px;
    font-size: 11px;
  }

  .row-description {
    display: -webkit-box;
    overflow: hidden;
    min-height: 40px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .view-more {
    margin-top: auto;
  }

  .marketplace-row-side {
    gap: 8px;
    padding: 12px 0 0;
    border-top: 1px solid #e2edf6;
    border-left: 0;
  }

  .row-badges {
    justify-content: flex-start;
  }

  .row-price {
    font-size: 22px;
    text-align: left;
  }

  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .blog-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    height: 100%;
  }

  .blog-card img {
    width: 100%;
    height: auto;
  }

  .blog-card div {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  .blog-card p {
    flex: 1;
  }
}

@media (min-width: 980px) and (max-width: 1120px) {
  .marketplace-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .hero {
    min-height: 630px;
    background-position: center right;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    gap: 12px;
    min-height: 64px;
  }

  .nav-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .brand strong {
    font-size: 16px;
  }
  .listing-actions {
    justify-content: center;
    gap: 6px;
  }

  .listing-action {
    gap: 3px;
    font-size: 10.5px;
  }

  .listing-action-icon,
  .listing-action-icon svg {
    width: 11px;
    height: 11px;
  }

  .listing-action-icon {
    font-size: 13px;
  }

  .brand small {
    font-size: 7px;
  }

  .hero-inner {
    align-items: flex-start;
    min-height: 560px;
    padding-top: 74px;
    padding-bottom: 134px;
  }

  .hero h1 {
    max-width: 370px;
    font-size: 45px;
  }

  .hero p {
    font-size: 16px;
  }

  .hero-tags {
    gap: 14px;
  }

  .hero-tags a {
    width: calc(50% - 8px);
    font-size: 13px;
  }

  .search-section {
    margin-top: -100px;
  }

  .search-card {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .listings-hero-inner {
    padding: 52px 0 124px;
  }

  .listings-hero-inner h1 {
    font-size: 38px;
  }

  .listings-filter-section {
    margin-top: -96px;
  }

  .marketplace-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .marketplace-row {
    grid-template-columns: minmax(112px, 34%) minmax(0, 1fr);
    grid-template-areas:
      "image main"
      "image side";
    gap: 9px 12px;
    align-items: start;
    padding: 10px;
  }

  .marketplace-row > .listing-type {
    top: 14px;
    left: 14px;
    max-width: calc(max(112px, 34%) - 16px);
    font-size: 10px;
  }

  .marketplace-row > img {
    grid-area: image;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.42;
    align-self: start;
  }

  .marketplace-row-sold .listing-sold-badge {
    grid-area: image;
    padding: 5px 12px;
    font-size: 24px;
    letter-spacing: 2px;
    border-width: 4px;
  }

  .listing-card-sold .listing-sold-badge {
    padding: 6px 16px;
    font-size: 30px;
    letter-spacing: 3px;
  }

  .marketplace-row-main {
    grid-area: main;
    padding: 0;
  }

  .marketplace-row-main h3 {
    position: relative;
    z-index: 3;
    align-items: flex-start;
    margin-bottom: 5px;
    font-size: 16px;
  }
  .listing-actions {
    justify-content: center;
    gap: 6px;
  }

  .listing-action {
    gap: 3px;
    font-size: 10.5px;
  }

  .listing-action-icon,
  .listing-action-icon svg {
    width: 11px;
    height: 11px;
  }

  .listing-action-icon {
    font-size: 13px;
  }

  .listing-location {
    margin-bottom: 6px;
    font-size: 12px;
  }

  .listing-type {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .row-details {
    gap: 5px;
    margin-bottom: 8px;
  }

  .row-details li {
    padding: 4px 6px;
    font-size: 10px;
  }

  .row-description {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 7px;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .view-more {
    font-size: 12px;
  }

  .marketplace-row-side {
    grid-area: side;
    grid-template-columns: 1fr;
    gap: 7px;
    align-items: start;
    padding: 8px 0 0;
    border-top: 1px solid #e2edf6;
    border-left: 0;
  }

  .row-badges {
    justify-content: flex-start;
    gap: 4px;
    min-height: 0;
  }

  .row-badges span {
    min-height: 20px;
    padding: 0 6px;
    font-size: 9px;
  }

  .row-price {
    font-size: 19px;
    text-align: left;
  }

  .marketplace-row-side .button {
    min-height: 34px;
    font-size: 12px;
  }

  .industry-strip h2,
  .section-heading h2,
  .center-title,
  .how h2 {
    font-size: 24px;
  }

  .industry-grid,
  .type-grid,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .industry-grid article {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid #e1edf5;
  }

  .industry-grid article:last-child {
    border-bottom: 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .listing-body h3 {
    min-height: auto;
  }

  .steps article {
    grid-template-columns: 58px 1fr;
    padding: 20px;
  }

  .step-number {
    left: 50px;
  }

  .map-section {
    padding-top: 50px;
  }

  .map-frame {
    display: block;
    min-height: 0;
  }

  .map-frame img {
    width: 100%;
    height: auto;
  }

  .continent-counter {
    gap: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%);
  }

  .continent-counter strong {
    width: 22px;
    height: 22px;
    font-size: 11px;
    box-shadow: 0 5px 12px rgba(0, 117, 255, 0.34);
  }

  .continent-counter span {
    display: none;
  }

  .counter-canary-islands {
    transform: translate(-50%, -50%);
  }

  .type-card img {
    aspect-ratio: 1.9;
  }

  .cta {
    grid-template-columns: 1fr;
    min-height: 320px;
    padding: 24px 22px;
    background:
      linear-gradient(180deg, rgba(2, 27, 57, 0.58) 0%, rgba(0, 84, 176, 0.38) 48%, rgba(0, 24, 50, 0.38) 100%),
      linear-gradient(180deg, rgba(0, 15, 36, 0.12), rgba(0, 24, 50, 0.34)),
      url("assets/cta-dive.7b49858cba51.jpg") center center / cover no-repeat,
      #0071e7;
  }



  .cta.dive-listing-cta {
    min-height: 300px;
    background:
      linear-gradient(180deg, rgba(2, 27, 57, 0.41) 0%, rgba(0, 84, 176, 0.27) 48%, rgba(0, 24, 50, 0.27) 100%),
      linear-gradient(180deg, rgba(0, 15, 36, 0.08), rgba(0, 24, 50, 0.24)),
      url("assets/dive-listing-cta.d7e70d106464.jpg") center center / cover no-repeat,
      #0071e7;
  }
  .cta.promo-cta {
    grid-template-columns: 1fr;
    min-height: 300px;
    background:
      linear-gradient(180deg, rgba(2, 18, 40, 0.84) 0%, rgba(4, 32, 67, 0.64) 52%, rgba(4, 32, 67, 0.24) 100%),
      url("assets/divegear-cta.cc6db5f6aab7.jpg") center center / cover no-repeat,
      #003b75;
  }
  .cta-points {
    justify-content: flex-start;
    gap: 16px;
    padding-right: 0;
  }

  .cta-points span {
    min-width: 80px;
    font-size: 12px;
  }

  .blog-card {
    grid-template-columns: 118px 1fr;
  }

  .blog-card img {
    width: 118px;
    height: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .newsletter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: 39px;
  }

  .nav-actions {
    grid-template-columns: 1fr;
  }

  .hero-tags a {
    width: 100%;
  }

  .marketplace-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "main"
      "side";
    gap: 14px;
    padding: 12px;
  }

  .marketplace-row > .listing-type {
    top: 16px;
    left: 16px;
    max-width: calc(100% - 40px);
    font-size: 11px;
  }

  .marketplace-row > img {
    width: 100%;
    aspect-ratio: 1.53;
  }

  .marketplace-row-main h3 {
    font-size: 18px;
  }

  .listing-location {
    font-size: 13px;
  }

  .row-description {
    display: block;
    overflow: visible;
    font-size: 13px;
  }

  .marketplace-row-side {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .row-price {
    font-size: 21px;
    text-align: left;
  }

  .blog-card {
    grid-template-columns: 1fr;
  }

  .blog-card img {
    width: 100%;
    height: auto;
  }
}
.button,
button {
  font-weight: 600 !important;
}

.section-heading a:not(.button),
.heading-actions a:not(.button),
.listing-card a:not(.button),
.blog-card a:not(.button),
.blog-featured-card a:not(.button),
.blog-latest-card a:not(.button),
.blog-related-card a:not(.button),
.blog-category-link,
.account-links a,
.type-link,
.terms-updated,
.pricing-badge,
.row-badges span,
.listing-type,
.detail-hero-label,
[class*="badge"],
[class*="label"] {
  font-weight: 600 !important;
}
@media (max-width: 760px) {
  .nav-dropdown::after {
    display: none;
  }
.nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    justify-content: space-between;
    width: 100%;
    padding: 10px 8px;
    color: rgba(255, 255, 255, 0.92);
  }

  .nav-dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height 180ms ease;
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 260px;
  }

  .nav-dropdown-menu::before {
    display: none;
  }

  .nav-dropdown-menu a {
    padding: 9px 10px;
    color: rgba(255, 255, 255, 0.84);
    border-radius: 6px;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible {
    color: var(--cyan);
    background: rgba(255, 255, 255, 0.08);
  }
  .nav-dropdown.is-open .nav-dropdown-arrow {
    transform: translateY(1px) rotate(225deg);
  }
}

/* Responsive header correction: tablets keep the desktop header, phones use the drawer. */
@media (min-width: 761px) and (max-width: 1120px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
  }

  .brand {
    justify-self: start;
  }

  .menu-button {
    display: none;
  }

  .nav-wrap,
  .nav-wrap.is-open {
    position: static;
    display: flex;
    width: auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .nav-wrap a {
    padding: 0;
  }

  .nav-actions {
    display: flex;
    grid-column: auto;
    justify-self: end;
    gap: 10px;
  }

  .topbar .button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  .nav-dropdown {
    width: auto;
  }

  .nav-dropdown::after {
    display: block;
  }

  .nav-dropdown-trigger {
    justify-content: center;
    width: auto;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
  }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    display: block;
    width: auto;
    min-width: 214px;
    max-height: none;
    overflow: visible;
    padding: 10px;
    border: 1px solid rgba(207, 224, 237, 0.9);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(8, 37, 61, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  .nav-dropdown:hover:not(.is-click-closed) .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .nav-dropdown-menu::before {
    display: block;
  }

  .nav-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    color: #102c46;
    border-radius: 6px;
    white-space: nowrap;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible {
    color: #006edc;
    background: #edf8ff;
  }
}

@media (max-width: 760px) {
  .nav-wrap {
    z-index: 40;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    justify-content: space-between;
    width: 100%;
    padding: 10px 8px;
    color: rgba(255, 255, 255, 0.92);
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    max-height: none;
    overflow: visible;
    margin: 2px 0 8px;
    padding: 6px 0 6px 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: grid;
    gap: 2px;
  }

  .nav-dropdown-menu::before {
    display: none;
  }

  .nav-dropdown-menu a {
    display: block;
    padding: 9px 10px;
    color: rgba(255, 255, 255, 0.86);
    border-radius: 6px;
    white-space: normal;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible {
    color: var(--cyan);
    background: rgba(255, 255, 255, 0.08);
  }
}
/* Mobile category submenu: keep links flowing inside the dark drawer. */
@media (max-width: 760px) {
  .nav-wrap.is-open .nav-dropdown {
    width: 100%;
  }

  .nav-wrap.is-open .nav-dropdown::after,
  .nav-wrap.is-open .nav-dropdown-menu::before {
    display: none;
  }

  .nav-wrap.is-open .nav-dropdown-trigger {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 8px;
    color: rgba(255, 255, 255, 0.94);
  }

  .nav-wrap.is-open .nav-dropdown-menu {
    position: static !important;
    left: auto;
    top: auto;
    display: none;
    width: 100%;
    min-width: 0;
    max-height: none !important;
    overflow: visible !important;
    margin: 2px 0 8px;
    padding: 6px 0 6px 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none;
    z-index: auto;
  }

  .nav-wrap.is-open .nav-dropdown.is-open .nav-dropdown-menu {
    display: grid;
    gap: 2px;
  }

  .nav-wrap.is-open .nav-dropdown-menu a {
    display: block;
    padding: 9px 10px;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    line-height: 1.25;
    white-space: normal;
  }

  .nav-wrap.is-open .nav-dropdown-menu a:hover,
  .nav-wrap.is-open .nav-dropdown-menu a:focus-visible {
    color: var(--cyan);
    background: rgba(255, 255, 255, 0.08);
  }
}

.favorites-main {
  display: grid;
  gap: 22px;
  padding: 56px 0 72px;
}

.favorites-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.favorites-toolbar h2 {
  margin: 0;
  color: #0d2d4a;
  font-size: 30px;
  line-height: 1.12;
}

.favorites-toolbar p {
  margin: 0;
  color: #53677d;
  font-size: 15px;
  font-weight: 600;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.favorites-grid[hidden] {
  display: none;
}

.favorite-card {
  overflow: hidden;
  border: 1px solid #dceaf5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 62, 101, 0.08);
}

.favorite-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #eef4fb;
}

.favorite-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-card-media span {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 5px 8px;
  color: #061f36;
  border-radius: 5px;
  background: #FAF7F0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.favorite-card-body {
  display: grid;
  gap: 9px;
  padding: 16px;
}

.favorite-card-body h3 {
  margin: 0;
  color: #0d2d4a;
  font-size: 18px;
  line-height: 1.2;
}

.favorite-card-body p {
  margin: 0;
  color: #53677d;
  font-size: 14px;
  font-weight: 600;
}

.favorite-card-body strong {
  color: #061f36;
  font-size: 20px;
}

.favorite-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.favorite-card-actions .button {
  min-height: 39px;
}

.favorite-card-listing-actions {
  justify-content: center;
  padding-top: 0;
}
@media (max-width: 1024px) {
  .favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .favorites-nav-link {
    display: none;
  }

  .mobile-favorites-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto;
    padding: 10px 8px;
    color: rgba(255, 255, 255, 0.94);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }

  .mobile-favorites-link:hover,
  .mobile-favorites-link:focus-visible {
    color: var(--cyan);
    background: rgba(255, 255, 255, 0.08);
  }
.favorites-toolbar {
    display: grid;
    align-items: start;
  }

  .favorites-grid {
    grid-template-columns: 1fr;
  }

  .favorite-card-actions {
    grid-template-columns: 1fr;
  }
}