/* Cloth photo mounts. The frame, stitching and photo move as one sewn patch. */
.card-gallery,.product-main,.hero-photo {
  --cloth:#b8b8b8; --thread:#303030; --thread-light:#ececec; --tilt:-1deg;
  padding:18px 19px 25px;
  background:transparent;
  border:0;
  isolation:isolate;
  transform:rotate(var(--tilt));
  transform-origin:50% 50%;
  filter:drop-shadow(2px 5px 4px #0005);
}
.grid { gap:44px 28px; padding:12px 6px 3px; }
.card:nth-child(7n+2) .card-gallery { --cloth:#373737; --thread:#e4e4e4; --thread-light:#fff; --tilt:1.15deg; }
.card:nth-child(7n+3) .card-gallery { --cloth:#d9d9d9; --thread:#404040; --tilt:-.65deg; }
.card:nth-child(7n+4) .card-gallery { --cloth:#232323; --thread:#d7d7d7; --thread-light:#fff; --tilt:.75deg; }
.card:nth-child(7n+5) .card-gallery { --cloth:#929292; --thread:#292929; --tilt:-1.3deg; }
.card:nth-child(7n+6) .card-gallery { --cloth:#d1d1d1; --thread:#383838; --tilt:1.35deg; }
.card:nth-child(7n) .card-gallery { --cloth:#444; --thread:#e3e3e3; --thread-light:#fff; --tilt:-.4deg; }
.grid .card-gallery:before,.product-main:before,.hero-photo:before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,#fff0 0 2px,#ffffff0e 2px 3px,#00000012 3px 4px),
    repeating-linear-gradient(91deg,#ffffff08 0 1px,#0000000d 1px 2px,transparent 2px 5px),
    var(--cloth);
  clip-path:polygon(1% 1%,23% .4%,49% 1%,75% 0,99% .7%,99.5% 22%,99% 45%,100% 67%,99.4% 98.8%,77% 99.5%,55% 99%,31% 100%,.7% 99%,1.1% 78%,0 54%,.8% 29%);
  opacity:1; transform:none;
}
.cloth-stitches { position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); z-index:3; fill:none; pointer-events:none; overflow:visible; }
.cloth-stitches .seam-shadow { stroke:#080808; stroke-width:3.5; opacity:.38; }
.cloth-stitches .seam-cord { stroke:var(--thread); stroke-width:1.65; }
.cloth-stitches .seam-fiber { stroke:var(--thread-light); stroke-width:.4; opacity:.5; }
.cloth-stitches .edge-fuzz { stroke:var(--thread); stroke-width:.65; opacity:.45; }
.card-gallery>.card-photo { z-index:1; background:#eee; box-shadow:0 0 0 1px #00000014; }
.card-gallery>.favorite { top:24px; right:25px; z-index:5; }
.grid .card-gallery:after { z-index:4; bottom:7px; }
.card h3 { margin-top:19px; }
.card-photo:focus-visible { outline:2px solid #111; outline-offset:-4px; }
.product-main { --cloth:#343434; --thread:#e4e4e4; --thread-light:#fff; --tilt:-.45deg; padding:18px 19px 25px; }
.product-main>img { background:#eee; }
.product-main .gallery-nav { z-index:4; bottom:35px; left:30px; right:30px; }
.hero-photo { --cloth:#b4b4b4; --thread:#303030; --tilt:.4deg; padding:17px 18px 23px; align-self:center; width:calc(100% - 14px); justify-self:center; }
.hero-main { background:#eee; }
.hero-photo .photo-hint { bottom:34px; left:29px; right:29px; z-index:4; }
.hero-photo .detail-float { z-index:5; }
.background-patches>.ghost-patch {
  background:none; border:0; border-radius:0; clip-path:none; box-shadow:none;
  opacity:var(--fade,.06);
}
.background-patches>.ghost-patch:before,.background-patches>.ghost-patch:after { content:none; }
.ghost-patch .ghost-shape { width:100%; height:100%; overflow:visible; }
.ghost-shape .ghost-cloth { fill:#a8a8a8; stroke:#cecece; stroke-width:1; }
.ghost-shape .ghost-seam { fill:none; stroke:#f1f1f1; stroke-width:1.9; stroke-dasharray:2 3.5 4 3; }
.ghost-shape .ghost-tail { fill:none; stroke:#eee; stroke-width:1; }
.ghost-shape .ghost-holes { fill:#101010; stroke:none; }
@media(max-width:650px) {
  .grid { gap:38px; padding:10px 5px 3px; }
  .card-gallery { padding:17px 18px 24px; }
  .card-gallery>.favorite { top:23px; right:24px; }
  .hero-photo { padding:14px 15px 20px; width:90%; }
  .hero-photo .photo-hint { bottom:29px; left:24px; right:24px; }
  .product-main { padding:14px 15px 22px; }
  .product-main .gallery-nav { left:24px; right:24px; bottom:31px; }
  .background-patches>.ghost-patch { opacity:var(--fade,.045); }
}