/* ============================================================
   CMS Trust Badges - v1.1.2 | 2026-11-05
   1.1.2: grid columns can shrink (text wraps) - fixes overflow at about 500-560px; one column under 560px.
   1.1.1: under 1000px the badges sit in a centered 2-column grid (1 column under 560px) so icons line up;
   divider lines only in the single-row layout. 768-1199 / 767 window rules replaced by these container queries.
   1.1.0: no Bootstrap .container (it caused the 4px sideways scroll at a 1000px window on the BFCM page) -
   fills its column; on body#SFNT lines up with the header. Tokens only; Section Background presets replace
   the hex field; icon colors by class; 479 rule -> container query (one column under 460px).
   Tokens: --font-accent, --font-primary, --font-size-12/14/30, --brand-gold-text, --brand-purple,
   --text-body, --text-muted, --border-light, --surface-subtle, --surface-muted, --color-white, --space-*
   ============================================================ */

.cms-trust-badges-outer {
    width: 100%;
    --tb-heading: var(--brand-gold-text);
    --tb-icon: var(--brand-gold-text);
}

/* Section Background (band runs the full width; gold heading text fails on gray - use body text there) */
.cms-trust-badges-outer--bg-white      { background-color: var(--color-white); }
.cms-trust-badges-outer--bg-light-gray { background-color: var(--surface-subtle); --tb-heading: var(--text-body); }
.cms-trust-badges-outer--bg-gray       { background-color: var(--surface-muted); --tb-heading: var(--text-body); }

/* Icon Color */
.cms-trust-badges-outer--icon-purple { --tb-icon: var(--brand-purple); }
.cms-trust-badges-outer--icon-dark   { --tb-icon: var(--text-body); }

.cms-trust-badges {
    width: 100%;
    padding: var(--space-xl) 0;
    box-sizing: border-box;
    container-type: inline-size;
}

/* Homepage / department pages (body#SFNT - full-width column): content lines up with the header -
   capped at --container-max and padded by --container-gutter (same as .cms-container). Elsewhere it fills its column. */
body#SFNT .cms-trust-badges {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-gutter);
	padding-right: var(--container-gutter);
	box-sizing: border-box;
}

.cms-trust-badges__section-heading {
    text-align: center;
    font-family: var(--font-accent);
    font-size: var(--font-size-30);
    font-weight: 600;
    line-height: 1.2;
    color: var(--tb-heading);
    margin: 0 0 var(--space-lg);
}

.cms-trust-badges__row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 35px;
}

.cms-trust-badges__row--wrap {
    flex-wrap: wrap;
}

.cms-trust-badges__row--row {
    flex-wrap: nowrap;
}

.cms-trust-badges__badge {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.cms-trust-badges__row--divider-lines .cms-trust-badges__badge {
    position: relative;
    padding-right: 35px;
}

.cms-trust-badges__row--divider-lines .cms-trust-badges__badge:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background-color: var(--border-light);
}

.cms-trust-badges__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--tb-icon);
}

.cms-trust-badges__icon svg {
    width: 100%;
    height: 100%;
}

.cms-trust-badges__text {
    display: flex;
    flex-direction: column;
}

.cms-trust-badges__label {
    font-family: var(--font-primary);
    font-size: var(--font-size-14);
    font-weight: 600;
    color: var(--text-body);
}

.cms-trust-badges__sublabel {
    font-family: var(--font-primary);
    font-size: var(--font-size-14);
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Badge area under 1000px: a 2-column grid, centered as a block - icons and text line up down each
   column (1.1.1; was flex wrap, which centered each line on its own, so the badges stepped in and out).
   Divider lines only show in the single-row layout. */
@container (max-width: 999px) {
    .cms-trust-badges__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content)); /* never wider than the space - text wraps instead */
        justify-content: center;
        column-gap: var(--space-xl);
        row-gap: var(--space-lg);
    }

    .cms-trust-badges__badge {
        justify-content: flex-start;
    }

    .cms-trust-badges__row--divider-lines .cms-trust-badges__badge {
        padding-right: 0;
    }

    .cms-trust-badges__row--divider-lines .cms-trust-badges__badge::after {
        display: none;
    }
}

/* Badge area under 560px (phones): one column, icons on one left edge, centered as a block */
@container (max-width: 559px) {
    .cms-trust-badges__row {
        grid-template-columns: minmax(0, max-content);
    }
}