/* HL blog promo — PDP strip + category sidebar (whole card = link) */
.hl-blog-promo,.hl-blog-promo__hit{
  box-sizing:border-box;margin:0;
  display:flex;align-items:center;gap:.75rem;
  text-decoration:none!important;color:inherit!important;
  border:1px solid #e8eaee;border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
.hl-blog-promo *,.hl-blog-promo *::before,.hl-blog-promo *::after{box-sizing:border-box;pointer-events:none}
.hl-blog-promo__hit:hover,
a.hl-blog-promo:hover{
  border-color:#d0d4db;background:#fff;
  box-shadow:0 4px 14px rgba(17,24,39,.08);
  transform:translateY(-2px);
  text-decoration:none!important;color:inherit!important;
}
.hl-blog-promo__hit:focus-visible,
a.hl-blog-promo:focus-visible{
  outline:2px solid var(--hl-red,#d71920);outline-offset:2px;
}
.hl-blog-promo__media{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:transparent;border-radius:6px;
}
.hl-blog-promo__media img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform .2s ease;
}
.hl-blog-promo__hit:hover .hl-blog-promo__media img,
a.hl-blog-promo:hover .hl-blog-promo__media img{
  transform:scale(1.04);
}
.hl-blog-promo__body{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.15rem;
}
.hl-blog-promo__kicker{
  font-size:.6875rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--hl-red,#d71920);line-height:1.2;
  transition:letter-spacing .18s ease;
}
.hl-blog-promo__hit:hover .hl-blog-promo__kicker,
a.hl-blog-promo:hover .hl-blog-promo__kicker{
  letter-spacing:.07em;
}
.hl-blog-promo__title{
  font-size:.875rem;font-weight:600;line-height:1.3;color:#18191a;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .18s ease;
}
.hl-blog-promo__hit:hover .hl-blog-promo__title,
a.hl-blog-promo:hover .hl-blog-promo__title{
  color:#0f172a;
}
.hl-blog-promo__excerpt{
  font-size:.75rem;line-height:1.35;color:#8b919a;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.hl-blog-promo__arrow{
  flex:0 0 auto;font-size:1rem;color:#9ca3af;padding-right:.15rem;
  transition:transform .18s ease,color .18s ease;
}
.hl-blog-promo__hit:hover .hl-blog-promo__arrow,
a.hl-blog-promo:hover .hl-blog-promo__arrow{
  color:var(--hl-red,#d71920);transform:translateX(3px);
}

@media (prefers-reduced-motion:reduce){
  .hl-blog-promo,.hl-blog-promo__hit,.hl-blog-promo__media img,.hl-blog-promo__arrow,.hl-blog-promo__kicker,.hl-blog-promo__title{
    transition:none;
  }
  .hl-blog-promo__hit:hover,a.hl-blog-promo:hover{transform:none}
  .hl-blog-promo__hit:hover .hl-blog-promo__media img,a.hl-blog-promo:hover .hl-blog-promo__media img{transform:none}
}

/* PDP — thin strip tight under description */
.hl-blog-promo--pdp{margin:.75rem 0 0}
.hl-pdp-maincopy > .hl-blog-promo--pdp{margin-top:.75rem;margin-bottom:0}
body#product .hl-pdp-below-hero__inner > .hl-pdp-maincopy:has(.hl-blog-promo--pdp){
  margin-bottom:calc(-3rem + 1rem)!important;
}
.hl-blog-promo--pdp.hl-blog-promo__hit,
a.hl-blog-promo--pdp{
  padding:.55rem .75rem .55rem .55rem;gap:.7rem;
  background:linear-gradient(180deg,#fafbfc 0%,#f4f5f7 100%);
}
.hl-blog-promo--pdp .hl-blog-promo__media{width:64px;height:48px;background:transparent;padding:0}
.hl-blog-promo--pdp .hl-blog-promo__media img{object-fit:contain;background:transparent}
.hl-blog-promo--pdp .hl-blog-promo__title{font-size:.9rem;-webkit-line-clamp:1}
.hl-blog-promo--pdp .hl-blog-promo__excerpt{display:none}
@media (min-width:768px){
  .hl-blog-promo--pdp .hl-blog-promo__excerpt{display:-webkit-box}
  .hl-blog-promo--pdp .hl-blog-promo__title{-webkit-line-clamp:1}
}

/* Category sidebar — polish; beat .hl-catside__section + .section spacer */
.hl-catside .hl-catside__section.hl-catside__section--blog,
.hl-catside__section + .hl-catside__section.hl-catside__section--blog{
  margin-top:2.5rem!important;
  padding-top:2rem!important;
  border-top:1px solid #ececec;
}
.hl-blog-promo-stack{
  display:flex;flex-direction:column;gap:1.5rem;
}
.hl-blog-promo--sidebar{
  margin:0;max-width:100%;width:100%;
}
.hl-blog-promo--sidebar[hidden]{display:none!important}
a.hl-blog-promo--sidebar,
.hl-blog-promo--sidebar.hl-blog-promo__hit{
  flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;
  background:#fff;width:100%;
  border-color:#e6e8ec;border-radius:10px;
}
a.hl-blog-promo--sidebar:hover,
.hl-blog-promo--sidebar.hl-blog-promo__hit:hover{
  border-color:#cfd3da;
  box-shadow:0 3px 10px rgba(17,24,39,.07);
  transform:translateY(-1px);
}
a.hl-blog-promo--sidebar:hover .hl-blog-promo__media img,
.hl-blog-promo--sidebar.hl-blog-promo__hit:hover .hl-blog-promo__media img{
  transform:none;
}
.hl-blog-promo--sidebar .hl-blog-promo__media{
  width:100%;height:102px;flex:0 0 102px;border-radius:0;border-bottom:1px solid #f0f1f3;
  background:#fff;padding:.35rem .5rem;box-sizing:border-box;
  position:relative;overflow:hidden;
}
.hl-blog-promo--sidebar .hl-blog-promo__media img{
  display:block;width:100%!important;height:100%!important;
  max-width:none;max-height:none;margin:0;
  object-fit:contain;object-position:center;background:transparent;
}
.hl-blog-promo--sidebar .hl-blog-promo__body{
  flex:0 1 auto;display:flex;flex-direction:column;gap:.2rem;
  padding:.55rem .7rem .7rem;min-height:0;
}
.hl-blog-promo--sidebar .hl-blog-promo__kicker{
  flex:0 0 auto;font-size:.5625rem;letter-spacing:.055em;font-weight:600;
  text-transform:uppercase;line-height:1.2;
  color:var(--hl-red,#d71920);
}
.hl-blog-promo--sidebar .hl-blog-promo__title{
  flex:0 0 auto;font-size:.8125rem;font-weight:600;line-height:1.35;color:#3d4654;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  letter-spacing:-.01em;word-wrap:break-word;
}
.hl-blog-promo--sidebar .hl-blog-promo__excerpt{
  flex:0 1 auto;margin:0;font-size:.6875rem;line-height:1.35;color:#8b939e;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:0;
}
.hl-blog-promo--sidebar .hl-blog-promo__arrow{display:none}

/* Mobile: below products, full width (desktop catside stays) */
.hl-blog-promo-mobile{display:none}

@media (max-width:767.98px){
  .hl-catside__section--blog{display:none!important}
  .hl-blog-promo-mobile{
    display:block;margin:1.25rem 0 .35rem;padding:0;
  }
  .hl-blog-promo-stack--mobile{gap:1rem}
  /* Show all related articles (same set as desktop); JS height-trim is desktop-only */
  .hl-blog-promo-mobile a.hl-blog-promo--sidebar,
  .hl-blog-promo-mobile .hl-blog-promo--sidebar.hl-blog-promo__hit{
    flex-direction:row;align-items:stretch;min-height:0;
  }
  .hl-blog-promo-mobile .hl-blog-promo--sidebar .hl-blog-promo__media{
    /* Match hlhome canvas 16:10 — equal product mass for landscape + portrait */
    width:156px;flex:0 0 156px;height:98px;min-height:98px;border-bottom:0;border-right:1px solid #f0f1f3;
    padding:.25rem;align-self:center;
  }
  .hl-blog-promo-mobile .hl-blog-promo--sidebar .hl-blog-promo__media img{
    width:100%!important;height:100%!important;max-width:none;max-height:none;
    object-fit:contain;object-position:center;
  }
  .hl-blog-promo-mobile .hl-blog-promo--sidebar .hl-blog-promo__body{
    padding:.55rem .65rem .6rem;gap:.15rem;justify-content:center;
  }
  .hl-blog-promo-mobile .hl-blog-promo--sidebar .hl-blog-promo__title{
    -webkit-line-clamp:2;font-size:.8125rem;
  }
  .hl-blog-promo-mobile .hl-blog-promo--sidebar .hl-blog-promo__excerpt{
    -webkit-line-clamp:2;
  }
  /* Tighten air before category SEO description under articles */
  body#category .hl-blog-promo-mobile + #js-product-list-footer .hl-category-seo{
    margin-top:.65rem!important;
    padding-top:.65rem!important;
  }
  .hl-blog-promo--pdp.hl-blog-promo__hit,a.hl-blog-promo--pdp{padding:.5rem .6rem .5rem .5rem}
  .hl-blog-promo--pdp .hl-blog-promo__media{width:56px;height:42px}
  .hl-blog-promo--pdp .hl-blog-promo__title{font-size:.8125rem;-webkit-line-clamp:2}
}

@media (min-width:768px){
  .hl-blog-promo-mobile{display:none!important}
}