/* Product cards for the homepage; copied from grade.css (/products) so both look the same. */
.hc-grid { --pc-h: clamp(150px, 15vw, 210px); }
.gp-tin { position: relative; }
.gp-tin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; user-select: none; -webkit-user-drag: none; }
.gp-tin-shadow {
  position: absolute; left: -10%; right: -10%; bottom: -1%; height: 9%;
  background: radial-gradient(closest-side, rgba(20, 30, 24, 0.3), rgba(20, 30, 24, 0));
  filter: blur(7px);
}
.gp-photo-frame { margin: 0; border-radius: var(--gp-r-tile); overflow: hidden; background: var(--gp-tile-hi); box-shadow: 0 30px 60px -40px rgba(40, 56, 48, 0.55); }
.gp-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.gp-catalog { --pc-h: clamp(130px, 14vw, 190px); }
.pc-main { padding-top: var(--gp-nav); padding-bottom: clamp(3rem, 8vh, 5rem); }
.pc-title {
  margin: 1.5rem 0 2.25rem; text-align: center;
  font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1;
}
.pc-title sup { font-size: 0.24em; font-weight: 500; letter-spacing: 0; vertical-align: top; position: relative; top: 0.25em; margin-left: 0.15em; }
.pc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.pc {
  display: flex; flex-direction: column; border-radius: 14px; background: #fff; border: 1px solid rgba(17, 17, 17, 0.12);
  color: #111111; transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.pc-link {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; flex: 1; gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem; color: inherit; text-decoration: none; border-radius: inherit;
}
.pc-grade { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6B665E; }
.pc-visual { display: grid; place-items: center; padding: 0; transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
.pc-visual > * { height: var(--pc-h); max-width: none; }
.pc-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pc-name { font-size: 0.875rem; font-weight: 500; }
.pc-price { font-size: 0.75rem; color: #6B665E; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(17, 17, 17, 0.12); }
.pc-facts > span { display: grid; gap: 0.15rem; align-content: start; }
.pc-k { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6B665E; }
.pc-val { font-size: 0.75rem; font-weight: 500; line-height: 1.3; }
.pc-buy { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; align-items: stretch; gap: 0.5rem; padding: 0 1.125rem 1.125rem; }
.pc-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; margin: 0; padding: 0; }
.pc-sizes button { min-height: 2.5rem; height: 2.5rem; padding: 0 0.5rem; font-size: 0.6875rem; white-space: nowrap; border-radius: var(--ui-btn, 12px); outline-offset: 2px; }
.pc-buy .pc-sizes button[aria-checked]:only-child { background: rgba(17, 17, 17, 0.05); color: #111111; border-color: transparent; cursor: default; pointer-events: none; }
.pc-sizes button:focus:not(:focus-visible), .pc-add:focus:not(:focus-visible) { outline: none; }
.pc-add {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--ui-btn, 12px);
  background: #111111; color: #fff; border: 1px solid #111111; cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.pc-add svg { grid-area: 1 / 1; transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.pc-add .i-ok, .pc-add.is-added .i-bag { opacity: 0; transform: scale(0.8); }
.pc-add.is-added .i-ok { opacity: 1; transform: none; }
.pc-add.is-added { background: #2D4C38; border-color: #2D4C38; }
.pc-add:active { transform: scale(0.94); }
.pc-add:disabled { opacity: 0.55; cursor: not-allowed; }
.pc-link:focus-visible { outline: 2px solid #2D4C38; outline-offset: 3px; }
.pc:active .pc-visual { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .pc:hover { border-color: #111111; }
  .pc:hover .pc-visual { transform: translateY(-4px); }
}

@media (max-width: 760px) {
  /* narrow tiles can't hold label + product + two text lines in a square, so they grow to their content */
  .hc-grid { --pc-h: 104px; }
  
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-link { padding: 0.75rem 0.75rem 0.625rem; gap: 0.5rem; }
  .pc-buy { grid-template-columns: minmax(0, 1fr); padding: 0 0.75rem 0.75rem; }
  .pc-sizes { grid-auto-flow: row; }
  .pc-add { justify-self: end; }
  .pc-visual { padding: 0.5rem 0; }
  .pc-bottom { flex-direction: column; gap: 0.1rem; }
  .pc-facts { grid-template-columns: 1fr; gap: 0.4rem; }
  /* 9 products: the last one spans the row instead of sitting alone on the left */
  .pc-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}