/**
 * RecodarServices_LiveSearchUnitSuiteAdapter - base price inside the panel.
 *
 * Only what the panel needs; the colours and the type are UnitSuite's own, so
 * a shop that restyles the base price restyles it here too.
 *
 * Copyright (c) recodar Services LLC
 */

.rcs-ls-unitprice {
    display: block;
    min-width: 0;
    /* One line, ever. The panel sizes every row from the tallest one, so a
       wrapped base price pushes all the rows below it down. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rcs-ls-unitprice[hidden] {
    display: none;
}

/* The box brings its own top margin for the product page; in a suggestion row
   the column gap already provides the spacing. */
.rcs-ls-unitprice .rcs-unitsuite,
.rcs-ls-unitprice .rcs-unitsuite-row {
    margin: 0;
    line-height: 1.3;
}

/* Every row on ONE line, side by side rather than stacked.
   The two-row presets carry the content in the first row and the base price in
   the second - hiding either loses half the statement, and stacking them makes
   the suggestion row taller than its thumbnail. Inline says both in the space
   of one line, and the container clips what does not fit. */
.rcs-ls-unitprice .rcs-unitsuite-row {
    display: inline-block;
    vertical-align: middle;
}

.rcs-ls-unitprice .rcs-unitsuite-row + .rcs-unitsuite-row {
    margin-left: .5em;
}

/* ------------------------------------------------ in the price column */

.rcs-ls-unitprice--at-price {
    margin-top: 2px;
    text-align: right;
}

/* The price column must not grow wide enough to squeeze the name out. */
.rcs-live-search__price:has(.rcs-ls-unitprice) {
    max-width: 46%;
}

/* ------------------------------------------------ under the article name */

.rcs-ls-unitprice--at-body {
    margin-top: 1px;
}

/* ------------------------------------------------------------- pills */

.rcs-ls-unitprice--soft .rcs-unitsuite-row,
.rcs-ls-unitprice--solid .rcs-unitsuite-row,
.rcs-ls-unitprice--outline .rcs-unitsuite-row {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    max-width: 100%;
    vertical-align: middle;
}

/* One colour drives all three pills: the dedicated pill colour if the shop set
   one, otherwise the base-price colour it already picked. colour-mix derives
   the tint and the border from it, so there is nothing else to keep in step.
   A browser without colour-mix falls back to the plain colour, which is
   legible on every background a panel has. */
.rcs-ls-unitprice--soft .rcs-unitsuite-row {
    background: color-mix(in srgb, var(--rcs-us-badge, var(--rcs-us-value, #585858)) 12%, transparent);
    color: var(--rcs-us-badge, var(--rcs-us-value, #585858));
}

.rcs-ls-unitprice--solid .rcs-unitsuite-row {
    background: var(--rcs-us-badge, var(--rcs-us-value, #585858));
    color: #fff;
}

.rcs-ls-unitprice--solid .rcs-unitsuite-label,
.rcs-ls-unitprice--solid .rcs-unitsuite-value {
    color: inherit;
}

.rcs-ls-unitprice--outline .rcs-unitsuite-row {
    border: 1px solid color-mix(in srgb, var(--rcs-us-badge, var(--rcs-us-value, #585858)) 45%, transparent);
    color: var(--rcs-us-badge, var(--rcs-us-value, #585858));
}

/* A pill in the price column sits flush with the price above it. */
.rcs-ls-unitprice--at-price.rcs-ls-unitprice--soft,
.rcs-ls-unitprice--at-price.rcs-ls-unitprice--solid,
.rcs-ls-unitprice--at-price.rcs-ls-unitprice--outline {
    margin-top: 3px;
}

/* ------------------------------------------------ crowded rows */

/* Anything the theme adds to the left column keeps its own line; the base price
   never joins it, so a row with badges does not silently become two lines of
   mixed meaning. */
.rcs-ls-unitprice--at-body {
    clear: both;
}

@media (max-width: 480px) {
    /* On a phone the price column is the first thing to run out of room. */
    .rcs-live-search__price:has(.rcs-ls-unitprice) {
        max-width: 40%;
    }

    .rcs-ls-unitprice--soft .rcs-unitsuite-row,
    .rcs-ls-unitprice--solid .rcs-unitsuite-row,
    .rcs-ls-unitprice--outline .rcs-unitsuite-row {
        padding: 1px 6px;
        font-size: 10px;
    }
}