/* 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.
   Never shrunk (owner 2026-10-15, GATE 2: "don't shrink"): the tag is flex 0 0 auto and nothing scales it. When a row is
   short, the capacity chip beside it gives way and ends in an ellipsis; the row's overflow:hidden is the backstop. */

.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 tag keeps its size; when the row is short the chip gives way and its own
   ellipsis shows ("256 G…" - showcase-card.css: nowrap, overflow hidden, text-overflow ellipsis). */
.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: 0 1 auto;
    min-width: 0;
}
/* The backstop (ti2 M8): a tagged row never draws past its own box onto the card's edge. It cuts nothing while the
   chip can give way; only a card too narrow for the tag alone would lose the tag's end. */
.mainpage-v2 .showcase-card__tagrow:has(> .preowned-tag) {
    overflow: hidden;
}
@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;
}
/* The chips give way to the tag (owner 2026-10-15, GATE 2: the tag never shrinks): the list may go below its widest
   chip, and a chip wider than the list ends in an ellipsis (the rule below). The block's own overflow:hidden
   (css/custome.css) stays the backstop. */
.Shop .card-product-storage.has-preowned-tag:not(.card-product-storage-seller) .storage-container {
    flex: 0 1 auto;
    width: auto !important;
    min-width: 0;
}
/* A capacity chip in a row that holds the tag (Taqqsit block and seller card): never wider than its list, cut with an
   ellipsis. A flex box cannot ellipsise its own text, so the chip becomes a block here, centred by its line height
   (16px tall, 1px border: 14px). !important because Views/Shop/Index.cshtml pins every chip with !important
   (display:inline-flex, flex:0 0 auto, max-width:none, line-height:1); these selectors are more specific. Untagged
   cards keep their chips exactly as before. Two rules, not one list: a browser without :has() drops only the seller's. */
.Shop .card-product-storage.has-preowned-tag:not(.card-product-storage-seller) .storage-container > li.mainStorage {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 14px !important;
}
.Shop .card-product-storage-seller .storage-container:has(> li.preowned-tag-item) > li.mainStorage {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 14px !important;
}
.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.
   Chip + tag stay on ONE line (ti2 M8). The list may shrink beside the price (min-width 0); the tag keeps its size
   and the chip gives way with an ellipsis (owner 2026-10-15, GATE 2 - the rule above); overflow:hidden is the
   backstop. 4px between chip and tag, as in the Taqqsit block (every chip carries margin:0 !important on the shop
   page). Start-aligned: site.css centres .storage-container, and a centred line that overflows spills off both
   sides. Only a list that holds a tag; an untagged seller card is today's. */
.Shop .card-product-storage-seller .storage-container:has(> li.preowned-tag-item) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.Shop .card-product-storage-seller .storage-container > li.preowned-tag-item {
    display: inline-flex;
    flex: 0 0 auto;
    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%;
    overflow: hidden;               /* the backstop: the tag alone never draws past the card */
}

/* ---- Shop grid, Taqqsit card (shop.js templateV2) since 2026-10-17: ONE capacity chip + the tag, like the home card's
   chip row (owner ~21:40: "storaeg ui to be same the one in hoome page show 1 chip is enough and the pree owned or
   + pre owned badge next to it if needed"). The chip copies .showcase-card__tag (showcase-card.css: the tag wash, r4,
   9px sides, 21 tall, 11px / 600; 23 tall / 12px from 640px) and the tag copies the home row's (21 / 23 tall). One line:
   the tag never shrinks, a short row cuts the chip with an ellipsis, overflow:hidden is the backstop. The chip's value
   reads left to right (dir="ltr" on the element). */
/* The block drops the 2-row height of the chip list (css/custome.css: height 38px !important, Views/Shop/Index.cshtml: 38px)
   to the one row - !important, or custome.css's wins; this selector is more specific. shop.css keeps its min-height 25px
   !important, so every Taqqsit card's block is the same height and the cards still line up. */
.Shop .card-grid-inner .card-product-storage.card-product-storage-one {
    height: auto !important;
    min-height: 0;
}
.Shop .card-product-storage-one .card-storage-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    height: 21px;
    min-width: 0;
    overflow: hidden;
}
.Shop .card-product-storage-one .card-storage-chip {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 21px;
    padding: 0 9px;
    border-radius: 4px;
    background: #D8E8FF;
    color: #1D4ED8 !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 21px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    unicode-bidi: isolate;
}
.Shop .card-product-storage-one .card-storage-row > .preowned-tag {
    flex: 0 0 auto;
    height: 21px;
    padding: 0 7px;
    font-size: 11px;
}
@media (min-width: 640px) {
    .Shop .card-product-storage-one .card-storage-row,
    .Shop .card-product-storage-one .card-storage-chip,
    .Shop .card-product-storage-one .card-storage-row > .preowned-tag { height: 23px; }
    .Shop .card-product-storage-one .card-storage-chip { font-size: 12px; line-height: 23px; }
    .Shop .card-product-storage-one .card-storage-row > .preowned-tag { font-size: 12px; }
}