/* ==========================================================================
   DESIGNS ARCHIVE — /designs/ and each garment-type term archive
   Loaded only on those templates (see inc/enqueue.php).

   The card is intentionally quieter than the product card: no price, no
   wishlist heart, no badge stack. A design library is browsed by eye, so the
   picture gets the room and the chrome stays out of the way.
   ========================================================================== */

.designs-hero{
  padding-block: var(--sp-8) var(--sp-6);
  border-bottom:1px solid var(--c-border);
}
.designs-hero h1{ margin: var(--sp-2) 0 var(--sp-4); }

/* The count sits inside the filter chip rather than beside it, so a chip is
   one target and the number never wraps onto its own line. */
.cat-tabs__count{
  display:inline-block; margin-left:6px;
  font-size: var(--fs-micro); color: var(--c-text-muted);
}
.cat-tabs__link.is-active .cat-tabs__count{ color:inherit; }

.design-grid{
  display:grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding-block: var(--sp-6);
}

.design-card{ position:relative; }
.design-card__link{
  display:block; text-decoration:none; color:inherit;
}
.design-card__media{
  position:relative; display:block; overflow:hidden;
  background: var(--c-surface);
  aspect-ratio: 3 / 4;
}
.design-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s ease;
}
.design-card__link:hover .design-card__media img{ transform: scale(1.03); }

.design-card__noimage{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(10,10,10,.05) 10px 11px);
}

/* The call to action is revealed on hover on a pointer device and is simply
   always visible on touch, where there is no hover to reveal it with. A button
   that only appears on hover is a button that does not exist on a phone. */
.design-card__cta{
  position:absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  text-align:center; pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
  .design-card__cta{ opacity:0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
  .design-card__link:hover .design-card__cta,
  .design-card__link:focus-visible .design-card__cta{ opacity:1; transform:none; }
}

.design-card__body{ display:block; padding-top: var(--sp-3); }
.design-card__type{
  display:block; font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  text-transform:uppercase; color: var(--c-text-muted);
}
.design-card__name{
  display:block; margin-top:2px;
  font-family: var(--font-display); font-weight:600; line-height:1.35;
}

.designs-empty{ padding-block: var(--sp-8); max-width:60ch; }
.designs-empty p + p{ margin-top: var(--sp-3); }

.designs-outro{
  margin-block: var(--sp-8);
  padding: var(--sp-6);
  border:1px solid var(--c-border); background: var(--c-surface);
}
.designs-outro p{ margin: var(--sp-2) 0 var(--sp-5); }

@media (max-width: 640px){
  .design-grid{
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .designs-hero{ padding-block: var(--sp-6) var(--sp-5); }
}