/* ═══════════════════════════════════════════════
   Bricks Global Design Tokens
   These fall back safely when a site does not define Bricks variables.
═══════════════════════════════════════════════ */
.bpcw-compare-btn,
.bpcw-remove-compare-btn,
.bpcw-clear-compare-btn,
.bpcw-bottom-bar {
    --bpcw-theme-primary: var(--bpcw-primary-color, var(--bricks-color-primary, var(--color-primary, var(--primary, #111827))));
    --bpcw-theme-secondary: var(--bpcw-secondary-color, var(--bricks-color-secondary, var(--color-secondary, var(--secondary, #ffffff))));
    --bpcw-theme-light: var(--bpcw-light-color, var(--bricks-color-light, var(--bricks-text-light, var(--color-light, #ffffff))));
    --bpcw-theme-dark: var(--bpcw-dark-color, var(--bricks-color-dark, var(--bricks-text-dark, var(--color-dark, #111827))));
    --bpcw-theme-border: var(--bpcw-border-color, var(--bricks-border-color, rgba(255, 255, 255, .22)));
    --bpcw-theme-font: var(--bpcw-font-family, var(--font-body, inherit));
    font-family: var(--bpcw-theme-font);
}

/* ═══════════════════════════════════════════════
   Compare Button
═══════════════════════════════════════════════ */
.bpcw-compare-btn,
.bpcw-remove-compare-btn,
.bpcw-clear-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    transition: 0.2s ease;
}

.bpcw-compare-btn__icon {
    display: inline-flex;
    line-height: 1;
}

.bpcw-compare-btn.is-active {
    background: var(--bpcw-theme-primary);
    border-color: var(--bpcw-theme-primary);
    color: var(--bpcw-theme-light);
}

.bpcw-compare-btn.is-disabled-by-limit:not(.is-active) {
    opacity: .55;
    cursor: not-allowed;
}

.bpcw-clear-compare-btn {
    background: var(--bpcw-theme-primary);
    border-color: var(--bpcw-theme-primary);
    color: var(--bpcw-theme-light);
}

/* ═══════════════════════════════════════════════
   Bottom Bar
═══════════════════════════════════════════════ */
.bpcw-bottom-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 9999;
    width: min(92vw, 560px);
    transform: translateX(-50%);
}

.bpcw-bottom-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-color: color-mix(in srgb, var(--bpcw-theme-light) 18%, transparent);
    border-radius: 999px;
    background: var(--bpcw-theme-primary);
    color: var(--bpcw-theme-light);
    box-shadow: 0 18px 50px rgba(17, 24, 39, .28);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--bpcw-theme-primary) 30%, transparent);
}

.bpcw-bottom-bar__count {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: var(--bpcw-bottom-bar-font-size, var(--text-s, 14px));
    font-weight: var(--bpcw-bottom-bar-font-weight, 500);
    line-height: 1.3;
}

.bpcw-bottom-bar__count-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bpcw-bottom-bar__notice {
    display: block;
    margin: 0;
    font-size: var(--bpcw-bottom-bar-note-size, var(--text-xs, 12px));
    font-weight: 500;
    line-height: 1.25;
    opacity: .82;
}

.bpcw-bottom-bar__count strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bpcw-theme-light);
    color: var(--bpcw-theme-primary);
    font-size: var(--bpcw-bottom-bar-count-size, var(--text-s, 14px));
    font-weight: 700;
}

.bpcw-bottom-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bpcw-bottom-bar__clear,
.bpcw-bottom-bar__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: var(--bpcw-theme-font);
    font-size: var(--bpcw-bottom-bar-button-size, var(--text-xs, 13px));
    font-weight: var(--bpcw-bottom-bar-button-weight, 700);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.bpcw-bottom-bar__clear {
    border: 1px solid rgba(255, 255, 255, .22);
    border-color: color-mix(in srgb, var(--bpcw-theme-light) 36%, transparent);
    background: transparent;
    color: var(--bpcw-theme-light);
}

.bpcw-bottom-bar__view {
    border: 1px solid var(--bpcw-theme-light);
    background: var(--bpcw-theme-light);
    color: var(--bpcw-theme-primary);
}

.bpcw-bottom-bar__view:hover {
    color: var(--bpcw-theme-primary);
}

@media (max-width: 520px) {
    .bpcw-bottom-bar__inner {
        align-items: stretch;
        flex-direction: column;
        border-radius: 18px;
    }

    .bpcw-bottom-bar__count {
        align-items: flex-start;
    }

    .bpcw-bottom-bar__actions {
        width: 100%;
    }

    .bpcw-bottom-bar__clear,
    .bpcw-bottom-bar__view {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════
   Remove Button
═══════════════════════════════════════════════ */
.bpcw-remove-compare-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--bpcw-theme-light);
    color: var(--bpcw-theme-primary);
}

.bpcw-remove-compare-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.bpcw-remove-compare-btn__icon {
    display: inline-flex;
    line-height: 1;
    font-size: 18px;
}

.bpcw-remove-compare-btn__label {
    display: inline-flex;
}

.bpcw-remove-compare-btn.is-removing {
    opacity: .55;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   Compare Button Icon
═══════════════════════════════════════════════ */
.bpcw-compare-btn {
    gap: var(--bpcw-icon-gap, 8px);
}

.bpcw-compare-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bpcw-icon-width, var(--bpcw-icon-size, 1em));
    height: var(--bpcw-icon-height, var(--bpcw-icon-size, 1em));
    font-size: var(--bpcw-icon-size, 1em);
    color: var(--bpcw-icon-color, currentColor);
    line-height: 1;
}

.bpcw-compare-btn__icon svg {
    width: var(--bpcw-icon-width, var(--bpcw-icon-size, 1em));
    height: var(--bpcw-icon-height, var(--bpcw-icon-size, 1em));
    display: block;
    color: var(--bpcw-icon-color, currentColor);
}

.bpcw-compare-btn__icon svg,
.bpcw-compare-btn__icon svg * {
    fill: currentColor;
    stroke: currentColor;
}


/* ═══════════════════════════════════════════════
   COMPARE PRESETS — Design Tokens
═══════════════════════════════════════════════ */
.bpcw-compare-presets {
    --bpcw-preset-accent:  var(--bricks-color-primary, var(--color-primary, var(--primary, #0d0d0d)));
    --bpcw-preset-bg:      var(--bricks-bg-light, var(--color-light, #f2f1ed));
    --bpcw-preset-card:    var(--bricks-color-light, #ffffff);
    --bpcw-preset-text:    var(--bricks-text-dark, var(--bricks-color-dark, #0d0d0d));
    --bpcw-preset-muted:   var(--bricks-text-medium, #767676);
    --bpcw-preset-border:  var(--bricks-border-color, #e4e3de);
    --bpcw-preset-radius:  14px;
    --bpcw-preset-gap:     14px;
    width: 100%;
    color: var(--bpcw-preset-text);
}


/* ── Header ── */
.bpcw-preset-header {
    margin-bottom: 30px;
}

.bpcw-preset-header span {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 5px 12px;
    border: 1px solid var(--bpcw-preset-border);
    border-radius: 999px;
    background: var(--bpcw-preset-card);
    color: var(--bpcw-preset-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bpcw-preset-header h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 3.8vw, 40px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -.035em;
}

.bpcw-preset-header p {
    max-width: 580px;
    margin: 0;
    color: var(--bpcw-preset-muted);
    font-size: 15px;
    line-height: 1.7;
}


/* ── Shared elements ── */
.bpcw-preset-empty {
    padding: 48px 24px;
    border: 1px dashed var(--bpcw-preset-border);
    border-radius: var(--bpcw-preset-radius);
    background: var(--bpcw-preset-bg);
    color: var(--bpcw-preset-muted);
    text-align: center;
    font-size: 14px;
}

.bpcw-preset-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.bpcw-preset-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--bpcw-preset-accent);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: opacity .15s ease;
}

.bpcw-preset-action:hover {
    color: var(--bpcw-button-color, #fff);
    opacity: .8;
}

.bpcw-preset-price {
    color: var(--bpcw-preset-text);
    font-weight: 800;
    font-size: 16px;
}

.bpcw-preset-price ins {
    text-decoration: none;
}


/* ════════════════════════════════════════════════════
   PRESET 1 — Cards Grid  (horizontal, wraps)
════════════════════════════════════════════════════ */

/*
 * minmax(min(45%, 180px), 1fr) guarantees at least 2 columns at
 * any container width:  45% < 180px only when width < 400px, so
 * the minimum track shrinks to keep two columns fitting.
 */
/*
 * IMPORTANT: use a descendant selector here.
 * The outer <section> gets class "bpcw-preset-cards" too (via PHP).
 * A plain .bpcw-preset-cards rule would make display:grid apply to the
 * section, turning the header + inner div into side-by-side grid items.
 * The descendant selector only matches the INNER div.
 */
.bpcw-compare-presets > .bpcw-preset-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(45%, 180px), 1fr));
    gap: var(--bpcw-preset-gap);
}

.bpcw-preset-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bpcw-preset-border);
    border-radius: var(--bpcw-preset-radius);
    background: var(--bpcw-preset-card);
    overflow: hidden;
    transition: box-shadow .22s ease, transform .22s ease;
}

.bpcw-preset-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, .09);
    transform: translateY(-3px);
}

/* Image area */
.bpcw-preset-card-image {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 24px;
    background: var(--bpcw-preset-bg);
}

.bpcw-preset-card-image img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    transition: transform .25s ease;
}

.bpcw-preset-card:hover .bpcw-preset-card-image img {
    transform: scale(1.06);
}

/* Card body */
.bpcw-preset-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    gap: 8px;
}

.bpcw-preset-card-body h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.bpcw-preset-card-body h3 a {
    color: inherit;
    text-decoration: none;
}

.bpcw-preset-card-body .bpcw-preset-price {
    font-size: 16px;
}

.bpcw-preset-card-body p {
    margin: 0;
    color: var(--bpcw-preset-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* Attributes list */
.bpcw-preset-card-body ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bpcw-preset-border);
}

.bpcw-preset-card-body li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bpcw-preset-border);
    font-size: 11px;
    color: var(--bpcw-preset-muted);
}

.bpcw-preset-card-body li strong {
    color: var(--bpcw-preset-text);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Full-width CTA for cards */
.bpcw-compare-presets .bpcw-preset-cards .bpcw-preset-action {
    width: 100%;
    margin-top: auto;
    border-radius: 8px;
    font-size: 12px;
    min-height: 38px;
}


/* ════════════════════════════════════════════════════
   PRESET 2 — Feature Matrix
════════════════════════════════════════════════════ */
.bpcw-preset-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--bpcw-preset-border);
    border-radius: var(--bpcw-preset-radius);
    background: var(--bpcw-preset-card);
    -webkit-overflow-scrolling: touch;
}

/* Same fix: outer section has .bpcw-preset-matrix too — scope to inner div */
.bpcw-compare-presets .bpcw-preset-matrix {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) repeat(var(--bpcw-columns), minmax(190px, 1fr));
    min-width: calc(150px + (190px * var(--bpcw-columns)));
}

/* All cells share dividers */
.bpcw-matrix-feature,
.bpcw-matrix-value,
.bpcw-matrix-product {
    border-right: 1px solid var(--bpcw-preset-border);
    border-bottom: 1px solid var(--bpcw-preset-border);
}

/* Sticky feature label column */
.bpcw-matrix-feature {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: var(--bpcw-preset-bg);
    color: var(--bpcw-preset-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Data value cells */
.bpcw-matrix-value {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--bpcw-preset-text);
    line-height: 1.5;
}

/* Product header cells */
.bpcw-matrix-product {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 18px;
    background: var(--bpcw-preset-card);
}

.bpcw-matrix-product img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--bpcw-preset-bg);
    padding: 8px;
}

.bpcw-matrix-product h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.bpcw-matrix-product .bpcw-preset-price {
    font-size: 15px;
}

/* Action row cells */
.bpcw-matrix-value .bpcw-preset-action {
    font-size: 12px;
    min-height: 36px;
    padding: 8px 14px;
}


/* Mobile card view for Preset 2 */
.bpcw-preset-matrix-mobile {
    display: none;
}

.bpcw-matrix-mobile-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bpcw-preset-border);
    border-radius: var(--bpcw-preset-radius);
    background: var(--bpcw-preset-card);
}

.bpcw-matrix-mobile-card__media {
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--bpcw-preset-bg);
}

.bpcw-matrix-mobile-card__media img {
    width: min(var(--bpcw-matrix-image-width), 100%);
    height: var(--bpcw-matrix-image-height);
    max-width: 100%;
    object-fit: var(--bpcw-matrix-object-fit);
    object-position: var(--bpcw-matrix-object-position);
    border-radius: 8px;
}

.bpcw-matrix-mobile-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--bpcw-matrix-cell-padding);
}

.bpcw-matrix-mobile-card h3 {
    margin: 0;
    line-height: 1.35;
}

.bpcw-matrix-mobile-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bpcw-preset-border);
}

.bpcw-matrix-mobile-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bpcw-preset-border);
}

.bpcw-matrix-mobile-list strong {
    min-width: 88px;
    color: var(--bpcw-preset-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bpcw-matrix-mobile-list span {
    color: var(--bpcw-preset-text);
    text-align: right;
    font-size: 13px;
    line-height: 1.45;
}

.bpcw-matrix-mobile-card .bpcw-preset-action {
    width: 100%;
    margin-top: auto;
}


/* ═══════════════════════════════════════════════
   Responsive
═══════════════════════════════════════════════ */

/* Editable Compare Preset Controls */
.bpcw-compare-presets {
    --bpcw-heading-size: clamp(28px, 4vw, 44px);
    --bpcw-product-title-size: 18px;
    --bpcw-price-size: 18px;
    --bpcw-body-size: 14px;
    --bpcw-label-size: 13px;
    --bpcw-title-weight: 700;
    --bpcw-button-bg: var(--bpcw-preset-accent);
    --bpcw-button-color: #ffffff;
    --bpcw-cards-columns: 3;
    --bpcw-cards-tablet-columns: 2;
    --bpcw-cards-mobile-columns: 1;
    --bpcw-cards-product-image-width: 170px;
    --bpcw-cards-product-image-height: 170px;
    --bpcw-cards-object-fit: contain;
    --bpcw-cards-object-position: center center;
    --bpcw-cards-padding: 20px;
    --bpcw-matrix-feature-width: 165px;
    --bpcw-matrix-product-width: 210px;
    --bpcw-matrix-cell-padding: 18px;
    --bpcw-matrix-image-width: 130px;
    --bpcw-matrix-image-height: 130px;
    --bpcw-matrix-object-fit: contain;
    --bpcw-matrix-object-position: center center;
    --bpcw-matrix-feature-bg: var(--bpcw-preset-bg);
}

.bpcw-preset-header h2 { font-size: var(--bpcw-heading-size); font-weight: var(--bpcw-title-weight); }
.bpcw-preset-header p { font-size: var(--bpcw-body-size); }
.bpcw-preset-card-body h3, .bpcw-preset-card-body h3 a, .bpcw-matrix-product h3, .bpcw-matrix-mobile-card h3 { font-size: var(--bpcw-product-title-size); font-weight: var(--bpcw-title-weight); }
.bpcw-preset-price, .bpcw-preset-price .amount { font-size: var(--bpcw-price-size); }
.bpcw-preset-card-body p, .bpcw-matrix-value, .bpcw-matrix-mobile-list span { font-size: var(--bpcw-body-size); }
.bpcw-preset-header span, .bpcw-preset-card-body li, .bpcw-preset-card-body li strong, .bpcw-matrix-feature, .bpcw-matrix-mobile-list strong { font-size: var(--bpcw-label-size); }
.bpcw-preset-action { background: var(--bpcw-button-bg) !important; color: var(--bpcw-button-color) !important; }

.bpcw-compare-presets > .bpcw-preset-cards { grid-template-columns: repeat(var(--bpcw-cards-columns), minmax(0, 1fr)) !important; }
.bpcw-preset-card-image img {
    width: var(--bpcw-cards-product-image-width, var(--bpcw-cards-image-size)) !important;
    height: var(--bpcw-cards-product-image-height, var(--bpcw-cards-image-size)) !important;
    object-fit: var(--bpcw-cards-object-fit) !important;
    object-position: var(--bpcw-cards-object-position) !important;
}
.bpcw-preset-card-body { padding: var(--bpcw-cards-padding) !important; }

.bpcw-preset-matrix-wrap > .bpcw-preset-matrix { grid-template-columns: minmax(var(--bpcw-matrix-feature-width), .8fr) repeat(var(--bpcw-columns), minmax(var(--bpcw-matrix-product-width), 1fr)) !important; min-width: calc(var(--bpcw-matrix-feature-width) + (var(--bpcw-matrix-product-width) * var(--bpcw-columns))) !important; }
.bpcw-matrix-feature, .bpcw-matrix-value, .bpcw-matrix-product { padding: var(--bpcw-matrix-cell-padding) !important; }
.bpcw-matrix-feature { background: var(--bpcw-matrix-feature-bg) !important; }
.bpcw-matrix-product img {
    width: var(--bpcw-matrix-image-width) !important;
    height: var(--bpcw-matrix-image-height) !important;
    object-fit: var(--bpcw-matrix-object-fit) !important;
    object-position: var(--bpcw-matrix-object-position) !important;
}


@media (max-width: 1024px) {
    .bpcw-preset-matrix-wrap > .bpcw-preset-matrix {
        grid-template-columns: minmax(var(--bpcw-matrix-feature-width), var(--bpcw-matrix-feature-width)) repeat(var(--bpcw-columns), minmax(var(--bpcw-matrix-product-width), 1fr)) !important;
        min-width: calc(var(--bpcw-matrix-feature-width) + (var(--bpcw-matrix-product-width) * var(--bpcw-columns))) !important;
    }

    .bpcw-matrix-feature,
    .bpcw-matrix-value,
    .bpcw-matrix-product {
        padding: max(12px, calc(var(--bpcw-matrix-cell-padding) * .75)) !important;
    }
}

@media (max-width: 900px) {
    .bpcw-compare-presets > .bpcw-preset-cards { grid-template-columns: repeat(var(--bpcw-cards-tablet-columns), minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
    .bpcw-preset-matrix-wrap {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .bpcw-preset-matrix-wrap > .bpcw-preset-matrix {
        grid-template-columns: minmax(var(--bpcw-matrix-feature-width), var(--bpcw-matrix-feature-width)) repeat(var(--bpcw-columns), minmax(var(--bpcw-matrix-product-width), 1fr)) !important;
        min-width: calc(var(--bpcw-matrix-feature-width) + (var(--bpcw-matrix-product-width) * var(--bpcw-columns))) !important;
    }

    .bpcw-matrix-feature {
        position: sticky;
        left: 0;
        z-index: 5;
        align-items: flex-start;
        width: var(--bpcw-matrix-feature-width);
        min-width: var(--bpcw-matrix-feature-width);
        overflow-wrap: anywhere;
        box-shadow: 8px 0 14px rgba(0, 0, 0, .06);
    }

    .bpcw-matrix-product,
    .bpcw-matrix-value {
        min-width: var(--bpcw-matrix-product-width);
    }

    .bpcw-matrix-product h3 {
        font-size: max(13px, calc(var(--bpcw-product-title-size) * .82));
    }

    .bpcw-preset-matrix-mobile {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .bpcw-compare-presets > .bpcw-preset-cards { grid-template-columns: repeat(var(--bpcw-cards-mobile-columns), minmax(0, 1fr)) !important; }
}

@media (max-width: 480px) {
    .bpcw-matrix-feature,
    .bpcw-matrix-product,
    .bpcw-matrix-value {
        padding: 10px !important;
    }

    .bpcw-matrix-feature {
        font-size: 10px;
    }
}