.afi-family-content {
  margin: 0 0 56px;
  overflow: hidden;
  border: 1px solid #dfe3e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(27, 31, 35, .09);
}

#product-category,
.online-cms-case-study {
  --afi-family-accent: #f29811;
  --afi-family-accent-hover: #c97f10;
  --afi-family-ink: #4e4f52;
  --afi-family-muted: #4e4f52;
}

.online-cms-case-study__content {
  padding: 56px 0 20px;
  overflow-x: clip;
}

.online-cms-case-study .page-header {
  background: linear-gradient(135deg, #343a40, #4e4f52);
}

.afi-family-hero-wrap,
.afi-family-hero {
  width: 100%;
}

.afi-family-hero {
  position: relative;
  display: grid;
  min-height: clamp(300px, 35.2vw, 450px);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #24272a, #4e4f52);
  isolation: isolate;
}

.afi-family-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.afi-family-hero__overlay {
  display: flex;
  align-items: center;
  padding: clamp(44px, 8vw, 112px) clamp(24px, 7vw, 96px);
  background: linear-gradient(90deg, rgba(15, 18, 20, .76), rgba(15, 18, 20, .16));
}

.afi-family-hero__content {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.afi-family-hero h1 {
  max-width: 850px;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: 'Raleway', sans-serif;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.afi-family-hero p {
  max-width: 760px;
  margin: 18px 0 0;
  color: inherit;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.35;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}

.afi-family-hero--text-light { color: #fff; }
.afi-family-hero--text-dark { color: #24272a; }
.afi-family-hero--text-dark .afi-family-hero__overlay {
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .16));
}
.afi-family-hero--text-dark h1,
.afi-family-hero--text-dark p { text-shadow: 0 2px 18px rgba(255, 255, 255, .5); }

.afi-family-page a:focus-visible,
.afi-family-document > a:focus-visible {
  outline: 3px solid var(--afi-family-accent);
  outline-offset: 3px;
}

.afi-family-page {
  color: var(--afi-family-ink);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.afi-family-section {
  position: relative;
  margin: 0;
  padding: 40px clamp(24px, 5vw, 72px);
  overflow: hidden;
}

.afi-family-section + .afi-family-section {
  border-top: 1px solid rgba(74, 82, 89, .12);
}

.afi-family-section--compact { padding-top: 24px; padding-bottom: 24px; }
.afi-family-section--normal { padding-top: 40px; padding-bottom: 40px; }
.afi-family-section--spacious { padding-top: 64px; padding-bottom: 64px; }
.afi-family-section--bg-white { background: #fff; }
.afi-family-section--bg-soft { background: #f3f5f6; }
.afi-family-section--bg-dark { background: linear-gradient(135deg, #24272a, #343a40); color: #fff; }
.afi-family-section--bg-accent { background: linear-gradient(135deg, var(--afi-family-accent-hover), var(--afi-family-accent)); color: #fff; }
.afi-family-section:first-child.afi-family-section--rich_text.afi-family-section--bg-white {
  background: linear-gradient(135deg, #fff 0%, #f4f6f7 100%);
}
.afi-family-page .afi-family-section--bg-dark p,
.afi-family-page .afi-family-section--bg-dark li,
.afi-family-page .afi-family-section--bg-dark blockquote,
.afi-family-page .afi-family-section--bg-accent p,
.afi-family-page .afi-family-section--bg-accent li,
.afi-family-page .afi-family-section--bg-accent blockquote { color: inherit; }

.afi-family-rich-text,
.afi-family-split,
.afi-family-image,
.afi-family-document,
.afi-family-divider {
  width: min(100%, 1180px);
  margin-right: auto;
  margin-left: auto;
}

.afi-family-rich-text { max-width: 820px; }
.afi-family-page h1,
.afi-family-page h2,
.afi-family-page h3,
.afi-family-page h4,
.afi-family-page h5,
.afi-family-page h6 {
  margin: 0 0 .65em;
  color: inherit;
  font-weight: 600;
  line-height: 1.2;
}
.afi-family-page h1 {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 18px;
  color: var(--afi-family-ink);
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: -.025em;
}
.afi-family-page h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--afi-family-accent);
  content: '';
}
.afi-family-section--bg-dark h1,
.afi-family-section--bg-accent h1 { color: inherit; }
.afi-family-section--bg-dark h1::after,
.afi-family-section--bg-accent h1::after { background: rgba(255, 255, 255, .85); }
.afi-family-page h2 { font-size: clamp(25px, 3vw, 34px); }
.afi-family-page h3 { font-size: clamp(21px, 2.4vw, 27px); }
.afi-family-page h4 { font-size: 20px; }
.afi-family-page h5 { font-size: 18px; }
.afi-family-page h6 { font-size: 16px; }
.afi-family-page p,
.afi-family-page ul,
.afi-family-page ol,
.afi-family-page blockquote { margin: 0 0 1.25em; }
.afi-family-page p { color: var(--afi-family-muted); }

/* Managed case studies inherit aggressive legacy .pages typography rules.
   Restore the same computed type treatment used by managed category/family content. */
#content.online-cms-case-study .afi-family-page h1,
#content.online-cms-case-study .afi-family-page h2,
#content.online-cms-case-study .afi-family-page h3,
#content.online-cms-case-study .afi-family-page h4,
#content.online-cms-case-study .afi-family-page h5,
#content.online-cms-case-study .afi-family-page h6 {
  color: inherit;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  line-height: 1.2;
}
#content.online-cms-case-study .afi-family-page h1 { font-size: 30px; }
#content.online-cms-case-study .afi-family-page h2 { font-size: clamp(25px, 3vw, 34px); }
#content.online-cms-case-study .afi-family-page h3 { font-size: clamp(21px, 2.4vw, 27px); }
#content.online-cms-case-study .afi-family-page h4 { font-size: 20px; }
#content.online-cms-case-study .afi-family-page h5 { font-size: 18px; }
#content.online-cms-case-study .afi-family-page h6 { font-size: 16px; }
#content.online-cms-case-study .afi-family-page p {
  color: var(--afi-family-muted);
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  line-height: 26px;
}
.afi-family-page p:last-child,
.afi-family-page ul:last-child,
.afi-family-page ol:last-child,
.afi-family-page blockquote:last-child { margin-bottom: 0; }
.afi-family-page ul,
.afi-family-page ol { padding-left: 1.5em; }
.afi-family-page a { color: var(--afi-family-accent); text-decoration: underline; text-underline-offset: 3px; }
.afi-family-section--bg-dark a,
.afi-family-section--bg-accent a { color: #fff; }
.afi-family-page a:focus-visible { outline: 3px solid rgba(242, 152, 17, .55); outline-offset: 3px; }
.afi-family-page blockquote { padding: 12px 20px; border-left: 4px solid var(--afi-family-accent); }
.afi-family-section--callout .afi-family-rich-text {
  padding: 24px 28px;
  border-left: 5px solid var(--afi-family-accent);
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, .75);
}
.afi-family-section--bg-dark.afi-family-section--callout .afi-family-rich-text,
.afi-family-section--bg-accent.afi-family-section--callout .afi-family-rich-text {
  border-left-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .1);
}

.afi-family-split {
  display: flex;
  gap: clamp(28px, 5vw, 72px);
}
.afi-family-split--start { align-items: flex-start; }
.afi-family-split--center { align-items: center; }
.afi-family-split--end { align-items: flex-end; }
.afi-family-split__text,
.afi-family-split__image { min-width: 0; }
.afi-family-split__text { flex: 1 1 auto; }
.afi-family-split__image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(74, 82, 89, .13);
  border-radius: 8px;
  background: rgba(245, 247, 248, .9);
}
.afi-family-split__image--plain {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.afi-family-split--image-25 .afi-family-split__image { flex: 0 0 25%; }
.afi-family-split--image-30 .afi-family-split__image { flex: 0 0 30%; }
.afi-family-split--image-35 .afi-family-split__image { flex: 0 0 35%; }
.afi-family-split--image-40 .afi-family-split__image { flex: 0 0 40%; }
.afi-family-split--image-45 .afi-family-split__image { flex: 0 0 45%; }
.afi-family-split--image-50 .afi-family-split__image { flex: 0 0 50%; }
.afi-family-split--image-55 .afi-family-split__image { flex: 0 0 55%; }
.afi-family-split--image-60 .afi-family-split__image { flex: 0 0 60%; }
.afi-family-split--image-65 .afi-family-split__image { flex: 0 0 65%; }
.afi-family-split--image-70 .afi-family-split__image { flex: 0 0 70%; }
.afi-family-split--image-75 .afi-family-split__image { flex: 0 0 75%; }

.afi-family-page img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.afi-family-split__image img { width: 100%; max-height: 520px; object-fit: contain; }
.afi-family-image figcaption { margin-top: 12px; color: var(--afi-family-muted); font-size: 14px; text-align: center; }
.afi-family-image--width-25 { max-width: 295px; }
.afi-family-image--width-30 { max-width: 354px; }
.afi-family-image--width-35 { max-width: 413px; }
.afi-family-image--width-40 { max-width: 472px; }
.afi-family-image--width-45 { max-width: 531px; }
.afi-family-image--width-50 { max-width: 590px; }
.afi-family-image--width-55 { max-width: 649px; }
.afi-family-image--width-60 { max-width: 708px; }
.afi-family-image--width-65 { max-width: 767px; }
.afi-family-image--width-70 { max-width: 826px; }
.afi-family-image--width-75 { max-width: 885px; }
.afi-family-image--width-80 { max-width: 944px; }
.afi-family-image--width-85 { max-width: 1003px; }
.afi-family-image--width-90 { max-width: 1062px; }
.afi-family-image--width-95 { max-width: 1121px; }
.afi-family-image--width-100 { max-width: 1180px; }

.afi-family-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px;
  border: 1px solid rgba(80, 80, 80, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: var(--afi-family-ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.afi-family-document strong { display: block; font-size: 20px; }
.afi-family-document p { margin: 6px 0 0; }
.afi-family-document > a {
  flex: 0 0 auto;
  padding: 12px 22px;
  border: 2px solid var(--afi-family-accent);
  border-radius: 3px;
  background: var(--afi-family-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.afi-family-document > a:hover { background: var(--afi-family-accent-hover); border-color: var(--afi-family-accent-hover); }
.afi-family-section--divider { padding-top: 20px; padding-bottom: 20px; }
.afi-family-divider { border: 0; border-top: 1px solid rgba(80, 80, 80, .25); }

/* Shared catalogue sidebar for managed categories, families and case studies */
:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar {
  margin-bottom: 36px;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #dfe3e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(27, 31, 35, .08);
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid #e4e7e9;
  color: var(--afi-family-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-title .fa-stack {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font-size: 17px;
  line-height: 34px;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-title .fa-circle {
  color: var(--afi-family-accent);
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-title .fa-stack-1x {
  color: #fff;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-nav-menu ul {
  margin: 0;
  padding: 7px 0;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-nav-menu li {
  margin: 0;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-nav-menu a.list-group-item {
  margin: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--afi-family-ink);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.35;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-nav-menu a.list-group-item:hover,
:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-nav-menu a.list-group-item:focus {
  background: rgba(242, 152, 17, .12);
  color: var(--afi-family-ink);
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget-nav-menu a.list-group-item.active {
  background: var(--afi-family-accent);
  color: #fff;
  font-weight: 600;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .contact-us,
:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .repair-service,
:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .replacement {
  padding-bottom: 14px;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget > h4:not(.widget-title) {
  margin: 12px 18px 0;
  padding: 0;
  color: var(--afi-family-ink);
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget > h4:not(.widget-title) a {
  color: var(--afi-family-ink);
  overflow-wrap: anywhere;
}

:is(#product-category, .online-cms-case-study) #column-left .primary-sidebar .widget > h4:not(.widget-title) a:hover {
  color: var(--afi-family-accent-hover);
}

/* Family-page product cards */
#product-category .product-layout.product-grid {
  display: flex;
  margin-bottom: 26px;
}

#product-category .product-layout.product-grid .product-thumb {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dfe3e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(27, 31, 35, .08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#product-category .product-layout.product-grid .product-thumb:hover {
  border-color: rgba(242, 152, 17, .55);
  box-shadow: 0 15px 34px rgba(27, 31, 35, .13);
  transform: translateY(-3px);
}

#product-category .product-layout.product-grid .image {
  margin: 0;
  padding: 18px;
  border-bottom: 1px solid #e4e7e9;
  background: #fff;
  box-shadow: inset 0 0 28px rgba(78, 79, 82, .18);
}

#product-category .product-layout.product-grid .image a {
  display: flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
}

#product-category .product-layout.product-grid .image img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
}

#product-category .product-layout.product-grid .caption {
  min-height: 172px;
  padding: 18px;
}

#product-category .product-layout.product-grid .caption h4 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

#product-category .product-layout.product-grid .caption h4 a {
  color: var(--afi-family-ink);
}

#product-category .product-layout.product-grid .caption h4 a:hover {
  color: var(--afi-family-accent-hover);
}

#product-category .product-layout.product-grid .caption > p:not(.price) {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 14px;
  color: var(--afi-family-muted);
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#product-category .product-layout.product-grid .price {
  color: var(--afi-family-ink);
  font-weight: 600;
}

#product-category .product-layout.product-grid .afi-family-product-link {
  display: block;
  margin-top: auto;
  padding: 13px 18px;
  background: var(--afi-family-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease;
}

#product-category .product-layout.product-grid .afi-family-product-link:hover,
#product-category .product-layout.product-grid .afi-family-product-link:focus {
  background: var(--afi-family-accent-hover);
  color: #fff;
}

#product-category #input-sort {
  border-color: #d6dade;
  color: var(--afi-family-ink);
}

@media (max-width: 767px) {
  .afi-family-hero { min-height: 280px; }
  .afi-family-hero__overlay { padding: 42px 20px; }
  .afi-family-hero h1 { font-size: 36px; }
  .afi-family-hero p { font-size: 18px; }
  .afi-family-content { margin-top: 0; margin-bottom: 36px; border-radius: 6px; }
  .afi-family-section { padding: 32px 20px; }
  .afi-family-section--spacious { padding-top: 44px; padding-bottom: 44px; }
  .afi-family-page h1 { font-size: 32px; }
  .afi-family-split { flex-direction: column; gap: 24px; }
  .afi-family-split__text { order: 1; }
  .afi-family-split__image { order: 2; flex-basis: auto !important; width: 100%; }
  .afi-family-document { align-items: stretch; flex-direction: column; }
  .afi-family-document > a { align-self: flex-start; }
  .afi-family-section--callout .afi-family-rich-text { padding: 20px; }
  #product-category .product-layout.product-grid .caption { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .afi-family-page *,
  .afi-family-page *::before,
  .afi-family-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}