/* Local layout match for Figma frames A (photo wall) and a (favourites).
   The existing scroll, camera, card flight, hover, and link behavior stays in place. */

/* The print border is an overlay so the camera card and first gallery card
   retain exactly the same photo geometry at their one-frame handoff. */
.signature-stage { --wall-caption-height:clamp(56px,4.7vw,68px); }
.signature-stage .share-card {
  --card-radius:2px;
  --label-height:var(--wall-caption-height);
}
.signature-stage .share-card::before {
  background:#faf8ef;
  border:1px solid #e9e5d9;
  box-shadow:2px 7px 7px #372a2924;
}
.signature-stage .share-card:is(:hover,:focus-visible)::before {
  box-shadow:2px 14px 21px #372a2930;
}
.signature-stage .share-card .category-visual,
.signature-stage .share-card.origin-card .category-visual {
  border-radius:0;
}
.signature-stage .share-card .category-label {
  left:14px;
  right:14px;
  justify-content:center;
  text-align:center;
  color:#203b30;
  font-family:'Chelsea Market',Montserrat,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(10px,1vw,14px);
  line-height:1.35;
  letter-spacing:-.015em;
}
.share-photo-mat,
.capture-photo-mat {
  position:absolute;
  z-index:6;
  display:block;
  pointer-events:none;
  border:12px solid #faf8ef;
}
.signature-stage .share-card .share-photo-mat { inset:0; }
.signature-stage .share-card.origin-card .share-photo-mat { opacity:var(--morph,0); }
.signature-capture-card .capture-photo-mat {
  inset:0 0 var(--wall-caption-height);
}
.signature-capture-card>span {
  flex:0 0 var(--wall-caption-height);
  min-height:0;
  justify-content:center;
  text-align:center;
  font-family:'Chelsea Market',Montserrat,Arial,sans-serif;
  font-size:clamp(10px,1vw,14px);
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.015em;
}
.signature-stage .categories h2 em { --section-subtitle-size:clamp(22px,2.15vw,28px); }
@media (min-width:801px) {
  .signature-stage .categories .section-head { top:12.2%; }
}

/* Figma's paper mounted product cards keep the existing product images,
   hover image swap, staggered entrance, and whole-card links. */
.products { background:#eee5d5; }
.product-grid {
  width:calc(100% - 24px);
  gap:clamp(18px,1.72vw,30px);
}
.product-card {
  padding:14px 14px 16px;
  border:1px solid #e9e5d9;
  border-radius:2px;
  overflow:visible;
  background:#faf8ef;
  box-shadow:2px 7px 5px #372a2924;
}
.product-card .photo { aspect-ratio:244/280; border-radius:0; }
.product-info { padding:18px 0 0; }
.product-card h3 { font-size:clamp(14px,1.17vw,17px); line-height:1.35; }
.product-rating { margin-bottom:20px; }
.product-action { width:100%; }
@media (min-width:801px) {
  .products { padding-top:74px; padding-bottom:108px; }
  .products-head { margin-bottom:74px; }
}
@media (max-width:800px) {
  .signature-stage { --wall-caption-height:clamp(42px,6vw,54px); }
  .signature-stage .share-card { --card-radius:2px; }
  .signature-stage .share-card .category-label { left:8px; right:8px; font-size:clamp(10px,1.7vw,13px); line-height:1.25; }
  .share-photo-mat,.capture-photo-mat { border-width:7px; }
  .product-grid { width:100%; gap:18px; }
  .product-card { padding:10px 10px 12px; }
  .product-info { padding-top:14px; }
  .product-card .photo { aspect-ratio:244/280; }
}
@media (max-width:580px) {
  .product-grid { max-width:440px; }
  .product-card { padding:12px 12px 14px; }
  .product-card .photo { aspect-ratio:1/.92; }
  .product-info { padding-top:16px; }
}