/* Only the flange parent page opts into this presentation. */
body:has(#td316-flange-sections) .content-wrapper.internal {
  background:#f7f7f7;
  font-family:Ubuntu,Arial,sans-serif;
}
body:has(#td316-flange-sections) .container-ws > .row {
  margin-inline:0;
}
body:has(#td316-flange-sections) #js-sticky-content {
  background:transparent;
  float:none;
  width:calc(100% - 104px);
  max-width:1216px;
  margin-inline:auto;
  padding-inline:0;
}
body:has(#td316-flange-sections) .catalog-section-container {
  padding-inline:0;
}
#td316-flange-sections {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0 0 32px;
  padding:0;
  font-family:Ubuntu,Arial,sans-serif;
  color:#3b434a;
}
#td316-flange-sections .td316-section-tile {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:140px;
  padding:14px;
  margin:0;
  border:1px solid #e1e1e1;
  border-radius:16px;
  background:#fff;
  color:#3b434a;
  box-shadow:0 0 8px rgba(69,73,78,.06);
  text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease;
}
#td316-flange-sections .td316-tile-main {
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
#td316-flange-sections .td316-tile-name {
  flex:1;
  min-width:0;
  margin:0;
  font:500 16px/1.4 Ubuntu,Arial,sans-serif;
  text-transform:none;
  overflow-wrap:anywhere;
}
#td316-flange-sections .td316-tile-picture {
  display:block;
  flex:0 0 88px;
  width:88px;
  height:88px;
  object-fit:contain;
  background:#fff;
  border:0;
}
#td316-flange-sections .td316-tile-bottom {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  font:400 14px/1.4 Ubuntu,Arial,sans-serif;
}
#td316-flange-sections .td316-tile-action { color:#416da4; }
#td316-flange-sections .td316-tile-count {
  margin-left:auto;
  color:#626b73;
  white-space:nowrap;
}
#td316-flange-sections .td316-tile-arrow {
  flex:0 0 18px;
  width:18px;
  height:18px;
  color:#416da4;
}
#td316-flange-sections .td316-section-tile:hover {
  border-color:#9fb4c5;
  background:#fcfdfd;
}
#td316-flange-sections .td316-section-tile:hover .td316-tile-name {
  color:#007062;
}
#td316-flange-sections .td316-section-tile:focus-visible {
  outline:2px solid #416da4;
  outline-offset:3px;
}
@media(max-width:1099px) {
  #td316-flange-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:991px) {
  body:has(#td316-flange-sections) #js-sticky-content { width:calc(100% - 68px); }
}
@media(max-width:599px) {
  body:has(#td316-flange-sections) .container-ws > .row { margin-inline:0; }
  body:has(#td316-flange-sections) .catalog-section-container { padding-inline:0; }
  #td316-flange-sections { grid-template-columns:minmax(0,1fr); gap:12px; }
  #td316-flange-sections .td316-section-tile { min-height:140px; padding:14px; }
  #td316-flange-sections .td316-tile-picture { flex-basis:84px; width:84px; height:84px; }
  #td316-flange-sections .td316-tile-main { gap:12px; }
  #td316-flange-sections .td316-tile-bottom { margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) {
  #td316-flange-sections .td316-section-tile { transition:none; }
}

/* Air above the grid and a small orange directional accent. */
#td316-flange-sections { margin-top:38px; }
#td316-flange-sections .td316-tile-arrow {
  box-sizing:content-box; flex:0 0 18px; width:18px; height:18px;
  padding:6px 13px; margin:-3px -14px -14px 0;
  border-radius:18px; background:transparent; color:#ff8000;
  box-shadow:inset 0 0 0 1px #ff8000;
}

#td316-flange-sections .td316-tile-count::before {
  content:""; display:inline-block; width:8px; height:8px; margin-right:7px;
  border-radius:50%; background:#12b85b; vertical-align:1px;
}

/* Parent category only: omit the long description below its tiles. */
body:has(#td316-flange-sections) .catalog-section-container > .catalog-section-desc { display:none; }