/* ==========================================================================
   The brands page (Views/Catalog/ManufacturerAll.cshtml, brands.js)
   --------------------------------------------------------------------------
   One card for every brand (_BrandCard.cshtml), one size wherever it stands: the logo in a box of one height, the
   name on one line, its other spelling on the next (kept even when empty), the products in stock - so a row of
   them never goes ragged, the old page's last row stretched two logos across the screen. The columns are counted,
   not fitted: the popular and new rows use the same ones as «همه برندها», so their cards are as wide as its cards.
   The search field and the letters stay under the site's header (#vp-header, sticky) as the page scrolls; the
   script tells the bar where the header ends (--tc-brands-top).
   The brand sheet comes up from the bottom on a phone and in from the left on a desktop.
   ========================================================================== */
.tc-brands {
    --tc-brands-cols: 8;
    --tc-brands-gap: 16px;
    --tc-brands-line: #ECEDEF;
    --tc-brands-ink: #292D32;
    --tc-brands-mute: #81858B;
    --tc-brands-soft: #F5F6F8;
    --tc-brands-ok: #1A7F3C;
    --tc-brands-brand: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    box-sizing: border-box;
    /* the width is the category page's .size, the frame the view sits in */
    margin: 0;
    padding: 8px 0 56px;
    font-family: IRANYekanX, tahoma, sans-serif;
    color: var(--tc-brands-ink);
    text-align: right;
}

.tc-brands *,
.tc-brands *::before,
.tc-brands *::after {
    box-sizing: border-box;
}

.tc-brands [hidden] {
    display: none !important;
}

.tc-brands svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the page's title and how many brands there are */
.tc-brands__hero {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 8px 0 16px;
}

.tc-brands__title {
    margin: 0;
    font-size: var(--tc-fs-page, 22px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.5;
    color: var(--tc-brands-ink);
}

.tc-brands__count {
    margin: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tc-brands-soft);
    font-size: var(--tc-fs-caption, 13px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 22px;
    color: var(--tc-brands-mute);
}

/* --------------------------------------------------------------------------
   The bar: the search field, then the letters
   -------------------------------------------------------------------------- */
/* the breadcrumb sits where a category's does: theme-plp.css takes the header's 32px and the crumb's 14px off the
   listing pages (page-category, page-manufacturer...), a sheet this page does not load */
body.tc-brands-page #vp-header {
    margin-bottom: 0;
}

body.tc-brands-page .km-section {
    padding-top: 0;
}

body.tc-brands-page .km-section > .size .navCategory {
    margin-top: 0;
}

/* under the header (#vp-header, sticky, z-index 15) and what opens from it - the categories menu and its shade -
   above the cards */
.tc-brands__bar {
    position: sticky;
    top: var(--tc-brands-top, 0px);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 20px under the field on a desktop: at 10 the letters' badges sat against it */
    gap: 20px 16px;
    margin: 0 0 8px;
    padding: 12px 0;
    /* white from one edge of the screen to the other, not the page's width only, so the field never meets the
       white's edge: a shadow spread past the sides (it widens nothing a page can scroll to), cut to the bar's height */
    background: #FFFFFF;
    box-shadow: 0 0 0 100vmax #FFFFFF;
    clip-path: inset(0 -100vmax);
}

/* under the header: a hairline under it, as wide - the white raised by its spread so it ends at the bar's foot,
   the line's copy 1px lower */
.tc-brands__bar.is-stuck {
    box-shadow: 0 -100vmax 0 100vmax #FFFFFF, 0 calc(1px - 100vmax) 0 100vmax #E6E7EA;
    clip-path: inset(0 -100vmax -1px);
}

.tc-brands__search {
    position: relative;
    display: flex;
    flex: 0 0 360px;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--tc-brands-soft);
    transition: border-color .15s ease, background .15s ease;
}

.tc-brands__search:focus-within {
    border-color: rgba(var(--ryan-primary-rgb, 239, 64, 86), .55);
    background: #FFFFFF;
}

.tc-brands__search > svg {
    width: 20px;
    height: 20px;
    color: var(--tc-brands-mute);
}

.tc-brands__field {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    /* 16px: a smaller field makes an iPhone zoom the page when it takes the focus */
    font-size: 16px;
    color: var(--tc-brands-ink);
    -webkit-appearance: none;
    appearance: none;
}

.tc-brands__field::placeholder {
    font-size: var(--tc-fs-small, 14px);
    color: #A1A3A8;
}

.tc-brands__field::-webkit-search-cancel-button {
    display: none;
}

.tc-brands__clear {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 0 0 -6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #E0E0E2;
    color: #424750;
    cursor: pointer;
}

.tc-brands__clear svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

/* the letters, a line of their own under the field: the Persian alphabet, then A to Z; it scrolls sideways where
   it does not fit */
.tc-brands__index {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 2px;
    min-width: 0;
    /* room above the letters for their badges, which a line that scrolls sideways would otherwise cut */
    padding: 7px 6px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.tc-brands__index::-webkit-scrollbar {
    display: none;
}

.tc-brands__key {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 26px;
    height: 32px;
    padding: 0 4px;
    border-radius: 9px;
    font-family: IRANYekanXEn, IRANYekanX, tahoma, sans-serif;
    font-size: 14px;
    font-weight: var(--tc-fw-label, 600);
    line-height: 1;
    color: #424750;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.tc-brands__key:hover {
    background: var(--tc-brands-soft);
    color: var(--tc-brands-ink);
    text-decoration: none;
}

/* how many brands start with the letter: a small badge on its top left corner */
.tc-brands__kn {
    position: absolute;
    top: -6px;
    left: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border: 1.5px solid #FFFFFF;
    border-radius: 999px;
    background: #E8E9EC;
    font-family: IRANYekanX, tahoma, sans-serif;
    font-size: 9.5px;
    font-weight: var(--tc-fw-label, 600);
    line-height: 12px;
    color: #5B5F66;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

.tc-brands__key.is-on .tc-brands__kn {
    background: #FFFFFF;
    border-color: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    color: rgb(var(--ryan-primary-rgb, 239, 64, 86));
}

/* no brand starts with it */
.tc-brands__key.is-off,
.tc-brands__key.is-off:hover {
    background: none;
    color: #CDCFD3;
    cursor: default;
}

.tc-brands__sep {
    flex: none;
    width: 1px;
    height: 20px;
    margin: 0 8px;
    background: #E0E0E2;
}

.tc-brands__key.is-on,
.tc-brands__key.is-on:hover {
    background: var(--tc-brands-brand);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   The sections
   -------------------------------------------------------------------------- */
.tc-brands__sec {
    margin-top: 28px;
}

.tc-brands__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 14px;
}

.tc-brands__h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--tc-fs-section, 19px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.6;
    color: var(--tc-brands-ink);
}

.tc-brands__hicon {
    width: 22px;
    height: 22px;
}

.tc-brands__hicon--hot {
    color: #F2702B;
    fill: rgba(242, 112, 43, .16);
}

.tc-brands__hicon--new {
    color: #E7A400;
    fill: rgba(231, 164, 0, .18);
}

.tc-brands__note {
    font-size: var(--tc-fs-caption, 13px);
    color: var(--tc-brands-mute);
}

.tc-brands__found {
    margin: 4px 0 14px;
    font-size: var(--tc-fs-small, 14px);
    font-weight: var(--tc-fw-label, 600);
    color: #424750;
}

/* the grids: the popular and new rows use the very columns of the letters' grids */
.tc-brands__rail,
.tc-brands__grid {
    display: grid;
    grid-template-columns: repeat(var(--tc-brands-cols), minmax(0, 1fr));
    gap: var(--tc-brands-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* a letter: a tile of the grid, a card's size, before its brands - the letter large, how many brands it has */
.tc-brands__ltile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(var(--ryan-primary-rgb, 239, 64, 86), .06);
    scroll-margin-top: calc(var(--tc-brands-top, 0px) + 80px);
}

.tc-brands__lchar {
    font-family: IRANYekanXEn, IRANYekanX, tahoma, sans-serif;
    font-size: 40px;
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.2;
    color: var(--tc-brands-brand);
}

.tc-brands__ln {
    font-size: var(--tc-fs-caption, 13px);
    color: rgba(var(--ryan-primary-rgb, 239, 64, 86), .8);
}

/* nothing found */
.tc-brands__empty {
    padding: 48px 16px;
    text-align: center;
}

.tc-brands__empty svg {
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 50%;
    background: var(--tc-brands-soft);
    color: var(--tc-brands-mute);
    stroke-width: 1.6;
}

.tc-brands__empty-title {
    margin: 14px 0 4px;
    font-size: var(--tc-fs-h4, 15px);
    font-weight: var(--tc-fw-label, 600);
}

.tc-brands__empty-text {
    margin: 0;
    font-size: var(--tc-fs-small, 14px);
    color: var(--tc-brands-mute);
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */
.tc-bcard {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tc-brands-line, #ECEDEF);
    border-radius: 16px;
    background: #FFFFFF;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tc-bcard__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    /* the top 32px are the corners' («جدید», the categories button), clear of the logo */
    padding: 32px 10px 14px;
    border-radius: inherit;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.tc-bcard__link:hover,
.tc-bcard__link:focus {
    color: inherit;
    text-decoration: none;
}

.tc-bcard__link:focus-visible {
    outline: 2px solid var(--tc-brands-ink, #292D32);
    outline-offset: 2px;
}

/* the logo: the brands' logos are square, so is its box - two thirds of the card's width, the same in every card */
.tc-bcard__logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 66%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
}

/* the logo fills its box and is fitted inside it, whatever its shape: a percentage max-height does not hold in a
   grid cell, and a square logo stood out of the box over the name */
.tc-bcard__logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* a brand with no logo: its initial in a soft circle */
.tc-bcard__initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #F2F3F5;
    font-family: IRANYekanXEn, IRANYekanX, tahoma, sans-serif;
    font-size: 28px;
    font-weight: var(--tc-fw-title, 700);
    line-height: 1;
    color: #5B5F66;
}

.tc-bcard__name,
.tc-bcard__latin {
    display: block;
    width: 100%;
    overflow: hidden;
    font-family: IRANYekanXEn, IRANYekanX, tahoma, sans-serif;
}

.tc-bcard__latin {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* the name: two lines at most, then «...»; both lines are kept, so a short name's card is as tall */
.tc-bcard__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    height: 44px;
    margin-top: 12px;
    font-size: var(--tc-fs-small, 14px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 22px;
    color: var(--tc-brands-ink, #292D32);
    overflow-wrap: anywhere;
}

/* the other spelling: its line is kept when there is none, so every card is as tall */
.tc-bcard__latin {
    min-height: 18px;
    font-size: 12px;
    line-height: 18px;
    color: #9A9DA3;
}

.tc-bcard__stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: #EEF8F1;
    font-size: 11.5px;
    font-weight: var(--tc-fw-label, 600);
    line-height: 22px;
    color: var(--tc-brands-ok, #1A7F3C);
    white-space: nowrap;
}

.tc-bcard__stock.is-out {
    background: #F2F3F5;
    color: var(--tc-brands-mute, #81858B);
}

.tc-bcard__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22A05A;
}

.tc-bcard__tag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 7px;
    border-radius: 7px;
    background: rgba(var(--ryan-primary-rgb, 239, 64, 86), .1);
    font-size: 11px;
    font-weight: var(--tc-fw-title, 700);
    line-height: 20px;
    color: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    pointer-events: none;
}

/* the brand's categories: a round button in the card's corner */
.tc-bcard__more {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tc-brands-soft, #F5F6F8);
    color: #5B5F66;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

/* a finger needs more than the 30px it shows */
.tc-bcard__more::before {
    content: "";
    position: absolute;
    inset: -7px;
}

.tc-bcard__more svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
}

.tc-bcard__more:hover,
.tc-bcard__more:focus-visible {
    background: rgba(var(--ryan-primary-rgb, 239, 64, 86), .1);
    color: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    outline: 0;
}

@media (hover: hover) {
    .tc-bcard:hover {
        border-color: #DFE1E4;
        box-shadow: 0 8px 22px -10px rgba(16, 24, 40, .18);
        transform: translateY(-2px);
    }
}

/* --------------------------------------------------------------------------
   Widths
   -------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
    .tc-brands {
        --tc-brands-cols: 6;
    }
}

@media (max-width: 1023.98px) {
    .tc-brands {
        --tc-brands-cols: 5;
    }

    /* the popular and new rows on a phone or a tablet: one row, never more, that scrolls sideways out to the
       screen's edges, its cards as wide as the grid's; a fade at the far end says there is more */
    .tc-brands__rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        /* 100%: the row's own width inside its 12px gutters, the grid's below */
        grid-auto-columns: calc((100% - (var(--tc-brands-cols) - 1) * var(--tc-brands-gap)) / var(--tc-brands-cols));
        margin: 0 -12px;
        padding: 2px 12px 6px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tc-brands__rail::-webkit-scrollbar {
        display: none;
    }

    .tc-brands__rail.is-more {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
    }

    .tc-brands__bar {
        gap: 10px 16px;
    }

    .tc-brands__search {
        flex: 1 1 100%;
    }
}

@media (max-width: 767.98px) {
    .tc-brands {
        --tc-brands-cols: 4;
        --tc-brands-gap: 10px;
        /* .size keeps 8px off a phone's edges: 12 in all, where the category page's content starts */
        padding: 4px 4px 40px;
    }

    .tc-brands__hero {
        margin: 6px 0 10px;
    }

    .tc-brands__bar {
        margin: 0 -12px 4px;
        padding: 8px 12px;
        gap: 6px;
    }

    .tc-brands__search {
        height: 42px;
    }

    .tc-brands__key {
        min-width: 28px;
        height: 32px;
        font-size: 13.5px;
    }

    .tc-brands__sec {
        margin-top: 22px;
    }

    .tc-brands__head {
        margin-bottom: 12px;
    }

    .tc-brands__hicon {
        width: 20px;
        height: 20px;
    }

    .tc-brands__ltile {
        border-radius: 14px;
    }

    .tc-brands__lchar {
        font-size: 30px;
    }

    .tc-bcard {
        border-radius: 14px;
    }

    .tc-bcard__link {
        padding: 30px 6px 10px;
    }

    .tc-bcard__logo {
        width: 70%;
        border-radius: 10px;
    }

    .tc-bcard__initial {
        font-size: 22px;
    }

    .tc-bcard__name {
        height: 40px;
        margin-top: 10px;
        font-size: 12.5px;
        line-height: 20px;
    }

    .tc-bcard__latin {
        min-height: 16px;
        font-size: 11px;
        line-height: 16px;
    }

    .tc-bcard__stock {
        margin-top: 6px;
        padding: 0 6px;
        font-size: 10.5px;
        line-height: 20px;
    }

    .tc-bcard__tag {
        top: 6px;
        right: 6px;
        padding: 0 5px;
        font-size: 10px;
        line-height: 18px;
    }

    .tc-bcard__more {
        top: 6px;
        left: 6px;
        width: 26px;
        height: 26px;
    }

    .tc-bcard__more svg {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 479.98px) {
    .tc-brands {
        --tc-brands-cols: 3;
    }
}

/* --------------------------------------------------------------------------
   The brand sheet: from the bottom on a phone, from the left on a desktop
   -------------------------------------------------------------------------- */
html.tc-bsheet-lock,
html.tc-bsheet-lock body {
    overflow: hidden;
}

.tc-bsheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    direction: rtl;
    text-align: right;
    font-family: IRANYekanX, tahoma, sans-serif;
    color: #292D32;
}

.tc-bsheet[hidden] {
    display: none;
}

.tc-bsheet *,
.tc-bsheet *::before,
.tc-bsheet *::after {
    box-sizing: border-box;
}

.tc-bsheet svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tc-bsheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 12, .45);
    opacity: 0;
    transition: opacity .3s ease;
}

.tc-bsheet.is-open .tc-bsheet__scrim {
    opacity: 1;
}

.tc-bsheet__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: 100%;
    border-radius: 0 20px 20px 0;
    background: #FFFFFF;
    box-shadow: 0 0 40px rgba(16, 24, 40, .18);
    transform: translateX(-104%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.tc-bsheet.is-open .tc-bsheet__panel {
    transform: none;
}

.tc-bsheet__grab {
    display: none;
}

.tc-bsheet__x {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F5F6F8;
    color: #424750;
    cursor: pointer;
}

.tc-bsheet__x:hover {
    background: #ECEDEF;
}

.tc-bsheet__x svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.tc-bsheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 24px 32px;
}

/* the brand */
.tc-bsheet__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 44px;
}

.tc-bsheet__logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid #ECEDEF;
    border-radius: 16px;
    background: #FFFFFF;
    overflow: hidden;
}

.tc-bsheet__logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.tc-bsheet__logo .tc-bcard__initial {
    border-radius: 0;
}

.tc-bsheet__who {
    min-width: 0;
}

.tc-bsheet__name {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: IRANYekanXEn, IRANYekanX, tahoma, sans-serif;
    font-size: var(--tc-fs-h2, 17px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.6;
}

.tc-bsheet__latin {
    margin: 0;
    font-family: IRANYekanXEn, IRANYekanX, tahoma, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #9A9DA3;
    text-align: right;
}

.tc-bsheet__stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin: 4px 0 0;
    font-size: var(--tc-fs-caption, 13px);
    font-weight: var(--tc-fw-label, 600);
    line-height: 20px;
    color: #1A7F3C;
}

.tc-bsheet__of {
    font-weight: var(--tc-fw-text, 400);
    color: #81858B;
}

/* the way to every product of the brand */
.tc-bsheet__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 50px;
    margin: 20px 0 24px;
    padding: 0 18px;
    border-radius: 14px;
    background: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    font-size: var(--tc-fs-body, 15px);
    font-weight: var(--tc-fw-label, 600);
    color: #FFFFFF;
    text-decoration: none;
}

.tc-bsheet__all:hover,
.tc-bsheet__all:focus {
    color: #FFFFFF;
    text-decoration: none;
    filter: brightness(.95);
}

.tc-bsheet__all span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-bsheet__all svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.tc-bsheet__label {
    margin: 0 0 12px;
    font-size: var(--tc-fs-h4, 15px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.6;
}

/* a top category, the ones under it as chips */
.tc-bsheet__group {
    margin-bottom: 10px;
    padding: 2px 14px 12px;
    border: 1px solid #ECEDEF;
    border-radius: 14px;
}

.tc-bsheet__group:has(> .tc-bsheet__top:only-child) {
    padding-bottom: 2px;
}

.tc-bsheet__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: #292D32;
    text-decoration: none;
}

.tc-bsheet__top:hover,
.tc-bsheet__top:focus {
    color: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    text-decoration: none;
}

.tc-bsheet__top-name {
    flex: 1;
    min-width: 0;
    font-size: var(--tc-fs-body, 15px);
    font-weight: var(--tc-fw-label, 600);
}

.tc-bsheet__n {
    font-size: var(--tc-fs-caption, 13px);
    color: #81858B;
    white-space: nowrap;
}

.tc-bsheet__top svg {
    width: 16px;
    height: 16px;
    color: #A1A3A8;
}

.tc-bsheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-bsheet__chips li {
    margin: 0;
    padding: 0;
}

.tc-bsheet__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    background: #F5F6F8;
    font-size: var(--tc-fs-small, 14px);
    font-weight: 500;
    color: #292D32;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.tc-bsheet__chip:hover,
.tc-bsheet__chip:focus {
    background: rgba(var(--ryan-primary-rgb, 239, 64, 86), .1);
    color: rgb(var(--ryan-primary-rgb, 239, 64, 86));
    text-decoration: none;
}

.tc-bsheet__chip-n {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 11.5px;
    font-weight: var(--tc-fw-label, 600);
    line-height: 22px;
    color: #81858B;
    text-align: center;
}

/* waiting for the categories, and when they could not be read */
.tc-bsheet__sk {
    display: block;
    border-radius: 10px;
    background: linear-gradient(90deg, #F2F3F5 0%, #F8F9FA 50%, #F2F3F5 100%);
    background-size: 200% 100%;
    animation: tc-bsheet-sk 1.2s ease-in-out infinite;
}

@keyframes tc-bsheet-sk {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.tc-bsheet__fail {
    padding: 24px 0;
    text-align: center;
    font-size: var(--tc-fs-small, 14px);
    color: #81858B;
}

.tc-bsheet__retry {
    margin-top: 12px;
    padding: 0 18px;
    height: 40px;
    border: 1px solid #E0E0E2;
    border-radius: 12px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: var(--tc-fs-small, 14px);
    font-weight: var(--tc-fw-label, 600);
    color: #292D32;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .tc-bsheet__panel {
        top: auto;
        right: 0;
        width: auto;
        max-height: 84vh;
        max-height: 84dvh;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(104%);
    }

    .tc-bsheet__panel.is-dragging {
        transition: none;
    }

    .tc-bsheet__grab {
        display: flex;
        flex: none;
        justify-content: center;
        padding: 10px 0 4px;
        touch-action: none;
    }

    .tc-bsheet__grab span {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #E0E0E2;
    }

    .tc-bsheet__x {
        top: 14px;
    }

    .tc-bsheet__body {
        padding: 8px 16px 24px;
    }

    .tc-bsheet__logo {
        width: 60px;
        height: 60px;
        border-radius: 14px;
    }

    .tc-bsheet__all {
        height: 48px;
        margin: 16px 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-bcard,
    .tc-bsheet__scrim,
    .tc-bsheet__panel {
        transition-duration: 1ms;
    }

    .tc-bsheet__sk {
        animation: none;
    }
}