/* The card "Pre-owned" tag (lane B6, 2026-10-15) - the owner's 10-14 FINAL design, the app's twin
   (EndUser-Mobile lib/features/main/shared/widgets/preowned_tag.dart; mock:
   EndUser-Mobile/design-handoff/preowned-tag-listing-2026-10-14.html .cond.also / .cond.only):
     .preowned-tag--plus  "+ Pre-owned"  white, 1px #BCD0F7 ring, #1D4ED8 text  (new AND pre-owned units)
     .preowned-tag--only  "Pre-owned"    solid #1D4ED8, white text              (pre-owned units only)
   20px tall, r4, 11px / 600, 7px sides, one line, beside the capacity. The colours are the design's fixed tokens
   (never themed). Markup: preowned-tag.js preownedTagHtml (shop grid, favourites) and
   Views/Shared/_PreownedTag.cshtml (home featured card) - the same classes.
   Colours carry !important because the card styles this sits in paint their own text with !important. */

.preowned-tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 20px;
    padding: 0 7px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: none;
}

/* "+ Pre-owned": the product is new and ALSO pre-owned - light, so the capacity stays the first read. */
.preowned-tag.preowned-tag--plus {
    background: #FFFFFF !important;
    color: #1D4ED8 !important;
    box-shadow: inset 0 0 0 1px #BCD0F7 !important;
}

/* "Pre-owned": only pre-owned units - solid, the card's price is the pre-owned unit's. */
.preowned-tag.preowned-tag--only {
    background: #1D4ED8 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px #1D4ED8 !important;
}

/* ---- Home featured card (Views/Home/components/_ShowcaseCard.cshtml): after the variant chip, in its 21px row
   (23px from 640px, like the chip). The chip stops ellipsising when a tag shares its row: the whole row is
   scaled down instead (preowned-tag.js fitPreownedTagRows), so "256 GB" is never cut to "25…". */
.mainpage-v2 .showcase-card__tagrow > .preowned-tag {
    height: 21px;
    margin-inline-start: 4px;
}
.mainpage-v2 .showcase-card__tagrow > .preowned-tag:first-child {
    margin-inline-start: 0;
}
.mainpage-v2 .showcase-card__tagrow:has(> .preowned-tag) > .showcase-card__tag {
    flex-shrink: 0;
    max-width: none;
}
@media (min-width: 640px) {
    .mainpage-v2 .showcase-card__tagrow > .preowned-tag {
        height: 23px;
        font-size: 12px;
    }
}

/* ---- Shop grid, Taqqsit card (shop.js templateV2): the capacity chips keep their own 2-row block and the tag
   stands at the end of the first row, never wrapping and never clipped by the chips' "+N more" logic (which
   measures the chips inside .storage-container only). The tag takes the chips' metrics (16px, 9px). */
.Shop .card-product-storage.has-preowned-tag:not(.card-product-storage-seller) {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 4px;
}
.Shop .card-product-storage.has-preowned-tag:not(.card-product-storage-seller) .storage-container {
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
}
.Shop .card-product-storage .preowned-tag,
.Shop .card-product-storage-seller .preowned-tag {
    height: 16px;
    padding: 0 6px;
    font-size: 9px;
}

/* ---- Shop grid, seller card: the tag is the item after the one capacity chip. */
.Shop .card-product-storage-seller .storage-container > li.preowned-tag-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* ---- Favourites (myfavorite.js template): the card shows no capacity (its spec line, .nameDataContainer, is
   display:none site-wide - css/custome.css), so the tag has its own one-line row right under the name, centred
   like the name (.itemName is a centred flex row). Only a card WITH a tag draws the row; the price block is
   pinned to the card's bottom (myfavorite.css), so the prices of a row stay level. */
.preowned-tag-row.preowned-tag-row--fav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin: 0;                      /* the name above keeps its 10px (mb-10) */
    min-width: 0;
    max-width: 100%;
}