/* Trendyfy responsive home card price and complete detail image — v0.5.19. */
/* Scope the footer fix to 2-column home/catalog tiles; the wide 1-column
   catalog design and pricing logic stay untouched. */
#main .home-popular-grid:not(.catalog-popular-grid) > .home-tool-card .home-tool-card__footer,
#main .catalog-results .catalog-popular-grid.tf-catalog-two > .home-tool-card .home-tool-card__footer {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(31px, 5.6vw, 42px) !important;
  align-items: center !important;
  gap: clamp(4px, .8vw, 8px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#main .home-popular-grid:not(.catalog-popular-grid) > .home-tool-card .home-tool-price,
#main .catalog-results .catalog-popular-grid.tf-catalog-two > .home-tool-card .home-tool-price {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 clamp(6px, 1.1vw, 12px) !important;
  gap: clamp(3px, .65vw, 7px) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
#main .home-popular-grid:not(.catalog-popular-grid) > .home-tool-card .home-tool-price__spark,
#main .catalog-results .catalog-popular-grid.tf-catalog-two > .home-tool-card .home-tool-price__spark {
  flex: 0 0 18px !important;
  width: 18px !important;
  max-width: 18px !important;
  margin: 0 !important;
}
#main .home-popular-grid:not(.catalog-popular-grid) > .home-tool-card .home-tool-price strong,
#main .catalog-results .catalog-popular-grid.tf-catalog-two > .home-tool-card .home-tool-price strong {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: clamp(11px, 1.85vw, 15px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#main .home-popular-grid:not(.catalog-popular-grid) > .home-tool-card .home-tool-card__arrow,
#main .catalog-results .catalog-popular-grid.tf-catalog-two > .home-tool-card .home-tool-card__arrow {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  flex: none !important;
  justify-self: end !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(31px, 5.6vw, 42px) !important;
  min-width: 31px !important;
  height: clamp(31px, 5.6vw, 42px) !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
/* Very narrow viewports can't fit two readable price/actions in one row.
   Keep the familiar 2-column look wherever it actually fits. */
@media (max-width: 429px) {
  #main .home-popular-grid:not(.catalog-popular-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Detail view: the v1 rule limited images to 68dvh. This left the after image
   visually clipped/letterboxed in certain desktop Telegram sheet sizes.
   An image's natural aspect ratio now determines the hero height. The card sheet
   already scrolls, so very tall photos remain accessible without losing pixels. */
#modalRoot .product-detail-modal .product-detail-sheet .product-detail-hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border-radius: 20px !important;
}
#modalRoot .product-detail-modal .product-detail-sheet .product-detail-hero > img.product-detail-hero__after {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  clip-path: none !important;
}
#modalRoot .product-detail-modal .product-detail-sheet .product-detail-hero > img.product-detail-hero__before {
  border-radius: inherit !important;
  object-fit: contain !important;
  object-position: center !important;
  clip-path: none !important;
}