/* 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-cards .sec.on-tint{background:var(--pb-tint) !important}
/* 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-cards .top code { font-size: var(--fs-small) !important; }
body .sb-cards .c10-t { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-cards .c12-i .h2 { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)) !important; }
body .sb-cards .c14-t { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-cards .c16-n b { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)) !important; }
body .sb-cards .c17-b .h2 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-cards h3.h2 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
/* 3.6.10: without an icon, 09's rows give the text the full width (it fell into the 36px icon column). */
body:not(.cc-look-pre-3-6-10) .sb-cards .c9-row:not(:has(> .ic)) { grid-template-columns: 1fr; }

/* 3.6.10: no icon picked, no empty tinted box (CRD-08). */
body:not(.cc-look-pre-3-6-10) .sb-cards .c8-i:not(:has(img, svg)) { display: none; }

/* 3.6.10: looks that paint their own band (CRD-04/15/19: the category's page color, a tint or a dark bar of their own)
   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) and faded their surface color to an 8% tint. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .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-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .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-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .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-cards.sb-edge.sb-dark:is(.sb-look-04, .sb-look-15, .sb-look-19) .tlink:not(:is(.dark, .ink, .is-dark, .on-dark, .photo, .ov) *) { color: var(--color-link); }
/* 3.6.10: on a dark row the tint panels inside a look (CRD-14/17 cards, FRM-19's intro) fade like its surface color, so the
   row's white text stays readable on them. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-cards.sb-dark:not(.sb-edge) { --pb-tint: color-mix(in srgb, var(--color-white) 12%, transparent); }