/* ==========================================================================
   Home product showcase, design v4 (Components/HomepageShowcase/Default.cshtml)
   --------------------------------------------------------------------------
   Measured on the 2x design at a 1440px content width: 252px cards 24px apart,
   a 252x300 photo with 16px corners, a 26px flag row above every photo (only the
   "amazing offer" card fills it, so all photos stay on one line), and a white
   48px round arrow half outside the row. Below 768px the cards narrow to 160px
   and the arrows give way to swiping.
   ========================================================================== */

.tc-showcase {
    --tc-sc-ink: #292D32;
    --tc-sc-muted: #757575;
    --tc-sc-link: #168FDF;
    --tc-sc-discount: #ED2E7E;
    --tc-sc-free: #00B31D;
    --tc-sc-alert: #ED303D;
    --tc-sc-amazing: #E6123D;
    --tc-sc-star: #FCBC3A;
    --tc-sc-old: #BCBCBC;
    --tc-sc-photo-bg: #F4F2F0;
    --tc-sc-card-w: 252px;
    --tc-sc-gap: 24px;
    /* The price block below is the product card's own (.tc-card__pricing and friends), so this
       card hands it the same tokens .tc-card gets - otherwise its rows have no height and no
       direction. These are the values of the ROW context (.tc-row .tc-card in product-card.css),
       the one the storefront's own product rows use: price on the inline-end, and the struck
       price with its percentage under it on the same edge. */
    --tc-ink: #2F2F2F;
    --tc-muted: #979797;
    --tc-accent: #ED2E7E;
    --tc-price-h: 26px;
    --tc-price-dir: row-reverse;
    --tc-oldprice-h: 20px;
    --tc-oldprice-align: flex-end;
    position: relative;
    margin: 48px 0;
    color: var(--tc-sc-ink);
    font-family: yekanbakh, tahoma, sans-serif;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tc-showcase__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.tc-showcase__title {
    margin: 0;
    /* a section's title on the type ladder (base.less), the phone's step below 960px */
    font-size: var(--tc-fs-section);
    font-weight: var(--tc-fw-title);
    line-height: 28px;
    color: var(--tc-sc-ink);
}

.tc-showcase__lead {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--tc-sc-muted);
}

.tc-showcase__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--tc-sc-link);
    text-decoration: none;
}

.tc-showcase__all:hover {
    color: var(--tc-sc-link);
    text-decoration: underline;
    text-underline-offset: 6px;
}

.tc-showcase__all svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Row + arrows
   -------------------------------------------------------------------------- */

.tc-showcase__viewport {
    position: relative;
}

.tc-showcase__row {
    overflow: hidden;
}

/* cut sideways only: nothing that hangs below a card (a swatch's ring) is cut off */
@supports (overflow: clip) {
    .tc-showcase__row {
        overflow-x: clip;
        overflow-y: visible;
    }
}

/* Swiper's own sheet (which declares this) is not loaded by the theme: without it the browser
   claims a sideways drag as a page pan and cancels the pointer after the first move, so the row
   and the photos would not follow the finger. Vertical page scrolling stays native. */
.tc-showcase__row,
.tc-sc-card__gallery {
    touch-action: pan-y;
}

.tc-showcase__row > .swiper-wrapper {
    display: flex;
    /* each card keeps its own height and the row is as tall as the tallest of them, wherever the
       row is scrolled: a card with an amazing offer (two lines more) never moves the section
       under the row up or down as it slides in and out of view */
    align-items: flex-start;
    box-sizing: content-box;
}

/* a touch screen: the browser's own sideways scroll (home-showcase.js, NATIVE) - momentum, no
   snapping, no scrollbar; a sideways swipe anywhere on a card, its photo too, moves the row */
.tc-showcase--native .tc-showcase__row,
.tc-showcase--native .tc-sc-card__gallery {
    touch-action: auto;
}

/* A sideways scroller clips vertically too (overflow-y cannot stay visible beside overflow-x
   auto), and on a card whose price line is the last thing in it the figure - nudged 4px down
   on phones (product-card.css) - ran 6px past the strip's bottom: the commas lost their tails
   and read as dots, the digits' feet were cut. 8px of room under the cards, given back by the
   margin so the section's spacing does not move. */
.tc-showcase--native .tc-showcase__row > .swiper-wrapper {
    gap: var(--tc-sc-gap);
    padding-bottom: 8px;
    margin-bottom: -8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tc-showcase--native .tc-showcase__row > .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.tc-showcase--native .tc-showcase__nav,
.tc-showcase--native .tc-sc-card__dots {
    display: none;
}

.tc-showcase__row .tc-sc-card {
    flex: 0 0 auto;
    width: var(--tc-sc-card-w);
}

/* before Swiper runs: the same layout from plain flex, so nothing jumps */
.tc-showcase__row:not(.swiper-initialized) > .swiper-wrapper {
    gap: var(--tc-sc-gap);
}

.tc-showcase__nav {
    position: absolute;
    /* on the photo's lower third, where the design puts it: flag row + 250px */
    top: 252px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--tc-sc-ink);
    box-shadow: 0 2px 10px rgba(41, 45, 50, 0.14);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tc-showcase__nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tc-showcase__nav:hover {
    transform: scale(1.06);
}

.tc-showcase__nav:focus-visible {
    outline: 2px solid var(--tc-sc-link);
    outline-offset: 2px;
}

/* RTL: "next" moves the row to the left. Half outside the row by design, but never past the
   window: where the row runs (nearly) to the window's edge, home-showcase.js pulls the button in
   through these two variables, since a button past the edge widens the page. */
.tc-showcase__nav--next {
    left: var(--tc-sc-nav-left, -24px);
}

.tc-showcase__nav--prev {
    right: var(--tc-sc-nav-right, -24px);
}

.tc-showcase__nav.swiper-button-disabled,
.tc-showcase__nav.swiper-button-lock {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.tc-sc-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* a row where no card has a flag (an amazing offer's ribbon, «فروش ویژه») keeps no empty strip
   over its photos: it read as 24px more between the row's title and its pictures. The ribbon is
   ProductRibbons' own <a class="ribbon-position"> beside the strip, not in it, so it counts too:
   without it a row of ribbons only lost the strip and each ribbon sat on its photo */
.tc-showcase__row:not(:has(.tc-sc-card__flag > *, .tc-sc-card > .ribbon-position)) .tc-sc-card__flag {
    display: none;
}

.tc-sc-card__flag {
    height: 26px;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tc-sc-amazing);
}

/* The photo frame has the store's product-card shape - 3:4, or 1:1 under the Square
   setting (the .tc-media-square class <body> carries), the same token the category
   cards follow - and the photo is contained, never cropped: a 3:4 catalogue fills the
   frame exactly, and a photo of any other shape is shown whole. (It was a fixed
   252:300 frame with the photo covering it, which cut the top and bottom off every
   3:4 photo and the sides off a 9:10 one.) */
.tc-sc-card {
    --tc-sc-media-ratio: 3 / 4;
}

.tc-media-square .tc-sc-card {
    --tc-sc-media-ratio: 1 / 1;
}

.tc-sc-card__media {
    position: relative;
    aspect-ratio: var(--tc-sc-media-ratio);
    border-radius: 16px;
    overflow: hidden;
    background: var(--tc-sc-photo-bg);
    /* Safari: clip the nested swiper to the rounded corners while it moves */
    isolation: isolate;
}

.tc-sc-card__gallery {
    height: 100%;
    overflow: hidden;
}

.tc-sc-card__gallery > .swiper-wrapper {
    display: flex;
    height: 100%;
}

.tc-sc-card__photo {
    flex: 0 0 100%;
    display: block;
    width: 100%;
    height: 100%;
}

.tc-sc-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.tc-sc-card__dots {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    gap: 3px;
    direction: ltr;
    /* a 4px dot is the design's size; the pad gives the finger something to hit */
    padding: 6px 4px;
    margin: -6px -4px;
}

.tc-sc-card__dots .swiper-pagination-bullet {
    display: block;
    width: 4px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.tc-sc-card__dots .swiper-pagination-bullet-active {
    background: var(--tc-sc-ink);
    box-shadow: 0 0 0 1px #FFFFFF;
}

/* The storefront's own quick-add control (QSM): a 35px white circle with a 1px 1px 6px shadow
   and a 21px artwork - measured on a live product card, so the two read as the same button. */
.tc-sc-card__cart {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.tc-sc-card__cart:active {
    transform: scale(0.94);
}

/* the real quick-add (QSM) and wholesale controls sit exactly where the round button sits, so a
   card with a QSM and a card with variants (the button opens the quick view) read as one row:
   same 35px circle, same corner. QSM draws its control 16px above its host's bottom edge
   (product-card.css 5), hence the host 16px lower than the button. */
.tc-sc-card__media .tc-sc-card__quickadd {
    inset-block-end: -4px;
    inset-inline-start: 12px;
}

.tc-sc-card__cart:focus-visible {
    outline: 2px solid var(--tc-sc-link);
    outline-offset: 2px;
}

.tc-sc-card__cart img {
    display: block;
    width: 21px;
    height: 21px;
    max-width: none;
}

.tc-sc-card__title {
    display: -webkit-box;
    height: 44px;
    margin-top: 16px;
    overflow: hidden;
    /* the name with Latin digits, as the product card's title (.tc-card__title): model names such
       as "FA2082WM-i5 13420HX" read in the English face; the price keeps the Persian digits */
    font-family: yekanbakhen, yekanbakh, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: var(--tc-sc-ink);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tc-sc-card__title:hover {
    color: var(--tc-sc-ink);
}

.tc-sc-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 22px;
    margin-top: 14px;
}

.tc-sc-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

.tc-sc-card__badge svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tc-sc-card__badge--free {
    color: var(--tc-sc-free);
}

/* the card's own truck (assets/product-card/free-shipping.png), placed rather than recoloured */
.tc-sc-card__badge-icon {
    display: block;
    width: 15px;
    height: 15px;
    max-width: none;
    flex: 0 0 auto;
}

.tc-sc-card__badge--today {
    font-size: 11px;
    font-weight: 500;
    color: var(--tc-sc-link);
}

.tc-sc-card__stock {
    overflow: hidden;
    font-size: 11px;
    line-height: 20px;
    color: var(--tc-sc-alert);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-sc-card__rate {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #2F2F2F;
}

.tc-sc-card__rate svg {
    width: 16px;
    height: 16px;
    fill: var(--tc-sc-star);
}

/* Two rules of the product card assume the price block is the card's LAST section: `order: 4`
   and an auto top margin push it to the bottom, and the old-price row hangs out of flow with a
   negative end margin so a bottom-anchored price line stays level across a row. Here the colour
   rail and the countdown come after the price, exactly as in the design, so both are cancelled:
   the block keeps its own place in the column and the struck price takes its real height. */
.tc-sc-card .tc-card__pricing {
    order: 0;
    margin-top: 12px;
    padding-block-start: 0;
}

.tc-sc-card .tc-card__oldprice-row {
    margin-block-end: 0;
}

.tc-sc-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    margin-top: 14px;
}

/* The colours line up across a row: a card without a struck price keeps that line's room
   whenever another card in the same row has one (collapsed, its colours rode 24px higher than
   its neighbours'). Only a row where no card has a struck price drops the room - held empty
   there, it was blank under every price. The struck price's room is the price grid's second
   track on phones (product-card.css, minmax(17px, auto)); the colours' is this foot, dropped
   on a card without colours (nothing comes under it but the countdown). */
.tc-showcase__row:not(:has(.tc-card__oldprice-row:not(.tc-card__oldprice-row--empty))) .tc-sc-card .tc-card__pricing:has(> .tc-card__oldprice-row--empty) {
    grid-template-rows: auto;
    row-gap: 0;
}

.tc-sc-card .tc-sc-card__foot:not(:has(*)) {
    display: none;
}

/* the amazing-offer countdown: a line of its own under the colour rail, on the card's
   inline-end edge, so the two never share a row (they overlapped when a card had both) */
.tc-sc-card__deal {
    display: flex;
    align-items: center;
    /* the countdown sits at the card's left edge: flex-end in this RTL row */
    justify-content: flex-end;
    min-height: 20px;
    margin-top: 10px;
}

/* the timer is an LTR run (dir="ltr"), so its own inline-start auto margin is a LEFT margin and
   pushed it to the right edge; in its own row it needs none */
.tc-sc-card__deal .tc-sc-card__timer {
    margin-inline-start: 0;
}

.tc-sc-card__timer {
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tc-sc-alert);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* the row context's two size steps, restated here for the same reason product-card.css
   restates them: a theme-level `img { width: 100% }` fights the currency mark */
@media (min-width: 992px) {
    .tc-sc-card .tc-card__price .tc-card__price-currency {
        width: auto;
        height: 28px;
    }

    .tc-sc-card .tc-card__old-price {
        font-size: 16px;
    }
}

/* Phones: the price block on the card's LEFT edge, as the product card in a row has it
   (product-card.css "HOME / RAIL CARDS", scoped to .tc-row, which this card is not inside - so it
   kept the grid's default and sat on the right). The same three rules: the 1fr filler first, then
   the price and the struck price with its percentage, both on the far edge. Desktop already has
   the price there. */
@media only screen and (max-width: 991.98px) {
    .tc-sc-card .tc-card__pricing {
        grid-template-columns: 1fr auto auto;
    }

    .tc-sc-card .tc-card__price {
        justify-self: end;
    }

    .tc-sc-card .tc-card__old-price {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* --------------------------------------------------------------------------
   Swatches + tooltip
   -------------------------------------------------------------------------- */

.tc-sc-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.tc-sc-swatches__list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 2px;
    overflow-x: auto;
    list-style: none;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tc-sc-swatches__list::-webkit-scrollbar {
    display: none;
}

/* nine circles and the arrow fill the 252px card exactly, as in the design */
.tc-sc-swatches--more .tc-sc-swatches__list {
    max-width: calc(9 * 20px + 8 * 6px + 4px);
}

.tc-sc-swatches__list li {
    flex: 0 0 auto;
}

.tc-sc-swatch {
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(41, 45, 50, 0.08);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

/* a value with no colour, no square image and no photo of its own */
.tc-sc-swatch--blank {
    background: repeating-linear-gradient(45deg, #F7F7F7 0 4px, #EDEDED 4px 8px);
}

.tc-sc-swatch:hover,
.tc-sc-swatch:focus-visible,
.tc-sc-swatch.is-active {
    outline: none;
    box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 2px var(--tc-sc-ink);
}

.tc-sc-swatches__more {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #EFE6E0;
    color: var(--tc-sc-ink);
    cursor: pointer;
}

.tc-sc-swatches__more svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.tc-sc-swatches__more.is-end svg {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .tc-showcase {
        --tc-sc-card-w: 160px;
        --tc-sc-gap: 12px;
        /* 48 between rows, as on the desktop: at 32 the next row's title sat too close under
           the colour swatches of the row above */
        margin: 48px 0;
    }

    .tc-showcase__head {
        margin-bottom: 16px;
    }

    /* a row's title as Jabama sets one on a phone: 16px (the phone's section step, base.less)
       and a step lighter than the desktop's 700, which at this size read as a page title */
    .tc-showcase__title {
        font-weight: var(--tc-fw-label);
        line-height: 24px;
    }

    .tc-showcase__lead {
        margin-top: 4px;
        font-size: 13px;
        line-height: 20px;
    }

    .tc-showcase__all {
        font-size: var(--tc-fs-caption);
        line-height: 20px;
    }

    .tc-showcase__nav {
        display: none;
    }

    .tc-sc-card__flag {
        height: 22px;
        font-size: 12px;
    }

    .tc-sc-card__media {
        border-radius: 12px;
    }

    .tc-sc-card__cart {
        right: 8px;
        bottom: 8px;
    }

    .tc-sc-card__media .tc-sc-card__quickadd {
        inset-block-end: -8px;
        inset-inline-start: 8px;
    }

    .tc-sc-card__dots {
        bottom: 10px;
        left: 10px;
    }

    .tc-sc-card__title {
        height: 40px;
        margin-top: 10px;
        font-size: 13px;
        line-height: 20px;
    }

    .tc-sc-card__meta {
        margin-top: 8px;
    }

    .tc-sc-card__badge {
        font-size: 11px;
    }

    .tc-sc-card__badge svg {
        width: 15px;
        height: 15px;
    }

    .tc-sc-card__badge--today {
        font-size: 10px;
    }

    .tc-sc-card__stock {
        font-size: 10px;
    }

    .tc-sc-card__rate {
        font-size: 12px;
    }

    .tc-sc-card .tc-card__pricing {
        margin-top: 8px;
    }

    .tc-sc-card__foot {
        margin-top: 10px;
    }

    .tc-sc-card__deal {
        margin-top: 8px;
    }

    .tc-sc-swatch,
    .tc-sc-swatches__more {
        width: 18px;
        height: 18px;
    }

    .tc-sc-swatches--more .tc-sc-swatches__list {
        max-width: calc(5 * 18px + 4 * 6px + 4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-showcase__nav,
    .tc-sc-card__cart,
    .tc-sc-swatch,
    .tc-sc-swatches__more svg {
        transition: none;
    }

    .tc-sc-swatches__list {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   PHOTO LOADING STATE - the same states as the standard card (product-card.css 3a), set by
   the IMAGE LOADING STATE block of product-card.js, which covers this card's photos too:
   no alt text painted while a photo is on its way, a skeleton sweep until it has loaded, a
   fade-in for lazy photos only (eager ones may be the LCP element), and a picture glyph when
   the first photo fails. Nothing is hidden unless that script has set html.tc-card-imgs.
   ========================================================================== */
.tc-sc-card__photo img {
    color: transparent;
}

.tc-card-imgs .tc-sc-card__media:not(.is-loaded):not(.is-error) {
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: tc-sc-sweep 1.3s ease-in-out infinite;
}

@keyframes tc-sc-sweep {
    from { background-position: 130% 0; }
    to { background-position: -30% 0; }
}

.tc-card-imgs .tc-sc-card__photo img[loading="lazy"] {
    opacity: 0;
    transition: opacity .3s ease;
}

.tc-card-imgs .tc-sc-card__media.is-loaded .tc-sc-card__photo img[loading="lazy"] {
    opacity: 1;
}

.tc-sc-card__media.is-error .tc-sc-card__photo img {
    visibility: hidden;
}

.tc-sc-card__media.is-error::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: center / 44px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4C4C8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 20'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .tc-card-imgs .tc-sc-card__media:not(.is-loaded):not(.is-error) {
        animation: none;
        background-image: none;
    }

    .tc-card-imgs .tc-sc-card__photo img[loading="lazy"] {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   TRIAL (2026-10-06): the product rows take the «آخرین مقالات» header exactly
   (home-posts.css .tc-posts__title / .tc-posts__all). To roll back, delete
   this block - nothing else depends on it.
   -------------------------------------------------------------------------- */

.tc-showcase .tc-showcase__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #292D32;
}

.tc-showcase .tc-showcase__all {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

@media (max-width: 767.98px) {
    .tc-showcase .tc-showcase__title {
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
    }

    .tc-showcase .tc-showcase__all {
        font-size: 14px;
        line-height: 22px;
    }

    .tc-showcase .tc-showcase__all svg {
        width: 16px;
        height: 16px;
    }
}

/* --------------------------------------------------------------------------
   The theme's own home rows (HomepageCategories «دسته‌بندی‌ها», HomepageManufacturers' list
   «برندهای ...») take the product rows' header above: the same title and the same «all» link.
   Their views link this file; the theme styles .vp-header-theme .vp-title light and grey, so
   the html body chain is there to outrank it.
   -------------------------------------------------------------------------- */

html body .vp-selected-categories .vp-header-theme .vp-title,
html body .vp-selected-brands .vp-header-theme .vp-title {
    margin: 0;
    font-family: yekanbakh, tahoma, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #292D32;
}

html body .vp-selected-categories .vp-header-theme .vp-title .vp-highlight {
    color: inherit;
}

html body .vp-selected-brands .vp-header-theme .vp-theme-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #168FDF;
}

@media (max-width: 767.98px) {
    html body .vp-selected-categories .vp-header-theme .vp-title,
    html body .vp-selected-brands .vp-header-theme .vp-title {
        font-size: 16px;
        line-height: 26px;
    }

    html body .vp-selected-brands .vp-header-theme .vp-theme-link {
        font-size: 14px;
        line-height: 22px;
    }
}