/*
  Proof sheet: ink line drawings.
  Rules for .ps-draw only. Do not style anything else from this file.
*/

.ps-draw {
  display: block;
  width: 100%;
  color: var(--ink);
}

.ps-draw svg,
.ps-draw img {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}

.ps-draw--card,
.ps-draw--hero {
  aspect-ratio: 1;
}

.ps-draw--card {
  width: 100%;
}

.ps-draw--hero {
  width: 100%;
  max-width: min(560px, 100%);
}

.ps-draw--thumb {
  width: 72px;
  aspect-ratio: 1;
}

/* Interior detail (seams, folds, ribbing, hatching) rests at reduced
   opacity and lifts to full strength when the card is hovered or
   focused. Nothing else moves: no scale, no translate, no shadow. */
.ps-draw__detail {
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease);
}

.ps-product-card:hover .ps-draw__detail,
.ps-product-card:focus-within .ps-draw__detail,
.ps-product__media:hover .ps-draw__detail,
.ps-draw:hover .ps-draw__detail {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ps-draw__detail {
    transition: none;
  }
}