/* Cuddlefish Cuts Design Directory and shared Design cards v0.19.0 */
.design-directory-page,
.design-card { min-width: 0; }

.design-directory-page { padding: 48px 0 94px; }
.design-directory-page__inner { width: min(1520px, calc(100% - 64px)); margin-inline: auto; }
.design-directory-intro { margin-bottom: 30px; }
.design-directory-intro h1 { margin: 0; font-size: clamp(3rem, 5vw, 3.25rem); line-height: 1; }
.design-directory-intro p { max-width: 740px; margin: 12px 0 0; color: var(--cc-ink-soft); font-size: 1.08rem; font-weight: 600; line-height: 1.5; }

.design-directory-controls {
  display: grid;
  grid-template-columns: minmax(320px, 560px) minmax(210px, 230px) auto;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
}
.design-directory-search,
.design-directory-sort-control,
.design-directory-sort-trigger {
  min-height: 48px;
  border: 1px solid rgba(12,19,36,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.design-directory-search { position: relative; display: flex; align-items: center; padding: 0 50px 0 16px; }
.design-directory-search .icon { width: 21px; height: 21px; color: var(--cc-ink-soft); }
.design-directory-search input { width: 100%; min-width: 0; padding: 0 12px; border: 0; outline: 0; background: transparent; }
.design-directory-search button { position: absolute; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 1.35rem; }
.design-directory-search button:hover { background: var(--pastel-lavender); }
.design-directory-sort-control { display: flex; align-items: center; padding: 0 14px; font-weight: 800; white-space: nowrap; }
.design-directory-sort-control select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 800; }
.design-directory-sort-trigger { display: none; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 750; }
.design-directory__submit { min-height: 48px; }
.js .design-directory__submit { display: none; }
.design-directory-context { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; font-weight: 700; }
.design-directory-context a { color: #6e57a4; font-weight: 850; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--cc-pink); text-underline-offset: 3px; }
.design-directory-results { margin: 18px 0; font-weight: 800; }

.design-directory-grid,
.artist-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  justify-content: start;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.design-directory-grid > li,
.artist-design-grid > li { display: flex; min-width: 0; }

.design-card {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,250,236,.9);
  display: flex;
  flex-direction: column;
  transition: background var(--transition-normal);
}
.design-card:hover { background: var(--cream-soft); }
.design-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px 20px 14px 14px; background: var(--pastel-lavender); }
.design-card.tone-lavender .design-card__media { background: var(--pastel-lavender, #E8D9F3); }
.design-card.tone-mint .design-card__media { background: var(--pastel-mint, #DDF4E7); }
.design-card.tone-pink .design-card__media { background: var(--pastel-pink, #F8DCE5); }
.design-card.tone-yellow .design-card__media { background: var(--pastel-yellow, #F8EDB8); }
.design-card.tone-blue .design-card__media { background: var(--pastel-blue, #DDECF7); }
.design-card__media > img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); max-width: calc(100% - 20px); max-height: calc(100% - 20px); object-fit: contain; object-position: center; transition: transform var(--transition-normal); }
.design-card:hover .design-card__media > img { transform: scale(1.015); }
.design-card__fallback { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.design-card__fallback-orb { width: 60%; aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.34); }
.design-card__fallback strong { position: relative; z-index: 2; color: var(--cc-ink); font-family: var(--cc-display); font-size: clamp(2.6rem, 8vw, 3.5rem); font-weight: 700; letter-spacing: .02em; }
.design-card__fallback i { position: absolute; width: 18px; aspect-ratio: 1 / 1; clip-path: polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%); }
.design-card__fallback i:nth-of-type(1) { left: 10%; top: 13%; background: rgba(255,255,255,.88); }
.design-card__fallback i:nth-of-type(2) { right: 12%; top: 18%; width: 12px; background: rgba(104,197,232,.9); }
.design-card__fallback i:nth-of-type(3) { left: 18%; bottom: 14%; width: 13px; background: rgba(244,179,59,.9); }
.design-card__fallback i:nth-of-type(4) { right: 20%; bottom: 12%; width: 18px; background: rgba(244,127,155,.9); }
.design-card__fallback i:nth-of-type(5) { left: 47%; top: 9%; width: 10px; background: rgba(144,116,199,.92); }
.design-card__fallback i:nth-of-type(6) { right: 8%; bottom: 30%; width: 9px; background: rgba(255,255,255,.75); }
.design-card__body { flex: 1; display: flex; flex-direction: column; padding: 21px; }
.design-card h2,
.design-card h3 { margin: 0; font-size: clamp(1.55rem, 2vw, 1.7rem); line-height: 1.08; }
.design-card__credit { margin: 7px 0 0; color: #6e57a4; font-size: .95rem; font-weight: 750; }
.design-card__credit a { font-weight: 850; }
.design-card__description { margin: 14px 0 0; font-size: 1rem; line-height: 1.48; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.design-card__count { margin: 16px 0 0; color: var(--cc-ink-soft); font-size: .92rem; font-weight: 800; }
.design-card__action { align-self: flex-start; min-height: 44px; margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px; color: #6e57a4; font-size: 1.02rem; font-weight: 850; }
.design-card h2 a,
.design-card h3 a,
.design-card__credit a,
.design-card__action { text-decoration: none; }
.design-card h2 a:is(:hover,:focus-visible),
.design-card h3 a:is(:hover,:focus-visible),
.design-card__credit a:is(:hover,:focus-visible),
.design-card__action:is(:hover,:focus-visible) { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--cc-pink); text-underline-offset: 3px; }

.design-directory-empty { max-width: 620px; margin-top: 22px; padding: 26px; border-radius: 20px; background: rgba(255,250,236,.82); }
.design-directory-empty h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.design-directory-empty p { margin: 10px 0 0; color: var(--cc-ink-soft); font-weight: 650; }
.design-directory-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.design-directory-empty--catalog { margin-top: 24px; }

.design-sort-dialog { width: min(520px, 100%); max-width: none; margin: auto 0 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: transparent; }
.design-sort-dialog::backdrop { background: rgba(12,19,36,.35); }
.design-sort-dialog__panel { padding: 22px 22px 28px; border-radius: 24px 24px 0 0; background: var(--cream-soft); }
.design-sort-dialog__panel header { display: flex; align-items: center; justify-content: space-between; }
.design-sort-dialog__panel h2 { margin: 0; font-size: 1.75rem; }
.design-sort-dialog__panel header button { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; }
.design-sort-dialog__panel header button:hover { background: var(--pastel-lavender); }
.design-sort-dialog__choices { margin-top: 12px; }
.design-sort-choice { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(12,19,36,.1); font-weight: 750; cursor: pointer; }
.design-sort-choice input { position: absolute; opacity: 0; pointer-events: none; }
.design-sort-choice i { width: 21px; height: 21px; border: 2px solid var(--accent-purple); border-radius: 50%; }
.design-sort-choice input:checked + i { border: 6px solid var(--accent-purple); }
.design-sort-choice:has(input:focus-visible) { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.design-sort-dialog__panel small { display: block; margin-top: 18px; color: var(--cc-ink-soft); font-weight: 700; }

@media (max-width: 1179px) {
  .design-directory-page__inner { width: min(1120px, calc(100% - 48px)); }
  .design-directory-grid,
  .artist-design-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 350px)); }
}

@media (max-width: 760px) {
  .design-directory-page { padding: 30px 0 82px; }
  .design-directory-page__inner { width: calc(100% - 30px); }
  .design-directory-intro h1 { font-size: clamp(2.4rem, 12vw, 2.65rem); }
  .design-directory-intro p { font-size: 1rem; }
  .design-directory-controls { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .js .design-directory-sort-control { display: none; }
  .js .design-directory-sort-trigger { display: flex; }
  .design-directory__submit { width: 100%; justify-content: center; }
  .design-directory-grid,
  .artist-design-grid { grid-template-columns: 1fr; gap: 20px; }
  .design-card { width: min(100%, 420px); }
  .design-card__body { padding: 19px; }
  .design-sort-dialog { width: 100%; }
}

@media (max-width: 360px) {
  .design-directory-empty__actions .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .design-card__media > img { transition: none; }
  .design-card:hover .design-card__media > img { transform: none; }
}