/* Desire District homepage v94 — visual redesign only.
   Keeps the existing data/API bindings and restyles the homepage presentation. */

:root {
  --dd-home-pink: #ec4f91;
  --dd-home-pink-2: #ff70b2;
  --dd-home-purple: #8c5de8;
  --dd-home-panel: #12121d;
  --dd-home-panel-2: #191625;
  --dd-home-line: rgba(255, 255, 255, .1);
  --dd-home-glow: 0 18px 50px rgba(227, 67, 135, .13);
}

body#home {
  background:
    radial-gradient(circle at 12% 4%, rgba(235, 70, 142, .11), transparent 29%),
    radial-gradient(circle at 88% 13%, rgba(111, 72, 217, .10), transparent 28%),
    linear-gradient(180deg, #090911 0%, #0c0b13 36%, #0a0910 100%);
}


/* ============================================================
   HEADER
   ============================================================ */

/*
   De publieke header wordt NIET meer door homepage-v95.css gestyled.

   De enige bronnen voor de standaardheader zijn voortaan:

   site-shell.js
   design-system-v99.css

   Hierdoor gebruikt Home exact dezelfde header als:
   Chat
   Community
   Advertenties
   Events
*/


/* Compact hero matching the approved visual */
body#home .hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1.32fr) minmax(390px, .88fr);
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  padding-block: 34px 28px;
}

body#home .hero-copy {
  max-width: 760px;
}

body#home .status-pill {
  margin-bottom: 15px;
}

body#home .hero-copy .eyebrow {
  margin-bottom: 8px;
}

body#home .hero-copy h1 {
  max-width: 720px;
  margin: 0 0 15px;
  font-size: clamp(2.65rem, 4.6vw, 4.85rem);
  line-height: .98;
}

body#home .hero-copy h1 em {
  display: inline-block;
  color: var(--dd-home-pink-2);
  text-shadow: 0 0 26px rgba(236, 79, 145, .18);
}

body#home .hero-lede {
  max-width: 670px;
  margin-bottom: 14px;
  color: #d2cad6;
  font-size: .98rem;
  line-height: 1.62;
}

body#home .hero-lede--secondary {
  display: none;
}

body#home .coming-next {
  margin-top: 18px;
  gap: 7px;
}

body#home .coming-next a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: #d7cfdb;
  font-size: .72rem;
  font-weight: 740;
}

body#home .coming-next a:hover {
  border-color: rgba(236, 79, 145, .38);
  background: rgba(236, 79, 145, .08);
}

body#home .signature-line {
  margin-top: 14px;
  color: #aa9cae;
  font-size: .78rem;
  font-weight: 690;
}

body#home .hero-side {
  max-width: 560px;
  gap: 12px;
}

body#home #guest-entry-card {
  padding: 22px;
  border-radius: 20px;
  border-color: rgba(236, 79, 145, .18);
  background:
    radial-gradient(circle at 100% 0%, rgba(145, 71, 205, .12), transparent 38%),
    linear-gradient(180deg, rgba(27, 23, 36, .97), rgba(15, 14, 22, .98));
  box-shadow: var(--dd-home-glow);
}

body#home #guest-entry-card h2 {
  margin: 4px 0 7px;
  font-size: 1.55rem;
}

body#home .entry-card-subtitle {
  margin-bottom: 13px;
  font-size: .84rem;
}

body#home #guest-entry-card .entry-login-choices {
  gap: 8px;
}

body#home #guest-entry-card .button {
  min-height: 41px;
  font-size: .78rem;
}

body#home .entry-welcome-note {
  margin-top: 13px;
}

body#home .entry-welcome-note li {
  font-size: .72rem;
}

body#home .home-community {
  padding-top: 12px;
}

body#home .home-community-title {
  margin-bottom: 8px;
}

body#home .home-community-card {
  height: 116px;
}

body#home .home-community-card-body {
  padding: 7px 8px 8px;
}


/* ============================================================
   SEARCH / QUICK FILTERS
   ============================================================ */

.dd-home-search-shell {
  padding-block: 8px 20px;
}

.dd-home-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px 210px 128px;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 16px;
  background: rgba(20, 18, 29, .82);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.dd-home-search label {
  margin: 0;
  display: block;
}

.dd-home-search .sr-only {
  position: absolute;
}

.dd-home-search input,
.dd-home-search select {
  min-height: 44px;
  border-radius: 11px;
  border-color: rgba(255, 255, 255, .085);
  background: rgba(7, 7, 12, .62);
  font-size: .82rem;
}

.dd-home-search button {
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #e74285, #bd3f9f);
  color: #fff;
  cursor: pointer;
  font-weight: 850;
  box-shadow: 0 10px 28px rgba(231, 66, 133, .24);
}

.dd-home-search-note {
  min-height: 1.2em;
  margin: 7px 2px 0;
  color: #9f92a5;
  font-size: .72rem;
}

.dd-home-search-note a {
  color: #ff86bd;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Old duplicate homepage sections are replaced by the compact search + real listing module. */
body#home .home-discovery {
  display: none;
}

body#home #demo-live-showcase {
  display: none !important;
}


/* ============================================================
   CREATOR / LISTING SECTION
   ============================================================ */

body#home .creator-spotlight {
  width: min(calc(100% - (var(--page-gutter, 20px) * 2)), 1320px);
  margin: 0 auto;
  padding: 0 0 54px;
}

.dd-listing-heading,
.dd-premium-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 25px 0 14px;
}

.dd-listing-heading h2,
.dd-premium-heading h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  letter-spacing: -.03em;
}

.dd-listing-heading p,
.dd-premium-heading p {
  margin: 4px 0 0;
  color: #9e92a3;
  font-size: .78rem;
}

.dd-listing-heading a,
.dd-premium-heading a {
  color: #ff75b1;
  font-size: .77rem;
  font-weight: 800;
  white-space: nowrap;
}

body#home #creator-spotlight-status {
  margin: 0 0 12px;
  color: #9e92a3;
  font-size: .78rem;
}

body#home #creator-spotlight-cards,
body#home .creator-spotlight-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch;
}

body#home #creator-spotlight-cards > * {
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(236, 79, 145, .17) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #17151f, #111018) !important;
  color: #f8f3f8;
  box-shadow: 0 13px 32px rgba(0, 0, 0, .18);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

body#home #creator-spotlight-cards > *:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 91, 157, .46) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .28),
    0 0 28px rgba(226, 65, 137, .06);
}

body#home #creator-spotlight-cards .dd-home-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 238 / 245;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: #1a1720;
}

body#home #creator-spotlight-cards .dd-home-card-media img,
body#home #creator-spotlight-cards > * > img,
body#home #creator-spotlight-cards img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

body#home #creator-spotlight-cards .dd-home-card-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-height: 114px;
  padding: 12px 13px 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(122, 71, 184, .11), transparent 45%),
    linear-gradient(180deg, rgba(23, 20, 31, .98), rgba(15, 14, 21, .99));
}

body#home #creator-spotlight-cards h2,
body#home #creator-spotlight-cards h3,
body#home #creator-spotlight-cards strong {
  margin: 0;
  color: #fff;
}

body#home #creator-spotlight-cards p {
  margin: 0;
}

body#home #creator-spotlight-cards .button {
  min-height: 34px;
  margin-top: auto;
  padding-inline: 11px;
  border-radius: 9px;
  font-size: .7rem;
}


/* ============================================================
   MAIN HOMEPAGE BANNER
   ============================================================ */

.dd-home-banner-section {
  margin: 0 0 22px;
}

.dd-home-banner-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.dd-home-banner-topline span {
  color: #c5b8ca;
  font-size: .72rem;
  font-weight: 770;
  letter-spacing: .04em;
}

.dd-home-banner-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.dd-home-banner-track::-webkit-scrollbar {
  display: none;
}

.dd-home-banner {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 31% 31% 38%;
  aspect-ratio: 1170 / 330;
  min-height: 286px;
  max-height: 330px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(236, 79, 145, .31);
  border-radius: 15px;
  background: #15121d;
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .25),
    0 0 34px rgba(227, 67, 135, .07);
}

.dd-home-banner-visuals {
  display: contents;
}

.dd-home-banner .placement-visual {
  min-height: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 35% 20%, rgba(238, 69, 143, .24), transparent 46%),
    linear-gradient(145deg, #211629, #101018);
}

.dd-home-banner .placement-visual + .placement-visual {
  border-left: 1px solid rgba(255, 255, 255, .055);
}

.dd-home-banner .placement-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dd-home-banner .placement-visual--secondary img {
  object-position: 70% 50%;
  filter: saturate(.92) contrast(1.04);
}

.dd-home-banner-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  background:
    radial-gradient(circle at 0 40%, rgba(199, 56, 130, .18), transparent 42%),
    linear-gradient(135deg, #1b1625, #0f0e16);
}

.dd-home-banner-copy .placement-tag {
  align-self: flex-start;
  color: #ff8fc0;
  font-size: .65rem;
}

.dd-home-banner-copy h3 {
  margin: 9px 0 7px;
  font-family: Georgia, serif;
  font-size: clamp(1.85rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.dd-home-banner-copy p {
  display: -webkit-box;
  margin: 0 0 15px;
  overflow: hidden;
  color: #c6bbc9;
  font-size: .79rem;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dd-home-banner-cta {
  align-self: flex-start;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 15px;
  border-radius: 9px;
  background: linear-gradient(135deg, #e64486, #bb3d98);
  color: #fff;
  font-size: .74rem;
  font-weight: 850;
}

.dd-home-banner-controls,
.dd-premium-controls {
  display: flex;
  gap: 7px;
}

.dd-home-banner-controls button,
.dd-premium-controls button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  cursor: pointer;
}

.dd-home-banner-dots,
.dd-premium-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.dd-home-banner-dots span,
.dd-premium-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .23);
}

.dd-home-banner-dots span:first-child,
.dd-premium-dots span:first-child {
  background: #f05d9e;
  box-shadow: 0 0 12px rgba(240, 93, 158, .52);
}


/* ============================================================
   PREMIUM SLIDER
   ============================================================ */

.dd-premium-section {
  margin-top: 34px;
  padding: 20px;
  border: 1px solid rgba(143, 90, 219, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(210, 59, 136, .10), transparent 32%),
    linear-gradient(180deg, rgba(27, 21, 37, .76), rgba(15, 13, 22, .9));
}

.dd-premium-heading {
  margin: 0 0 14px;
}

.dd-premium-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dd-premium-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px) / 4);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.dd-premium-track::-webkit-scrollbar {
  display: none;
}

.dd-premium-card {
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(180, 99, 239, .23);
  border-radius: 13px;
  background: #121019;
  color: #fff;
  text-decoration: none;
}

.dd-premium-card .placement-visual {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.45 / 1;
  border-radius: 0;
  background: linear-gradient(140deg, #2f1c38, #121019);
}

.dd-premium-card .placement-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dd-premium-card-copy {
  padding: 12px 13px 14px;
}

.dd-premium-card-copy .placement-tag {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(143, 90, 219, .17);
  color: #caa6ff;
  font-size: .6rem;
}

.dd-premium-card-copy h3 {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: .93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-premium-card-copy p {
  display: -webkit-box;
  min-height: 2.5em;
  margin: 6px 0 0;
  overflow: hidden;
  color: #9f94a6;
  font-size: .72rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dd-premium-card-cta {
  display: inline-flex;
  margin-top: 9px;
  color: #ff78b3;
  font-size: .69rem;
  font-weight: 800;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  body#home .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr);
  }

  .dd-home-search {
    grid-template-columns: minmax(220px, 1fr) 170px 180px 120px;
  }

  body#home #creator-spotlight-cards,
  body#home .creator-spotlight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .dd-premium-track {
    grid-auto-columns: calc((100% - 28px) / 3);
  }
}


@media (max-width: 900px) {
  body#home .hero {
    grid-template-columns: 1fr;
    padding-top: 28px;
  }

  body#home .hero-side {
    max-width: none;
  }

  .dd-home-search {
    grid-template-columns: 1fr 1fr;
  }

  .dd-home-search .dd-home-search-query {
    grid-column: 1 / -1;
  }

  body#home #creator-spotlight-cards,
  body#home .creator-spotlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dd-home-banner {
    grid-template-columns: 44% 56%;
    aspect-ratio: auto;
    min-height: 310px;
  }

  .dd-home-banner .placement-visual--secondary {
    display: none;
  }

  .dd-premium-track {
    grid-auto-columns: calc((100% - 14px) / 2);
  }
}


@media (max-width: 640px) {
  body#home .hero {
    padding-block: 22px 18px;
  }

  body#home .hero-copy h1 {
    font-size: clamp(2.35rem, 12vw, 3.45rem);
  }

  body#home .coming-next {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  body#home .coming-next a {
    flex: 0 0 auto;
  }

  .dd-home-search-shell {
    padding-bottom: 14px;
  }

  .dd-home-search {
    grid-template-columns: 1fr;
  }

  .dd-home-search .dd-home-search-query {
    grid-column: auto;
  }

  .dd-listing-heading,
  .dd-premium-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  body#home #creator-spotlight-cards,
  body#home .creator-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body#home #creator-spotlight-cards .dd-home-card-info {
    min-height: 104px;
    padding: 10px;
  }

  .dd-home-banner {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: 0;
  }

  .dd-home-banner-visuals {
    display: block;
  }

  .dd-home-banner .placement-visual {
    aspect-ratio: 16 / 9;
  }

  .dd-home-banner-copy {
    padding: 20px;
  }

  .dd-premium-section {
    padding: 15px;
  }

  .dd-premium-track {
    grid-auto-columns: 82%;
  }
}


@media (max-width: 420px) {
  body#home #creator-spotlight-cards,
  body#home .creator-spotlight-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   LIGHT MODE
   ============================================================ */

html[data-theme='light'] body#home .dd-home-search,
html[data-theme='light'] body#home .dd-premium-section,
html[data-theme='light'] body#home #creator-spotlight-cards > * {
  background: #fff !important;
  color: var(--text);
  border-color: var(--line) !important;
}

html[data-theme='light'] body#home .dd-home-card-info {
  background: #fff !important;
}


/* ============================================================
   V95
   Tighter above-the-fold proportions and direct public directory cards
   ============================================================ */

body#home .hero {
  gap: clamp(26px, 3.5vw, 48px);
  padding-block: 24px 18px;
}

body#home .hero-copy {
  max-width: 700px;
}

body#home .hero-copy h1 {
  max-width: 660px;
  margin-bottom: 12px;
  font-size: clamp(2.45rem, 3.75vw, 3.95rem);
  line-height: .96;
}

body#home .status-pill {
  margin-bottom: 10px;
}

body#home .hero-copy .eyebrow {
  margin-bottom: 5px;
}

body#home .hero-lede {
  margin-bottom: 10px;
  font-size: .9rem;
  line-height: 1.5;
}

body#home .coming-next {
  margin-top: 12px;
}

body#home .signature-line {
  margin-top: 10px;
}

body#home #guest-entry-card {
  padding: 18px 20px;
}

body#home #guest-entry-card h2 {
  font-size: 1.4rem;
}

body#home .home-community {
  padding-top: 8px;
}

body#home .home-community-card {
  height: 108px;
}

.dd-home-search-shell {
  padding-block: 6px 16px;
}

body#home .dd-home-listing-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

body#home .dd-home-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 238 / 245;
  overflow: hidden;
  background:
    radial-gradient(circle at 60% 20%, rgba(238,69,143,.22), transparent 44%),
    linear-gradient(145deg, #211629, #101018);
}

body#home .dd-home-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body#home .dd-home-gallery-count,
body#home .dd-home-gold-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: .64rem;
  font-weight: 800;
}

body#home .dd-home-gallery-count {
  right: 8px;
  bottom: 8px;
  background: rgba(7,7,12,.72);
  color: #fff;
}

body#home .dd-home-gold-badge {
  left: 8px;
  top: 8px;
  background: rgba(104,67,17,.78);
  color: #ffd87a;
  border: 1px solid rgba(255,216,122,.28);
}

body#home .dd-home-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

body#home .dd-home-card-head h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}

body#home .dd-home-card-head > span {
  flex: 0 0 auto;
  color: #d8cfdc;
  font-size: .7rem;
}

body#home .dd-home-card-meta {
  overflow: hidden;
  color: #a99eae;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body#home .dd-home-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: #4ee48c;
  font-size: .72rem;
  font-weight: 780;
}

body#home .dd-home-verified span {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #43dc83;
  color: #07110b;
  font-size: .68rem;
}

@media (max-width: 640px) {
  body#home .hero-copy h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }
}


/* ============================================================
   Homepage cards v96.1
   cleaner cards + in-card photo gallery
   ============================================================ */

body#home #creator-spotlight-cards > * {
  border-color: rgba(236,79,145,.14) !important;
  border-radius: 12px !important;
  background: #111018 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.17);
}

body#home #creator-spotlight-cards > *:hover {
  transform: translateY(-2px);
  border-color: rgba(245,91,157,.34) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
}

body#home #creator-spotlight-cards .dd-home-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 238 / 245;
  min-height: 0;
  overflow: hidden;
  background: #17141d;
}

body#home #creator-spotlight-cards .dd-home-card-media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

body#home #creator-spotlight-cards .dd-home-card-media-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .16s ease;
}

body#home .dd-home-age-badge,
body#home .dd-home-gallery-count,
body#home .dd-home-gold-badge {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,7,12,.72);
  color: #fff;
  backdrop-filter: blur(8px);
  font-size: .64rem;
  font-weight: 800;
  pointer-events: none;
}

body#home .dd-home-age-badge {
  left: 8px;
  bottom: 8px;
}

body#home .dd-home-gallery-count {
  right: 8px;
  bottom: 8px;
}

body#home .dd-home-gold-badge {
  left: 8px;
  top: 8px;
  bottom: auto;
  background: rgba(87,57,15,.78);
  color: #ffd87a;
  border-color: rgba(255,216,122,.24);
}

body#home .dd-home-gallery-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 0 2px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(8,7,12,.58);
  color: #fff;
  opacity: .68;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font: 400 22px/1 Arial,sans-serif;
  transition:
    opacity .15s ease,
    background .15s ease,
    transform .15s ease;
}

body#home .dd-home-gallery-arrow--prev {
  left: 7px;
}

body#home .dd-home-gallery-arrow--next {
  right: 7px;
}

body#home .dd-home-card-media:hover .dd-home-gallery-arrow,
body#home .dd-home-gallery-arrow:focus-visible {
  opacity: 1;
}

body#home .dd-home-gallery-arrow:hover {
  background: rgba(20,15,24,.82);
  transform: translateY(-50%) scale(1.04);
}

body#home #creator-spotlight-cards .dd-home-card-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  padding: 10px 11px 11px;
  background:
    linear-gradient(
      180deg,
      rgba(22,19,29,.98),
      rgba(15,14,20,.99)
    );
}

body#home .dd-home-card-head {
  display: block;
  min-width: 0;
}

body#home .dd-home-card-head h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: .91rem;
  line-height: 1.32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body#home .dd-home-card-meta {
  margin: 0;
  overflow: hidden;
  color: #a79ca9;
  font-size: .69rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body#home .dd-home-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  margin-top: auto;
  padding-top: 5px;
}

body#home .dd-home-verified {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  color: #55df91;
  font-size: .66rem;
  font-weight: 780;
  white-space: nowrap;
}

body#home .dd-home-verified span {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border-radius: 50%;
  background: #43dc83;
  color: #07110b;
  font-size: .6rem;
}

body#home .dd-home-card-category {
  min-width: 0;
  overflow: hidden;
  color: #e68db5;
  font-size: .65rem;
  font-weight: 720;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: none) {
  body#home .dd-home-gallery-arrow {
    opacity: .82;
  }
}

@media (max-width: 640px) {
  body#home #creator-spotlight-cards .dd-home-card-info {
    min-height: 82px;
    padding: 9px;
  }

  body#home .dd-home-card-head h3 {
    font-size: .84rem;
  }

  body#home .dd-home-card-meta {
    font-size: .64rem;
  }

  body#home .dd-home-card-footer {
    gap: 5px;
  }

  body#home .dd-home-verified,
  body#home .dd-home-card-category {
    font-size: .6rem;
  }

  body#home .dd-home-gallery-arrow {
    width: 28px;
    height: 28px;
  }
}


/* v96.1 - grotere leeftijd op advertentiefoto */

body#home .dd-home-age-badge {
  min-height: 29px;
  padding: 0 11px;
  font-size: .78rem;
  font-weight: 850;
}
/* Hero left alignment */
@media (min-width: 901px) {
  body#home .hero-copy {
    margin-left: 18px;
  }
}

/* Align rechter chatkaart met zoekbalk */
@media (min-width: 901px) {
  body#home .hero-side {
    transform: translateX(-20px);
  }
}

/* ============================================================
   Homepage search v2
   ============================================================ */

body#home .dd-home-search--v2 {
  grid-template-columns:
    minmax(145px, .75fr)
    minmax(170px, .95fr)
    minmax(260px, 1.55fr)
    minmax(135px, .72fr)
    128px;
  align-items: center;
}

body#home .dd-home-search--v2 label {
  min-width: 0;
}

body#home .dd-home-search--v2 input,
body#home .dd-home-search--v2 select,
body#home .dd-home-search--v2 button {
  width: 100%;
  min-height: 44px;
}

body#home .dd-home-search--v2 .dd-home-search-region {
  min-width: 0;
}

@media (max-width: 1180px) {
  body#home .dd-home-search--v2 {
    grid-template-columns: 1fr 1fr 1.35fr;
  }

  body#home .dd-home-search--v2 .dd-home-search-region {
    grid-column: auto;
  }

  body#home .dd-home-search--v2 button {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body#home .dd-home-search--v2 {
    grid-template-columns: 1fr 1fr;
  }

  body#home .dd-home-search--v2 .dd-home-search-region {
    grid-column: 1 / -1;
  }

  body#home .dd-home-search--v2 button {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  body#home .dd-home-search--v2 {
    grid-template-columns: 1fr;
  }

  body#home .dd-home-search--v2 .dd-home-search-region,
  body#home .dd-home-search--v2 button {
    grid-column: auto;
  }
}
/* ============================================================
   DD_HOME_AD_FILTER_CSS_V1
   Advertentiefilter in homepage-stijl
   ============================================================ */

body#home .dd-home-ad-filter {
  display: block;

  box-sizing: border-box;
  width: 100%;

  padding: 10px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;

  background: rgba(15,13,20,.76);

  box-shadow:
    0 14px 34px rgba(0,0,0,.13);
}

body#home .dd-home-ad-categories {
  display: grid;

  grid-template-columns:
    repeat(7,minmax(0,1fr));

  gap: 7px;

  margin: 0 0 12px;
}

body#home .dd-home-ad-categories button,
body#home .dd-home-ad-categories a {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  min-width: 0;
  min-height: 38px;

  padding: 0 9px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;

  background: rgba(255,255,255,.035);

  color: #ded4dd;

  text-decoration: none;

  font: inherit;
  font-size: 11px;
  font-weight: 750;

  cursor: pointer;
}

body#home .dd-home-ad-categories button:hover,
body#home .dd-home-ad-categories a:hover,
body#home .dd-home-ad-categories button.is-active {
  border-color: rgba(211,72,132,.34);

  background:
    rgba(112,38,74,.34);

  color: #fff;
}

body#home .dd-home-ad-main {
  display: grid;

  grid-template-columns:
    minmax(110px,.8fr)
    minmax(150px,1.05fr)
    minmax(260px,1.75fr)
    minmax(125px,.82fr)
    minmax(205px,1.2fr);

  gap: 12px;

  align-items: end;

  min-width: 0;
}

body#home .dd-home-ad-field,
body#home .dd-home-ad-price {
  min-width: 0;
  margin: 0;
}

body#home .dd-home-ad-field > span,
body#home .dd-home-ad-label,
body#home .dd-home-ad-price legend,
body#home .dd-home-range-filter legend,
body#home .dd-home-extra-grid label > span {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 20px;

  margin: 0 0 6px;

  color: #f2eaf0;

  font-size: 11px;
  font-weight: 800;
}

body#home .dd-home-ad-filter input,
body#home .dd-home-ad-filter select {
  box-sizing: border-box;

  width: 100%;
  min-width: 0;
  min-height: 44px;

  margin: 0;

  border: 1px solid rgba(255,255,255,.085);
  border-radius: 10px;

  background: rgba(7,7,12,.62);

  color: #f7f2f5;

  font: inherit;
  font-size: 12px;
}

body#home .dd-home-ad-filter input:focus,
body#home .dd-home-ad-filter select:focus {
  border-color: rgba(231,66,133,.52);

  outline: none;

  box-shadow:
    0 0 0 2px rgba(231,66,133,.09);
}

body#home .dd-home-ad-location-row {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    44px;

  gap: 7px;
}

body#home .dd-home-location-button {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  min-width: 44px;
  min-height: 44px;

  padding: 0;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;

  background: rgba(255,255,255,.035);

  color: #d8ccd5;

  cursor: pointer;
}

body#home .dd-home-location-status {
  display: block;

  min-height: 0;

  margin-top: 4px;

  color: #9f92a5;

  font-size: 9px;
}

body#home .dd-home-location-status:empty {
  display: none;
}

body#home .dd-home-ad-price {
  padding: 0;

  border: 0;
}

body#home .dd-home-ad-price legend {
  width: 100%;
  padding: 0;
}

body#home .dd-home-ad-price legend small,
body#home .dd-home-range-filter legend small {
  color: #a89ba6;

  font-size: 9px;
  font-weight: 500;
}

body#home .dd-home-ad-price > div,
body#home .dd-home-range-filter > div {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  gap: 6px;

  align-items: center;
}

body#home .dd-home-more-filters {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  box-sizing: border-box;

  width: 100%;
  min-height: 38px;

  margin: 12px 0 0;
  padding: 0 16px;

  border:
    1px solid rgba(190,69,120,.20);

  border-radius: 9px;

  background:
    rgba(11,9,15,.50);

  color: #e6dce4;

  font: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}

body#home .dd-home-more-filters:hover,
body#home .dd-home-more-filters.is-open {
  border-color:
    rgba(211,72,132,.35);

  background:
    rgba(112,38,74,.22);
}

body#home .dd-home-more-chevron {
  width: 7px;
  height: 7px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(45deg) translateY(-2px);
}

body#home .dd-home-more-filters.is-open
.dd-home-more-chevron {
  transform: rotate(225deg) translate(-2px,-2px);
}

body#home .dd-home-advanced-filters {
  margin-top: 12px;
}

body#home .dd-home-advanced-filters[hidden] {
  display: none !important;
}

body#home .dd-home-advanced-grid {
  display: grid;

  grid-template-columns:
    repeat(5,minmax(0,1fr));

  gap: 12px;
}

body#home .dd-home-range-filter {
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
}

body#home .dd-home-extra-details {
  margin-top: 12px;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius: 11px;

  background:
    rgba(255,255,255,.018);
}

body#home .dd-home-extra-details summary {
  padding: 12px 14px;

  color: #e9dfe7;

  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}

body#home .dd-home-extra-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 12px;

  padding: 0 14px 14px;
}

body#home .dd-home-taxonomy-copy {
  margin: 0;
  padding: 0 14px 8px;

  color: #9f92a5;

  font-size: 10px;
}

body#home #dd-home-taxonomy {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 9px;

  padding: 0 14px 14px;
}

body#home .dd-home-taxonomy-group {
  min-width: 0;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 9px;

  background:
    rgba(8,7,12,.45);
}

body#home .dd-home-taxonomy-group summary {
  padding: 10px 11px;
}

body#home .dd-home-taxonomy-options {
  display: grid;

  gap: 6px;

  padding: 0 10px 10px;
}

body#home .dd-home-taxonomy-options label {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  color: #d6cbd4;

  font-size: 10px;
}

body#home .dd-home-taxonomy-options input {
  width: 15px;
  min-width: 15px;
  min-height: 15px;
}

body#home .dd-home-ad-footer {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 14px;

  align-items: end;

  margin-top: 11px;
}

body#home .dd-home-ad-source {
  margin: 0;

  color: #9f92a5;

  font-size: 9px;
  line-height: 1.45;
}

body#home .dd-home-ad-actions {
  display: flex;

  gap: 8px;

  justify-content: flex-end;
}

body#home .dd-home-ad-submit,
body#home .dd-home-ad-reset {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  min-height: 40px;

  padding: 0 17px;

  border-radius: 10px;

  text-decoration: none;

  font: inherit;
  font-size: 11px;
  font-weight: 850;
}

body#home .dd-home-ad-submit {
  border: 0;

  background:
    linear-gradient(
      135deg,
      #e74285,
      #bd3f9f
    );

  color: #fff;

  box-shadow:
    0 10px 28px
    rgba(231,66,133,.20);

  cursor: pointer;
}

body#home .dd-home-ad-reset {
  border:
    1px solid rgba(255,255,255,.09);

  background:
    rgba(255,255,255,.025);

  color: #e3d8e0;
}


/* DD_HOME_AD_FILTER_ACCENT_V2 */

/*
   De oude homepage-regel geeft ALLE buttons roze styling.
   Binnen deze nieuwe advertentiefilter neutraliseren we dat.
*/
body#home
.dd-home-ad-filter
button:not(.dd-home-ad-submit) {
  box-shadow: none !important;
}

/* Categorieën: donker, alleen subtiel roze bij hover/actief */
body#home
.dd-home-ad-categories
button {
  background:
    rgba(255,255,255,.028) !important;

  border-color:
    rgba(255,255,255,.075) !important;

  box-shadow:
    none !important;
}

body#home
.dd-home-ad-categories
button:hover {
  background:
    rgba(92,33,61,.20) !important;

  border-color:
    rgba(173,72,116,.20) !important;
}

body#home
.dd-home-ad-categories
button.is-active {
  background:
    rgba(99,36,67,.27) !important;

  border-color:
    rgba(177,73,119,.25) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(211,92,143,.035) !important;
}

/* GPS-knop volledig neutraal */
body#home
.dd-home-location-button {
  background:
    rgba(255,255,255,.025) !important;

  border-color:
    rgba(255,255,255,.085) !important;

  box-shadow:
    none !important;
}

body#home
.dd-home-location-button:hover {
  background:
    rgba(255,255,255,.055) !important;

  border-color:
    rgba(255,255,255,.13) !important;
}

/* Meer zoekfilters: geen roze lichtbalk meer */
body#home
.dd-home-more-filters {
  background:
    rgba(8,7,12,.46) !important;

  border-color:
    rgba(255,255,255,.075) !important;

  box-shadow:
    none !important;
}

body#home
.dd-home-more-filters:hover,
body#home
.dd-home-more-filters.is-open {
  background:
    rgba(75,31,52,.20) !important;

  border-color:
    rgba(163,69,109,.23) !important;

  box-shadow:
    none !important;
}

/* Alleen Zoeken krijgt nog het merkaccent, maar minder fel */
body#home
.dd-home-ad-submit {
  background:
    linear-gradient(
      135deg,
      #cf3f78,
      #aa3b8a
    ) !important;

  box-shadow:
    0 7px 18px
    rgba(207,63,120,.13) !important;
}

body#home
.dd-home-ad-submit:hover {
  background:
    linear-gradient(
      135deg,
      #d84880,
      #b34292
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(207,63,120,.17) !important;
}

/* Wis filters blijft neutraal */
body#home
.dd-home-ad-reset {
  background:
    rgba(255,255,255,.022) !important;

  border-color:
    rgba(255,255,255,.085) !important;

  box-shadow:
    none !important;
}
/* Tablet */
@media (max-width: 1050px) {

  body#home .dd-home-ad-categories {
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }

  body#home .dd-home-ad-main {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body#home .dd-home-ad-location {
    grid-column:
      1 / -1;
  }

  body#home .dd-home-advanced-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body#home #dd-home-taxonomy {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

/* Mobiel */
@media (max-width: 620px) {

  body#home .dd-home-search-shell {
    padding-left: 8px;
    padding-right: 8px;
  }

  body#home .dd-home-ad-filter {
    padding: 10px;
  }

  body#home .dd-home-ad-categories {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body#home .dd-home-ad-main,
  body#home .dd-home-advanced-grid,
  body#home .dd-home-extra-grid,
  body#home #dd-home-taxonomy {
    grid-template-columns:
      minmax(0,1fr);
  }

  body#home .dd-home-ad-location {
    grid-column:
      auto;
  }

  body#home .dd-home-ad-footer {
    grid-template-columns:
      minmax(0,1fr);
  }

  body#home .dd-home-ad-actions {
    display: grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    width: 100%;
  }

  body#home .dd-home-ad-submit,
  body#home .dd-home-ad-reset {
    width: 100%;
  }
}

/* DD_PUBLIC_WIDTH_SYSTEM_V1
   Homepage volgt dezelfde 1320px contentbreedte.
*/