/*  CHANGING A CART LINE'S VARIANT (cart-variant.js), on the cart page's lines - the desktop's (.tc-cd-item) and the phone's
    (.tc-oc-item) alike - and in the phone's cart over-page, which every page renders: the chip beside a value that opens
    the product page's window ("۴ رنگ ›") - the store's accent on a tenth of itself, as the product page's side panel
    draws it - and, in both, names in the Latin-digit face.  */

:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cv-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    height: 26px;
    margin-inline-start: 6px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ryan-primary, #EF4056) 10%, transparent);
    color: var(--ryan-primary, #EF4056);
    font: inherit;
    font-family: yekanbakh, IRANYekanX, tahoma, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cv-chip:hover {
    background: color-mix(in srgb, var(--ryan-primary, #EF4056) 18%, transparent);
}

:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cv-chip:focus-visible {
    outline: 2px solid var(--ryan-primary, #EF4056);
    outline-offset: 2px;
}

:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cv-chip svg {
    flex: none;
    width: 12px !important;
    height: 12px !important;
    color: currentColor !important;
}

/* until the window's own count is known */
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cv-chip[data-tc-cv-pending] {
    visibility: hidden;
}

/* a phone's line: the chip sits on the value's row */
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-oc-item .tc-cv-chip {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}

/* NAMES CARRY LATIN DIGITS (the store's rule - the order page's font-en, breadcrumb.less): the product's name and its
   chosen values; prices keep the Persian digits */
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cd-item__title,
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-cd-item__fact > span:not(.tc-cd-item__swatch),
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-oc-item__title,
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-oc-item__fact-text,
:is(body.page-cart, .vp-over-page[vp-id="cart"]) .tc-gift__name {
    font-family: yekanbakhen, IRANYekanX, tahoma, sans-serif;
}