/* === LCP fix: disable continuous animation on hero image ===
   Lighthouse 12's trace engine reports NO_LCP when the LCP candidate has
   a continuous `transform` animation — every frame re-renders the element
   so the engine never "settles" on a final LCP.
   The Ken Burns effect was cosmetic; the static image is still a strong visual.
*/
.hero-bg {
  animation: none !important;
  transform: none !important;
}
.hero-bg-wrap {
  transform: none !important;
  transition: none !important;
}

/* catalog-card v2 — unify with homepage .p-card, center landscapes
   Load AFTER catalog.min.css so these rules win.

   Structure (static cards):
     <article.catalog-card>
       <a.catalog-card-link>
         <img>
         <h3.catalog-card-title>
         <p.catalog-card-price>
       </a>
       <button.favorite-btn>
     </article>

   Key decision: aspect-ratio goes on the IMG (not the link), so title+price
   below the image remain visible.
*/

/* === Card container: closer to homepage .p-card === */
.catalog-card {
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 16px;
  padding: 8px 8px 4px;
  box-shadow: none;
  transition: box-shadow .25s ease, border-color .2s;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.catalog-card:hover {
  border-color: #d4cec4;
  box-shadow: 0 10px 30px rgba(15, 17, 21, 0.08);
}

/* Card link fills the card vertically — title+price hug the bottom */
.catalog-card .catalog-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* === Image: fixed 5:7 aspect, landscape centered with letterbox === */
.catalog-card .catalog-card-link img,
.catalog-card a.catalog-card-link img,
article.catalog-card img,
article.catalog-card a.catalog-card-link img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 7;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
  clip-path: none !important;
  background: #faf8f3;
  margin: 0 0 10px;
}

/* === Title & price — visible below image === */
.catalog-card .catalog-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 4px 4px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: 0;
}
.catalog-card .catalog-card-price {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 4px 8px;
  letter-spacing: -0.01em;
}

/* Favorite heart — on image area, don't let it jump */
.catalog-card .favorite-btn {
  top: 14px !important;
  right: 14px !important;
}

/* === Mobile tweak === */
@media (max-width: 640px) {
  .catalog-card {
    border-radius: 14px;
    padding: 6px 6px 4px;
  }
  .catalog-card .catalog-card-link img {
    border-radius: 10px !important;
    margin: 0 0 8px;
  }
  .catalog-card .catalog-card-title {
    font-size: 13px;
    margin: 0 2px 3px;
  }
  .catalog-card .catalog-card-price {
    font-size: 14px;
    margin: 0 2px 6px;
  }
}