/* 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; }

/* Parent category image treatment only: existing CMS photos remain unchanged. */
#td316-flange-sections .td316-tile-visual {
  position:relative; display:grid; place-items:center; flex:0 0 104px; width:104px; height:104px;
  isolation:isolate;
}
#td316-flange-sections .td316-tile-visual .td316-tile-picture {
  position:relative; z-index:1; flex:none; width:88px; height:88px;
  background:transparent; mix-blend-mode:multiply; object-fit:contain;
}
#td316-flange-sections .td316-tile-visual.is-photo {
  border-radius:50%; background:radial-gradient(circle,#edf1f5 0%,#f4f6f8 66%,transparent 67%);
}
#td316-flange-sections .td316-tile-visual.is-photo .td316-tile-picture { width:104px; height:104px; }
#td316-flange-sections .td316-tile-visual.is-technical::before {
  content:""; position:absolute; inset:3px; z-index:0; border:1px solid #b7c2ce; border-radius:50%;
  background:linear-gradient(transparent calc(50% - .5px),#cbd3dc 50%,transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),#cbd3dc 50%,transparent calc(50% + .5px));
}
#td316-flange-sections .td316-tile-visual.is-technical::after {
  content:""; position:absolute; inset:14px; z-index:0; border:1px dashed #c3ccd6; border-radius:50%;
}

/* Approved mixed 01/02 card composition, scoped to the existing parent grid. */
#td316-flange-sections { gap:24px 20px; }
#td316-flange-sections .td316-section-tile {
  position:relative; height:280px; min-height:280px; padding:24px 20px;
  overflow:hidden; border-radius:18px; box-shadow:0 5px 14px rgba(45,55,66,.09);
}
#td316-flange-sections .td316-tile-main { display:block; flex:none; }
#td316-flange-sections .td316-tile-copy { position:relative; z-index:3; display:block; width:57%; }
#td316-flange-sections .td316-tile-name {
  display:block; font:700 28px/1.08 Ubuntu,Arial,sans-serif; color:#3b434a; overflow-wrap:normal;
}
#td316-flange-sections .td316-tile-subtitle { display:block; margin-top:12px; font:400 15px/1.3 Ubuntu,Arial,sans-serif; }
#td316-flange-sections .td316-tile-name::after {
  content:""; display:block; width:48px; height:3px; margin-top:12px; border-radius:3px; background:#ff8000;
}
#td316-flange-sections .td316-section-tile:has(.is-photo) .td316-tile-name::after { display:none; }
#td316-flange-sections .td316-section-tile:has(.is-photo) .td316-tile-copy::before {
  content:""; display:block; width:48px; height:3px; margin:0 0 14px; border-radius:3px; background:#ff8000;
}
#td316-flange-sections .td316-tile-visual {
  position:absolute; width:205px; height:205px; right:-10px; top:18px; z-index:1;
}
#td316-flange-sections .td316-tile-visual .td316-tile-picture { width:164px; height:164px; }
#td316-flange-sections .td316-tile-visual.is-photo {
  width:238px; height:238px; right:-50px; top:22px; background:#eef1f5; border-radius:50%;
}
#td316-flange-sections .td316-tile-visual.is-photo .td316-tile-picture { width:238px; height:238px; }
#td316-flange-sections .td316-tile-visual.is-technical::before { inset:5px; }
#td316-flange-sections .td316-tile-visual.is-technical::after { inset:22px; }
#td316-flange-sections .td316-tile-bottom { position:absolute; inset:0; margin:0; display:block; pointer-events:none; z-index:4; }
#td316-flange-sections .td316-tile-count { position:absolute; left:20px; bottom:68px; margin:0; font:400 15px/1.4 Ubuntu,Arial,sans-serif; color:#3b434a; }
#td316-flange-sections .td316-tile-action { position:absolute; left:20px; bottom:24px; font:500 16px/1.3 Ubuntu,Arial,sans-serif; color:#0964be; }
#td316-flange-sections .td316-tile-arrow { position:absolute; left:181px; bottom:19px; margin:0; width:18px; height:18px; padding:4px 10px; border-radius:18px; }
@media(max-width:599px) {
 #td316-flange-sections .td316-section-tile { height:280px; min-height:280px; }
 #td316-flange-sections .td316-tile-name { font-size:25px; }
 #td316-flange-sections .td316-tile-subtitle { font-size:14px; }
 #td316-flange-sections .td316-tile-visual { right:-26px; width:182px; height:182px; top:35px; }
 #td316-flange-sections .td316-tile-visual .td316-tile-picture { width:146px; height:146px; }
 #td316-flange-sections .td316-tile-visual.is-photo { width:210px; height:210px; right:-62px; top:36px; }
 #td316-flange-sections .td316-tile-visual.is-photo .td316-tile-picture { width:210px; height:210px; }
}

@media(max-width:599px) {
 #td316-flange-sections a[href*="/flantsy_vorotnikovye_"] .td316-tile-name { font-size:20px; }
}

/* Exact approved raster illustrations and proportional full-card composition. */
#td316-flange-sections .td316-section-tile { height:232px; min-height:232px; padding-top:24px; }
#td316-flange-sections .td316-tile-copy { width:57%; }
#td316-flange-sections .td316-tile-name { font-size:28px; }
#td316-flange-sections .td316-tile-subtitle { margin-top:10px; font-size:16px; }
#td316-flange-sections .td316-tile-visual,
#td316-flange-sections .td316-tile-visual.is-photo {
 width:48.5%; height:100%; right:0; top:0; border-radius:0; background:none;
}
#td316-flange-sections .td316-tile-visual.is-technical { width:51%; height:90%; top:3%; right:1%; }
#td316-flange-sections .td316-tile-visual .td316-tile-picture,
#td316-flange-sections .td316-tile-visual.is-photo .td316-tile-picture {
 width:100%; height:100%; object-fit:fill; mix-blend-mode:normal;
}
#td316-flange-sections .td316-tile-visual.is-technical::before,
#td316-flange-sections .td316-tile-visual.is-technical::after { display:none; }
#td316-flange-sections .td316-tile-count { bottom:62px; }
#td316-flange-sections .td316-tile-action { bottom:22px; }
#td316-flange-sections .td316-tile-arrow { bottom:17px; }
@media(max-width:599px) {
 #td316-flange-sections .td316-section-tile { height:232px; min-height:232px; }
 #td316-flange-sections .td316-tile-name { font-size:24px; }
 #td316-flange-sections a[href*="/flantsy_vorotnikovye_"] .td316-tile-name { font-size:20px; }
 #td316-flange-sections .td316-tile-subtitle { font-size:15px; }
 #td316-flange-sections .td316-tile-visual,
 #td316-flange-sections .td316-tile-visual.is-photo { width:48.5%; height:100%; top:0; right:0; }
 #td316-flange-sections .td316-tile-visual.is-technical { width:51%; height:90%; top:3%; right:0; }
}