/* ==========================================================================
   technoyar design system
   پالت: سفید به‌عنوان قالب + آبی تیره به‌عنوان رنگ برند
   همه کلاس‌ها با پیشوند tb- نوشته شده‌اند تا با main.css و Bootstrap تداخل نکنند.
   ========================================================================== */

:root {
    --tb-primary: #0d2c54;
    --tb-primary-800: #0a2242;
    --tb-primary-600: #143f77;
    --tb-primary-100: #d9e3f0;
    --tb-primary-50: #eef3fa;
    --tb-cta: #1f6feb;
    --tb-cta-dark: #1858c4;
    --tb-cta-50: #eaf1fe;
    --tb-discount: #ef4056;
    --tb-discount-50: #fdedf0;
    --tb-success: #00a049;
    --tb-success-50: #e8f7ef;
    --tb-warning: #f9a825;

    --tb-ink: #17202e;
    --tb-ink-2: #39424f;
    --tb-muted: #74808f;
    --tb-line: #eceef2;
    --tb-line-soft: #f5f6f8;
    --tb-surface: #ffffff;
    --tb-bg: #ffffff;

    --tb-radius-lg: 16px;
    --tb-radius: 12px;
    --tb-radius-sm: 10px;
    --tb-radius-xs: 8px;
    /* گوشهٔ کارت‌های محصول؛ عمداً کوچک‌تر از بقیهٔ سطح‌ها تا چیدمان فشرده‌تر دیده شود */
    --tb-radius-card: 8px;
    /* گوشهٔ آیتم‌های فشرده (لینک‌های فوتر، چیپ‌ها) */
    --tb-radius-tight: 6px;

    --tb-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --tb-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .03);
    --tb-shadow: 0 6px 20px rgba(16, 24, 40, .07);
    --tb-shadow-lg: 0 16px 40px rgba(16, 24, 40, .13);

    /* جداسازی بدون خط: حلقهٔ مویی داخل المان + هالهٔ نرم */
    --tb-ring: inset 0 0 0 1px var(--tb-line);
    --tb-glow-card: 0 8px 18px -14px rgba(13, 44, 84, .35);
    --tb-glow-band: 0 16px 28px -26px rgba(13, 44, 84, .5), 0 -16px 28px -26px rgba(13, 44, 84, .5);

    --tb-gap: 12px;
    --tb-container: 1440px;
    --tb-pad: 24px;
    --tb-header-h: 72px;
    --tb-nav-h: 48px;
    /* ارتفاع زندهٔ هدر چسبان: وقتی ردیف دوم جمع می‌شود، کارت چسبان هم بالا می‌آید */
    --tb-sticky-top: calc(var(--tb-header-h) + var(--tb-nav-h) + var(--tb-gap));
    /* ارتفاع نوار چسبان پایین موبایل (۵۹ پیکسل آیتم + ۱ پیکسل بردر بالا)؛
       پنل‌های تمام‌عرض و پردهٔ تیره باید دقیقاً بالای آن بایستند */
    --tb-bottombar-h: 60px;
    /* ارتفاع نوار قیمت سبد خرید در موبایل؛ کشوی «جزئیات بیشتر» و padding پایین
       صفحه هر دو به همین عدد تکیه می‌کنند تا کشو نوار قیمت را نپوشاند */
    --tb-cartbar-h: 62px;
    --tb-drawer-w: min(320px, 88vw);
    --tb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* مرورگرهای پشتیبانی‌کنندهٔ :has() آستانهٔ دقیق‌تر می‌گیرند؛
   بقیه با همان مقدار پیش‌فرض (هدر کامل) بدون تداخل کار می‌کنند */
html:has(.tb-header.is-nav-hidden) {
    --tb-sticky-top: calc(var(--tb-header-h) + var(--tb-gap));
}

/* --------------------------------------------------------------------------
   پایه
   -------------------------------------------------------------------------- */

body {
    background-color: var(--tb-bg);
    color: var(--tb-ink);
    font-size: 14px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tb-container {
    width: 100%;
    max-width: var(--tb-container);
    margin-inline: auto;
    padding-inline: var(--tb-pad);
}

.tb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tb-main {
    flex: 1 0 auto;
    padding-bottom: 8px;
}

.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--tb-radius-sm);
    padding: 11px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease),
        border-color .18s var(--tb-ease), box-shadow .18s var(--tb-ease);
}

.tb-btn:focus-visible {
    outline: 2px solid var(--tb-cta);
    outline-offset: 2px;
}

.tb-btn--primary {
    background: var(--tb-cta);
    color: #fff;
}

.tb-btn--primary:hover {
    background: var(--tb-cta-dark);
    color: #fff;
}

.tb-btn--dark {
    background: var(--tb-primary);
    color: #fff;
}

.tb-btn--dark:hover {
    background: var(--tb-primary-800);
    color: #fff;
}

.tb-btn--ghost {
    background: var(--tb-surface);
    border-color: var(--tb-line);
    color: var(--tb-ink);
}

.tb-btn--ghost:hover {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-btn--block {
    width: 100%;
}

.tb-btn[disabled],
.tb-btn--disabled {
    background: var(--tb-line-soft);
    border-color: var(--tb-line);
    color: var(--tb-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.tb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.7;
}

.tb-chip--discount {
    background: var(--tb-discount);
    color: #fff;
}

.tb-chip--success {
    background: var(--tb-success-50);
    color: var(--tb-success);
}

.tb-chip--muted {
    background: var(--tb-line-soft);
    color: var(--tb-muted);
}

/* --------------------------------------------------------------------------
   هدر
   -------------------------------------------------------------------------- */

/* main.css روی .wrapper مقدار overflow-x:hidden می‌گذارد؛ این مقدار عنصر را به
   «محل اسکرول» تبدیل می‌کند و position:sticky فرزندانش را بی‌اثر می‌کند.
   clip همان بریدن افقی را می‌دهد بدون ساختن scroll container. */
.wrapper {
    overflow-x: clip !important;
    /* جای هدر ثابت؛ این ارتفاع هرگز عوض نمی‌شود، پس جمع‌شدن ردیف دوم
       هیچ reflow در محتوا ایجاد نمی‌کند و آیتم‌های صفحه میله‌میله نمی‌شوند. */
    padding-top: calc(var(--tb-header-h) + var(--tb-nav-h));
}

/* هدر کاملاً از flow خارج است تا ارتفاعش بتواند بدون جابه‌جایی محتوا تغییر کند */
.tb-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 900;
    background: var(--tb-surface);
    box-shadow: 0 1px 0 var(--tb-line-soft), 0 10px 26px -22px rgba(16, 24, 40, .5);
    overflow-anchor: none;
}

.tb-header__top {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--tb-header-h);
}

.tb-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.tb-logo img {
    max-height: 74px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tb-logo__fallback {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 22px;
    font-weight: bold;
    color: var(--tb-primary);
    letter-spacing: -.5px;
    /* نام لاتین برند باید چپ‌به‌راست بچیند وگرنه در صفحهٔ راست‌به‌چپ «baztechno» خوانده می‌شود */
    direction: ltr;
}

.tb-logo__fallback span {
    color: var(--tb-cta);
}

.tb-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 640px;
}

.tb-search__field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tb-line-soft);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    padding: 0 14px;
    height: 44px;
    transition: background-color .18s var(--tb-ease), border-color .18s var(--tb-ease),
        box-shadow .18s var(--tb-ease);
}

.tb-search__field:focus-within {
    background: var(--tb-surface);
    border-color: var(--tb-primary-100);
    box-shadow: 0 0 0 4px var(--tb-primary-50);
}

.tb-search__field svg,
.tb-search__field i {
    flex: 0 0 auto;
    color: var(--tb-muted);
    font-size: 19px;
    line-height: 1;
}

.tb-search__field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tb-ink);
    padding: 0;
    height: 100%;
}

.tb-search__field input:focus {
    outline: none;
    box-shadow: none;
}

.tb-search__field input::placeholder {
    color: var(--tb-muted);
}

.tb-search__submit {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--tb-primary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-search__submit i {
    font-size: 20px;
    line-height: 1;
}

.tb-search__submit:disabled {
    color: var(--tb-muted);
    opacity: .45;
    cursor: not-allowed;
}

.tb-suggest {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    background: var(--tb-surface);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-shadow-lg);
    padding: 8px;
    max-height: 420px;
    overflow-y: auto;
    z-index: 950;
    display: none;
}

.tb-suggest.is-open {
    display: block;
}

.tb-suggest__group {
    padding: 7px 10px 4px;
    font-size: 11px;
    color: var(--tb-muted);
    font-weight: bold;
}

.tb-suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--tb-radius-xs);
    cursor: pointer;
    color: var(--tb-ink);
    text-decoration: none;
}

.tb-suggest__item:hover,
.tb-suggest__item.is-active {
    background: var(--tb-primary-50);
}

.tb-suggest__item i,
.tb-suggest__item svg {
    color: var(--tb-muted);
    flex: 0 0 auto;
}

.tb-suggest__title {
    flex: 1 1 auto;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-suggest__meta {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--tb-muted);
}

.tb-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* پنل‌های شناور (سبد خرید، حساب کاربری) */
.tb-pop {
    position: relative;
    flex: 0 0 auto;
    --tb-pop-w: 320px;
}

/* پنل سبد خرید در دسکتاپ بزرگ‌تر است تا عنوان و قیمت هر کالا کامل خوانده شود */
.tb-pop--cart {
    --tb-pop-w: min(420px, calc(100vw - 24px));
}

.tb-pop__box {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    width: var(--tb-pop-w);
    background: var(--tb-surface);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-shadow-lg);
    z-index: 950;
    display: none;
    overflow: hidden;
}

.tb-pop.is-open > .tb-pop__box {
    display: block;
}

/* پل نامرئی روی شکاف ۶px بین دکمه و پنل؛ بدون آن، عبور موس از این
   شکاف mouseleave می‌دهد و پنل درست قبل از رسیدن به موس بسته می‌شود. */
.tb-pop.is-open::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    width: var(--tb-pop-w);
    height: 12px;
    z-index: 951;
}

.tb-pop__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--tb-line-soft);
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-pop__list {
    max-height: 372px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tb-primary-100) transparent;
}

.tb-pop__list::-webkit-scrollbar {
    width: 5px;
}

.tb-pop__list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--tb-primary-100);
}

.tb-pop__item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--tb-ink);
}

.tb-pop__item + .tb-pop__item {
    border-top: 1px solid var(--tb-line-soft);
}

.tb-pop__item:hover {
    background: var(--tb-line-soft);
}

.tb-pop__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: var(--tb-radius-sm);
    background: #fff;
    border: 1px solid var(--tb-line-soft);
    color: var(--tb-muted);
    font-size: 22px;
    overflow: hidden;
}

.tb-pop__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tb-pop__info {
    min-width: 0;
}

.tb-pop__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.65;
    color: var(--tb-ink);
}

.tb-pop__title:hover {
    text-decoration: underline;
}

.tb-pop__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.tb-pop__unit {
    color: var(--tb-muted);
    font-size: 11.5px;
}

.tb-pop__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.tb-pop__amount {
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-ink);
    white-space: nowrap;
}

.tb-pop__count {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-size: 11.5px;
    font-weight: bold;
}

.tb-pop__qty {
    color: var(--tb-muted);
    font-weight: normal;
}

.tb-pop__rm {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tb-discount);
    font-size: 18px;
    cursor: pointer;
}

.tb-pop__rm:hover {
    background: rgba(239, 64, 86, .1);
}

.tb-pop__empty {
    padding: 22px 14px;
    text-align: center;
    color: var(--tb-muted);
    font-size: 12.5px;
}

.tb-pop__foot {
    border-top: 1px solid var(--tb-line-soft);
    padding: 12px 14px;
    background: var(--tb-bg);
}

.tb-pop__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-primary);
    margin-bottom: 10px;
}

/* چیدمان اختصاصی پنل سبد: سرِ پنل با شمار کالا، چیپ تعداد و جمع برجسته */
.tb-pop--cart .tb-pop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
}

.tb-pop--cart .tb-pop__qty {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-size: 11px;
    font-weight: bold;
}

.tb-pop--cart .tb-pop__total {
    font-size: 13.5px;
    margin-bottom: 12px;
}

.tb-pop--cart .tb-pop__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 26px 14px 28px;
}

.tb-pop--cart .tb-pop__empty i {
    font-size: 32px;
    color: var(--tb-primary-100);
}

.tb-pop--cart .tb-pop__empty p {
    margin: 0;
    color: var(--tb-ink-2);
    font-size: 13px;
}

.tb-pop--cart .tb-pop__empty a {
    color: var(--tb-primary);
    font-size: 12.5px;
    font-weight: bold;
    text-decoration: none;
}

.tb-pop--cart .tb-pop__empty a:hover {
    text-decoration: underline;
}

@media (max-width: 1199px) {
    .tb-pop--cart .tb-pop__item {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 11px 12px;
    }

    .tb-pop--cart .tb-pop__thumb {
        width: 52px;
        height: 52px;
    }
}

.tb-pop__menu {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.tb-pop__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--tb-radius-xs);
    color: var(--tb-ink-2);
    font-size: 13px;
    text-decoration: none;
}

.tb-pop__menu a:hover {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-pop__menu i {
    font-size: 17px;
    color: var(--tb-muted);
}

.tb-pop__menu a:hover i {
    color: var(--tb-primary);
}

.tb-pop__sep {
    height: 1px;
    background: var(--tb-line-soft);
    margin: 4px 8px;
}

.tb-iconbtn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 62px;
    height: 50px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--tb-radius-sm);
    background: transparent;
    color: var(--tb-ink-2);
    font-family: inherit;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-iconbtn:hover {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-iconbtn i {
    font-size: 21px;
    line-height: 1;
}

.tb-iconbtn:focus-visible {
    outline: 2px solid var(--tb-cta);
    outline-offset: 2px;
}

.tb-iconbtn__badge {
    position: absolute;
    top: 4px;
    inset-inline-start: 12px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tb-cta);
    color: #fff;
    font-size: 10.5px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}

.tb-divider-v {
    width: 1px;
    height: 28px;
    background: var(--tb-line);
    margin-inline: 6px;
}

/* در دسکتاپ نمایش داده نمی‌شود؛ فقط موبایل */
.tb-searchfake {
    display: none;
}

.tb-header__moblogo {
    display: none;
}

/* منوی ردیف دوم */
.tb-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--tb-nav-h);
    border-top: 1px solid var(--tb-line-soft);
    overflow: hidden;
    transition: height .28s var(--tb-ease), opacity .28s var(--tb-ease),
        border-color .28s var(--tb-ease);
}

/* هدر fixed است و از flow خارج، پس این جمع‌شدن ارتفاع هیچ محتوایی را جابه‌جا نمی‌کند */
.tb-header.is-nav-hidden .tb-nav {
    height: 0;
    opacity: 0;
    border-top-color: transparent;
    pointer-events: none;
}

/* «دسته‌بندی کالاها» بدون پس‌زمینه؛ فقط متن + آیکون با هالهٔ ظریف در hover */
.tb-nav__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--tb-radius-xs);
    background: transparent;
    color: var(--tb-ink);
    font-size: 13.5px;
    font-weight: bold;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    flex: 0 0 auto;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-nav__all:hover,
.tb-nav__all:focus-visible,
.tb-header.is-mega-open .tb-nav__all {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    outline: none;
}

.tb-nav__all i {
    font-size: 18px;
    line-height: 1;
    color: var(--tb-cta);
}

.tb-nav__all i:last-child {
    color: var(--tb-muted);
    font-size: 15px;
    transition: transform .18s var(--tb-ease);
}

.tb-header.is-mega-open .tb-nav__all i:last-child {
    transform: rotate(180deg);
}

.tb-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.tb-nav__item {
    position: relative;
    flex: 0 0 auto;
}

.tb-nav__link {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--tb-radius-sm);
    color: var(--tb-ink-2);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-nav__link:hover,
.tb-nav__item.is-open > .tb-nav__link {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-nav__link svg,
.tb-nav__link i {
    opacity: .55;
    font-size: 15px;
    line-height: 1;
    transition: transform .18s var(--tb-ease);
}

.tb-nav__item.is-open > .tb-nav__link svg,
.tb-nav__item.is-open > .tb-nav__link i {
    transform: rotate(180deg);
}

/* لینک‌های کاربردی ردیف دوم؛ با کم‌شدن عرض، از آخر لیست به‌ترتیب حذف می‌شوند */
.tb-nav__extras {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    list-style: none;
    padding: 0;
    margin-block: 0;
}

/* گروه چپ (تخفیف‌ها و پیشنهادها…) همیشه به لبهٔ چپ ردیف می‌چسبد */
.tb-nav__promo {
    margin-inline-start: auto;
}

.tb-nav__extras li {
    flex: 0 0 auto;
}

.tb-nav__extras a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--tb-ink-2);
    font-size: 12.5px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-nav__extras a:hover {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-nav__extras a i {
    font-size: 15px;
    line-height: 1;
    opacity: .6;
}

.tb-nav__extras a:hover i {
    opacity: 1;
}

.tb-nav__extras .tb-nav__hot {
    color: var(--tb-discount);
}

.tb-nav__extras .tb-nav__hot i {
    opacity: 1;
}

.tb-nav__extras .tb-nav__hot:hover {
    background: var(--tb-discount-50);
    color: var(--tb-discount);
}

/* حذف پلکانی: ترتیب DOM همان ترتیب اهمیت است، پس از آخر هر لیست کم می‌شوند
   تا هرگز دکمه‌ها به هم نچسبند و چیدمان هدر حفظ شود.
   گروه راست (لینک‌های دسترسی) ابتدا کم می‌شود و «همه کالاها» آخرین بازمانده است. */
@media (max-width: 1399px) {
    .tb-nav__links li:nth-last-child(-n+1) {
        display: none;
    }
}

@media (max-width: 1319px) {
    .tb-nav__links li:nth-last-child(-n+2) {
        display: none;
    }
}

@media (max-width: 1239px) {
    .tb-nav__promo li:nth-last-child(-n+1) {
        display: none;
    }
}

@media (max-width: 1159px) {
    .tb-nav__promo li:nth-last-child(-n+2) {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   مگامنو
   -------------------------------------------------------------------------- */

.tb-mega {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    /* سقف ارتفاع پنل؛ فقط وقتی دسته پرمحتواست اسکرول می‌شود، وگرنه اندازهٔ محتواست */
    --tb-mega-maxh: min(70vh, 620px);
    background: var(--tb-surface);
    border-top: 1px solid var(--tb-line);
    box-shadow: var(--tb-shadow-lg);
    z-index: 940;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s var(--tb-ease), transform .18s var(--tb-ease),
        visibility .18s var(--tb-ease);
}

.tb-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tb-mega__inner {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 0;
    max-height: var(--tb-mega-maxh);
}

.tb-mega__roots {
    list-style: none;
    margin: 0;
    padding: 14px 12px;
    /* ستون مادرها روی سطح محو می‌نشیند تا پنل سفیدِ زیردسته‌ها معنا پیدا کند */
    background: var(--tb-line-soft);
    border-inline-end: 1px solid var(--tb-line);
    overflow-y: auto;
    max-height: var(--tb-mega-maxh);
}

.tb-mega__roots li + li {
    margin-top: 2px;
}

.tb-mega__root {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--tb-radius-sm);
    color: var(--tb-ink-2);
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s var(--tb-ease), color .15s var(--tb-ease);
}

.tb-mega__root:hover,
.tb-mega__root.is-active {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-weight: bold;
}

.tb-mega__root svg,
.tb-mega__root i {
    margin-inline-start: auto;
    opacity: .35;
    font-size: 16px;
    line-height: 1;
    transition: color .15s var(--tb-ease), opacity .15s var(--tb-ease);
}

.tb-mega__root.is-active svg,
.tb-mega__root.is-active i {
    opacity: 1;
    color: var(--tb-cta);
}

.tb-mega__root-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: var(--tb-radius-xs);
    background: var(--tb-surface);
    flex: 0 0 auto;
}

.tb-mega__panels {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: var(--tb-mega-maxh);
    padding: 18px 24px 22px;
}

.tb-mega__panel {
    display: none;
}

.tb-mega__panel.is-active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.tb-mega__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-mega__head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-mega__head a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-tight);
    color: var(--tb-cta);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s var(--tb-ease), border-color .15s var(--tb-ease);
}

.tb-mega__head a i {
    font-size: 14px;
    line-height: 1;
}

.tb-mega__head a:hover {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
}

/* ستون‌ها از سمت راست شروع می‌شوند و عرض هرکدام ثابت است؛
   دسته‌های کم‌زیردسته پس از این فضای خالی سمت چپ، فرمِ لیست را به هم نمی‌زند */
.tb-mega__cols {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    /* اگر ستون‌ها از ارتفاع پنل کوتاه‌تر بودند، در همان فضا وسط می‌نشینند */
    align-content: center;
    gap: 18px 0;
}

.tb-mega__col {
    flex: 0 0 auto;
    width: 216px;
    padding-inline: 16px;
}

.tb-mega__col + .tb-mega__col {
    border-inline-start: 1px solid var(--tb-line-soft);
}

.tb-mega__col-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-mega__col-title a {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--tb-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s var(--tb-ease), color .15s var(--tb-ease);
}

.tb-mega__col-title a:hover {
    color: var(--tb-cta);
}

.tb-mega__col-title img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: var(--tb-radius-xs);
    background: var(--tb-line-soft);
    padding: 2px;
    flex: 0 0 auto;
}

/* دسته‌ای که زیردسته ندارد، خودش به‌شکل کارت کلیک‌شدنی می‌نشیند؛
   پنل با تیترهای شناور و فضای بی‌دلیل خالی نمی‌ماند */
.tb-mega__col:not(:has(.tb-mega__leaves)) .tb-mega__col-title {
    margin: 0;
}

.tb-mega__col:not(:has(.tb-mega__leaves)) .tb-mega__col-title a {
    padding: 9px 12px;
    background: var(--tb-primary-50);
}

.tb-mega__col:not(:has(.tb-mega__leaves)) .tb-mega__col-title a:hover {
    background: var(--tb-primary-100);
    color: var(--tb-primary);
}

.tb-mega__col:not(:has(.tb-mega__leaves)) .tb-mega__col-title img {
    background: var(--tb-surface);
}

.tb-mega__leaves {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tb-mega__leaves a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    margin-inline: -8px;
    border-radius: var(--tb-radius-tight);
    color: var(--tb-ink-2);
    font-size: 12.5px;
    text-decoration: none;
    line-height: 1.7;
    transition: background-color .15s var(--tb-ease), color .15s var(--tb-ease);
}

/* نقطهٔ ریز پیش از هر زیردسته؛ نشانهٔ سلسله‌مراتب بدون شلوغی */
.tb-mega__leaves a::before {
    content: "";
    flex: 0 0 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tb-primary-100);
    transition: background-color .15s var(--tb-ease);
}

.tb-mega__leaves a:hover {
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-mega__leaves a:hover::before {
    background: var(--tb-cta);
}

.tb-mega__empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--tb-muted);
    font-size: 13px;
    padding: 18px 0;
    margin: 0;
}

.tb-mega__empty a {
    color: var(--tb-cta);
    font-weight: bold;
    text-decoration: none;
}

.tb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 930;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--tb-ease), visibility .22s var(--tb-ease);
}

.tb-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* --------------------------------------------------------------------------
   پنل‌های تمام‌عرض موبایل (جستجو، دسته‌بندی، سبد)
   -------------------------------------------------------------------------- */

.tb-searchbar,
.tb-cartsheet {
    position: fixed;
    z-index: 970;
    background: var(--tb-surface);
    visibility: hidden;
    transition: transform .28s var(--tb-ease), visibility .28s var(--tb-ease);
}

/* جستجو: از بالا باز می‌شود */
.tb-searchbar {
    top: 0;
    inset-inline: 0;
    padding: 12px 0 14px;
    box-shadow: var(--tb-shadow-lg);
    transform: translateY(-100%);
}

.tb-searchbar.is-open {
    visibility: visible;
    transform: translateY(0);
}

.tb-searchbar__inner {
    position: relative;
}

.tb-searchbar__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--tb-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
    display: flex;
}

/* سبد: sheet از پایین */
.tb-cartsheet {
    inset-inline: 0;
    bottom: 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--tb-radius-lg) var(--tb-radius-lg) 0 0;
    box-shadow: var(--tb-shadow-lg);
    transform: translateY(100%);
}

.tb-cartsheet.is-open {
    visibility: visible;
    transform: translateY(0);
}

.tb-cartsheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tb-line);
    background: var(--tb-primary);
    color: #fff;
    flex: 0 0 auto;
}

.tb-cartsheet__head strong {
    font-size: 14px;
}

.tb-cartsheet__close {
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tb-cartsheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tb-cartsheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-cartsheet__thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--tb-line-soft);
}

.tb-cartsheet__info {
    flex: 1 1 auto;
    min-width: 0;
}

.tb-cartsheet__title {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: var(--tb-ink);
    text-decoration: none;
}

.tb-cartsheet__price {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-cartsheet__foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--tb-line);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: var(--tb-line-soft);
}

/* --------------------------------------------------------------------------
   منوی تمام‌صفحهٔ دسته‌بندی (موبایل)
   ستون راست: دسته‌های مادر با آیکون اختصاصی — ستون چپ: زیرمجموعه‌ها و کارت‌های نهایی
   -------------------------------------------------------------------------- */

.tb-catmenu {
    position: fixed;
    top: 0;
    inset-inline: 0;
    /* ۱ پیکسل روی نوار پایین: در مقیاس‌های کسری ویندوز (۱۲۵٪ و…) درز نیم‌پیکسلی بین منو و نوار دیده نشود */
    bottom: calc(var(--tb-bottombar-h) + env(safe-area-inset-bottom) - 1px);
    z-index: 980;
    display: flex;
    overflow: hidden;
    /* جعبهٔ برش بی‌رنگ است؛ رنگ فقط روی پنل است تا در انیمیشنِ بسته شدن صفحه سفید پوشانده نشود */
    background: transparent;
    visibility: hidden;
    transition: visibility .3s var(--tb-ease);
}

/* پنل داخل جعبهٔ برش‌شده سُر می‌خورد؛ پس در انیمیشن باز/بسته شدن هیچ‌گاه روی نوار پایین نمی‌افتد */
.tb-catmenu__sheet {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--tb-surface);
    transform: translateY(100%);
    transition: transform .3s var(--tb-ease);
}

.tb-catmenu.is-open {
    visibility: visible;
}

.tb-catmenu.is-open .tb-catmenu__sheet {
    transform: translateY(0);
}

/* منو که باز است، به نوار پایین چسبیده؛ سایهٔ بالایی نوار همان خطای «فاصله» را می‌سازد */
body:has(.tb-catmenu.is-open) .tb-bottombar {
    box-shadow: none;
}

/* لوگو وسط، دکمهٔ بستن در لبهٔ چپ (در RTL ستون سوم سمت چپ است) */
.tb-catmenu__head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: 56px;
    padding: 0 10px;
    box-shadow: var(--tb-glow-band);
    position: relative;
    z-index: 2;
}

.tb-catmenu__logo {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--tb-primary);
}

.tb-catmenu__logo img {
    max-height: 32px;
    max-width: 132px;
}

.tb-catmenu__logo .tb-logo__fallback {
    font-size: 19px;
}

.tb-catmenu__close {
    grid-column: 3;
    justify-self: end;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--tb-line-soft);
    color: var(--tb-ink-2);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tb-catmenu__body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* ستون مادر */
.tb-catmenu__roots {
    flex: 0 0 38%;
    max-width: 148px;
    list-style: none;
    margin: 0;
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--tb-line-soft);
}

/* ستون مادرها: آیکون بالای عنوان تا عنوان تمام عرض ستون را داشته باشد */
.tb-catmenu__root {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 0;
    border-inline-end: 3px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-ink-2);
    text-align: center;
    cursor: pointer;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-catmenu__root i {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--tb-primary);
    opacity: .75;
}

.tb-catmenu__root span {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-catmenu__root.is-active {
    background: var(--tb-surface);
    color: var(--tb-primary);
    border-inline-end-color: var(--tb-cta);
}

.tb-catmenu__root.is-active i {
    opacity: 1;
}

/* ستون زیرمجموعه‌ها */
.tb-catmenu__panel {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
}

.tb-catmenu__group {
    display: none;
}

.tb-catmenu__group.is-active {
    display: block;
}

.tb-catmenu__seeall {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 2px 12px;
    font-size: 12.5px;
    font-weight: bold;
    color: var(--tb-cta);
    text-decoration: none;
}

.tb-catmenu__child {
    padding: 12px 0;
    box-shadow: 0 -1px 0 var(--tb-line-soft);
}

.tb-catmenu__child-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tb-ink);
    font-size: 13.5px;
    font-weight: bold;
    text-decoration: none;
}

.tb-catmenu__child-head > i:last-child {
    margin-inline-start: auto;
    color: var(--tb-muted);
    font-size: 18px;
}

.tb-catmenu__thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--tb-primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tb-catmenu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tb-catmenu__thumb i {
    font-size: 20px;
    line-height: 1;
    color: var(--tb-primary);
}

/* کارت‌های کوچک دسته‌های نهایی */
.tb-catmenu__leaves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.tb-catmenu__leaf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 5px;
    border-radius: var(--tb-radius-sm);
    background: var(--tb-line-soft);
    color: var(--tb-ink-2);
    font-size: 11.5px;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
}

.tb-catmenu__leaf-img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--tb-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tb-catmenu__leaf-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tb-catmenu__leaf-img i {
    font-size: 20px;
    line-height: 1;
    color: var(--tb-primary);
    opacity: .7;
}

/* --------------------------------------------------------------------------
   نوار چسبان پایین موبایل
   -------------------------------------------------------------------------- */

.tb-bottombar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    align-items: stretch;
    background: var(--tb-surface);
    border-top: 1px solid var(--tb-line);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.tb-bottombar__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* ارتفاع ثابت تا کل نوار همیشه --tb-bottombar-h باشد و پنل‌ها به آن بچسبند */
    height: 59px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--tb-muted);
    font-family: inherit;
    font-size: 10.5px;
    text-decoration: none;
    cursor: pointer;
}

.tb-bottombar__item i {
    font-size: 21px;
    line-height: 1;
}

.tb-bottombar__item:active,
.tb-bottombar__item:hover {
    color: var(--tb-primary);
}

.tb-bottombar__badge {
    position: absolute;
    top: 4px;
    inset-inline-start: 50%;
    margin-inline-start: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tb-cta);
    color: #fff;
    font-size: 9.5px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   اسلایدر اصلی (هیرو)
   -------------------------------------------------------------------------- */

.tb-hero {
    position: relative;
    margin-top: 0;
}

.tb-hero__rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: 0;
    background: var(--tb-line-soft);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tb-hero__rail::-webkit-scrollbar {
    display: none;
}

.tb-hero__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
}

.tb-hero__media {
    display: block;
    position: relative;
    /* ارتفاع محدود تا محتوای صفحه در اولین نمای کاربر بیشتر دیده شود */
    height: clamp(230px, 25vw, 380px);
    overflow: hidden;
    background: var(--tb-line-soft);
}

.tb-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-hero__media .tb-hero__desktop {
    display: block;
}

.tb-hero__media .tb-hero__mobile {
    display: none;
}

.tb-hero__dots {
    position: absolute;
    bottom: 14px;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.tb-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    pointer-events: auto;
    transition: width .2s var(--tb-ease), background-color .2s var(--tb-ease);
}

.tb-hero__dot.is-active {
    width: 22px;
    background: #fff;
}

.tb-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--tb-primary);
    box-shadow: var(--tb-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: opacity .18s var(--tb-ease), background-color .18s var(--tb-ease);
}

.tb-hero__arrow:hover {
    background: #fff;
}

.tb-hero__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* در RTL آیتم اول سمت راست است، پس دکمه «قبلی» راست و «بعدی» چپ قرار می‌گیرد */
.tb-hero__arrow--prev {
    inset-inline-start: 14px;
}

.tb-hero__arrow--next {
    inset-inline-end: 14px;
}

/* --------------------------------------------------------------------------
   میان‌بر دسته‌بندی‌ها
   -------------------------------------------------------------------------- */

.tb-cats {
    /* margin: 22px 0 18px; */
    margin-top: 26px;
}

/* چیدمان تطبیقی: auto-fit ردیف‌های خالی را جمع می‌کند، پس تعداد کم = کارت‌های
   کشیده و تمام‌عرض (بدون فضای مرده)، تعداد زیاد = ستون‌های بیشتر در همان عرض. */
.tb-cats__rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(172px, 100%), 1fr));
    gap: 12px;
}

.tb-cat {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 10px;
    background: var(--tb-surface);
    border: 0;
    box-shadow: var(--tb-ring);
    text-decoration: none;
    transition: box-shadow .18s var(--tb-ease), transform .18s var(--tb-ease);
}

.tb-cat:hover {
    box-shadow: var(--tb-ring), inset 0 0 0 1px var(--tb-primary-100), var(--tb-glow-card);
    transform: translateY(-2px);
}

.tb-cat__img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tb-primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.tb-cat__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-cat__ph {
    color: var(--tb-primary-100);
}

.tb-cat__title {
    font-size: 12px;
    color: var(--tb-ink-2);
    text-align: center;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   سکشن محصولات
   -------------------------------------------------------------------------- */

.tb-section {
    margin-top: 26px;
}

/* باند تمام‌عرض محصولات: بدون بردر کناری، جدا شدن فقط با هالهٔ بالا و پایین.
   --tb-x همان حاشیهٔ کانتینر را می‌سازد، ولی پس‌زمینه تا لبهٔ نمایشگر ادامه دارد. */
.tb-section--bleed {
    --tb-x: max(var(--tb-pad), calc((100% - var(--tb-container)) / 2 + var(--tb-pad)));
    margin-top: 26px;
    padding: 22px var(--tb-x) 26px;
    background: var(--tb-surface);
    /* box-shadow: var(--tb-glow-band); */
    /* box-shadow: 0 1px 15px rgba(20, 50, 100, 0.06); */
    border-top: 1px solid rgba(30, 100, 200, 0.10);
    border-bottom: 1px solid rgba(30, 100, 200, 0.10);
}

.tb-section--boxed {
    background: var(--tb-surface);
    border: 0;
    border-radius: var(--tb-radius-lg);
    padding: 18px;
    box-shadow: var(--tb-glow-band);
}

.tb-section--highlight {
    background: linear-gradient(180deg, var(--tb-primary-50) 0%, var(--tb-surface) 42%);
}

.tb-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.tb-section__titles {
    min-width: 0;
}

.tb-section__title {
    margin: 0;
    font-size: 19px;
    font-weight: bold;
    color: var(--tb-primary);
    line-height: 1.7;
    display: flex;
    align-items: center;
    gap: 9px;
}

.tb-section__title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--tb-cta);
    flex: 0 0 auto;
}

.tb-section__subtitle {
    margin: 3px 0 0 13px;
    font-size: 12.5px;
    color: var(--tb-muted);
    line-height: 1.7;
}

.tb-section__aside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tb-section__all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-cta);
    text-decoration: none;
    white-space: nowrap;
}

.tb-section__all:hover {
    color: var(--tb-cta-dark);
}

.tb-navbtns {
    display: flex;
    gap: 6px;
}

.tb-navbtn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--tb-line);
    background: var(--tb-surface);
    color: var(--tb-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .18s var(--tb-ease), color .18s var(--tb-ease),
        background-color .18s var(--tb-ease);
}

.tb-navbtn:hover:not([disabled]) {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
    color: var(--tb-primary);
}

.tb-navbtn[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* ریل محصولات
   --tb-col-w عمدی کسری است (…/5.4) تا لبهٔ کارت بعدی همیشه در سمت چپ دیده شود
   و کاربر بفهمد لیست ادامه دارد. */
.tb-rail {
    display: flex;
    gap: var(--tb-gap);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.tb-rail::-webkit-scrollbar {
    display: none;
}

.tb-rail > * {
    flex: 0 0 var(--tb-col-w, calc((100% - 4 * var(--tb-gap)) / 5.4));
    scroll-snap-align: start;
    min-width: 0;
}

.tb-rail--scroll > * {
    flex-basis: 172px;
}

.tb-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--tb-gap);
}

/* --------------------------------------------------------------------------
   کارت محصول
   -------------------------------------------------------------------------- */

.tb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tb-surface);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--tb-radius-card);
    overflow: hidden;
    /* box-shadow: var(--tb-ring); */
    transition: box-shadow .2s var(--tb-ease);
}

.tb-card:hover {
    box-shadow: 0 1px 5px rgba(12, 12, 12, 0.12);
}

.tb-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 14px;
    background: var(--tb-surface);
}

.tb-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s var(--tb-ease);
}

.tb-card:hover .tb-card__media img {
    transform: scale(1.05);
}

.tb-card__badges {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    z-index: 2;
}

.tb-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 14px 14px;
    flex: 1 1 auto;
}

.tb-card__title {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: var(--tb-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px;
}

.tb-card__title a {
    color: inherit;
    text-decoration: none;
}

.tb-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--tb-muted);
    flex-wrap: wrap;
}

.tb-card__meta i,
.tb-card__meta svg {
    color: var(--tb-warning);
}

.tb-card__spacer {
    flex: 1 1 auto;
}

.tb-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tb-price__old {
    font-size: 11.5px;
    color: var(--tb-muted);
    text-decoration: line-through;
    line-height: 1.5;
}

.tb-price__row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    justify-content: flex-end;
}

.tb-price__value {
    font-size: 16px;
    font-weight: bold;
    color: var(--tb-ink);
    line-height: 1.5;
}

.tb-price__unit {
    font-size: 11.5px;
    color: var(--tb-muted);
}

.tb-price--off .tb-price__value {
    color: var(--tb-discount);
}

.tb-card__cta {
    margin-top: 10px;
    width: 100%;
    padding: 9px 12px;
    font-size: 12.5px;
}

.tb-card__stock {
    font-size: 11.5px;
    color: var(--tb-success);
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
}

.tb-card__stock--out {
    color: var(--tb-muted);
}

/* --------------------------------------------------------------------------
   ردیف بنرها
   -------------------------------------------------------------------------- */

.tb-banners {
    margin-top: 26px;
    display: grid;
    gap: var(--tb-gap);
}

.tb-banners--1 {
    grid-template-columns: 1fr;
}

.tb-banners--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tb-banners--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tb-banners--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tb-banner {
    display: block;
    position: relative;
    border-radius: var(--tb-radius);
    overflow: hidden;
    background: var(--tb-line-soft);
    text-decoration: none;
    box-shadow: var(--tb-shadow-xs);
    transition: box-shadow .2s var(--tb-ease), transform .2s var(--tb-ease);
}

.tb-banner:hover {
    box-shadow: var(--tb-shadow);
    transform: translateY(-2px);
}

.tb-banner__media {
    position: relative;
    display: block;
    width: 100%;
}

.tb-banners--1 .tb-banner__media {
    /* بنر تمام‌عرض با همان نسبتی که آپلود شده نمایش داده می‌شود تا برش نخورد */
    display: block;
}

.tb-banners--1 .tb-banner__media img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
}

.tb-banners--2 .tb-banner__media {
    aspect-ratio: 608 / 300;
}

.tb-banners--3 .tb-banner__media {
    aspect-ratio: 398 / 300;
}

.tb-banners--4 .tb-banner__media {
    aspect-ratio: 296 / 300;
}

.tb-banner__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   نوار مزیت‌ها
   -------------------------------------------------------------------------- */

.tb-features {
    margin: 30px 0 6px;
    background: var(--tb-surface);
    border: 0;
    border-radius: var(--tb-radius-lg);
    padding: 20px 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    box-shadow: var(--tb-ring), var(--tb-glow-card);
}

.tb-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 4px;
}

.tb-feature__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-feature__title {
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-ink);
}

.tb-feature__text {
    font-size: 11.5px;
    color: var(--tb-muted);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   فوتر
   -------------------------------------------------------------------------- */

.tb-footer {
    margin-top: 40px;
    background: var(--tb-surface);
    border-top: 1px solid var(--tb-line);
    color: var(--tb-ink-2);
}

.tb-footer__top {
    padding: 30px 0 22px;
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    align-items: stretch;
    gap: 28px;
}

.tb-footer__brand img {
    max-height: 106px;
    max-width: 170px;
    object-fit: contain;
}

.tb-footer__brand > a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.tb-footer__brand p {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--tb-muted);
    line-height: 2;
    max-width: 42ch;
}

.tb-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tb-footer__social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--tb-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tb-ink-2);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease),
        border-color .18s var(--tb-ease);
}

.tb-footer__social a:hover {
    background: var(--tb-primary);
    border-color: var(--tb-primary);
    color: #fff;
}

/* ستون‌های فوتر روی پلاک آبی روشن نشسته‌اند تا فضای خالی کمتر حس شود */
.tb-footer__col {
    background: var(--tb-primary-50);
    border-radius: var(--tb-radius-xs);
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.tb-footer__col h4 {
    margin: 0 0 10px;
    padding-inline-start: 4px;
    font-size: 14px;
    font-weight: bold;
    color: var(--tb-primary);
}

/* ردیف‌ها ارتفاع باقی‌ماندهٔ ستون را پر می‌کنند و کارت تا ۶۰px قد می‌کشد؛
   فضای بیشتر از آن به‌صورت فاصلهٔ یکنواخت بین کارت‌ها پخش می‌شود، پس
   کف همهٔ پلاک‌ها تراز می‌ماند و متن بلند هم هرگز بریده نمی‌شود. */
.tb-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 6px;
    grid-auto-rows: minmax(0, 1fr);
}

.tb-footer__col li {
    display: flex;
    height: 100%;
    max-height: 60px;
    margin-top: auto;
    margin-bottom: auto;
}

/* هر آیتم یک کارت سفید با گوشهٔ کم */
.tb-footer__col a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-tight);
    padding: 7px 10px;
    color: var(--tb-ink-2);
    font-size: 12.5px;
    text-decoration: none;
    line-height: 1.7;
    transition: color .18s var(--tb-ease), box-shadow .18s var(--tb-ease);
}

.tb-footer__col a:hover {
    color: var(--tb-cta);
    box-shadow: var(--tb-shadow-xs);
}

.tb-footer__contact li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-tight);
    padding: 7px 10px;
    color: var(--tb-ink-2);
    font-size: 12.5px;
    line-height: 1.7;
}

.tb-footer__contact a {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.tb-footer__contact a:hover {
    box-shadow: none;
}

.tb-footer__contact svg,
.tb-footer__contact i {
    color: var(--tb-primary);
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
}

/* نمادهای اعتماد زیر توضیحات فوتر نشسته‌اند تا ستون برند ارتفاعش با بقیه پر شود */
.tb-footer__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.tb-footer__trust img {
    max-height: 62px;
    max-width: 92px;
    object-fit: contain;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    padding: 5px;
    background: #fff;
}

.tb-footer__about {
    padding: 20px 0;
}

.tb-footer__about h5 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-footer__about p,
.tb-footer__about div {
    font-size: 12.5px;
    color: var(--tb-muted);
    line-height: 2.1;
    margin: 0;
}

.tb-footer__bottom {
    padding: 16px 0;
    border-top: 1px solid var(--tb-line-soft);
    text-align: center;
    font-size: 12px;
    color: var(--tb-muted);
}

.tb-totop {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tb-line);
    background: var(--tb-surface);
    color: var(--tb-primary);
    box-shadow: var(--tb-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 700;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s var(--tb-ease), transform .2s var(--tb-ease),
        visibility .2s var(--tb-ease);
}

.tb-totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tb-totop i {
    font-size: 22px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   صفحهٔ ورود و احراز هویت
   این صفحه‌ها base را ندارند؛ کارت وسط صفحه می‌نشیند و لوگو داخل خودِ فرم است.
   -------------------------------------------------------------------------- */

/* جای هدر ثابت در wrapper برای صفحه‌های بدون هدر حذف می‌شود.
   padding-bottom هم حذف شود، وگرنه ارتفاع نوار چسبان پایین به صفحهٔ تمام‌عرض
   اضافه می‌شود و همان ۶۲ پیکسل اسکرول عمودی بی‌مورد موبایل را می‌سازد. */
.wrapper:has(> .tb-auth) {
    padding-top: 0;
    padding-bottom: 0;
}

.tb-auth {
    min-height: 100vh;
    /* dvh ارتفاع واقعیِ دیده‌شده است؛ با vh نوار آدرس موبایل باعث اسکرول می‌شود */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* safe: اگر محتوا بلندتر از صفحه شد (کیبورد باز) بالای کارت بریده نمی‌شود */
    justify-content: safe center;
    gap: 20px;
    padding: 40px var(--tb-pad) 26px;
}

/* پیام خالی جای خالی در وسط‌چین ایجاد نکند */
.tb-auth__msg:empty {
    display: none;
}

/* پیام‌های همان صفحه در عرض کارت می‌نشینند */
.tb-auth__msg {
    width: 100%;
    max-width: 420px;
}

.tb-auth__card {
    width: 100%;
    max-width: 420px;
    padding: 26px 26px 24px;
    background: var(--tb-surface);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.103);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.025);
    text-align: center;
}

.tb-auth__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.tb-auth__logo img {
    width: 92px;
    height: auto;
    object-fit: contain;
}

.tb-auth__title {
    margin: 14px 0 0;
    font-size: 19px;
    font-weight: bold;
    color: var(--tb-primary);
    line-height: 1.7;
}

.tb-auth__lead {
    margin: 6px 0 20px;
    color: var(--tb-muted);
    font-size: 13px;
    line-height: 1.9;
}

.tb-auth__lead b {
    color: var(--tb-ink-2);
    font-variant-numeric: tabular-nums;
}

.tb-auth__field {
    text-align: start;
}

.tb-auth__field + .tb-auth__field {
    margin-top: 14px;
}

.tb-auth__label {
    display: block;
    margin-bottom: 6px;
    color: var(--tb-ink-2);
    font-size: 12.5px;
    font-weight: bold;
}

.tb-auth__field input {
    width: 100%;
    /* بوت‌استرپ با pr-2 و !important حاشیهٔ راست می‌دهد؛ همین‌جا با همان وزن یکسان می‌شود */
    padding: 11px 14px !important;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-bg);
    color: var(--tb-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
    letter-spacing: .5px;
    transition: border-color .15s var(--tb-ease), box-shadow .15s var(--tb-ease);
}

.tb-auth__field input:focus {
    outline: none;
    border-color: var(--tb-cta);
    box-shadow: 0 0 0 3px var(--tb-cta-50);
}

.tb-auth__error {
    margin: 7px 0 0;
    color: var(--tb-discount);
    font-size: 12px;
    line-height: 1.8;
}

.tb-auth__submit {
    width: 100%;
    margin-top: 16px;
    padding: 11px 14px;
    border: 0;
    border-radius: var(--tb-radius-sm);
    background: var(--tb-cta);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
    cursor: pointer;
    transition: background-color .15s var(--tb-ease);
}

.tb-auth__submit:hover {
    background: var(--tb-cta-dark);
}

.tb-auth__submit:disabled {
    background: var(--tb-line);
    color: var(--tb-muted);
    cursor: not-allowed;
}

/* پذیرش قوانین؛ بلوکِ هم‌عرض با دکمه تا هرگز از آن پهن‌تر نشود */
.tb-auth__terms {
    margin: 10px 0 0;
    color: var(--tb-muted);
    font-size: 11.5px;
    line-height: 1.9;
    text-align: center;
    overflow-wrap: break-word;
}

.tb-auth__terms a {
    color: var(--tb-cta);
    font-weight: bold;
    text-decoration: none;
}

.tb-auth__terms a:hover {
    color: var(--tb-cta-dark);
    text-decoration: underline;
}

/* مسیرهای جانبیِ همان فرم: ورود با رمز عبور و دریافت مجدد کد */
.tb-auth__alt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.tb-auth__alt a {
    color: var(--tb-cta);
    font-size: 12.5px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.tb-auth__alt a:hover {
    color: var(--tb-cta-dark);
}

.tb-auth__ghost {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-surface);
    color: var(--tb-ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
    cursor: pointer;
    transition: border-color .15s var(--tb-ease), background-color .15s var(--tb-ease);
}

.tb-auth__ghost:hover:not(:disabled) {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
}

.tb-auth__ghost:disabled {
    opacity: .55;
    cursor: default;
}

.tb-auth__count {
    margin: 0;
    color: var(--tb-muted);
    font-size: 12.5px;
    line-height: 1.9;
}

.tb-auth__count span {
    color: var(--tb-ink-2);
    font-variant-numeric: tabular-nums;
}

.tb-auth__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    max-width: 640px;
    text-align: center;
}

.tb-auth__foot a {
    color: var(--tb-ink-2);
    font-size: 12.5px;
    text-decoration: none;
}

.tb-auth__foot a:hover {
    color: var(--tb-cta);
}

.tb-auth__note {
    margin: 0;
    color: var(--tb-muted);
    font-size: 11.5px;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .tb-auth {
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
        gap: 16px;
    }

    .tb-auth__card {
        padding: 22px 16px 20px;
        box-shadow: var(--tb-shadow);
    }

    .tb-auth__title {
        font-size: 17px;
    }

    .tb-auth__logo img {
        width: 82px;
    }
}

/* --------------------------------------------------------------------------
   تماس با ما
   -------------------------------------------------------------------------- */

.tb-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    margin: 26px 0 10px;
}

.tb-contact__card {
    padding: 22px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-ring), var(--tb-glow-card);
}

.tb-contact__title {
    margin: 0;
    font-size: 21px;
    font-weight: bold;
    color: var(--tb-primary);
    line-height: 1.7;
}

.tb-contact__lead {
    margin: 6px 0 20px;
    color: var(--tb-muted);
    font-size: 12.5px;
    line-height: 1.9;
}

.tb-contact__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tb-contact__field--full {
    grid-column: 1 / -1;
}

.tb-contact__label {
    display: block;
    margin-bottom: 6px;
    color: var(--tb-ink-2);
    font-size: 12.5px;
    font-weight: bold;
}

/* بوت‌استرپ روی .form-control ارتفاع و رنگ خودش را دارد؛ این انتخابگر وزن بیشتری دارد */
.tb-contact__field input,
.tb-contact__field textarea {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-line-soft);
    color: var(--tb-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.9;
    transition: border-color .15s var(--tb-ease), box-shadow .15s var(--tb-ease),
        background-color .15s var(--tb-ease);
}

.tb-contact__field textarea {
    min-height: 160px;
    resize: vertical;
}

.tb-contact__field input::placeholder,
.tb-contact__field textarea::placeholder {
    color: var(--tb-muted);
    opacity: 1;
}

.tb-contact__field input:focus,
.tb-contact__field textarea:focus {
    outline: none;
    background: var(--tb-surface);
    border-color: var(--tb-cta);
    box-shadow: 0 0 0 3px var(--tb-cta-50);
}

.tb-contact__error {
    margin: 6px 0 0;
    color: var(--tb-discount);
    font-size: 12px;
    line-height: 1.8;
}

.tb-contact__submit {
    width: 100%;
    margin-top: 16px;
}

/* پلاک رنگی به‌جای نقشه؛ ستون کناری هم‌ارتفاع فرم می‌ماند و بی‌مورد نمی‌شود */
.tb-contact__side {
    display: flex;
    flex-direction: column;
    background: var(--tb-primary-50);
}

.tb-contact__subtitle {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-contact__ways {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.tb-contact__ways li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-sm);
}

.tb-contact__way-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tb-radius-xs);
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-size: 17px;
    line-height: 1;
}

.tb-contact__way-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tb-contact__way-label {
    color: var(--tb-muted);
    font-size: 11.5px;
    line-height: 1.7;
}

.tb-contact__way-value {
    color: var(--tb-ink);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.8;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.tb-contact__way-value {
    color: var(--tb-primary);
}

a.tb-contact__way-value:hover {
    color: var(--tb-cta);
}

/* پنل برند: با flex جای خالی ستون را می‌گیرد تا صفحه پر و بی‌وقفه دیده شود */
.tb-contact__call {
    flex: 1 1 auto;
    margin-top: 14px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border-radius: var(--tb-radius);
    background: var(--tb-primary);
    color: #fff;
}

.tb-contact__call-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

.tb-contact__call-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tb-contact__call-title {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.8;
    color: #fff;
}

.tb-contact__call-text {
    margin: 0;
    max-width: 34ch;
    font-size: 12.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .78);
}

.tb-contact__call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    padding: 9px 18px;
    border-radius: var(--tb-radius-sm);
    background: #fff;
    color: var(--tb-primary);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
    text-decoration: none;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-contact__call-btn:hover {
    background: var(--tb-primary-50);
    color: var(--tb-cta-dark);
}

/* با margin-top:auto به کف ستون می‌چسبد و فضای خالی پایین را پر می‌کند */
.tb-contact__help {
    margin-top: 14px;
}

.tb-contact__help-text {
    margin: 0 0 10px;
    color: var(--tb-ink-2);
    font-size: 12.5px;
    line-height: 1.9;
}

.tb-contact__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.tb-contact__links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--tb-radius-tight);
    background: var(--tb-surface);
    color: var(--tb-ink-2);
    font-size: 12.5px;
    font-weight: bold;
    text-decoration: none;
    transition: color .18s var(--tb-ease), box-shadow .18s var(--tb-ease);
}

.tb-contact__links a:hover {
    color: var(--tb-cta);
    box-shadow: var(--tb-shadow-xs);
}

.tb-contact__links i {
    flex: 0 0 auto;
    color: var(--tb-primary);
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 991px) {
    .tb-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* روی تبلت عریض ستون تمام‌عرض است؛ پنل تماس افقی می‌شود تا کشیده دیده نشود */
@media (min-width: 768px) and (max-width: 991px) {
    .tb-contact__call {
        flex-direction: row;
        justify-content: space-between;
        gap: 18px;
        text-align: start;
    }

    .tb-contact__call-body {
        align-items: flex-start;
    }

    .tb-contact__call-text {
        max-width: 54ch;
    }
}

@media (max-width: 767px) {
    .tb-contact {
        gap: var(--tb-gap);
        margin: 14px 0 6px;
    }

    .tb-contact__card {
        padding: 16px 14px;
        border-radius: var(--tb-radius);
    }

    .tb-contact__title {
        font-size: 18px;
    }

    .tb-contact__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .tb-contact__field input,
    .tb-contact__field textarea {
        font-size: 15px;
    }

    .tb-contact__field textarea {
        min-height: 140px;
    }

    .tb-contact__call {
        padding: 20px 14px;
    }
}

/* --------------------------------------------------------------------------
   سوالات متداول
   -------------------------------------------------------------------------- */

.tb-faq__hero {
    margin: 26px 0 0;
    padding: 22px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    background: var(--tb-primary);
    border-radius: var(--tb-radius-lg);
    color: #fff;
}

.tb-faq__heroText {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 22px;
}

.tb-faq__title {
    flex: 0 0 auto;
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.7;
    color: #fff;
}

.tb-faq__lead {
    flex: 1 1 320px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.9;
}

.tb-faq__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--tb-radius-sm);
    background: #fff;
    color: var(--tb-primary);
    font-size: 12.5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color .18s var(--tb-ease), color .18s var(--tb-ease);
}

.tb-faq__back:hover {
    background: var(--tb-primary-50);
    color: var(--tb-cta-dark);
}

.tb-faq__section {
    margin-top: 26px;
}

.tb-faq__sectionTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: bold;
    color: var(--tb-primary);
    line-height: 1.8;
}

.tb-faq__catBadge {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tb-radius-xs);
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-size: 19px;
    line-height: 1;
    overflow: hidden;
}

.tb-faq__catBadge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tb-faq__cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.tb-faq__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px 18px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-ring), var(--tb-glow-card);
    text-decoration: none;
    transition: box-shadow .18s var(--tb-ease), background-color .18s var(--tb-ease);
}

.tb-faq__cat:hover {
    background: var(--tb-primary-50);
    box-shadow: var(--tb-ring), var(--tb-shadow);
}

.tb-faq__catIcon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-size: 24px;
    line-height: 1;
    overflow: hidden;
}

.tb-faq__cat:hover .tb-faq__catIcon {
    background: #fff;
}

.tb-faq__catIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.tb-faq__catTitle {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--tb-ink);
    font-size: 13.5px;
    font-weight: bold;
    line-height: 1.8;
    text-align: start;
}

.tb-faq__catChev {
    flex: 0 0 auto;
    color: var(--tb-muted);
    font-size: 18px;
    line-height: 1;
    transition: color .18s var(--tb-ease);
}

.tb-faq__cat:hover .tb-faq__catChev {
    color: var(--tb-cta);
}

.tb-faq__list {
    display: grid;
    gap: 8px;
}

.tb-faq__item {
    background: var(--tb-surface);
    border-radius: var(--tb-radius-sm);
    box-shadow: var(--tb-ring);
    overflow: hidden;
    transition: box-shadow .18s var(--tb-ease);
}

.tb-faq__item:hover {
    box-shadow: var(--tb-ring), var(--tb-shadow-xs);
}

.tb-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--tb-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: bold;
    line-height: 1.9;
    text-align: start;
    cursor: pointer;
    transition: color .18s var(--tb-ease);
}

.tb-faq__q:focus-visible {
    outline: 2px solid var(--tb-cta);
    outline-offset: 2px;
}

.tb-faq__qText {
    min-width: 0;
}

/* نمایش وضعیت باز/بسته فقط با aria-expanded؛ بوت‌استرپ همان را روی دکمه می‌گذارد */
.tb-faq__q[aria-expanded="true"] {
    color: var(--tb-primary);
}

.tb-faq__chev {
    flex: 0 0 auto;
    color: var(--tb-muted);
    font-size: 18px;
    line-height: 1;
    transition: transform .2s var(--tb-ease), color .2s var(--tb-ease);
}

.tb-faq__q[aria-expanded="true"] .tb-faq__chev {
    transform: rotate(180deg);
    color: var(--tb-primary);
}

/* display را بوت‌استرپ با .collapse/.show کنترل می‌کند؛ اینجا فقط ظاهر پنل */
.tb-faq__panel {
    background: var(--tb-line-soft);
}

.tb-faq__answer {
    padding: 14px 16px 16px;
    color: var(--tb-ink-2);
    font-size: 13px;
    line-height: 2.1;
}

.tb-faq__answer p:last-child {
    margin-bottom: 0;
}

.tb-faq__answer img {
    max-width: 100%;
    height: auto;
}

.tb-faq__answer a {
    color: var(--tb-cta);
}

.tb-faq__answer ul,
.tb-faq__answer ol {
    padding-inline-start: 20px;
    margin: 0 0 10px;
}

.tb-faq__none {
    margin: 0;
    padding: 24px 16px;
    background: var(--tb-line-soft);
    border-radius: var(--tb-radius-sm);
    color: var(--tb-muted);
    font-size: 13px;
    text-align: center;
}

.tb-faq__cta {
    margin: 28px 0 8px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--tb-primary-50);
    border-radius: var(--tb-radius-lg);
}

.tb-faq__ctaTitle {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: var(--tb-primary);
    line-height: 1.8;
}

.tb-faq__ctaText {
    margin: 4px 0 0;
    color: var(--tb-muted);
    font-size: 12.5px;
    line-height: 1.9;
}

.tb-faq__ctaActions {
    flex: 1 1 320px;
    max-width: 520px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tb-faq__ctaItem {
    display: flex;
    flex-direction: column;
    padding: 13px 14px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-sm);
    text-decoration: none;
    transition: box-shadow .18s var(--tb-ease);
}

.tb-faq__ctaItem:hover {
    box-shadow: var(--tb-shadow-xs);
}

.tb-faq__ctaIcon {
    margin-bottom: 7px;
    color: var(--tb-primary);
    font-size: 20px;
    line-height: 1;
}

.tb-faq__ctaLabel {
    color: var(--tb-ink);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
}

.tb-faq__ctaValue {
    color: var(--tb-muted);
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .tb-faq__hero {
        margin-top: 14px;
        padding: 18px 16px;
        border-radius: var(--tb-radius);
    }

    .tb-faq__title {
        font-size: 18px;
    }

    .tb-faq__lead {
        font-size: 12.5px;
    }

    .tb-faq__back {
        flex: 1 1 100%;
        justify-content: center;
    }

    .tb-faq__section {
        margin-top: 20px;
    }

    .tb-faq__sectionTitle {
        font-size: 15px;
    }

    .tb-faq__cats {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .tb-faq__cat {
        gap: 10px;
        min-height: 68px;
        padding: 12px 14px;
    }

    .tb-faq__catIcon {
        width: 44px;
        height: 44px;
        font-size: 21px;
    }

    .tb-faq__catTitle {
        font-size: 12.5px;
    }

    .tb-faq__q {
        padding: 13px 14px;
        font-size: 13px;
    }

    .tb-faq__answer {
        padding: 13px 14px 15px;
    }

    .tb-faq__cta {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .tb-faq__ctaActions {
        flex: 0 0 auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

@media (max-width: 479px) {
    .tb-faq__ctaActions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   صفحه محصول
   -------------------------------------------------------------------------- */

.tb-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 0;
    font-size: 12px;
    color: var(--tb-muted);
}

.tb-crumbs a {
    color: var(--tb-muted);
    text-decoration: none;
}

.tb-crumbs a:hover {
    color: var(--tb-cta);
}

.tb-crumbs svg {
    opacity: .5;
}

.tb-crumbs__current {
    color: var(--tb-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46ch;
}

.tb-pd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 20px;
    /* start به‌جای stretch: هیچ ستونی به ارتفاع ستون دیگر کشیده نمی‌شود،
       پس فضای خالی زیر کارت کوتاه‌تر ایجاد نمی‌شود و sticky هم درست کار می‌کند */
    align-items: start;
    padding-bottom: 24px;
}

.tb-pd__media-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tb-pd__panel {
    background: var(--tb-surface);
    border: 0;
    border-radius: var(--tb-radius-lg);
    padding: 20px;
    box-shadow: var(--tb-ring);
}

/* پنل راست: تصویر و اطلاعات کلی کنار هم */
.tb-pd__summary {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 24px;
    /* stretch (پیش‌فرض grid): ستون اطلاعات دقیقاً هم‌ارتفاع تصویر می‌شود */
}

/* جدول مشخصات، فاصلهٔ باقی‌ماندهٔ ستون اطلاعات را پر می‌کند تا
   تصویر بلندتر از محتوای کناری خودش به نظر نرسد */
.tb-pd__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tb-pd__head {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.tb-pd__media {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.tb-pd__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 380px;
    margin-inline: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-pd__slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    height: 100%;
}

.tb-pd__slides::-webkit-scrollbar {
    display: none;
}

.tb-pd__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-pd__slide img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
}

.tb-pd__zoom {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.tb-pd__thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.tb-pd__thumb {
    width: 62px;
    height: 62px;
    border-radius: var(--tb-radius-sm);
    border: 1px solid var(--tb-line);
    background: #fff;
    padding: 5px;
    cursor: pointer;
    transition: border-color .18s var(--tb-ease);
}

.tb-pd__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tb-pd__thumb.is-active,
.tb-pd__thumb:hover {
    border-color: var(--tb-cta);
}

.tb-pd__tools {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3;
}

.tb-tool {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--tb-line);
    background: #fff;
    color: var(--tb-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .18s var(--tb-ease), border-color .18s var(--tb-ease);
}

.tb-tool:hover {
    color: var(--tb-cta);
    border-color: var(--tb-primary-100);
}

.tb-tool.is-on {
    color: var(--tb-discount);
    border-color: var(--tb-discount);
}

.tb-pd__title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.9;
    color: var(--tb-ink);
}

.tb-pd__entitle {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--tb-muted);
    direction: ltr;
    /* ترتیب حروف لاتین درست خوانده شود، اما لبهٔ متن مثل عنوان فارسی راست بایستد */
    text-align: right;
}

.tb-pd__facts {
    display: grid;
    /* دسکتاپ: دو مشخصه کنار هم. قبلاً هر چهار مورد (کد محصول، وضعیت، برند،
       دسته‌بندی) یک ردیف کامل می‌گرفتند و نصف عرض ستون اطلاعات خالی می‌ماند؛
       قالب این‌ها را جفت‌جفت داخل .tb-pd__facts-row بسته، پس در دو ستون همان
       جفت‌ها کنار هم می‌نشینند.
       auto-fit به‌جای نقطه‌شکن: عرض ستون اطلاعات ثابت نیست (تصویر ۴۰۰px و جعبهٔ
       خرید ۳۳۶px از عرض کم می‌شوند)، پس دومین ستون فقط وقتی ساخته می‌شود که
       واقعاً جا باشد و در عرض‌های کم‌تر و موبایل خودکار تک‌ستونی می‌ماند.
       آستانهٔ ۱۹۰px = برچسب + فاصله + جای مقدار؛ زیر آن ستون دوم ساخته نمی‌شود
       و مشخصه‌ها دوباره تک‌ستونی می‌مانند (۱۰۲۴ و موبایل). */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    /* ارتفاع باقی‌ماندهٔ ستون به‌طور یکنواخت بین ردیف‌ها پخش می‌شود؛ نه فضای
       خالی می‌ماند و نه محتوایی له می‌شود */
    grid-auto-rows: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.tb-pd__facts-row {
    /* ردیف فقط گروه‌بندی قالب است؛ خودِ جعبه را مشخصه می‌سازد */
    display: contents;
}

.tb-pd__fact {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.6;
    background: var(--tb-line-soft);
    border-radius: var(--tb-radius-sm);
    box-shadow: var(--tb-ring);
}

.tb-pd__fact dt {
    flex: 0 0 auto;
    /* کف عرض برچسب ثابت ۹۲px بود؛ در جعبهٔ ۱۹۰pxِ دو ستونی فقط ~۵۶px برای مقدار
       می‌ماند و کد محصول می‌شکست. ۴۰٪ باعث است: در جعبهٔ پهن همان ۹۲px و در
       جعبهٔ تنگ‌تر، سهم کمتری از برچسب کم می‌آید و مقدار یک‌خطی می‌ماند. */
    min-width: min(92px, 40%);
    color: var(--tb-muted);
    margin: 0;
}

.tb-pd__fact dd {
    margin: 0;
    min-width: 0;
    color: var(--tb-ink);
    font-weight: bold;
    /* مقدار به لبهٔ دیگر جعبه می‌چسبد تا برچسب و مقدار خوب از هم تفکیک شوند */
    flex: 1 1 auto;
    text-align: end;
    /* مقدار کامل خوانده شود؛ در عرض کم به خط بعد می‌شکند، حذف نمی‌شود */
    overflow-wrap: anywhere;
}

.tb-pd__fact dd a {
    color: var(--tb-cta);
    text-decoration: none;
}

/* ردیف برچسب‌ها: چند لینک کنار هم، پس از یک ستون کامل استفاده می‌کند */
.tb-pd__fact--wide {
    grid-column: 1 / -1;
}

.tb-pd__fact--wide dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 8px;
    white-space: normal;
    overflow: visible;
}

/* انتخاب‌گر تنوع محصول: گروه‌ها بالای هم، هر گروه یک برچسب و ردیفی chip.
   chipها لینک نیستند (تا آدرس تکراری برای خزنده ساخته نشود) و قیمت/تصویر/
   موجودی را جاوااسکریپت از جدول هم‌خانوادگیِ همین markup عوض می‌کند. */
.tb-pd__variations {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    min-width: 0;
}

.tb-pd__vgroups {
    /* گروه‌های تنوع (رنگ، گارانتی، …) قبلاً همیشه زیر هم بودند و با یک گروه،
       نیمی از عرض خالی می‌ماند. auto-fit هر گروه را به اندازهٔ خودش نگه می‌دارد
       و فقط وقتی عرض کافی هست آن‌ها را کنار هم می‌چیند؛ روی گوشی تک‌ستونی می‌شود.
       محفظهٔ جدا از «انتخاب شما» دارد: آن خط تمام‌عرض است و اگر داخل همین grid
       باشد ستون‌ها را پُر شمرده و گروه‌ها را بی‌دلیل نصف عرض می‌کند. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    min-width: 0;
}

.tb-pd__vgroup {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.tb-pd__vlabel {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--tb-muted);
}

.tb-pd__vchips {
    /* chipها بر اساس تعدادشان عرض را پر می‌کنند: flexِ قبلی گزینه‌ها را به یک
       لبه می‌چسباند و جای باقی‌مانده خالی می‌ماند. اینجا هر chip یک ستون برابر
       می‌گیرد و auto-fit ستون‌های بی‌مصرف را جمع می‌کند، پس دو گزینه پهن‌تر و
       ده گزینه در چند ردیف می‌نشینند. کف ۱۱۲px فقط ستون‌ها را می‌شمارد؛ متن
       بلند در خود chip می‌شکند و ردیف از عرض بیرون نمی‌زند. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
}

.tb-pd__vchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* chip کشیده‌شده ممکن است بردر «ناموجود» را جا نکند؛ بدون wrap مقدار وسط
       کلمه می‌شکست (تقر/مز). اینجا خط دوم می‌آید و متن سالم می‌ماند */
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 2px;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--tb-ink);
    background: var(--tb-surface);
    border: 1px solid var(--tb-line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.tb-pd__vchip:hover {
    border-color: var(--tb-cta);
}

.tb-pd__vchip:focus-visible {
    outline: 2px solid var(--tb-cta);
    outline-offset: 2px;
}

.tb-pd__vchip.is-active {
    border-color: var(--tb-cta);
    background: var(--tb-cta-50);
    box-shadow: inset 0 0 0 1px var(--tb-cta);
    font-weight: bold;
}

.tb-pd__vthumb {
    /* در chip کشیده‌شده جای تنگ می‌شود؛ تصویر و برچسب «ناموجود» نباید له شوند،
       پس فشرده‌شدن فقط به متن مقدار می‌رسد (همان overflow-wrap پایین‌تر) */
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: var(--tb-radius-sm);
    background: var(--tb-line-soft);
}

.tb-pd__vvalue {
    /* break-word (نه anywhere): مقدار تا اندازهٔ بلندترین کلمه‌اش کوچک نمی‌شود،
       پس در chip تنگ به «قر/مز» نمی‌شکند؛ فقط اگر واقعاً جا نشد خط می‌شکند */
    overflow-wrap: break-word;
}

.tb-pd__vout {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    font-weight: normal;
    color: var(--tb-muted);
    background: var(--tb-line-soft);
    border-radius: 999px;
    padding: 1px 6px;
}

.tb-pd__vpicked {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12.5px;
    color: var(--tb-cta);
}

.tb-pd__vpicked b {
    font-weight: bold;
    overflow-wrap: anywhere;
}

/* وقتی کاربر پیش از انتخاب گزینه می‌خواهد به سبد بیفزاید، همان‌جا جلب توجه می‌کند */
.tb-pd__variations--ask {
    border-radius: var(--tb-radius);
    animation: tb-ask-pulse 1.1s var(--tb-ease) 2;
}

@keyframes tb-ask-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px var(--tb-cta-50); }
}

/* قاعدهٔ global [hidden] در این فایل displayهای grid/flex را لغو می‌کند؛ این
   گره‌ها دقیقاً با همین قاعده مخفی/نمایان می‌شوند، پس خودشان را نگه می‌دارند */
.tb-pd__variations [hidden],
.tb-buybox [hidden],
.tb-stickybar [hidden],
.tb-dialog [hidden] {
    display: none !important;
}

/* پیش‌نمایش کوتاهِ مشخصات فنی: جدولی جمع‌وجور با پس‌زمینهٔ بسیار ملایم
   که پایین ستون اطلاعات می‌نشیند و ارتفاع باقی‌مانده را پر می‌کند */
.tb-pd__specs {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    min-width: 0;
}

.tb-pd__specs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.tb-pd__spec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    background: var(--tb-line-soft);
    border-radius: var(--tb-radius-sm);
}

.tb-pd__spec dt {
    flex: 0 0 auto;
    margin: 0;
    color: var(--tb-muted);
    font-size: 12px;
    line-height: 1.6;
}

.tb-pd__spec dd {
    margin: 0;
    min-width: 0;
    color: var(--tb-ink);
    font-size: 12.5px;
    font-weight: bold;
    line-height: 1.6;
    text-align: end;
    overflow-wrap: anywhere;
}

.tb-pd__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-surface);
    color: var(--tb-cta);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
    transition: background .2s var(--tb-ease), border-color .2s var(--tb-ease);
}

.tb-pd__more:hover {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
}

.tb-pd__more i {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 1199px) {
    /* ستون اطلاعات باریک می‌شود؛ برچسب جمع‌تر می‌گردد تا مقدار کامل خوانده شود */
    .tb-pd__fact {
        gap: 6px;
    }

    .tb-pd__fact dt {
        min-width: 74px;
    }

    .tb-pd__spec dt {
        font-size: 11.5px;
    }
}

@media (max-width: 767px) {
    .tb-pd__fact {
        font-size: 12px;
        gap: 10px;
        padding: 10px 12px;
    }

    /* روی گوشی برچسب جمع می‌شود تا تمام عرض جعبه به مقدار برسد */
    .tb-pd__fact dt {
        min-width: 0;
    }

    /* روی گوشی هر مشخصه یک کارت تمام‌عرض می‌شود تا فضای خالی حس نشود */
    .tb-pd__specs-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-pd__spec {
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
    }

    .tb-pd__spec dt {
        font-size: 12px;
    }

    .tb-pd__spec dd {
        font-size: 13px;
    }
}

/* ستون چپ: فقط قیمت و افزودن به سبد.
   top با ارتفاع زندهٔ هدر تنظیم می‌شود تا کارت هرگز زیر هدر چسبان نرود. */
.tb-buybox {
    position: sticky;
    top: var(--tb-sticky-top);
    transition: top .28s var(--tb-ease);
    background: var(--tb-surface);
    border: 0;
    border-radius: var(--tb-radius-lg);
    padding: 18px;
    display: grid;
    gap: 14px;
    box-shadow: var(--tb-ring);
}

/* اگر ستون چپ بلندتر باشد، چسبندگی به ستون راست منتقل می‌شود */
.tb-pd.is-sticky-media .tb-buybox {
    position: static;
}

.tb-pd.is-sticky-media .tb-pd__media-col {
    position: sticky;
    top: var(--tb-sticky-top);
    transition: top .28s var(--tb-ease);
}

/* هر دو ستون از نما بلندترند؛ چسبندگی فقط بخشی از محتوا را دست‌نیافتنی می‌کند */
.tb-pd.is-no-sticky .tb-buybox,
.tb-pd.is-no-sticky .tb-pd__media-col {
    position: static;
}

.tb-buybox__seller {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--tb-ink-2);
}

.tb-buybox__seller svg {
    color: var(--tb-primary);
    flex: 0 0 auto;
}

.tb-buybox__price {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-block: 1px solid var(--tb-line-soft);
}

/* جزئیات قیمت (تخفیف و قیمت نهایی) فقط وقتی معنا دارد که گزینه‌ای انتخاب شده باشد */
.tb-buybox__detail {
    display: grid;
    gap: 6px;
}

/* بازهٔ قیمت گزینه‌ها، پیش از هر انتخاب */
.tb-buybox__range {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    color: var(--tb-muted);
    overflow-wrap: anywhere;
}

.tb-buybox__range strong {
    font-size: 19px;
    font-weight: bold;
    color: var(--tb-ink);
    line-height: 1.4;
}

.tb-buybox__oldrow {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.tb-buybox__old {
    font-size: 13px;
    color: var(--tb-muted);
    text-decoration: line-through;
}

.tb-buybox__now {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: flex-end;
}

.tb-buybox__now strong {
    font-size: 25px;
    font-weight: bold;
    color: var(--tb-ink);
    line-height: 1.4;
}

.tb-buybox__now span {
    font-size: 12.5px;
    color: var(--tb-muted);
}

.tb-buybox__save {
    text-align: end;
    font-size: 12px;
    color: var(--tb-discount);
    font-weight: bold;
}

/* راهنمای «اول یک گزینه انتخاب کن»؛ جای دکمهٔ سبد را می‌گیرد تا ابهام نماند */
.tb-buybox__need {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--tb-ink-2);
    text-align: end;
    background: var(--tb-line-soft);
    border-radius: var(--tb-radius-xs);
    overflow-wrap: anywhere;
}

/* «در سبد شماست»؛ وقتی همین قلم در سبد است، کنترل تعداد جای دکمهٔ افزودن
   می‌نشیند. کارت رنگی نمی‌خواهد: جای خودش در جعبهٔ خرید می‌ایستد. */
.tb-incart {
    display: grid;
    gap: 10px;
}

.tb-incart__row {
    display: flex;
    align-items: center;
    /* بدون تغییر خط؛ برچسب اگر جا نشود خودش جمع می‌شود، نه اینکه بیفتد پایین */
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.tb-incart__remove,
.tb-incart__qty {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}

.tb-incart__trash {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--tb-radius-xs);
    background: var(--tb-discount-50);
    color: var(--tb-discount);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s var(--tb-ease), color .2s var(--tb-ease);
}

.tb-incart__trash:hover {
    background: var(--tb-discount);
    color: #fff;
}

.tb-incart__label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    min-width: 0;
    /* چسبیده به چپِ استپر؛ ردیف هرگز نمی‌شکند، اگر جا نبود خودِ عبارت دو خط می‌شود */
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--tb-success);
}

@media (max-width: 767px) {
    /* همان کنترل روی انگشت گوشی اندازهٔ راحت‌تری می‌گیرد */
    .tb-incart__trash,
    .tb-incart .tb-qty button,
    .tb-incart .tb-qty input {
        width: 44px;
        height: 44px;
    }
}

.tb-buybox__perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.tb-buybox__perks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--tb-ink-2);
    line-height: 1.8;
}

.tb-buybox__perks svg {
    color: var(--tb-success);
    flex: 0 0 auto;
    margin-top: 3px;
}

.tb-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-sm);
    overflow: hidden;
}

.tb-qty button {
    width: 38px;
    height: 38px;
    border: 0;
    background: var(--tb-surface);
    color: var(--tb-primary);
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-qty button:hover:not([disabled]) {
    background: var(--tb-primary-50);
}

.tb-qty button[disabled] {
    color: var(--tb-muted);
    cursor: not-allowed;
}

.tb-qty input {
    width: 46px;
    height: 38px;
    border: 0;
    border-inline: 1px solid var(--tb-line);
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: var(--tb-ink);
    background: #fff;
    -moz-appearance: textfield;
}

.tb-qty input::-webkit-outer-spin-button,
.tb-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-qty input:focus {
    outline: none;
}

/* تب‌ها */
.tb-tabs {
    margin-top: 22px;
    background: var(--tb-surface);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-lg);
    overflow: hidden;
}

.tb-tabs__nav {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    border-bottom: 1px solid var(--tb-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.tb-tabs__nav::-webkit-scrollbar {
    display: none;
}

.tb-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border: 0;
    background: transparent;
    color: var(--tb-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .18s var(--tb-ease), border-color .18s var(--tb-ease);
}

.tb-tab:hover {
    color: var(--tb-ink-2);
}

.tb-tab.is-active {
    color: var(--tb-primary);
    border-bottom-color: var(--tb-cta);
}

.tb-tabs__panel {
    display: none;
    padding: 22px;
}

.tb-tabs__panel.is-active {
    display: block;
}

.tb-prose {
    font-size: 13.5px;
    line-height: 2.2;
    color: var(--tb-ink-2);
    word-break: break-word;
}

.tb-prose img {
    max-width: 100%;
    height: auto;
}

.tb-prose table {
    max-width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.tb-prose th,
.tb-prose td {
    border: 1px solid var(--tb-line);
    padding: 9px 12px;
}

.tb-prose th {
    background: var(--tb-line-soft);
    color: var(--tb-ink);
    font-weight: 600;
}

.tb-prose h2,
.tb-prose h3 {
    color: var(--tb-primary);
}

/* نظرات */
.tb-comment {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-comment:last-child {
    border-bottom: 0;
}

.tb-comment__side {
    display: grid;
    gap: 7px;
    align-content: start;
}

.tb-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    width: fit-content;
}

.tb-tag--buy {
    background: var(--tb-success-50);
    color: var(--tb-success);
}

.tb-tag--pos {
    background: var(--tb-success-50);
    color: var(--tb-success);
}

.tb-tag--neg {
    background: var(--tb-discount-50);
    color: var(--tb-discount);
}

.tb-tag--neu {
    background: var(--tb-line-soft);
    color: var(--tb-muted);
}

.tb-comment__title {
    font-size: 14px;
    font-weight: bold;
    color: var(--tb-ink);
    margin-bottom: 4px;
}

.tb-comment__by {
    font-size: 11.5px;
    color: var(--tb-muted);
    margin-bottom: 10px;
}

.tb-comment__text {
    font-size: 13px;
    line-height: 2.1;
    color: var(--tb-ink-2);
    white-space: pre-line;
}

.tb-proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin: 12px 0;
}

.tb-proscons ul {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 5px;
}

.tb-proscons li {
    font-size: 12.5px;
    color: var(--tb-ink-2);
    display: flex;
    gap: 7px;
    line-height: 1.9;
}

.tb-proscons span {
    font-size: 12px;
    font-weight: bold;
}

.tb-vote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--tb-muted);
    flex-wrap: wrap;
}

.tb-vote button {
    border: 1px solid var(--tb-line);
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--tb-ink-2);
    cursor: pointer;
}

.tb-vote button:hover,
.tb-vote button.checked {
    border-color: var(--tb-cta);
    color: var(--tb-cta);
    background: var(--tb-cta-50);
}

.tb-empty {
    padding: 26px 0;
    text-align: center;
    color: var(--tb-muted);
    font-size: 13px;
}

.tb-buybox__ship {
    border: 1px solid var(--tb-line-soft);
    border-radius: var(--tb-radius-sm);
    background: var(--tb-line-soft);
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--tb-ink-2);
}

.tb-buybox__ship summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: bold;
    color: var(--tb-primary);
    list-style: none;
}

.tb-buybox__ship summary::-webkit-details-marker {
    display: none;
}

.tb-buybox__ship p {
    margin: 10px 0 0;
    line-height: 2;
}

.tb-tabs__heading {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: bold;
    color: var(--tb-primary);
}

/* مشخصات ساختاریافتهٔ محصول: کارت جدولی مثل سایت‌های معتبر فروش کالا */
.tb-specs {
    display: grid;
    gap: var(--tb-gap);
}

.tb-spec-card {
    background: var(--tb-surface);
    border: 1px solid var(--tb-line-soft);
    border-radius: var(--tb-radius);
    overflow: hidden;
}

.tb-spec-card__title {
    margin: 0;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: bold;
    color: var(--tb-primary);
    background: var(--tb-primary-50);
    border-bottom: 1px solid var(--tb-line-soft);
}

.tb-spec-card__list {
    margin: 0;
    display: grid;
}

.tb-spec {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

.tb-spec + .tb-spec {
    border-top: 1px solid var(--tb-line-soft);
}

.tb-spec:nth-child(even) {
    background: var(--tb-line-soft);
}

.tb-spec dt {
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-ink-2);
    border-inline-end: 1px solid var(--tb-line-soft);
}

.tb-spec dd {
    margin: 0;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--tb-ink);
    line-height: 1.9;
    word-break: break-word;
}

@media (max-width: 767px) {
    .tb-spec {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .tb-spec dt,
    .tb-spec dd {
        padding: 9px 12px;
        font-size: 12.5px;
    }
}

/* دیالوگ افزودن به سبد */
.tb-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.tb-dialog.is-open {
    display: block;
}

.tb-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    opacity: 0;
    transition: opacity .25s ease;
}

.tb-dialog.is-open .tb-dialog__backdrop {
    opacity: 1;
}

.tb-dialog__box {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -46%);
    width: min(440px, calc(100vw - 32px));
    background: var(--tb-surface);
    border-radius: var(--tb-radius-lg);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    padding: 18px;
    display: grid;
    gap: 16px;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.tb-dialog.is-open .tb-dialog__box {
    opacity: 1;
    transform: translate(50%, -50%);
}

.tb-dialog__close {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--tb-line-soft);
    color: var(--tb-ink-2);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-dialog__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 34px;
}

.tb-dialog__thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--tb-radius-sm);
    border: 1px solid var(--tb-line);
    background: #fff;
    flex: 0 0 auto;
}

.tb-dialog__meta {
    min-width: 0;
}

.tb-dialog__title {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tb-ink);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tb-dialog__price {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--tb-primary);
}

/* متن تنوع انتخابی در دیالوگ: کاربر پیش از افزودن می‌بیند دقیقاً چه می‌خرد */
.tb-dialog__variant {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--tb-cta);
    overflow-wrap: anywhere;
}

.tb-dialog__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.tb-dialog__qtylabel {
    font-size: 13px;
    color: var(--tb-ink-2);
    font-weight: 600;
}

/* راهنمای محدودیت تعداد؛ فقط وقتی محصول کف یا سقف خرید دارد نمایش داده می‌شود */
.tb-dialog__limit,
.tb-cart-limit {
    margin: 2px 0 10px;
    color: var(--tb-muted);
    font-size: 11.5px;
    line-height: 1.8;
    text-align: center;
    overflow-wrap: break-word;
}

.tb-cart-limit {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

/* فرم حذف قلم سبد؛ مثل لینک قبلی جریان صفحه را تغییر نمی‌دهد */
.tb-cart-remove {
    display: inline;
}

/* تنوع انتخابیِ قلم سبد؛ کاربر دقیقاً می‌بیند کدام رنگ/سایز را خریده است */
.tb-cart-variation {
    display: inline-block;
    color: var(--tb-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

.tb-dialog__actions {
    display: grid;
    gap: 10px;
}

@media (max-width: 767px) {
    .tb-dialog__box {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: var(--tb-radius-lg) var(--tb-radius-lg) 0 0;
        transform: translateY(100%);
        transition: transform .3s ease, opacity .2s ease;
    }

    .tb-dialog.is-open .tb-dialog__box {
        transform: translateY(0);
    }
}

/* لایت‌باکس گالری */
.tb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: none;
    background: rgba(15, 23, 42, .88);
    align-items: center;
    justify-content: center;
}

.tb-lightbox.is-open {
    display: flex;
}

.tb-lightbox__stage {
    max-width: calc(100vw - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-lightbox__img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--tb-radius);
    background: #fff;
}

.tb-lightbox__close {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-lightbox__nav--prev {
    right: 22px;
}

.tb-lightbox__nav--next {
    left: 22px;
}

.tb-lightbox__nav.is-hidden,
.tb-lightbox__counter.is-hidden {
    display: none;
}

.tb-lightbox__counter {
    position: absolute;
    bottom: 22px;
    right: 50%;
    transform: translateX(50%);
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, .35);
    padding: 6px 14px;
    border-radius: 999px;
}

@media (max-width: 767px) {
    .tb-lightbox__stage {
        max-width: calc(100vw - 32px);
    }

    .tb-lightbox__nav--prev {
        right: 12px;
    }

    .tb-lightbox__nav--next {
        left: 12px;
    }
}

.tb-comments__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--tb-line-soft);
    border-radius: var(--tb-radius);
    background: var(--tb-line-soft);
    font-size: 12.5px;
    color: var(--tb-ink-2);
}

.tb-comments__cta p {
    margin: 0;
    line-height: 2;
    flex: 1 1 260px;
}

.tb-comments__list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.tb-comment__color {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--tb-muted);
}

.tb-comment__swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    flex: 0 0 auto;
}

.tb-proscons__col--pro span {
    color: var(--tb-success);
}

.tb-proscons__col--con span {
    color: var(--tb-discount);
}

.tb-vote a {
    border: 1px solid var(--tb-line);
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    color: var(--tb-ink-2);
    text-decoration: none;
}

.tb-vote a:hover {
    border-color: var(--tb-cta);
    color: var(--tb-cta);
}

/* نوار چسبنده موبایل */
.tb-stickybar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 880;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--tb-surface);
    border-top: 1px solid var(--tb-line);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .1);
}

.tb-stickybar__price {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.tb-stickybar__old {
    font-size: 11px;
    color: var(--tb-muted);
    text-decoration: line-through;
    line-height: 1.4;
}

.tb-stickybar__now {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tb-stickybar__now strong {
    font-size: 16px;
    font-weight: bold;
    color: var(--tb-ink);
    line-height: 1.4;
}

.tb-stickybar__now span {
    font-size: 11px;
    color: var(--tb-muted);
}

/* تا گزینه‌ای انتخاب نشده، نوار پایین قیمتی نشان نمی‌دهد؛ همان قاعدهٔ کارت خرید */
.tb-stickybar__need {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--tb-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-stickybar .tb-btn {
    flex: 0 0 auto;
    padding: 11px 18px;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   صفحهٔ لیست محصولات
   دسکتاپ: ستون فیلتر چسبان + شبکهٔ ۴ ستونه
   تبلت/موبایل: فیلترها داخل شیت تمام‌صفحه، دکمهٔ «فیلترها» بالای لیست
   -------------------------------------------------------------------------- */

.tb-pl {
    padding-top: var(--tb-gap);
}

.tb-pl__layout {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

/* پوشش‌های data-partial فقط برای شناسایی قطعه‌ها هستند و در چیدمان نقشی ندارند؛
   بدون این، پنل فیلتر داخل یک جعبهٔ کوتاه قرار می‌گرفت و position:sticky بی‌اثر می‌شد */
.tb-pl__layout > [data-partial] {
    display: contents;
}

/* --- پنل فیلترها --- */

.tb-pl__filters {
    position: sticky;
    top: var(--tb-sticky-top);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--tb-sticky-top) - 14px);
    background: var(--tb-surface);
    border-radius: var(--tb-radius-card);
    box-shadow: var(--tb-ring);
    overflow: hidden;
}

.tb-pl__filters-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--tb-primary-50);
    font-size: 13.5px;
    font-weight: bold;
    color: var(--tb-ink);
}

.tb-pl__filters-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* حذف همهٔ فیلترها کنار عنوان، نه بالای محصول‌ها */
.tb-pl__filters-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-tight);
    background: var(--tb-surface);
    font-size: 11.5px;
    font-weight: normal;
    line-height: 1.7;
    color: var(--tb-cta);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s var(--tb-ease), border-color .15s var(--tb-ease);
}

.tb-pl__filters-clear i {
    font-size: 14px;
}

.tb-pl__filters-clear:hover {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
}

.tb-pl__filters-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: var(--tb-surface);
    color: var(--tb-ink-2);
    font-size: 17px;
    cursor: pointer;
}

.tb-pl__filters-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 16px;
    overflow-y: auto;
}

/* اسکرول‌بار پیش‌فرض ویندوز (با فلش‌های بالا/پایین) ظاهر پنل را خراب می‌کند؛
   اینجا نازک و بی‌رنگ می‌شود ولی همان جای قبلی باقی می‌ماند تا حس اسکرول از دست نرود */
.tb-pl__filters-body {
    scrollbar-width: thin;
    scrollbar-color: var(--tb-primary-100) transparent;
}

.tb-pl__filters-body::-webkit-scrollbar {
    width: 5px;
}

.tb-pl__filters-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--tb-primary-100);
}

/* گروه‌های بازشو: فقط با CSS و بدون اسکریپت باز و بسته می‌شوند */

.tb-pl__group + .tb-pl__group {
    padding-top: 11px;
    border-top: 1px solid var(--tb-line-soft);
}

.tb-pl__discloser {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tb-pl__group-title {
    margin: 0;
}

.tb-pl__group-title label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-ink-2);
    cursor: pointer;
}

.tb-pl__group-title i {
    font-size: 17px;
    color: var(--tb-muted);
    transition: transform .2s var(--tb-ease);
}

.tb-pl__discloser:checked ~ .tb-pl__group-title i {
    transform: rotate(180deg);
}

.tb-pl__group-body {
    display: none;
    padding-top: 7px;
}

.tb-pl__discloser:checked ~ .tb-pl__group-body {
    display: block;
}

/* گزینهٔ فیلتر (چک‌باکس + برچسب + شمارش) */

.tb-pl__facet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--tb-radius-tight);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--tb-ink-2);
    text-decoration: none;
    transition: background-color .15s var(--tb-ease), color .15s var(--tb-ease);
}

.tb-pl__facet:hover {
    background: var(--tb-primary-50);
}

.tb-pl__facet-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1px solid var(--tb-primary-100);
    border-radius: 5px;
    background: var(--tb-surface);
    color: transparent;
    transition: background-color .15s var(--tb-ease), border-color .15s var(--tb-ease);
}

.tb-pl__facet-check i {
    font-size: 12px;
    line-height: 1;
}

.tb-pl__facet.is-on .tb-pl__facet-check {
    background: var(--tb-cta);
    border-color: var(--tb-cta);
    color: #fff;
}

.tb-pl__facet.is-on {
    color: var(--tb-primary);
    font-weight: bold;
}

.tb-pl__facet-label {
    /* شمارش چسبیده به برچسب می‌ماند؛ کشیدنِ برچسب کل عرض را پر می‌کرد و سطر را پراکنده می‌کرد */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-pl__facet-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--tb-muted);
}

/* بازهٔ قیمت: دو اینپوت روی یک ریل، سقف و کف از خود نتایج می‌آید */

.tb-pl__range {
    position: relative;
    height: 24px;
    margin: 8px 2px 0;
}

.tb-pl__range-track {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 999px;
    background: var(--tb-primary-100);
}

.tb-pl__range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--tb-cta);
}

.tb-pl__range-input {
    position: absolute;
    inset-inline: 0;
    top: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.tb-pl__range-input[data-range="max"] {
    z-index: 2;
}

.tb-pl__range-input::-webkit-slider-runnable-track {
    height: 24px;
    background: transparent;
}

.tb-pl__range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    border: 2px solid var(--tb-cta);
    border-radius: 50%;
    background: var(--tb-surface);
    box-shadow: var(--tb-shadow-xs);
    cursor: grab;
}

.tb-pl__range-input::-moz-range-track {
    height: 24px;
    background: transparent;
}

.tb-pl__range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 12px;
    height: 12px;
    border: 2px solid var(--tb-cta);
    border-radius: 50%;
    background: var(--tb-surface);
    box-shadow: var(--tb-shadow-xs);
    cursor: grab;
}

.tb-pl__range-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--tb-muted);
}

.tb-pl__range-value {
    font-size: 12.5px;
    font-weight: bold;
    color: var(--tb-ink);
}

/* کنترل دولحظهٔ وضعیت کالا */

.tb-pl__segment {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    padding: 3px;
    border-radius: var(--tb-radius-sm);
    background: var(--tb-line-soft);
}

.tb-pl__segment-item {
    flex: 1 1 0;
    padding: 6px 8px;
    border-radius: var(--tb-radius-tight);
    font-size: 12.5px;
    text-align: center;
    color: var(--tb-ink-2);
    text-decoration: none;
    transition: background-color .15s var(--tb-ease), color .15s var(--tb-ease);
}

.tb-pl__segment-item.is-on {
    background: var(--tb-surface);
    color: var(--tb-primary);
    font-weight: bold;
    box-shadow: var(--tb-shadow-xs);
}

.tb-pl__filters-foot {
    display: none;
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--tb-surface);
    box-shadow: 0 -1px 0 var(--tb-line), var(--tb-glow-band);
}

.tb-pl__btn-cancel {
    flex: 0 0 32%;
}

.tb-pl__btn-apply {
    flex: 1 1 auto;
}

.tb-pl__apply-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 11.5px;
    font-weight: normal;
}

/* --- ستون نتایج --- */

/* در صفحهٔ دسته، نام دسته و تعداد کالا هم‌خطِ گزینه‌های مرتب‌سازی می‌نشیند */
.tb-pl__head--cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
}

.tb-pl__head--cat .tb-pl__bar {
    flex: 0 0 auto;
    padding: 0;
}

.tb-pl__head--cat .tb-pl__sorts {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

/* صفحهٔ «همهٔ کالاها» عنوان دسته‌ای ندارد که نمایش داده شود */
.tb-pl__head--bare .tb-pl__bar {
    display: none;
}

.tb-pl__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0 10px;
}

.tb-pl__bar-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tb-pl__cat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.tb-pl__cat .tb-pl__count {
    margin: 0;
    white-space: nowrap;
}

/* خط عمودی ظریف میان عنوان دسته و مرتب‌سازی؛ فقط در دسکتاپ معنا دارد */
.tb-pl__bar-div {
    flex: 0 0 1px;
    align-self: stretch;
    min-height: 28px;
    background: var(--tb-line);
}

.tb-pl__heading {
    margin: 0;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.7;
    color: var(--tb-ink);
}

.tb-pl__count {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--tb-muted);
}

.tb-pl__count-on {
    color: var(--tb-primary-600);
}

/* دکمهٔ فیلترها؛ فقط زیر نقطه‌شکن دسکتاپ دیده می‌شود، مینیمال و با گردی کم */
.tb-pl__filterbtn {
    display: none;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-radius-tight);
    padding: 5px 9px;
    background: var(--tb-surface);
    color: var(--tb-ink-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s var(--tb-ease), background-color .15s var(--tb-ease);
}

.tb-pl__filterbtn i {
    font-size: 15px;
    line-height: 1;
    color: var(--tb-muted);
}

.tb-pl__filterbtn:hover {
    border-color: var(--tb-primary-100);
    background: var(--tb-primary-50);
}

.tb-pl__filterbtn-count {
    min-width: 17px;
    padding: 0 5px;
    border-radius: var(--tb-radius-tight);
    background: var(--tb-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: normal;
    line-height: 1.7;
}

.tb-pl__sorts {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tb-pl__sortlist {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tb-pl__sortlist::-webkit-scrollbar {
    display: none;
}

.tb-pl__sortlist li {
    flex: 0 0 auto;
}

.tb-pl__sort {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--tb-primary-50);
    font-size: 12.5px;
    color: var(--tb-ink-2);
    text-decoration: none;
    transition: background-color .15s var(--tb-ease), color .15s var(--tb-ease);
}

.tb-pl__sort:hover {
    background: var(--tb-primary-100);
}

.tb-pl__sort.is-on {
    background: var(--tb-primary);
    color: #fff;
    font-weight: bold;
}

.tb-pl__sort-more {
    display: none;
}

/* شبکهٔ کارت‌ها؛ فاصلهٔ کم تا کارت‌ها به هم نزدیک بمانند */

.tb-pl__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.tb-pl__card {
    min-height: 396px;
}

.tb-pl__card .tb-card__media {
    aspect-ratio: auto;
    height: 208px;
    padding: 12px;
}

.tb-pl__card .tb-card__title {
    font-size: 13.5px;
    min-height: 50px;
}

.tb-pl__card .tb-card__meta {
    gap: 6px;
    font-size: 11px;
}

.tb-pl__card .tb-price__value {
    font-size: 16.5px;
}

.tb-pl__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
}

.tb-pl__card-foot .tb-price {
    flex: 0 1 auto;
    min-width: 0;
}

.tb-pl__stock {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tb-line-soft);
    font-weight: bold;
    white-space: nowrap;
}

.tb-pl__stock--in {
    color: var(--tb-success);
    background: var(--tb-success-50);
}

.tb-pl__stock--out {
    color: var(--tb-muted);
}

/* لود در لحظه */

.tb-pl__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 8px;
    font-size: 12.5px;
    color: var(--tb-muted);
}

.tb-pl__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--tb-primary-100);
    border-top-color: var(--tb-cta);
    border-radius: 50%;
    animation: tb-pl-spin .8s linear infinite;
}

@keyframes tb-pl-spin {
    to {
        transform: rotate(360deg);
    }
}

/* هنگام تعویض نتایج، محتوای قدیمی فقط کمی محو می‌شود تا پرش دیده نشود */
.tb-pl.is-busy .tb-pl__grid {
    opacity: .5;
    transition: opacity .16s var(--tb-ease);
}

.tb-pl__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 18px;
    border-radius: var(--tb-radius-card);
    background: var(--tb-primary-50);
    text-align: center;
}

.tb-pl__empty i {
    font-size: 34px;
    color: var(--tb-muted);
}

.tb-pl__empty strong {
    font-size: 14px;
    color: var(--tb-ink);
}

.tb-pl__empty p {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--tb-muted);
}

/* صفحه‌بندی متنی؛ فقط وقتی جاوااسکریپت خاموش باشد نمایش داده می‌شود */
.tb-pl__pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 14px 0;
}

.tb-pl__pager a {
    padding: 6px 12px;
    border-radius: var(--tb-radius-tight);
    background: var(--tb-primary-50);
    font-size: 12.5px;
    color: var(--tb-ink-2);
    text-decoration: none;
}

.tb-pl__pager a[aria-current="page"] {
    background: var(--tb-primary);
    color: #fff;
    font-weight: bold;
}

/* پردهٔ تیرهٔ شیت فیلتر */
.tb-pl__scrim {
    position: fixed;
    inset: 0;
    z-index: 995;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--tb-ease), visibility .28s var(--tb-ease);
}

.tb-pl__scrim.is-open {
    opacity: 1;
    visibility: visible;
}

.tb-pl__scrim[hidden] {
    display: none;
}

/* تبلت: فیلترها به شیت تمام‌صفحه تبدیل می‌شوند */

@media (max-width: 1199px) {
    .tb-pl__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-pl__filters {
        position: fixed;
        inset: 0;
        z-index: 1000;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .3s var(--tb-ease), visibility .3s var(--tb-ease);
    }

    .tb-pl__filters.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .tb-pl__filters-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--tb-surface);
        box-shadow: 0 1px 0 var(--tb-line);
    }

    .tb-pl__filters-close {
        display: flex;
    }

    .tb-pl__filters-foot {
        display: flex;
    }

    .tb-pl__filters-body {
        padding: 12px 16px 18px;
    }

    .tb-pl__filterbtn {
        display: inline-flex;
    }

    /* زیر دسکتاپ عنوان دسته بالای مرتب‌سازی و در کنار دکمهٔ فیلترها می‌نشیند */
    .tb-pl__head--cat {
        display: block;
        padding-bottom: 0;
    }

    .tb-pl__head--cat .tb-pl__bar {
        padding: 2px 0 10px;
    }

    .tb-pl__head--cat .tb-pl__sorts {
        margin-bottom: 10px;
    }

    .tb-pl__head--cat .tb-pl__bar-div {
        display: none;
    }

    .tb-pl__cat {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }

    .tb-pl__head--bare .tb-pl__bar {
        display: flex;
        justify-content: flex-end;
    }

    .tb-pl__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .tb-pl__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* موبایل: کارت تمام‌عرض با یک خط جداکننده + چیپ‌های مرتب‌سازی فشرده */

@media (max-width: 767px) {
    .tb-pl__bar,
    .tb-pl__head--cat .tb-pl__bar {
        padding-bottom: 8px;
    }

    .tb-pl__heading {
        font-size: 15.5px;
    }

    .tb-pl__sorts {
        margin-bottom: 8px;
    }

    .tb-pl__sortlist {
        gap: 4px;
        scroll-snap-type: x proximity;
        /* انتهای ردیف محو می‌شود تا معلوم باشد مرتب‌سازی ادامه دارد */
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), rgba(0, 0, 0, .18));
        mask-image: linear-gradient(to left, #000 calc(100% - 26px), rgba(0, 0, 0, .18));
    }

    .tb-pl__sort {
        padding: 5px 11px;
        font-size: 12px;
        scroll-snap-align: start;
    }

    /* به‌جای نوشتهٔ «بقیه»، فلش کوچکی پایینِ انتهای ردیف می‌نشیند */
    .tb-pl__sort-more {
        position: absolute;
        inset-inline-end: 1px;
        bottom: -2px;
        display: inline-flex;
        line-height: 1;
        color: var(--tb-muted);
        pointer-events: none;
    }

    .tb-pl__sort-more i {
        font-size: 13px;
    }

    .tb-pl__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .tb-pl__card {
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--tb-line-soft);
    }

    .tb-pl__card:last-child {
        border-bottom: 0;
    }

    .tb-pl__card:hover {
        box-shadow: none;
    }

    /* چیدمان افقی: تصویر راست، جزئیات چپ */
    .tb-pl__card > a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        padding: 12px 0;
    }

    .tb-pl__card .tb-card__media {
        flex: 0 0 128px;
        width: 128px;
        height: 128px;
        aspect-ratio: auto;
        padding: 6px;
    }

    .tb-pl__card:hover .tb-card__media img {
        transform: none;
    }

    .tb-pl__card .tb-card__body {
        gap: 4px;
        padding: 0 0 2px;
        min-width: 0;
    }

    .tb-pl__card .tb-card__title {
        min-height: 0;
        font-size: 13px;
        line-height: 1.75;
    }

    .tb-pl__card .tb-card__meta {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .tb-pl__card .tb-price {
        align-items: flex-start;
        gap: 1px;
    }

    /* قیمت در لبهٔ راست (هم‌تراز عنوان) و نشان موجودی کنار آن */
    .tb-pl__card-foot {
        flex-direction: row-reverse;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 2px 10px;
    }

    .tb-pl__card .tb-price__value {
        font-size: 15.5px;
    }

    .tb-pl__card .tb-card__spacer {
        flex: 0 0 4px;
    }

    .tb-pl__more {
        padding: 14px 0 6px;
    }
}

/* صفحه‌نمایش‌های خیلی باریک: جا دادن قیمت و نشان موجودی در یک ردیف */
@media (max-width: 359px) {
    .tb-pl__card > a {
        gap: 10px;
    }

    .tb-pl__card .tb-card__media {
        flex: 0 0 92px;
        width: 92px;
        height: 92px;
    }

    .tb-pl__card .tb-price__value {
        font-size: 14.5px;
    }

    .tb-pl__card-foot {
        gap: 2px 7px;
    }

    .tb-pl__stock {
        padding: 2px 7px;
        font-size: 11px;
    }
}

/* --------------------------------------------------------------------------
   صفحهٔ سبد خرید
   دسکتاپ/تبلت: ردیف تک‌نفرهٔ اقلام + کارت جمع چسبان در ستون کناری
   موبایل: همان کارت جمع داخل شیت، و نوار پایین با «جزئیات بیشتر» و دکمهٔ ادامه
   -------------------------------------------------------------------------- */

.tb-cart__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 22px 0 12px;
}

.tb-cart__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--tb-ink);
}

.tb-cart__count {
    font-size: 12.5px;
    color: var(--tb-muted);
}

/* پیام پرداخت دو مرحله‌ای؛ آستانه و خودش از همان build_plan می‌آید */
.tb-cart__notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--tb-radius-sm);
    background: var(--tb-primary-50);
    color: var(--tb-primary-600);
    font-size: 12.5px;
    line-height: 1.9;
}

.tb-cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--tb-gap);
}

.tb-cart__items {
    /* سبد کم‌قلم کوتاه‌تر از کارت جمع است؛ با start جعبهٔ سفید کشیده نمی‌شود
       تا زیرِ آخرین کالا فضای خالی دیده نشود، و ستون کناری هم چسبان می‌ماند. */
    align-self: start;
    background: var(--tb-surface);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-ring);
    overflow: hidden;
}

/* یک ردیف برای هر قلم؛ نسخهٔ دسکتاپ و موبایل یکی است تا دو فهرست موازی نشوند */
.tb-cart__row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    /* تصویر، اطلاعات و کنترل‌ها روی یک خط تراز می‌نشینند؛ وگرنه ستون‌ها
       کشیده می‌شوند و متن نسبت به تصویر بالاتر دیده می‌شود. */
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.tb-cart__row + .tb-cart__row {
    border-top: 1px solid var(--tb-line);
}

.tb-cart__media {
    display: block;
}

.tb-cart__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--tb-line-soft);
    border-radius: var(--tb-radius-sm);
}

.tb-cart__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tb-cart__name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--tb-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tb-cart__name:hover {
    color: var(--tb-cta);
}

.tb-cart__unit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 0;
}

.tb-cart__unit-old {
    font-size: 12px;
    color: var(--tb-muted);
}

.tb-cart__unit-now {
    font-size: 14px;
    font-weight: 700;
    color: var(--tb-ink);
}

.tb-cart__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 190px;
}

/* سطل زباله در DOM پیش از فرم تعداد می‌آید، پس در چپ‌به‌راست سمت راستِ منفی می‌نشیند */
.tb-cart__tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-cart__remove,
.tb-cart__qty {
    display: flex;
    margin: 0;
}

.tb-cart__trash {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--tb-radius-xs);
    background: var(--tb-discount-50);
    color: var(--tb-discount);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s var(--tb-ease), color .2s var(--tb-ease);
}

.tb-cart__trash:hover {
    background: var(--tb-discount);
    color: #fff;
}

.tb-cart__stepper {
    display: flex;
    align-items: center;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-xs);
    box-shadow: var(--tb-ring);
    overflow: hidden;
}

.tb-cart__stepper button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tb-primary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.tb-cart__stepper button:hover {
    background: var(--tb-line-soft);
}

.tb-cart__stepper .quantity {
    flex: 0 0 46px;
    width: 46px;
    height: 34px;
    border: 0;
    border-inline: 1px solid var(--tb-line);
    background: var(--tb-surface);
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tb-ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

.tb-cart__stepper .quantity::-webkit-outer-spin-button,
.tb-cart__stepper .quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-cart__amount {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink);
    white-space: nowrap;
}

.tb-cart__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tb-cart__card {
    position: sticky;
    top: var(--tb-sticky-top);
    padding: 16px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-ring);
}

/* سه نشان اعتماد زیر کارت جمع؛ به‌جای لوگو، تا ستون کناری بی‌محتوا نماند
   (قالب مشترک: templates/shared/_checkout_trust.html) */
.tb-checkout__trust {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    list-style: none;
    background: var(--tb-surface);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-ring);
}

.tb-checkout__trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tb-ink-2);
}

.tb-checkout__trust-item i {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tb-primary-50);
    color: var(--tb-primary);
    font-size: 17px;
    line-height: 1;
}

/* سطرهای جمع؛ کارت کناری و شیت موبایل هر دو همین قالب را INCLUDE می‌کنند */
.tb-cart__lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-cart__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--tb-ink-2);
}

.tb-cart__line--off {
    font-weight: 600;
    color: var(--tb-discount);
}

.tb-cart__line--pay {
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink);
}

.tb-cart__rule {
    margin: 2px 0;
    border: 0;
    border-top: 1px dashed var(--tb-line);
}

.tb-cart__shipnote,
.tb-cart__reserve {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--tb-muted);
}

.tb-cart__cta {
    margin-top: 12px;
}

/* «خریدت رو کامل‌تر کن»؛ آخرین بلوک صفحهٔ سبد است و فاصلهٔ پایینش تا فوتر را
   خودش نگه می‌دارد تا در دسکتاپ به فوتر نچسبد. */
.tb-cart__suggest {
    margin-bottom: 18px;
}

/* نوار پایین موبایل؛ فقط زیر ۷۶۷ پیکسل و بالای نوار چسبان سایت می‌آید */
.tb-cartbar {
    display: none;
}

.tb-cartbar__more {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: start;
}

.tb-cartbar__label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--tb-muted);
    white-space: nowrap;
}

.tb-cartbar__value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tb-ink);
    white-space: nowrap;
}

.tb-cartbar__more i {
    font-size: 16px;
    line-height: 1;
    color: var(--tb-muted);
    transition: transform .28s var(--tb-ease);
}

/* کشو که باز می‌شود فلش به سمت پایین برمی‌گردد؛ بدون :has() فقط فلش ثابت می‌ماند */
body:has(.tb-cartinfo.is-open) .tb-cartbar__more i {
    transform: rotate(180deg);
}

.tb-cartbar .tb-btn {
    flex: 0 0 auto;
    padding: 11px 20px;
    font-size: 13px;
}

.tb-cartinfo {
    position: fixed;
    inset: 0;
    z-index: 968;
    visibility: hidden;
    transition: visibility 0s linear .28s;
}

.tb-cartinfo.is-open {
    visibility: visible;
    transition-delay: 0s;
}

.tb-cartinfo__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .22s var(--tb-ease);
}

.tb-cartinfo.is-open .tb-cartinfo__backdrop {
    opacity: 1;
}

.tb-cartinfo__sheet {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-lg) var(--tb-radius-lg) 0 0;
    box-shadow: var(--tb-shadow-lg);
    transform: translateY(100%);
    transition: transform .28s var(--tb-ease);
}

.tb-cartinfo.is-open .tb-cartinfo__sheet {
    transform: translateY(0);
}

.tb-cartinfo__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tb-line);
}

.tb-cartinfo__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink);
}

.tb-cartinfo__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tb-line-soft);
    color: var(--tb-ink-2);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.tb-cartinfo__body {
    padding: 16px;
    overflow-y: auto;
}

.tb-cartinfo__foot {
    flex: 0 0 auto;
    /* پایین کشو خودش بالای نوار قیمت می‌ایستد، پس safe-area دوباره اضافه نمی‌شود */
    padding: 12px 16px;
    border-top: 1px solid var(--tb-line);
}

/* تأیید حذف؛ پیش‌فرمِ همان فرم POST است، پس حذف همچنان فقط با POST می‌ماند */
.tb-confirm {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    visibility: hidden;
    transition: visibility 0s linear .2s;
}

.tb-confirm.is-open {
    visibility: visible;
    transition-delay: 0s;
}

.tb-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    transition: opacity .2s var(--tb-ease);
}

.tb-confirm.is-open .tb-confirm__backdrop {
    opacity: 1;
}

.tb-confirm__box {
    position: relative;
    width: min(420px, 100%);
    padding: 22px 18px 16px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-shadow-lg);
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .2s var(--tb-ease), transform .2s var(--tb-ease);
}

.tb-confirm.is-open .tb-confirm__box {
    opacity: 1;
    transform: none;
}

.tb-confirm__text {
    margin: 0 0 18px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.9;
    color: var(--tb-ink);
}

.tb-confirm__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tb-btn--danger {
    background: var(--tb-discount);
    color: #fff;
}

.tb-btn--danger:hover {
    background: #d92f45;
    color: #fff;
}

.tb-cart__empty {
    padding: 40px 0 56px;
    text-align: center;
    color: var(--tb-ink-2);
}

.tb-cart__empty > i {
    font-size: 46px;
    line-height: 1;
    color: var(--tb-primary-100);
}

.tb-cart__empty-title {
    margin: 12px 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--tb-ink);
}

.tb-cart__empty-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
}

.tb-cart__empty-links a {
    font-size: 13px;
    color: var(--tb-cta);
    text-decoration: none;
    border-bottom: 1px solid var(--tb-cta-50);
    padding-bottom: 2px;
}

@media (max-width: 1023px) {
    .tb-cart {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-cart__card {
        position: static;
    }
}

@media (min-width: 768px) {
    /* شیت و نوار پایین فقط مختص موبایل است؛ در دسکتاپ کارت کناری همه‌کاره است */
    .tb-cartinfo {
        display: none;
    }
}

@media (max-width: 767px) {
    .tb-cart__aside {
        display: none;
    }

    .tb-cart__row {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding: 14px 12px;
    }

    /* در موبایل کنترل تعداد و مبلغ در یک ردیف، و راهنمای سقف تعداد در خط بعد */
    .tb-cart__side {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        gap: 6px 12px;
    }

    .tb-cart__side .tb-cart-limit {
        flex: 1 1 100%;
        order: 3;
        margin: 2px 0 0;
    }

    .tb-cart__amount {
        font-size: 14px;
    }

    .tb-cartbar {
        display: flex;
        position: fixed;
        z-index: 895;
        inset-inline: 0;
        bottom: calc(var(--tb-bottombar-h) + env(safe-area-inset-bottom));
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--tb-surface);
        border-top: 1px solid var(--tb-line);
        box-shadow: 0 -6px 20px rgba(16, 24, 40, .1);
    }

    body.tb-has-cart .wrapper {
        padding-bottom: calc(var(--tb-bottombar-h) + var(--tb-cartbar-h) + env(safe-area-inset-bottom));
    }

    /* شیت و پردهٔ آن بالای نوار قیمت می‌ایستند، وگرنه کشو خودِ نوار را می‌پوشاند */
    .tb-cartinfo__backdrop,
    .tb-cartinfo__sheet {
        bottom: calc(var(--tb-bottombar-h) + var(--tb-cartbar-h) + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   ریسپانسیو
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    :root {
        --tb-pad: 18px;
    }

    .tb-rail > * {
        --tb-col-w: calc((100% - 3 * var(--tb-gap)) / 4.4);
    }

    .tb-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tb-pd {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .tb-pd__summary {
        grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
        gap: 18px;
    }

    .tb-footer__top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    /* لینک‌های ردیف دوم و جداکنندهٔ کنارشان با هم می‌روند */
    .tb-nav__extras,
    .tb-nav__div {
        display: none;
    }

    .tb-mega__inner {
        grid-template-columns: 190px 1fr;
    }

    .tb-rail > * {
        --tb-col-w: calc((100% - 2 * var(--tb-gap)) / 3.4);
    }

    .tb-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tb-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .tb-pd {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-buybox,
    .tb-pd.is-sticky-media .tb-buybox,
    .tb-pd__media-col,
    .tb-pd.is-sticky-media .tb-pd__media-col {
        position: static;
    }

    .tb-buybox__cta-desktop {
        display: none;
    }

    .tb-stickybar {
        display: flex;
    }

    body.tb-has-stickybar .wrapper {
        padding-bottom: 74px;
    }

    .tb-comment {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-hero__arrow {
        display: none;
    }
}

@media (max-width: 767px) {
    :root {
        --tb-gap: 10px;
        --tb-pad: 12px;
        --tb-radius-lg: 14px;
        --tb-radius: 10px;
        --tb-radius-sm: 9px;
        /* ارتفاع ردیف تک‌نفرهٔ هدر موبایل؛ ردیف دوم (ناو) در موبایل نمایش داده نمی‌شود،
           پس صفر گرفته می‌شود تا جای هدر در محتوا دقیقاً همان چیزی باشد که دیده می‌شود */
        --tb-header-h: 60px;
        --tb-nav-h: 0px;
    }

    .tb-header__top {
        height: var(--tb-header-h);
        padding: 0;
    }

    /* هدر موبایل: ردیف اول جستجوی نمادین تمام‌عرض، ردیف دوم لوگو */
    .tb-logo,
    .tb-search,
    .tb-header__actions,
    .tb-nav,
    .tb-divider-v {
        display: none;
    }

    
    .tb-searchfake {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;

        width: calc(100% - 16px);
        min-width: 0;
        height: 45px;
        margin: 0 8px;
        padding: 0 12px;

        box-sizing: border-box;
        border: 1px solid var(--tb-line);
        border-radius: 9px;

        background: var(--tb-line-soft);
        color: var(--tb-muted);
        font-family: inherit;
        font-size: 13px;
        text-align: start;
        cursor: pointer;
    }

    .tb-searchfake > .mdi-magnify {
        flex: 0 0 auto;
        font-size: 20px;
        color: var(--tb-primary);
    }

    .tb-searchfake__brand {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .tb-searchfake__brand img {
        display: block;
        width: 68px;
        height: 37px;
        object-fit: contain;
    }

    .tb-searchfake__tagline {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-inline-start: auto;
        padding-inline-start: 8px;

        white-space: nowrap;
        font-size: 10px;
        color: var(--tb-muted);
    }

    .tb-searchfake__tagline i {
        font-size: 14px;
        color: #d69a32;
    }


    .tb-header__moblogo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--tb-nav-h);
        border-top: 1px solid var(--tb-line-soft);
    }

    /* لوگوی ردیف دوم موبایل؛ با قاعدهٔ «حذف لوگو در موبایل» تداخل نکند */
    .tb-header__moblogo .tb-logo {
        display: flex;
    }

    .tb-header__moblogo .tb-logo img {
        max-height: 34px;
        max-width: 132px;
    }

    .wrapper {
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
    }

    /* نوار چسبان پایین */
    .tb-bottombar {
        display: flex;
    }

    /* پردهٔ تیره پشت پنل‌ها تا بالای نوار پایین می‌آید، پس نوار هرگز تار نمی‌شود */
    .tb-backdrop {
        bottom: calc(var(--tb-bottombar-h) + env(safe-area-inset-bottom));
    }

    /* در صفحه محصول، نوار افزودن به سبد بالای نوار پایین می‌نشیند */
    .tb-stickybar {
        bottom: calc(60px + env(safe-area-inset-bottom));
    }

    body.tb-has-stickybar .wrapper {
        padding-bottom: calc(126px + env(safe-area-inset-bottom));
    }

    .tb-pop {
        --tb-pop-w: min(320px, calc(100vw - 20px));
    }

    .tb-pop--cart {
        --tb-pop-w: min(420px, calc(100vw - 20px));
    }

    .tb-hero {
        margin-top: 0;
    }

    .tb-hero__media {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .tb-hero__media .tb-hero__desktop {
        display: none;
    }

    .tb-hero__media .tb-hero__mobile {
        display: block;
    }

    /* بنرها: ۳ و ۴ تایی اسکرول افقی، ۲ تایی دو ستونه */
    .tb-banners--3,
    .tb-banners--4 {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tb-banners--3::-webkit-scrollbar,
    .tb-banners--4::-webkit-scrollbar {
        display: none;
    }

    .tb-banners--3 > .tb-banner {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }

    .tb-banners--4 > .tb-banner {
        flex: 0 0 46%;
        scroll-snap-align: start;
    }

    .tb-banners--3 .tb-banner__media,
    .tb-banners--4 .tb-banner__media {
        aspect-ratio: 398 / 300;
    }

    /* موبایل: سکشن تمام‌عرض و کارت‌های تخت؛ جداسازی فقط با یک خط عمودی بسیار ظریف */
    .tb-section--bleed {
        --tb-x: 8px;
        padding: 16px var(--tb-x) 18px;
    }

    .tb-card {
        border-radius: var(--tb-radius-card);
    }

    .tb-card:hover {
        box-shadow: none;
    }

    .tb-rail {
        gap: 0;
    }

    .tb-rail > * {
        --tb-col-w: calc(100% / 2.2);
    }

    .tb-rail > .tb-card {
        border-radius: 0;
    }


    .tb-rail--scroll > * {
        flex-basis: 156px;
    }

    .tb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .tb-section__title {
        font-size: 16.5px;
    }

    .tb-section--boxed {
        padding: 14px;
        border-radius: var(--tb-radius);
    }

    .tb-navbtns {
        display: none;
    }

    /* موبایل: سه کارت در ردیف؛ با flex ردیف آخر هم کل عرض را پر می‌کند */
    .tb-cats__rail {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tb-cat {
        flex: 1 1 28%;
        padding: 10px 4px;
        box-shadow: none;
        border-radius: var(--tb-radius-sm);
        background: var(--tb-line-soft);
    }

    .tb-cat__img {
        width: 50px;
        height: 50px;
    }

    .tb-footer__top {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .tb-pd__panel {
        padding: 14px;
        border-radius: var(--tb-radius);
    }

    .tb-pd__summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tb-pd__title {
        font-size: 16px;
    }

    .tb-pd__slide img,
    .tb-pd__stage {
        max-height: 340px;
    }

    .tb-tabs__panel {
        padding: 14px;
    }

    .tb-totop {
        bottom: 86px;
    }
}

@media (max-width: 400px) {
    .tb-iconbtn {
        min-width: 52px;
        font-size: 10px;
    }

    .tb-logo__fallback {
        font-size: 19px;
    }
}

@media (min-width: 768px) {
    .tb-burger {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   صفحهٔ درباره ما
   -------------------------------------------------------------------------- */

.tb-about__hero {
    background: var(--tb-primary);
    color: #fff;
}

.tb-about__heroInner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 168px;
    overflow: hidden;
}

/* بنر از پنل مدیریت؛ پشت متن می‌نشیند و پردهٔ تیره فقط برای خوانایی است */
.tb-about__heroImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-about__hero--image .tb-about__heroInner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 44, 84, .55) 0%, rgba(10, 34, 66, .82) 48%, rgba(10, 34, 66, .9) 100%);
}

.tb-about__heroText {
    position: relative;
    width: 100%;
    padding-block: 24px 20px;
}

.tb-about__title {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.7;
    color: #fff;
}

.tb-about__lead {
    margin: 6px 0 0;
    max-width: 72ch;
    font-size: 13.5px;
    line-height: 2;
    color: rgba(255, 255, 255, .8);
}

.tb-about__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    margin-top: 26px;
    padding: 22px 24px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-lg);
    box-shadow: var(--tb-glow-band);
}

/* ردیف دوم تصویر را به طرف اول می‌برد تا صفحه یکنواخت نباشد */
.tb-about__row--flip .tb-about__rowText {
    order: 2;
}

.tb-about__row--flip .tb-about__rowMedia {
    order: 1;
}

/* متن همان چیزی است که در پنل نوشته شده؛ فقط اندازه و فاصله اینجا تنظیم می‌شود */
.tb-about__rowText {
    min-width: 0;
    font-size: 14px;
    line-height: 2.1;
    color: var(--tb-ink-2);
}

.tb-about__rowText > :first-child {
    margin-top: 0;
}

.tb-about__rowText p + p {
    margin-top: 12px;
}

.tb-about__rowText h2,
.tb-about__rowText h3 {
    margin: 18px 0 8px;
    font-size: 16px;
    font-weight: bold;
    color: var(--tb-primary);
}

.tb-about__rowText ul {
    margin: 0 20px 0 0;
    padding: 0;
}

.tb-about__rowText li {
    margin-bottom: 6px;
}

.tb-about__rowText img {
    max-width: 100%;
    height: auto;
}

.tb-about__rowMedia {
    min-width: 0;
}

.tb-about__rowMedia img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--tb-radius);
}

.tb-about__help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 26px 0;
    padding: 18px 22px;
    background: var(--tb-primary-50);
    border-radius: var(--tb-radius-lg);
}

.tb-about__helpBody {
    flex: 1 1 320px;
    min-width: 0;
}

.tb-about__helpTitle {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--tb-primary);
    line-height: 1.8;
}

.tb-about__helpText {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--tb-muted);
}

.tb-about__helpActions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .tb-about__heroInner {
        min-height: 140px;
    }

    .tb-about__title {
        font-size: 20px;
    }

    .tb-about__row,
    .tb-about__row--flip {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px 16px;
    }

    /* در موبایل ترتیب ثابت می‌ماند: اول متن، بعد تصویر */
    .tb-about__row--flip .tb-about__rowText {
        order: 1;
    }

    .tb-about__row--flip .tb-about__rowMedia {
        order: 2;
    }

    .tb-about__rowMedia img {
        height: 190px;
    }

    .tb-about__helpActions .tb-btn {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   عنوان بخش‌ها
   تزیین «دو دایره» (تصویر title-circles.png در main.css) سراسری حذف می‌شود.
   فاصلهٔ ۴۰ پیکسلی همان جای خالی بود؛ با برداشتن تزیین به اندازهٔ حالت
   بدون تزیین (۱۰ پیکسل) برمی‌گردد تا عنوان با لبهٔ بخش هم‌تراز بماند.
   -------------------------------------------------------------------------- */

.title-wide h2::before {
    display: none;
}

.title-wide h2 {
    padding-right: 10px;
}

/* --------------------------------------------------------------------------
   پنل کاربری مشتری
   دسکتاپ همان چیدمان دوستونهٔ قبلی می‌ماند. در موبایل سایدبار تکراری حذف
   می‌شود و جایش دکمهٔ برگشت می‌آید؛ جدول سفارش‌ها هم به کارت تبدیل می‌شود.
   -------------------------------------------------------------------------- */

/* کارت شناسایی پنل: تصویر در راست، نام و شماره در چپِ همان ردیف.
   تصویر پیش‌تر ۲۲۵ پیکسل و در کارت جدا بود؛ در موبایل دو کارت پشت سر هم
   نیم‌صفحه را می‌گرفت و جای خالی می‌نماورد. */
.tb-dash__idRow {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tb-dash__avatar {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 100%;
}

.tb-dash__idRow .profile-header-content {
    min-width: 0;
}

.tb-dash__idRow .profile-username {
    overflow-wrap: anywhere;
}

/* اسلایدر پیشنهادی پایین پنل؛ همان فاصلهٔ پایینِ نسخهٔ قبلی تا فوتر */
.tb-dash__slider {
    margin-bottom: 26px;
}

/* مرسوله‌های یک سفارش: هر قلم یک کارت زیر هم.
   جدول هشت‌ستونه در ستون ~۱۰۲۰ پیکسلی پنل جا نمی‌شد (ستون «عملیات» به ۷۳px
   می‌رسید) و در گوشی برچسب ستون‌ها را از دست می‌داد؛ عددها همان فیلدهای
   OrderProduct هستند و چیزی کم یا زیاد نشده است. */
.tb-parcels {
    /* تیتر قدیمی مرسوله‌ها float:right و تمام‌عرض است؛ هر باکسی که BFC جدید بسازد
       (flex/grid) برای فرار از آن shrink-to-fit شده و عرضش صفر می‌شود. */
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tb-parcel {
    padding: 16px;
    background: var(--tb-surface);
    border-radius: var(--tb-radius);
    box-shadow: var(--tb-ring);
}

.tb-parcel__top {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.tb-parcel__media {
    display: block;
}

.tb-parcel__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--tb-line-soft);
    border-radius: var(--tb-radius-sm);
}

.tb-parcel__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tb-parcel__num {
    font-size: 12px;
    font-weight: 600;
    color: var(--tb-muted);
}

.tb-parcel__name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--tb-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.tb-parcel__name:hover {
    color: var(--tb-cta);
}

.tb-parcel__from {
    font-size: 12px;
    color: var(--tb-muted);
    overflow-wrap: anywhere;
}

.tb-parcel__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-inline-start: 14px;
}

.tb-parcel__total span {
    font-size: 12px;
    color: var(--tb-muted);
}

.tb-parcel__total b {
    font-size: 15px;
    font-weight: 700;
    color: var(--tb-ink);
    overflow-wrap: anywhere;
}

.tb-parcel__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tb-line);
}

.tb-parcel__facts>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tb-parcel__facts span {
    font-size: 12px;
    color: var(--tb-muted);
}

.tb-parcel__facts b {
    font-size: 13px;
    font-weight: 600;
    color: var(--tb-ink);
    overflow-wrap: anywhere;
}

.tb-parcel__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.tb-parcel__actions .tb-btn {
    flex: 1 1 0;
}

/* نوار بازگشت؛ فقط در موبایل و فقط در بخش‌های داخلی فعال می‌شود */
.tb-dash__bar {
    display: none;
}

.tb-dash__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: bold;
    color: var(--tb-primary);
    text-decoration: none;
    background: var(--tb-surface);
    border-radius: var(--tb-radius-sm);
    box-shadow: var(--tb-shadow-sm);
}

.tb-dash__back:hover {
    color: var(--tb-cta);
}

.tb-dash__backIcon {
    font-size: 20px;
    line-height: 1;
}

/* روی دسکتاپ همان فلش قبلی می‌ماند؛ واژهٔ «مشاهده» فقط در کارت موبایل لازم است */
.tb-order__linkText {
    display: none;
}

/* پیش‌تر با جاوااسکریپت ست می‌شد؛ ردیف‌های افزوده‌شده هم همان نشانگر را بگیرند */
.table-order tbody tr.clickable-row {
    cursor: pointer;
}

/* تا پیش از lg ستون پنل باریک است؛ چهار فکت در حدود ۱۱۰px جا نمی‌شوند و
   برچسب یا عدد روی خط بعد می‌افتد، پس دو ستون می‌شود. */
@media (max-width: 991px) {
    .tb-parcel__top {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .tb-parcel__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .tb-dash__avatar {
        width: 68px;
        height: 68px;
    }

    .tb-dash__idRow {
        gap: 12px;
    }

    /* در گوشی تصویر و نام روی یک خط، مبلغ و عددها زیر آن؛ دو ستون برای
       فکت‌ها تا ردیف بلند نشود و برچسب هیچ عددی نیفتد. */
    .tb-parcel {
        padding: 14px;
    }

    .tb-parcel__top {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .tb-parcel__total {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        padding: 10px 0 0;
    }

    .tb-parcel__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tb-dash__side--sub {
        display: none;
    }

    .tb-dash__bar {
        display: block;
    }

    /* جدول سفارش‌ها در گوشی خوانا نمی‌شود؛ هر ردیف یک کارت است */
    table.table-order {
        min-width: 0;
        width: 100%;
    }

    .table-order thead {
        display: none;
    }

    .table-order,
    .table-order tbody,
    .table-order tr {
        display: block;
        width: 100%;
    }

    .table-order tbody tr {
        position: relative;
        margin-bottom: 10px;
        padding: 12px 14px;
        background: var(--tb-surface);
        border-radius: var(--tb-radius);
        box-shadow: var(--tb-shadow-sm);
    }

    .table-order tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border: 0;
        font-size: 13px;
        text-align: start;
    }

    .table-order tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--tb-muted);
    }

    .table-order tbody td.tb-order__code {
        padding-bottom: 9px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--tb-line);
        font-size: 14px;
        font-weight: bold;
        color: var(--tb-primary);
    }

    /* شمارهٔ ردیف در گوشی مفهومی ندارد */
    .table-order tbody td.tb-order__num {
        display: none;
    }

    .table-order tbody td.details-link {
        padding-top: 9px;
        border-top: 1px solid var(--tb-line);
    }

    .table-order tbody td.details-link .tb-order__linkText {
        display: inline;
    }

    /* در دسکتاپ همان فلش درشت قبلی است؛ در کارت گوشی واژهٔ «مشاهده» اندازهٔ متن را می‌خواهد */
    .table-order tbody td.details-link a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: var(--tb-cta);
        font-weight: bold;
    }

    .table-order tbody td.details-link a .mdi {
        font-size: 18px;
        line-height: 1;
    }

    /* جدول تیکت: پنج ستون nowrap در ۳۹۰px جا نمی‌شد و اسکرول افقی می‌آورد؛ مثل بقیهٔ
       لیست‌های پنل به کارت‌های زیر هم تبدیل می‌شود (برچسب ستون‌ها همین‌جا ثابت است چون
       ردیف‌های «نمایش بیشتر» با جاوااسکریپت از همان ساختار قبلی می‌آیند). */
    .tb-ticket-table thead {
        display: none;
    }

    .tb-ticket-table,
    .tb-ticket-table tbody,
    .tb-ticket-table tr {
        display: block;
        width: 100%;
    }

    .tb-ticket-table tbody tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        background: var(--tb-surface);
        border: 1px solid var(--tb-line);
        border-radius: var(--tb-radius-sm);
    }

    .tb-ticket-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 5px 0;
        border: 0;
        white-space: normal;
        text-align: start;
        font-size: 13px;
    }

    .tb-ticket-table tbody td::before {
        flex: 0 0 auto;
        color: var(--tb-muted);
        font-size: 12px;
    }

    .tb-ticket-table tbody td:nth-child(1)::before {
        content: "شناسه";
    }

    .tb-ticket-table tbody td:nth-child(2)::before {
        content: "موضوع";
    }

    .tb-ticket-table tbody td:nth-child(3)::before {
        content: "آخرین بروزرسانی";
    }

    .tb-ticket-table tbody td:nth-child(4)::before {
        content: "وضعیت";
    }

    .tb-ticket-table tbody td:nth-child(5)::before {
        content: "عملیات";
    }

    .tb-ticket-table tbody td[colspan] {
        justify-content: center;
        color: var(--tb-muted);
    }

    .tb-ticket-table tbody td[colspan]::before {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}