Enlarge catalog product images

app/globals.css

@@ -297,7 +297,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
 .category-pills button.active { border-color: var(--blue); color: white; background: var(--blue); }
 .catalog-result-count { margin: 11px 2px 0; color: #8792a3; font-size: 10px; }
 .catalog-result-count strong { color: var(--blue); font-size: 12px; }
-.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
 .catalog-card {
   min-width: 0;
   border: 1px solid #dce3ed;
@@ -310,7 +310,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
 .catalog-image-button {
   position: relative;
   width: 100%;
-  height: 190px;
+  height: 280px;
   display: grid;
   place-items: center;
   border: 0;
@@ -319,7 +319,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
   cursor: pointer;
   overflow: hidden;
 }
-.catalog-image-button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
+.catalog-image-button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
+.catalog-image-button:hover img { transform: scale(1.07); }
 .catalog-image-button small {
   position: absolute;
   top: 10px;
@@ -332,6 +333,18 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
   font-size: 8px;
   font-weight: 750;
 }
+.catalog-zoom-hint {
+  position: absolute;
+  right: 11px;
+  bottom: 11px;
+  padding: 6px 9px;
+  border-radius: 7px;
+  color: #315686;
+  background: rgba(255,255,255,.92);
+  box-shadow: 0 3px 12px rgba(31,56,93,.1);
+  font-size: 9px;
+  font-weight: 700;
+}
 .catalog-placeholder { color: #9eb3d3; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
 .catalog-card-body { padding: 16px; }
 .catalog-card-body > p { margin: 0 0 5px; color: #8793a5; font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@@ -382,7 +395,7 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
 }
 .catalog-modal {
   position: relative;
-  width: min(760px, 100%);
+  width: min(900px, 100%);
   max-height: min(820px, 92vh);
   padding: 28px;
   overflow-y: auto;
@@ -404,8 +417,8 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
   cursor: pointer;
   font-size: 20px;
 }
-.catalog-modal-product { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 28px; }
-.catalog-modal-image { height: 180px; display: grid; place-items: center; border-radius: 13px; overflow: hidden; background: #f2f5fa; }
+.catalog-modal-product { display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: 34px; }
+.catalog-modal-image { height: 300px; display: grid; place-items: center; border-radius: 13px; overflow: hidden; background: #f2f5fa; }
 .catalog-modal-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
 .catalog-modal-product h2 { margin: 4px 0 10px; font-size: 27px; line-height: 1.3; letter-spacing: -.025em; }
 .catalog-modal-product code { color: #5d6b81; font-size: 11px; }
@@ -438,6 +451,8 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .hero-copy { max-width: 760px; }
   .selector-shell { width: min(100%, 720px); }
   .how-section { gap: 45px; }
+  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
+  .catalog-image-button { height: 260px; }
 }
 
 @media (max-width: 720px) {
@@ -462,15 +477,15 @@ footer > span { color: #9aa4b2; font-size: 10px; }
   .catalog-summary { grid-template-columns: repeat(2, 1fr); }
   .catalog-summary button:last-child { grid-column: 1 / -1; }
   .catalog-toolbar { top: 64px; }
-  .catalog-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
-  .catalog-image-button { height: 150px; }
-  .catalog-card-body { padding: 12px; }
-  .catalog-card-body h3 { height: 60px; font-size: 13px; }
+  .catalog-grid { grid-template-columns: 1fr; gap: 15px; }
+  .catalog-image-button { height: 280px; }
+  .catalog-card-body { padding: 15px; }
+  .catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; }
   .catalog-card-body dl { min-height: 90px; }
   .catalog-modal-backdrop { padding: 10px; }
   .catalog-modal { padding: 22px 16px; }
   .catalog-modal-product { grid-template-columns: 1fr; gap: 16px; }
-  .catalog-modal-image { height: 220px; }
+  .catalog-modal-image { height: 290px; }
   .catalog-spec-table { grid-template-columns: 1fr; }
   .catalog-modal-actions { align-items: stretch; flex-direction: column; }
   .products-section { padding: 75px 16px; }

app/page.tsx

@@ -814,6 +814,7 @@ export default function Home() {
                     <span className="catalog-placeholder">GAUDELOT</span>
                   )}
                   <small>{product.category}</small>
+                  <span className="catalog-zoom-hint">点击查看大图</span>
                 </button>
                 <div className="catalog-card-body">
                   <p>{product.code}</p>