/* Native Magento tiers: simple, grouped, bundle and product cards. */
#maincontent .tier-price-container {
    padding-block: 0;
    margin-block: .75rem;
}

#maincontent .prices-tier {
    display: grid;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    margin: .5rem 0;
    padding: 0;
    list-style: none;
    text-align: start;
    font-size: var(--kowal-tier-font-size, 14px);
    line-height: 1.5;
    color: var(--kowal-tier-text-color, #14532d);
}

#maincontent .prices-tier > .item {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: var(--kowal-tier-padding-vertical, 10px) var(--kowal-tier-padding-horizontal, 14px);
    border: var(--kowal-tier-border-width, 1px) solid var(--kowal-tier-border-color, #86c49a);
    border-radius: var(--kowal-tier-border-radius, 6px);
    background: var(--kowal-tier-background-color, #f0fdf4);
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow-wrap: anywhere;
    box-shadow: none;
}

#maincontent .prices-tier :is(.price-container, .price-wrapper, .price) {
    display: inline;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

#maincontent .prices-tier .price {
    font-weight: 700;
    white-space: nowrap;
}

#maincontent .prices-tier .benefit {
    color: inherit;
    font-weight: 600;
}

/* Keep tiers beneath their grouped item, with quantity beside the name. */
#maincontent .product-grouped-options > div:has(.prices-tier) {
    flex-wrap: wrap;
    row-gap: .5rem;
}

#maincontent .product-grouped-options > div:has(.prices-tier) > label {
    flex: 1 1 0%;
    min-width: 0;
}

#maincontent .product-grouped-options > div:has(.prices-tier) > div:has(.prices-tier) {
    flex: 0 0 100%;
    min-width: 0;
    padding-top: 0;
}