/*
 * SB Feature Groups - multi-value presentation (loaded after front.css).
 * Styles: chips | pipe ( | ) | dot ( • ), picked in the module settings and applied by values.js as
 * .sbfg-vs-* on every .sbffc-root. Compact spacing = .sbfg-compact, full-width mobile rows = .sbfg-fullrow.
 * front.css is full of !important rules, so the selectors here are deliberately more specific.
 */

.sbffc-root {
    --sbfg-sep: #b6bdcd;
    --sbfg-dot: #8d97ad;
    --sbfg-link: #2a46c0;
    --sbfg-sep-space: 14px;
    --sbfg-row-gap: 5px;
}
.sbffc-root.sbfg-compact {
    --sbfg-sep-space: 10px;
    --sbfg-row-gap: 2px;
}

/* ------------------------------------------------------------- chips style */
.sbffc-root.sbfg-vs-chips .sbffc-value-list .sbffc-value-chip,
.sbffc-root.sbfg-vs-chips .sbffc-value-list .sbfg-more {
    border-radius: var(--sbfg-radius, 5px) !important;
}
.sbffc-root.sbfg-compact.sbfg-vs-chips .sbffc-value-list {
    gap: 3px !important;
}
.sbffc-root.sbfg-compact.sbfg-vs-chips .sbffc-value-list .sbffc-value-chip {
    padding: 2px 6px !important;
    line-height: 1.5 !important;
}

/* the "N more" button: a chip of its own in chips style */
.sbffc-root .sbffc-value-list .sbfg-more {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sbfg-link);
    cursor: pointer;
    white-space: nowrap;
}
.sbffc-root .sbffc-value-list .sbfg-more::after {
    content: "";
    position: absolute;
    inset: -9px -4px; /* bigger tap area without a bigger button */
}
.sbffc-root.sbfg-vs-chips .sbffc-value-list .sbfg-more {
    padding: 3px 9px;
    background: #e9efff;
    border: 1px solid #c7d4fb;
}
.sbffc-root.sbfg-compact.sbfg-vs-chips .sbffc-value-list .sbfg-more {
    padding: 2px 8px;
}
.sbffc-root.sbfg-vs-chips .sbffc-value-list .sbfg-more:hover {
    background: #dde7ff;
}

/* ------------------------------------------------- pipe and dot (no frame) */
.sbffc-root.sbfg-vs-pipe .sbffc-value-list,
.sbffc-root.sbfg-vs-dot .sbffc-value-list {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    row-gap: var(--sbfg-row-gap) !important;
    /* every value carries the separator space on its start side; the list is pulled out by the same amount,
       so the first value of a line sits flush with the cell edge */
    width: calc(100% + var(--sbfg-sep-space)) !important;
    max-width: none !important;
    margin-inline-start: calc(-1 * var(--sbfg-sep-space)) !important;
    text-align: start !important;
}
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbffc-value-chip,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbffc-value-chip,
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbfg-more,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbfg-more {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 0 !important;
    padding-inline-start: var(--sbfg-sep-space) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: start !important;
    line-height: 1.7 !important;
}
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbffc-value-chip,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbffc-value-chip {
    color: inherit;
    font-weight: inherit;
}
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbfg-more,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbfg-more {
    background-image: none;
}

/* the separator is painted in the start padding of every value that does not begin a line */
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbffc-value-chip:not(.sbfg-sol),
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbfg-more:not(.sbfg-sol) {
    background-image: linear-gradient(var(--sbfg-sep), var(--sbfg-sep)) !important;
    background-size: 1px 68% !important;
    background-position: right calc(var(--sbfg-sep-space) / 2 - 0.5px) center !important;
}
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbffc-value-chip:not(.sbfg-sol),
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbfg-more:not(.sbfg-sol) {
    background-image: radial-gradient(circle, var(--sbfg-dot) 0 1.7px, transparent 2px) !important;
    background-size: 5px 5px !important;
    background-position: right calc(var(--sbfg-sep-space) / 2 - 2.5px) center !important;
}
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbffc-value-chip.sbfg-sol,
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbfg-more.sbfg-sol,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbffc-value-chip.sbfg-sol,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbfg-more.sbfg-sol {
    background-image: none !important;
}
.sbffc-root.sbfg-vs-pipe .sbffc-value-list .sbfg-more:hover,
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbfg-more:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------- compact spacing */
.sbffc-root.sbfg-compact.sbffc-single-root .sbffc-comparison-table {
    border-spacing: 0 3px !important;
}
.sbffc-root.sbfg-compact.sbfg-compact .sbffc-feature-value-cell {
    padding: 6px 8px !important;
}
.sbffc-root.sbfg-compact.sbfg-compact .sbffc-feature-name-cell {
    padding: 6px 9px !important;
}
.sbffc-root.sbfg-compact.sbfg-compact .sbffc-feature-name-text,
.sbffc-root.sbfg-compact.sbfg-compact .sbffc-feature-value-content {
    line-height: 1.6 !important;
}
.sbffc-root.sbfg-compact .sbffc-group-header-full > .sbffc-group-toggle-button {
    min-height: 40px !important;
    margin: 6px 0 4px !important;
    padding: 6px 12px !important;
}

@media (max-width: 767px) {
    .sbffc-root.sbfg-compact.sbfg-compact .sbffc-feature-value-cell,
    .sbffc-root.sbfg-compact.sbfg-compact.is-clean:not(.sbffc-single-root) .sbffc-feature-value-cell {
        padding: 6px 8px !important;
    }
    .sbffc-root.sbfg-compact.sbfg-compact .sbffc-feature-name-cell,
    .sbffc-root.sbfg-compact.sbfg-compact.is-clean:not(.sbffc-single-root) .sbffc-feature-name-cell {
        padding: 6px 8px !important;
    }
    .sbffc-root.sbfg-compact .sbffc-group-header-full > .sbffc-group-toggle-button,
    .sbffc-root.sbfg-compact.is-clean:not(.sbffc-single-root) .sbffc-group-header-full > .sbffc-group-toggle-button {
        min-height: 38px !important;
        margin: 5px 0 3px !important;
        padding: 5px 12px !important;
    }
    .sbffc-root.sbfg-compact .sbffc-product-card {
        padding: 6px 6px 5px;
    }
}

/* ------------------------------------------------------------------------
 * Mobile: rows with many values go full width (name on top, values below).
 * Only while one product column is visible (product page, or one size tab of the family table).
 * The table becomes a stack of flex rows; rows with one or two values keep the two columns.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-comparison-table,
    .sbffc-root.sbfg-fullrow.sbffc-one-visible-product .sbffc-comparison-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body,
    .sbffc-root.sbfg-fullrow.sbffc-one-visible-product .sbffc-table-body {
        display: block !important;
        width: 100% !important;
    }
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body > tr,
    .sbffc-root.sbfg-fullrow.sbffc-one-visible-product .sbffc-table-body > tr {
        display: flex !important;
        flex-flow: row wrap !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* the product page table has a 6px border-spacing that disappears with display:block */
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body > tr {
        margin: 0 0 6px !important;
    }
    .sbffc-root.sbfg-fullrow.sbfg-compact.sbffc-single-root .sbffc-table-body > tr {
        margin-bottom: 3px !important;
    }
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body > tr > th,
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body > tr > td,
    .sbffc-root.sbfg-fullrow.sbffc-one-visible-product .sbffc-table-body > tr > th,
    .sbffc-root.sbfg-fullrow.sbffc-one-visible-product .sbffc-table-body > tr > td {
        display: block !important;
        box-sizing: border-box !important;
    }
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-group-row > th {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row[hidden],
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row.is-group-collapsed,
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-column-is-hidden.sbffc-column-is-hidden,
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr > td.sbffc-column-is-hidden.sbffc-column-is-hidden,
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr > th.sbffc-column-is-hidden.sbffc-column-is-hidden {
        display: none !important;
    }

    /* one or two values: name 40% + value 60%, as before */
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row:not(.sbfg-multirow) > th.sbffc-feature-name-cell {
        flex: 0 0 40% !important;
        width: 40% !important;
        min-width: 0 !important;
        max-width: 40% !important;
    }
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row:not(.sbfg-multirow) > td.sbffc-feature-value-cell {
        flex: 1 1 60% !important;
        width: 60% !important;
        min-width: 0 !important;
        max-width: 60% !important;
    }

    /* many values: name on top, values underneath */
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow > th.sbffc-feature-name-cell {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        position: static !important;
        border-left: 0 !important;
        border-bottom: 0 !important;
        padding: 5px 9px !important;
    }
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow > th.sbffc-feature-name-cell {
        border-radius: 5px 5px 0 0 !important;
    }
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow > td.sbffc-feature-value-cell {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-left: 0 !important;
        padding: 5px 9px 6px !important;
        text-align: start !important;
    }
    .sbffc-root.sbfg-fullrow.sbffc-single-root .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow > td.sbffc-feature-value-cell {
        border-radius: 0 0 5px 5px !important;
    }
    .sbffc-root.sbfg-fullrow:not(.sbffc-single-root) .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow > th.sbffc-feature-name-cell,
    .sbffc-root.sbfg-fullrow:not(.sbffc-single-root) .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow > td.sbffc-feature-value-cell {
        border-radius: 0 !important;
    }
    .sbffc-root.sbfg-fullrow .sbffc-table-body > tr.sbffc-feature-row.sbfg-multirow .sbffc-feature-name-text {
        font-size: 12px !important;
    }
}

/* ------------------------------------------------------------------ 1.5.2 — dot size (1.5.3: compact header on desktop too) / tight spacing
 * Dot style: a fairly large dot (6px) only ~2px away from the text on each side.
 * --sbfg-dot-size / --sbfg-dot-gap can be changed from the module's custom CSS. */
.sbffc-root {
    --sbfg-dot-size: 6px;
    --sbfg-dot-gap: 2px;
}
.sbffc-root.sbfg-vs-dot {
    --sbfg-sep-space: calc(var(--sbfg-dot-size) + 2 * var(--sbfg-dot-gap));
}
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbffc-value-chip:not(.sbfg-sol),
.sbffc-root.sbfg-vs-dot .sbffc-value-list .sbfg-more:not(.sbfg-sol) {
    background-image: radial-gradient(circle, var(--sbfg-dot) 0 calc(var(--sbfg-dot-size) / 2 - .4px), transparent calc(var(--sbfg-dot-size) / 2)) !important;
    background-size: var(--sbfg-dot-size) var(--sbfg-dot-size) !important;
    background-position: right calc(var(--sbfg-sep-space) / 2 - var(--sbfg-dot-size) / 2) center !important;
}

/* ------------------------------------------------- compact sticky model header (family table)
 * Part of the "compact" setting (.sbfg-compact), on every screen size: the model name in up to two lines,
 * the collapse-column button small in the card's corner, never touching the text. */
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head th.sbffc-product-header-cell,
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head th.sbffc-feature-header-cell {
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 10px !important;
    vertical-align: middle !important;
}
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head th.sbffc-product-header-cell {
    position: relative;
}
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-card {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    padding-inline-end: 26px !important;
}
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-card-bar {
    position: absolute !important;
    top: 50% !important;
    inset-inline-end: 6px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-col-toggle {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    opacity: .75;
}
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-col-toggle svg {
    width: 12px !important;
    height: 12px !important;
}
.sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-label {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-align: center !important;
}
@media (max-width: 767px) {
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head th.sbffc-product-header-cell,
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head th.sbffc-feature-header-cell {
        padding: 5px 6px !important;
    }
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-card {
        padding-inline-end: 20px !important;
    }
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-card-bar {
        inset-inline-end: 4px !important;
    }
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-col-toggle {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-col-toggle svg {
        width: 10px !important;
        height: 10px !important;
    }
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-label {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-feature-header-text {
        font-size: 12.5px !important;
    }
}
@media (max-width: 360px) {
    .sbffc-root.sbfg-compact:not(.sbffc-single-root) .sbffc-table-head .sbffc-product-label {
        font-size: 11px !important;
    }
}

/* ------------------------------------------------- 1.5.4 — shared value in the middle of the row (family table)
 * Setting VALUE_MERGED_CENTER (.sbfg-merged-center): a value that is the same for every model is centred under
 * all of them; on mobile (horizontal scroll) in the middle of the visible part, using the widths front.js measures.
 * Long / multi-value cells (.is-rich) and label-absorbed rows keep their start alignment. */
.sbffc-root.sbfg-merged-center:not(.sbffc-single-root) .sbffc-run-merged:not(.is-label-absorbed):not(.is-rich) > .sbffc-feature-value-content {
    min-width: min(100%, calc(var(--sbffc-visible-width, 100vw) - var(--sbffc-label-w, var(--sbffc-feature-column-width, 104px)) - 24px)) !important;
    text-align: center !important;
}

/* ---------------------------------------------------------------- collapse
 * Kept last and over-specific on purpose: the display rules above must not win over it. */
.sbffc-root .sbffc-value-list.sbfg-vl > .sbffc-value-chip.sbfg-x.sbfg-x {
    display: none !important;
}
.sbffc-root .sbffc-value-list.sbfg-vl > .sbfg-more[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- 1.7.16 — group row height, value text colour
 * Settings VALUE_GROUP_HEIGHT / VALUE_TEXT_COLOR (printed as variables in the page head).
 * :not(#sbfg-x) only raises specificity above the earlier !important rules. */
.sbffc-root:not(#sbfg-x) .sbffc-group-header-full > .sbffc-group-toggle-button {
    height: auto !important;
    min-height: var(--sbfg-group-h, 36px) !important;
    margin: 4px 0 3px !important;
    padding-block: 0 !important;
}
.sbffc-root:not(#sbfg-x) .sbffc-group-header-full .sbffc-group-toggle-content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.sbffc-root:not(#sbfg-x) .sbffc-group-header-full .sbffc-group-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}
.sbffc-root:not(#sbfg-x) .sbffc-feature-value-cell,
.sbffc-root:not(#sbfg-x) .sbffc-feature-value-content,
.sbffc-root:not(#sbfg-x) .kfa-single-value-source,
.sbffc-root:not(#sbfg-x) .sbffc-value-chip {
    color: var(--sbfg-value-color, #1f2937) !important;
}