body#index {
  --hl-surface-soft: #f4f5f6;
  --hl-surface-info: #e9edf1;
  --hl-canvas: #ffffff;
  background: var(--hl-canvas);
}

body#index .hl-home-shell__mid { display: block; }
body#index .hl-home-shell__trust,
body#index .hl-home-shell__cats { min-width: 0; }
/* Desktop: DOM already trust → cats (no flex order swap = no CLS). Mobile reorders in hl-home-mobile.css. */

body#index .hl-home-trust {
  margin: 0.7rem 0 0.85rem;
  background: transparent !important;
}
body#index .hl-home-trust__inner {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--hl-surface-info, #e9edf1) !important;
  border: 1px solid #dde2e7 !important;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: none !important;
}
body#index .hl-home-trust__item {
  position: relative;
  border-right: 0 !important;
  color: var(--hl-ink, #18191a) !important;
}
body#index .hl-home-trust__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: #c5ccd4;
  opacity: 0.85;
  pointer-events: none;
}
body#index .hl-home-trust__ico {
  color: var(--hl-red, #d71920) !important;
}
body#index .hl-home-trust__primary {
  color: var(--hl-ink, #18191a) !important;
  font-weight: 700;
}
body#index .hl-home-trust__secondary {
  color: #4b5563 !important;
}

body#index .hl-home-brand {
  margin: 0 0 0.9rem;
  background: transparent !important;
}
body#index .hl-home-brand__inner {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 8px;
  box-sizing: border-box;
}
body#index .hl-home-brand--dark .hl-home-brand__inner {
  background: var(--hl-ink-soft, #30343b) !important;
  color: var(--hl-on-dark, #f8f9fa);
}
body#index .hl-home-brand--muted .hl-home-brand__inner {
  background: var(--hl-surface-soft, #f4f5f6) !important;
  color: var(--hl-ink, #18191a);
}

body#index .hl-home-quick {
  margin: 0 0 1.25rem;
  padding: 0.85rem 0.9rem 1rem;
  background: #f5f6f7;
  border-radius: 8px;
}
body#index .hl-home-quick__grid--mobile {
  display: none !important;
}
body#index .hl-home-quick__grid {
  display: grid;
}
body#index .hl-home-quick__grid:has(> :nth-child(9):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
body#index .hl-home-quick__grid:has(> :nth-child(10):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (min-width: 1200px) {
  body#index .hl-home-quick__grid:has(> :nth-child(9):last-child),
  body#index .hl-home-quick__grid:has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body#index .hl-home-quick__grid > .hl-home-quick__item,
  body#index .hl-home-quick__grid > .hl-home-quick__item:nth-child(n + 7) {
    display: flex !important;
  }
}
body#index .hl-home-quick__link {
  background: #ffffff !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
body#index .hl-home-quick__link:hover {
  background: #ffffff !important;
  border-color: var(--hl-red, #d71920) !important;
  box-shadow: none !important;
  transform: none !important;
}
body#index .hl-home-quick__link:hover .hl-home-quick__name {
  color: var(--hl-red, #d71920);
}
body#index .hl-home-quick__media,
body#index .hl-home-quick__media--letter {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body#index .hl-home-quick__media img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}
body#index .hl-home-quick__more a {
  color: var(--hl-muted, #6b7280) !important;
}
body#index .hl-home-quick__more a:hover {
  color: var(--hl-red, #d71920) !important;
}

body#index a.hl-btn-primary,
body#index a.hl-home-cta--primary,
body#index .hl-home-brand a.hl-btn-primary,
body#index .hl-home-brand a.hl-home-cta--primary {
  color: #fff !important;
  background: var(--hl-red, #d71920) !important;
  border-color: var(--hl-red, #d71920) !important;
}
body#index a.hl-btn-primary:hover,
body#index a.hl-btn-primary:focus,
body#index a.hl-btn-primary:active,
body#index a.hl-home-cta--primary:hover,
body#index a.hl-home-cta--primary:focus,
body#index a.hl-home-cta--primary:active,
body#index .hl-home-brand a.hl-btn-primary:hover,
body#index .hl-home-brand a.hl-home-cta--primary:hover {
  color: #fff !important;
  background: var(--hl-red-hover, #b9151b) !important;
  border-color: var(--hl-red-hover, #b9151b) !important;
  text-decoration: none !important;
}
body#index a.hl-btn-primary:hover *,
body#index a.hl-home-cta--primary:hover * {
  color: #fff !important;
}

@media (min-width: 992px) {
  body#index .hl-home-hero {
    margin: 0.05rem 0 0.35rem;
    padding: 0.85rem 1.25rem;
    background: var(--hl-surface-soft, #f4f5f6);
    border-radius: 6px;
    border: 0;
    box-shadow: none;
  }
  body#index .hl-home-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 0.65rem 1.1rem;
    align-items: center;
  }
  body#index .hl-home-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    max-width: 44rem;
  }
  body#index .hl-home-hero__title {
    margin: 0 0 0.65rem !important;
    max-width: 22em;
    font-size: clamp(1.875rem, 1.625rem + 0.37vw, 2.0625rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    color: var(--hl-ink, #18191a) !important;
  }
  body#index .hl-home-hero__br {
    display: block;
  }
  body#index .hl-home-hero__lead {
    margin: 0 0 1.2rem;
    max-width: 38rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    font-weight: 400;
    color: #374151;
  }
  body#index .hl-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
  }

  body#index .hl-home-hero__aside { padding: 0; border-left: 0; }
  body#index .hl-home-hero__aside-eyebrow { display: none !important; }
  body#index .hl-home-hero__dirs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  body#index .hl-home-hero__dirs > li { margin: 0; min-width: 0; }

  body#index .hl-home-hero__dir {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.12rem;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 0.35rem 0.45rem 0.3rem;
    border: 1px solid #dfe3e8;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 25, 26, 0.04);
    color: var(--hl-ink, #18191a) !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
  }
  body#index .hl-home-hero__dir:hover {
    border-color: var(--hl-red, #d71920);
    box-shadow: 0 1px 3px rgba(24, 25, 26, 0.06);
    background: #fff;
    color: var(--hl-ink, #18191a) !important;
  }
  body#index .hl-home-hero__dir-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 86px;
    height: 86px;
    max-height: 86px;
  }
  body#index .hl-home-hero__dir-media picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  body#index .hl-home-hero__dir-media img {
    width: 88px;
    height: 88px;
    max-width: 88px;
    max-height: 88px;
    object-fit: contain;
    display: block;
  }
  body#index .hl-home-hero__dir-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-width: 0;
  }
  body#index .hl-home-hero__dir-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--hl-ink, #18191a);
  }
  body#index .hl-home-hero__dir:hover .hl-home-hero__dir-name {
    color: var(--hl-red, #d71920);
  }
  body#index .hl-home-hero__dir-arrow {
    flex: 0 0 auto;
    color: var(--hl-red, #d71920);
    font-size: 0.8125rem;
    transition: transform 0.14s ease;
  }
  body#index .hl-home-hero__dir:hover .hl-home-hero__dir-arrow {
    transform: translateX(2px);
  }

  body#index .hl-home-trust { margin: 0.5rem 0 0.65rem; }
  body#index .hl-home-trust__list { min-height: 54px; }
  body#index .hl-home-trust__item {
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
  }
  body#index .hl-home-trust__primary {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
  }
  body#index .hl-home-trust__secondary {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
  }
  body#index .hl-home-trust__ico svg {
    width: 16px;
    height: 16px;
  }

  body#index .hl-home-quick { margin: 0 0 0.65rem; }
  body#index .hl-home-quick__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    min-height: 96px;
    max-height: 104px;
    padding: 0.5rem 0.3rem 0.45rem;
    border-radius: 7px !important;
    transform: none !important;
  }
  /* Match settled hl-home-c sizes — must not paint 68px then shrink to 48px (CLS). */
  body#index .hl-home-quick__media,
  body#index .hl-home-quick__media--letter {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body#index .hl-home-quick__media img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
  }
  body#index .hl-home-quick__name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--hl-ink, #18191a);
  }

  body#index .hl-home-brand { margin: 0 0 0.75rem; }
  body#index .hl-home-brand__inner {
    padding: 0.75rem clamp(0.9rem, 1.6vw, 1.25rem);
    grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    gap: 0.45rem 1.1rem;
    align-items: center;
  }
  body#index .hl-home-liquimoly .hl-home-brand__inner {
    min-height: 0;
  }
  body#index .hl-home-brand__title {
    margin: 0 0 0.4rem !important;
    max-width: 15ch;
    font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.3rem) !important;
    line-height: 1.2 !important;
  }
  body#index .hl-home-brand__lead { display: none; }
  body#index .hl-home-brand__eyebrow {
    margin: 0 0 0.2rem;
  }
  body#index .hl-home-brand--dark .hl-home-brand__eyebrow,
  body#index .hl-home-liquimoly .hl-home-brand__eyebrow {
    color: #fff;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
  }
  body#index .hl-home-brand .hl-home-cta--primary,
  body#index .hl-home-brand .hl-btn-primary {
    min-height: 34px !important;
    padding: 0.25rem 0.8rem !important;
    font-size: 0.8125rem !important;
  }
  body#index .hl-home-brand__nav-link {
    min-height: 36px;
    padding: 0.15rem 0;
  }
  body#index .hl-home-brand__nav-name {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
  }
  body#index .hl-home-brand__nav-blurb {
    font-size: 0.78125rem;
    line-height: 1.3;
  }
  body#index .hl-home-brand--dark .hl-home-brand__nav-arrow {
    color: var(--hl-on-dark, #f8f9fa);
  }
  body#index .hl-home-brand--dark .hl-home-brand__nav-link:hover .hl-home-brand__nav-arrow {
    color: var(--hl-red, #d71920);
  }

  body#index .hl-home-paint .hl-home-brand__inner {
    border: 1px solid #e2e5e9;
    background: #f7f8f9 !important;
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
    gap: 0.55rem 1.25rem;
    padding: 0.7rem clamp(0.85rem, 1.4vw, 1.15rem);
    align-items: center;
  }
  body#index .hl-home-paint .hl-home-brand__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  body#index .hl-home-paint .hl-home-brand__title {
    max-width: none;
  }

  body#index .hl-home-shell__products article.product-miniature.hl-pc {
    --hl-pc-img-h: 148px;
    --hl-pc-pad: 5px;
    --hl-pc-gap-y: 2px;
  }
  body#index .hl-home-shell__products article.product-miniature.hl-pc .product-miniature__image-container,
  body#index .hl-home-shell__products article.product-miniature.hl-pc .thumbnail-container {
    padding: 1px !important;
  }
  body#index .hl-home-shell__products article.product-miniature.hl-pc .product-miniature__image {
    max-width: 98% !important;
    max-height: calc(var(--hl-pc-img-h) - 2px) !important;
  }
  body#index .hl-home-shell__products .product-miniature__title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.1em;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
  }
  body#index .hl-home-shell__products .product-miniature__prices {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body#index .hl-home-shell__products .product-miniature__actions {
    gap: 2px !important;
    margin-top: auto !important;
  }
  body#index .hl-home-shell__products .hl-pc-status__new {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.14rem 0.36rem;
  }

  body#index .hl-home-discover { margin: 0 0 0.65rem; }
  body#index .hl-home-discover__link {
    min-height: 46px;
    padding: 0.4rem 0.15rem;
    gap: 0.5rem;
  }
  body#index .ps-specials {
    margin-bottom: 0.7rem;
    padding-top: 0.6rem;
    padding-bottom: 0.65rem;
  }
  body#index .hl-home-blog2 { margin: 0 0 0.9rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body#index .hl-home-hero__aside { display: none !important; }
  body#index .hl-home-hero .hl-home-cta--primary,
  body#index .hl-home-hero .hl-btn-primary { display: none !important; }
}

body#index .hl-home-hero .hl-home-cta--primary,
body#index .hl-home-hero .hl-btn-primary {
  min-height: 34px;
  padding: 0.28rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: none;
}
body#index .hl-home-hero .hl-home-cta--text,
body#index .hl-home-hero .hl-link-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hl-ink, #18191a) !important;
  text-decoration: none !important;
}
body#index .hl-home-hero .hl-home-cta--text:hover,
body#index .hl-home-hero .hl-link-secondary:hover {
  color: var(--hl-red, #d71920) !important;
  background: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}