/* lowes-service-navigation-v1-2026-09-05 -- service navigation. Reuses the existing card vocabulary rather than
   introducing a second system: .section/.shell/.section-head/.eyebrow/.display are the
   page's own classes, so this row inherits spacing, type scale and reveal behaviour. */
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:22px;
  border:1px solid rgba(12,32,56,.12);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  /* The whole card is the target, so it clears the 24px WCAG 2.5.8 minimum by a wide
     margin and there is no small "read more" link to miss. */
  min-height:96px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card:hover,
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card:focus-visible{
  border-color:rgba(12,32,56,.34);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(12,32,56,.10);
}
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card h3{
  margin:0 0 6px;
  font-size:1.02rem;
  line-height:1.3;
}
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card p{
  margin:0;
  font-size:.92rem;
  line-height:1.5;
}
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card .icon-box{flex:0 0 auto}
/* The prose link in the section intro rendered at the SAME colour, weight and
   decoration as the sentence around it -- measured rgb(94,111,130)/400/none against
   rgb(94,111,130)/400/none -- so it was not a weak affordance, it was none at all.
   The underline is the cue that does not depend on colour perception (WCAG 1.4.1);
   the darker tone and weight are reinforcement, not the signal. */
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] [data-service-nav-block] .section-head p a{
  color:#0c2038;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] [data-service-nav-block] .section-head p a:hover,
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] [data-service-nav-block] .section-head p a:focus-visible{
  text-decoration-thickness:2px;
}
/* The arrow is decorative reinforcement of the link affordance, not the affordance. */
body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card h3::after{
  content:" \2192";
  opacity:.5;
}
@media(max-width:900px){
  body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card{transition:none}
  body[data-service-nav="lowes-service-navigation-v1-2026-09-05"] .lv-service-card:hover{transform:none}
}