/* Icons: framework-only fixes. */
/* The design's "tint" band is the Branding Fifth (tint) color, which base.css clears from the section; paint it here (the looks are edge to edge, so the band keeps the design's full width and padding). */
body .sb-blk.sb-icons .sec.on-tint{background:var(--pb-tint) !important}
/* The framed section is narrower than the design page, so the big stat wraps; keep it on one line. */
body .sb-icons .i13-n b{white-space:nowrap}
/* Row backgrounds: ink band = the design's text color; surface = the design's plain white. */


/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-icons .top code { font-size: var(--fs-small) !important; }
body .sb-icons .i7-n { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-icons .i13-n b { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-icons .i17-t { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-icons .i20-s b { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
/* 3.6.10: without an icon, 05's list items give the text the full width (it fell into the 32px icon column). */
body:not(.cc-look-pre-3-6-10) .sb-icons .i5-l > li:not(:has(> .ic)) { grid-template-columns: 1fr; }
/* 3.6.10: without an icon, 10's rows give the text the full width (it fell into the 24px icon column). */
body:not(.cc-look-pre-3-6-10) .sb-icons .i10-it:not(:has(> .ic)) { grid-template-columns: 1fr; }
/* 3.6.10 fit pass. ICN-03 / ICN-15 without icons: no empty ring or tile (the text takes the row), as for the icon rows above. */
body:not(.cc-look-pre-3-6-10) .sb-icons .i3-it:has(> .i3-r:empty) { grid-template-columns: 1fr; }
body:not(.cc-look-pre-3-6-10) .sb-icons :is(.i3-r, .i15-i):empty { display: none; }
/* ICN-20: the figure at the Huge size broke "2 min" and "5 days" over two lines in its column. */
body:not(.cc-look-pre-3-6-10) .sb-icons .i20-s b { white-space: nowrap; font-size: min(clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)), max(2.6vw, 30px)) !important; }
/* ICN-20 without icons: the empty icon column left every row (and the column labels) indented. */
@media (min-width: 1025px) {
  body:not(.cc-look-pre-3-6-10) .sb-icons .i20:not(:has(.i20-i > *)) .i20-r { grid-template-columns: minmax(0,3fr) minmax(0,4fr) minmax(0,2fr) 190px; }
  body:not(.cc-look-pre-3-6-10) .sb-icons .i20:not(:has(.i20-i > *)) .i20-r > :first-child { display: none; }
}
/* 3.6.10: looks drawn as a dark band (.on-dark) sit on the row's Background, which paints the band. On a light row their
   words, rules, buttons and links follow the row (dark text), not white (ICN-08 printed white on white). On a Secondary row they follow
   that color's lightness; Main, Black and photo rows keep the white design. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-icons:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-dark { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--color-muted); --pb-muted: var(--color-muted); --pb-border: var(--color-line); --pb-rule-on-dark: var(--color-line); color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-icons:not(.sb-edge):not(.sb-dark) > .on-dark { --pb-on-dark: oklch(from var(--color-sec) clamp(0, (0.62 - l) * 1000, 1) 0 0); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-icons:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-dark .btn:not(.ghost) { background: var(--btn-fill); color: var(--btn-color) !important; border-color: var(--btn-border); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-icons:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-dark .btn:not(.ghost):hover { background: var(--btn-fill-hover); color: var(--btn-color-hover) !important; border-color: var(--btn-border-hover); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-icons:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-dark .btn.ghost { background: transparent; color: var(--btn-outline) !important; border-color: var(--btn-outline); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-icons:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-dark :is(.tlink, .tlink--on-dark) { color: var(--color-link); }
/* 3.6.10: on a dark band the soft tint (Branding Fifth) that panels, bands and cards paint turns into the same faint light
   tint as the surface, so the white text the band gives them stays readable (ICN-06/19 printed white on a light tint). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-icons:not(.sb-edge).sb-dark { --pb-tint: color-mix(in srgb, var(--color-white) 8%, transparent); }
/* 3.6.10: looks that paint their own light band (ICN-06/19: the category's page color or a tint) keep their light-row colors
   on a dark row, so they render the same on every row. The dark row only turned their text white (white on their own
   light band). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-icons.sb-edge.sb-dark:is(.sb-look-06, .sb-look-19) { --pb-text: var(--color-body, var(--color-headings)); --pb-muted: var(--color-muted); --pb-border: var(--color-line); --pb-surface: var(--color-surface, var(--color-fourth)); --form-label-color: inherit; color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-icons.sb-edge.sb-dark:is(.sb-look-06, .sb-look-19) .btn:not(.ghost):not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: var(--btn-fill); color: var(--btn-color); border-color: var(--btn-border); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-icons.sb-edge.sb-dark:is(.sb-look-06, .sb-look-19) .btn.ghost:not(:is(.dark, .ink, .is-dark, .on-dark) *) { background: transparent; color: var(--btn-outline); border-color: var(--btn-outline); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-icons.sb-edge.sb-dark:is(.sb-look-06, .sb-look-19) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--color-link); }