/* ===== Mix discoveries (home #collection): Art / Artists / Writers cards + pill filter ===== */
/* ASCII only (platform rule). Colours match the FIND mega-menu cards. */
.mix-discover { --mix-art: #f6f4f0; --mix-artists: #e9f5f7; --mix-writers: #fff3d1; --mix-ink: #17191c; }

/* pills */
.mix-discover .mix-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.mix-discover .mix-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.mix-discover .mix-pills a.ui-btn,
.mix-discover .mix-pills a.ui-btn:visited {
  margin: 0; padding: 12px 24px; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: 0;
  text-transform: none; background: transparent; color: var(--mix-ink); border: 1px solid #d6d3cc; box-shadow: none;
}
.mix-discover .mix-pills a.ui-btn:hover { border-color: var(--mix-ink); }
.mix-discover .mix-pills a.ui-btn.mix-active,
.mix-discover .mix-pills a.ui-btn.mix-active:visited { background: var(--mix-ink); border-color: var(--mix-ink); color: #fff; }
.mix-discover .mix-count { font-size: 15px; color: #6b6b6b; }

/* grid */
.mix-discover .widget-dynamic.mix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mix-discover .mix-grid > .card.mix-card { width: 100% !important; max-width: none !important; float: none; margin: 0; padding: 0; border-radius: 9.6px; overflow: hidden; display: flex; flex-direction: column; }
.mix-discover .mix-grid > .card.mix-card.mix-hidden { display: none; }
.mix-discover .mix-card.mix-card-art { background: var(--mix-art); }
.mix-discover .mix-card.mix-card-artists { background: var(--mix-artists); }
.mix-discover .mix-card.mix-card-writers { background: var(--mix-writers); }
.mix-discover .mix-card > a { display: flex; flex-direction: column; flex: 1; color: var(--mix-ink); text-decoration: none; }
.mix-discover .mix-card figure { margin: 0; padding: 0 !important; border-radius: 0 !important; height: auto !important; display: block; flex: 0 0 auto; background: transparent; }
.mix-discover .mix-card figure::before, .mix-discover .mix-card figure::after { content: none !important; display: none !important; }
.mix-discover .mix-card .item-image-container { position: relative; flex: none; width: 100%; padding-top: 87% !important; height: 0 !important; overflow: hidden; border-radius: 0; background: #e8e6e1; box-shadow: none !important; }
.mix-discover .mix-card .item-image-container img { position: absolute; inset: 0; z-index: 0 !important; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; transition: transform .6s ease; }
.mix-discover .mix-card:hover .item-image-container img { transform: scale(1.04); }
.mix-discover .mix-card figure > figcaption { display: none !important; }

/* caption panel */
.mix-discover .mix-cap { position: relative; flex: 1; padding: 26px 64px 30px 30px; }
.mix-discover .mix-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #4a4a4a; margin-bottom: 8px; }
.mix-discover .mix-title { display: block; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--mix-ink); }
.mix-discover .mix-by { display: block; margin-top: 6px; font-size: 14px; color: #6b6b6b; }
.mix-discover .mix-arrow { position: absolute; right: 30px; top: 50%; margin-top: -12px; font-size: 22px; line-height: 24px; color: var(--mix-ink); transition: transform .25s ease, color .25s ease; }
.mix-discover .mix-card:hover .mix-arrow { transform: translate(3px, -3px); color: #cb5a09; }

/* wishlist heart: white disc */
.mix-discover .mix-card .btn-wishlist { top: 12px; right: 12px; margin: 0 !important; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.12); z-index: 2; }
.mix-discover .mix-card .btn-wishlist i { color: var(--mix-ink); font-size: 16px; line-height: 1; margin: 1px 0 0 0; }
.mix-discover .mix-card .btn-wishlist .fas.fa-heart { color: #cb5a09; }

@media all and (max-width: 60em) {
  .mix-discover .widget-dynamic.mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .mix-discover .mix-title { font-size: 22px; }
}
@media all and (max-width: 37.5em) {
  .mix-discover .widget-dynamic.mix-grid { grid-template-columns: minmax(0, 1fr); }
  .mix-discover .mix-pills a.ui-btn { padding: 9px 18px; font-size: 14px; }
  .mix-discover .mix-count { width: 100%; }
}