:root {
  --card-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --card-motion-fast: 240ms;
  --card-motion-slow: 560ms;
}

/* Application examples are editorial illustrations without detail pages. */
html body .application-grid article,
html body .application-grid article:is(:hover, :focus-within) {
  cursor: default !important;
  box-shadow: none !important;
  transform: none !important;
}
html body .application-grid article:is(:hover, :focus-within) :is(img, h3, p) {
  transform: none !important;
  filter: none !important;
}

.global-clickable-card {
  cursor: pointer;
  outline: 0;
}

html body [data-display-only], html body [data-display-only]:hover { cursor: default !important; transform: none !important; box-shadow: none !important; }
html body [data-display-only]:hover :is(img,h3,p,span) { transform: none !important; filter: none !important; }

.product-row article { position: relative; }
.product-row .home-product-link { position: absolute; inset: 0; z-index: 2; border-radius: 20px; }
.product-row .home-product-link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* RONA-style motion: the shell stays fixed; media, copy and arrows move inside it. */
html body :is(
  .stats article,
  .core-advantage-cards article,
  .core-card-hotspot,
  .image-card,
  .case-card,
  .resource-panels > article,
  .contact-grid > article,
  .about-stat,
  .more-grid a,
  .benefit-grid article,
  .type-matrix article,
  .application-column article,
  .catalog-card,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .support-grid article,
  .events-grid article,
  .service-product-grid a,
  .product-card,
  .product-row article,
  .news-grid article,
  .blog-card,
  .download-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .news-row,
  .sd-gallery-grid article,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card,
  .sd-product-grid article,
  .solution-benefits article,
  .solution-products article,
  .global-clickable-card
) {
  transform: none !important;
  transform-origin: center !important;
}

html body :is(
  .stats article,
  .core-advantage-cards article,
  .core-card-hotspot,
  .image-card,
  .case-card,
  .resource-panels > article,
  .contact-grid > article,
  .about-stat,
  .more-grid a,
  .benefit-grid article,
  .type-matrix article,
  .application-column article,
  .catalog-card,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .support-grid article,
  .events-grid article,
  .service-product-grid a,
  .product-card,
  .product-row article,
  .news-grid article,
  .blog-card,
  .download-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .news-row,
  .sd-gallery-grid article,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card,
  .sd-product-grid article,
  .solution-benefits article,
  .solution-products article,
  .global-clickable-card
):is(:hover, :focus-within, :focus-visible) {
  transform: none !important;
}

.global-clickable-card:focus-visible {
  outline: 2px solid #1f6fe0;
  outline-offset: 4px;
}

/* Preserve rounded clipping while the photograph scales inside the card. */
html body :is(
  .image-card,
  .case-card,
  .news-grid article,
  .events-grid article,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .blog-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .sd-gallery-media,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card
) {
  overflow: hidden;
  isolation: isolate;
}

html body :is(
  .image-card > img,
  .case-card > img,
  .news-grid article > img,
  .events-grid article > img,
  .case-track article > img,
  .solution-case-track article > img,
  .solution-case-grid article img,
  .solution-use-grid article > img,
  .application-grid article > img,
  .blog-card > img,
  .news-related-card img,
  .related-card img,
  .related-grid article > img,
  .news-feature > img,
  .news-preview > img,
  .sd-gallery-media > img,
  .sd-media-card > img,
  .sd-case-grid article > img:first-of-type,
  .sd-application-card > img
) {
  transition: transform var(--card-motion-slow) var(--card-motion-ease), filter var(--card-motion-slow) var(--card-motion-ease) !important;
  transform: scale(1) !important;
  transform-origin: center !important;
  will-change: transform;
}

/* Keep product cut-outs, service icons and line icons fully visible and centred. */
html body :is(
  .product-row .product-art img,
  .catalog-card .catalog-stage img,
  .service-product-grid img,
  .product-card .product-visual img,
  .product-gallery img,
  .solution-products img,
  .sd-product-grid img,
  .resource-panels img,
  .core-advantage-cards article:not(.core-flatness) img,
  .contact-grid .line-icon,
  .benefit-grid img,
  .type-matrix img
) {
  scale: 1 !important;
}

html body .catalog-card .catalog-stage img {
  transform: translateX(-50%) !important;
}

/* Copy motion is intentionally subtler than the media motion. */
html body :is(
  .stats article,
  .core-advantage-cards article,
  .core-card-hotspot,
  .image-card,
  .case-card,
  .resource-panels > article,
  .contact-grid > article,
  .about-stat,
  .more-grid a,
  .benefit-grid article,
  .type-matrix article,
  .application-column article,
  .catalog-card,
  .case-track article,
  .solution-case-track article,
  .solution-case-grid article,
  .solution-use-grid article,
  .application-grid article,
  .support-grid article,
  .events-grid article,
  .service-product-grid a,
  .product-card,
  .product-row article,
  .news-grid article,
  .blog-card,
  .download-card,
  .news-related-card,
  .related-card,
  .related-grid article,
  .news-feature,
  .news-preview,
  .news-row,
  .sd-gallery-grid article,
  .sd-media-card,
  .sd-case-grid article,
  .sd-application-card,
  .sd-product-grid article,
  .solution-benefits article,
  .solution-products article,
  .global-clickable-card
) :is(h2, h3, h4, b, strong, p, time, small) {
  transition: transform var(--card-motion-fast) var(--card-motion-ease), color var(--card-motion-fast) ease, opacity var(--card-motion-fast) ease !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform;
}

html body .news-row :is(a, span),
html body .more-grid a > :is(span, b) {
  transition: transform var(--card-motion-fast) var(--card-motion-ease), color var(--card-motion-fast) ease, opacity var(--card-motion-fast) ease !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform;
}

html body .core-advantage-cards .core-flatness {
  overflow: hidden;
  isolation: isolate;
}

html body .core-advantage-cards .core-flatness img {
  transition: transform var(--card-motion-slow) var(--card-motion-ease), filter var(--card-motion-slow) var(--card-motion-ease) !important;
  transform: scale(1) !important;
  transform-origin: center !important;
}

html body :is(
  .catalog-title > span,
  .case-card > div > span,
  .events-grid article a span,
  .application-column article a span,
  .resource-links a span,
  .related-card b,
  .solution-case-grid article > span
) {
  transition: transform var(--card-motion-fast) var(--card-motion-ease), opacity var(--card-motion-fast) ease, color var(--card-motion-fast) ease !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body :is(
    .image-card,
    .case-card,
    .news-grid article,
    .events-grid article,
    .case-track article,
    .solution-case-track article,
    .solution-use-grid article,
    .application-grid article,
    .blog-card,
    .related-grid article,
    .news-feature,
    .news-preview,
    .sd-media-card,
    .sd-application-card
  ):is(:hover, :focus-within, :focus-visible) > img,
  html body :is(
    .solution-case-grid article,
    .news-related-card,
    .related-card
  ):is(:hover, :focus-within, :focus-visible) img {
    transform: scale(1.026) !important;
  }

  html body .sd-gallery-grid article:is(:hover, :focus-within, :focus-visible) .sd-gallery-media > img {
    transform: scale(1.026) !important;
  }

  html body .core-advantage-cards .core-flatness:is(:hover, :focus-within, :focus-visible) img {
    transform: scale(1.026) !important;
  }

  /* A case card can contain a second overlay image; only zoom the photographic base. */
  html body .sd-case-grid article:is(:hover, :focus-within, :focus-visible) > img:first-of-type {
    transform: scale(1.026) !important;
  }

  /* Top-level headings lead, supporting copy follows by a smaller amount. */
  html body :is(
    .stats article,
    .core-advantage-cards article,
    .core-card-hotspot,
    .image-card,
    .case-card,
    .resource-panels > article,
    .contact-grid > article,
    .about-stat,
    .more-grid a,
    .benefit-grid article,
    .type-matrix article,
    .application-column article,
    .catalog-card,
    .case-track article,
    .solution-case-track article,
    .solution-case-grid article,
    .solution-use-grid article,
    .application-grid article,
    .support-grid article,
    .events-grid article,
    .service-product-grid a,
    .product-card,
    .product-row article,
    .news-grid article,
    .blog-card,
    .download-card,
    .news-related-card,
    .related-card,
    .related-grid article,
    .news-feature,
    .news-preview,
    .news-row,
    .sd-gallery-grid article,
    .sd-media-card,
    .sd-case-grid article,
    .sd-application-card,
    .sd-product-grid article,
    .solution-benefits article,
    .solution-products article,
    .global-clickable-card
  ):is(:hover, :focus-within, :focus-visible) :is(h2, h3, h4, b, strong) {
    transform: translate3d(0, -5px, 0) !important;
  }

  html body :is(
    .stats article,
    .core-advantage-cards article,
    .core-card-hotspot,
    .image-card,
    .case-card,
    .resource-panels > article,
    .contact-grid > article,
    .about-stat,
    .more-grid a,
    .benefit-grid article,
    .application-column article,
    .catalog-card,
    .case-track article,
    .solution-case-track article,
    .solution-case-grid article,
    .solution-use-grid article,
    .application-grid article,
    .support-grid article,
    .events-grid article,
    .service-product-grid a,
    .product-card,
    .product-row article,
    .news-grid article,
    .blog-card,
    .download-card,
    .news-related-card,
    .related-card,
    .related-grid article,
    .news-feature,
    .news-preview,
    .news-row,
    .sd-gallery-grid article,
    .sd-media-card,
    .sd-case-grid article,
    .sd-application-card,
    .sd-product-grid article,
    .solution-benefits article,
    .solution-products article,
    .global-clickable-card
  ):is(:hover, :focus-within, :focus-visible) :is(p, time, small) {
    transform: translate3d(0, -3px, 0) !important;
  }

  html body :is(
    .catalog-card,
    .events-grid article,
    .application-column article,
    .resource-links a,
    .related-card,
    .solution-case-grid article
  ):is(:hover, :focus-within, :focus-visible) :is(
    .catalog-title > span,
    a span,
    div > span,
    b
  ) {
    transform: translate3d(0, 0, 0) !important;
  }

  html body .news-row:is(:hover, :focus-within, :focus-visible) {
    padding-left: 20px !important;
  }

  html body .news-row:is(:hover, :focus-within, :focus-visible) :is(a, span) {
    transform: translate3d(0, -3px, 0) !important;
  }

  html body .more-grid a:is(:hover, :focus-within, :focus-visible) > span {
    transform: translate3d(0, -5px, 0) !important;
  }

  html body .more-grid a:is(:hover, :focus-within, :focus-visible) > b {
    transform: translate3d(0, -3px, 0) !important;
  }

  html body .more-grid a:not(.active):is(:hover, :focus-within, :focus-visible) {
    border-radius: 10px !important;
  }

  /* RONA uses stronger title colour on light editorial cards. */
  html body :is(
    .product-row article,
    .news-grid article,
    .events-grid article,
    .blog-card,
    .download-card,
    .catalog-card,
    .solution-benefits article,
    .solution-products article
  ):is(:hover, :focus-within, :focus-visible) :is(h2, h3, h4) {
    color: #1f6fe0 !important;
  }

  /* Explicitly lock non-photographic artwork and icons during hover. */
  html body :is(
    .product-row article,
    .catalog-card,
    .service-product-grid a,
    .product-card,
    .solution-products article,
    .sd-product-grid article,
    .contact-grid article,
    .benefit-grid article,
    .type-matrix article
  ):is(:hover, :focus-within, :focus-visible) :is(
    .product-art img,
    .catalog-stage img,
    .product-visual img,
    img.line-icon,
    img[class*="icon"]
  ) {
    scale: 1 !important;
  }

  html body .catalog-card:is(:hover, :focus-within, :focus-visible) .catalog-stage img {
    transform: translateX(-50%) !important;
  }

  html body .product-row article:is(:hover, :focus-within, :focus-visible) .product-art img,
  html body .service-product-grid a:is(:hover, :focus-within, :focus-visible) img,
  html body .product-card:is(:hover, :focus-within, :focus-visible) .product-visual img,
  html body .solution-products article:is(:hover, :focus-within, :focus-visible) img {
    transform: none !important;
  }

  html body .sd-product-grid article:is(:hover, :focus-within, :focus-visible) img {
    scale: 1 !important;
    transform: none !important;
  }

  html body .contact-grid article:is(:hover, :focus-within, :focus-visible) .line-icon {
    transform: translateX(-50%) !important;
  }

  html body .sd-case-grid article:is(:hover, :focus-within, :focus-visible) > img:not(:first-of-type) {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(
    .image-card,
    .case-card,
    .news-grid article,
    .events-grid article,
    .case-track article,
    .solution-case-track article,
    .solution-case-grid article,
    .solution-use-grid article,
    .blog-card,
    .news-related-card,
    .related-card,
    .related-grid article,
    .global-clickable-card
  ) * {
    transition-duration: 0.01ms !important;
  }
}

/* Some editorial cards place copy below a separately rounded image. Their
   article is not the visual media shell, so clipping the whole article turns
   the image corners square as soon as the image scales on hover. Keep those
   article shells open and lock rounding on the media itself. */
html body :is(
  .news-grid article,
  .application-grid article,
  .solution-case-grid article,
  .news-related-card
) {
  overflow: visible !important;
}

html body .news-grid article > img {
  border-radius: var(--radius, 20px) !important;
  clip-path: inset(0 round var(--radius, 20px)) !important;
  backface-visibility: hidden;
}

html body .application-grid article > img {
  border-radius: 10px !important;
  clip-path: inset(0 round 10px) !important;
  backface-visibility: hidden;
}

html body .solution-case-grid article img {
  border-radius: 18px !important;
  clip-path: inset(0 round 18px) !important;
  backface-visibility: hidden;
}

html body .news-related-card img {
  border-radius: 18px !important;
  clip-path: inset(0 round 18px) !important;
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  /* News images sit directly against a masked carousel edge. Scaling them at
     that edge necessarily clips a rounded corner, so use copy/colour motion
     there and keep the photographic rectangle geometrically stable. */
  html body .news-grid article:is(:hover, :focus-within, :focus-visible) > img,
  html body .news-related-card:is(:hover, :focus-within, :focus-visible) img {
    transform: scale(1) !important;
  }
}