/* Shared product photography treatment. Load after each page's layout styles. */
:root {
  --product-media-surface: radial-gradient(ellipse at 50% 40%, #fff 42%, #f5f7fa 100%);
  --product-media-edge: #e3e9ef;
}

.category-browser #categoryProducts .product-card .catalog-image,
.category-browser .browse-group-media,
.home-hub .landing-product-image,
.home-hub .landing-category-image,
.catalogue-page .products-list .category-image,
.commonly-used-card .commonly-used-image {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--product-media-edge);
  background: var(--product-media-surface);
  box-shadow: inset 0 1px 0 #fff, inset 0 -18px 32px -30px rgba(29, 52, 76, .18);
}

/* More room for the product, with consistent visible bounds set by the fitter. */
.category-browser #categoryProducts .product-card .catalog-image {
  height: 196px !important;
  min-height: 196px !important;
  border-radius: 11px;
}

.category-browser .browse-group-media {
  height: 196px;
  padding: 18px;
}

/* Retain the real finish and colour of stainless steel, zinc and coated products. */
.category-browser #categoryProducts .product-card .catalog-image img,
.category-browser .browse-group-media img,
.home-hub .landing-product-image img,
.home-hub .landing-category-image img,
.catalogue-page .products-list .category-image img,
.commonly-used-card .commonly-used-image img {
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  filter: none;
  /* Independent scale must not compound the fitted transform, including
     when a visitor still has an older shared stylesheet in their cache. */
  scale: none !important;
}

.category-browser .browse-group-media img,
.home-hub .landing-product-image img,
.home-hub .landing-category-image img,
.catalogue-page .products-list .category-image img,
.commonly-used-card .commonly-used-image img,
.category-browser #categoryProducts .product-card.catalogue-card-featured .catalog-image img {
  transform: scale(.9) !important;
  transform-origin: center !important;
}

.category-browser #categoryProducts .product-card.catalogue-card-featured .catalog-image {
  padding: 14px !important;
  background: #fff;
}

/* Detail photos use the same studio surface; full catalogue sheets keep their layout. */
.product-detail:not(.ladder-detail-mode) .product-stage {
  background: var(--product-media-surface) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 233, 239, .65);
}

.product-detail:not(.ladder-detail-mode) .product-stage img,
.product-detail:not(.ladder-detail-mode) .product-stage:hover img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center;
  mix-blend-mode: normal;
  filter: none !important;
  scale: none !important;
  transform: scale(.9) !important;
  transform-origin: center !important;
}

@media (hover: hover) {
  .category-browser #categoryProducts .product-card:hover .catalog-image,
  .category-browser .browse-group-card:hover .browse-group-media,
  .home-hub .landing-category-card:hover .landing-category-image,
  .catalogue-page .products-list .category-card:hover .category-image {
    border-color: #c9d7e3;
    box-shadow: inset 0 1px 0 #fff, 0 3px 12px rgba(29, 52, 76, .035);
  }
}

@media (max-width: 1100px) {
  .category-browser #categoryProducts .product-card .catalog-image {
    height: 180px !important;
    min-height: 180px !important;
  }
  .category-browser .browse-group-media { height: 170px; padding: 16px; }
}

@media (max-width: 768px) {
  .category-browser #categoryProducts .product-card .catalog-image {
    height: 144px !important;
    min-height: 144px !important;
    border-radius: 9px;
  }
  .category-browser .browse-group-media { height: 145px; padding: 12px; }
}

@media (max-width: 420px) {
  .category-browser #categoryProducts .product-card .catalog-image {
    height: 128px !important;
    min-height: 128px !important;
  }
  .category-browser .browse-group-media { height: 128px; padding: 10px; }
}

@media (max-width: 360px) {
  .category-browser #categoryProducts .product-card .catalog-image {
    height: 120px !important;
    min-height: 120px !important;
  }
  .category-browser .browse-group-media { height: 170px; padding: 16px; }
}

/* Show the complete horizontal assembly across the cover, with both ends clear. */
.category-browser .browse-group-media:has(> img[src$="/formtie-system-horizontal.png"]) {
  padding: 8px;
}

.category-browser .browse-group-media img[src$="/formtie-system-horizontal.png"],
.catalogue-page .products-list .category-image img[src$="/formtie-system-horizontal.png"] {
  max-width: 100% !important;
  transform: none !important;
}