feat(tip): support dynamic gift products

src/app/tip/tip-screen.module.css

@@ -59,6 +59,7 @@
 .productCard,
 .paymentMethodSlot,
 .statusMessage,
+.catalogStatus,
 .checkoutSlot {
   position: relative;
   z-index: 1;
@@ -225,6 +226,26 @@
   letter-spacing: -0.04em;
 }
 
+.productDescription {
+  margin: 10px 0 0;
+  color: #7d6264;
+  font-size: clamp(12px, 3.148vw, 15px);
+  font-weight: 620;
+  line-height: 1.45;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .tierSelector {
   grid-column: 1 / -1;
   min-width: 0;
@@ -331,6 +352,17 @@
   white-space: nowrap;
 }
 
+.tierDescription {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #80676a;
+  font-size: 11px;
+  font-weight: 620;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .tierPriceBlock {
   align-items: flex-end;
   gap: 3px;
@@ -371,6 +403,82 @@
   margin: 0;
 }
 
+.catalogStatus {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  margin-top: 20px;
+  padding: 22px;
+  border: 1px solid rgba(112, 71, 65, 0.1);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #76575c;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.catalogStatus p {
+  margin: 0;
+}
+
+.catalogStatus button {
+  min-height: 40px;
+  padding: 0 18px;
+  border: 0;
+  border-radius: 999px;
+  background: #2b1a1e;
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.productSkeleton {
+  min-height: 260px;
+}
+
+.skeletonImage,
+.skeletonCopy span {
+  background: linear-gradient(
+    100deg,
+    rgba(205, 172, 157, 0.14) 20%,
+    rgba(255, 255, 255, 0.72) 45%,
+    rgba(205, 172, 157, 0.14) 70%
+  );
+  background-size: 220% 100%;
+  animation: skeletonSweep 1.25s linear infinite;
+}
+
+.skeletonImage {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: clamp(24px, 6.667vw, 32px);
+}
+
+.skeletonCopy {
+  display: grid;
+  gap: 12px;
+}
+
+.skeletonCopy span {
+  display: block;
+  height: 18px;
+  border-radius: 999px;
+}
+
+.skeletonCopy span:nth-child(2) {
+  width: 78%;
+  height: 38px;
+}
+
+.skeletonCopy span:nth-child(3) {
+  width: 56%;
+  height: 28px;
+}
+
 .statusMessage {
   margin-top: 14px;
   color: #b2474f;
@@ -467,3 +575,16 @@
     transform: translateY(0) scale(1);
   }
 }
+
+@keyframes skeletonSweep {
+  to {
+    background-position: -120% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeletonImage,
+  .skeletonCopy span {
+    animation: none;
+  }
+}