/* User page refinements, 2026-10-04. Original layout and inquiry context retained. */
/* StainGrip incremental refinement: append after current theme/refinement CSS.
   Presentation only. Existing dimensions, layout, content and links are retained. */

/* Every current product card, including the compact related-product links. */
.product-card,
.product-related-card {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Quote destinations include general, product, coating and OEM context URLs.
   Secondary/outline buttons retain their existing appearance at rest. */
a:is(.button, .wp-block-button__link)[href*="/request-a-quote"] {
  border-radius: 12px;
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease;
}

/* Hover motion is available only to a device with an accurate hovering pointer. */
@media (hover: hover) and (pointer: fine) {
  .product-card,
  .product-related-card {
    transition: transform 200ms ease, border-color 200ms ease,
      box-shadow 200ms ease;
  }

  .product-card .card-image img,
  .product-related-card > img {
    transform-origin: center;
    transition: transform 260ms ease;
  }

  .product-card:hover,
  .product-related-card:hover {
    transform: translateY(-4px);
    border-color: #a8bbc7;
    box-shadow: 0 12px 28px rgba(8, 45, 73, 0.12);
  }

  .product-card:hover .card-image img,
  .product-related-card:hover > img {
    transform: scale(1.03);
  }

  a:is(.button, .wp-block-button__link)[href*="/request-a-quote"] {
    transition: transform 180ms ease, background-color 180ms ease,
      border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  }

  a:is(.button, .wp-block-button__link)[href*="/request-a-quote"]:hover {
    transform: translateY(-2px);
    background-color: #e79535;
    border-color: #d5852c;
    color: #082d49;
    box-shadow: 0 7px 18px rgba(8, 45, 73, 0.2);
    text-decoration: none;
  }
}

/* Keyboard focus remains visible on both pale and dark sections. */
.product-related-card:focus-visible {
  outline: 3px solid #082d49;
  outline-offset: 4px;
  border-color: #6d8a9d;
  box-shadow: 0 0 0 3px #fff;
}

@supports selector(.product-card:has(a:focus-visible)) {
  .product-card:has(a:focus-visible) {
    border-color: #6d8a9d;
    box-shadow: 0 0 0 2px #c5d5df;
  }
}

a:is(.button, .wp-block-button__link)[href*="/request-a-quote"]:focus-visible {
  outline: 3px solid #082d49;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(8, 45, 73, 0.18);
  text-decoration: none;
}

/* Touch feedback is transient; neutralize legacy :hover styles on touch inputs. */
@media (hover: none), (pointer: coarse) {
  .product-card a:hover,
  .product-related-card:hover h3 {
    text-decoration: none;
  }

  a:is(.button, .wp-block-button__link)[href*="/request-a-quote"]:hover:not(:active):not(:focus-visible) {
    background-color: var(--orange, #f2a044);
    border-color: var(--orange, #f2a044);
    color: var(--navy, #082d49);
    box-shadow: none;
  }

  a.button.secondary[href*="/request-a-quote"]:hover:not(:active):not(:focus-visible) {
    background-color: transparent;
    border-color: #bcc7ce;
    color: inherit;
  }

  a.button.button-outline[href*="/request-a-quote"]:hover:not(:active):not(:focus-visible) {
    background-color: transparent;
    border-color: var(--navy, #082d49);
    color: var(--navy, #082d49);
  }
}

a:is(.button, .wp-block-button__link)[href*="/request-a-quote"]:active {
  transform: none;
  background-color: #df8b2f;
  border-color: #cb7c25;
  color: #082d49;
}

/* Preserve color, border and focus feedback without movement or interpolation. */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-related-card,
  .product-card .card-image img,
  .product-related-card > img,
  a:is(.button, .wp-block-button__link)[href*="/request-a-quote"] {
    transition: none;
  }

  .product-card:hover,
  .product-related-card:hover,
  .product-card:hover .card-image img,
  .product-related-card:hover > img,
  a:is(.button, .wp-block-button__link)[href*="/request-a-quote"]:is(:hover, :active) {
    transform: none;
  }
}

/* Homepage-only delta. Load after wordpress.css; preserve current image/SEO URLs.
 * The source banner contains a baked-in seam. Its background-only repair is a
 * separate asset change; this continuous overlay must not be called that repair.
 */
.home-page .home-coating .coating-comparison .wp-block-image {
  width: 100%;
  max-width: 300px;
  margin: 18px auto 0;
}

.home-page .home-coating .coating-comparison img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 260px;
  max-height: 260px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}

/* One uninterrupted overlay across the entire hero, never a rectangular panel.
 * Keeping background-image untouched preserves the current SEO WebP/preload.
 * Original hero height, type, button placement, and image positioning are kept.
 */
.home-page .home-hero {
  position: relative;
  isolation: isolate;
}

.home-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(21, 30, 48, 0.18) 0%,
    rgba(21, 30, 48, 0.14) 30%,
    rgba(21, 30, 48, 0.06) 50%,
    rgba(21, 30, 48, 0) 76%
  );
}

.home-page .home-hero > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .home-page .home-coating .coating-comparison .wp-block-image {
    max-width: 220px;
    margin-top: 14px;
  }

  .home-page .home-coating .coating-comparison img {
    max-width: 220px;
    height: 220px;
    max-height: 220px;
  }

  .home-page .home-hero::before {
    background: linear-gradient(
      90deg,
      rgba(21, 30, 48, 0.91) 0%,
      rgba(21, 30, 48, 0.74) 36%,
      rgba(21, 30, 48, 0.58) 66%,
      rgba(21, 30, 48, 0.34) 100%
    );
  }
}

@media (max-width: 380px) {
  .home-page .home-coating .coating-comparison img {
    height: 190px;
    max-height: 190px;
  }
}