.tf-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: .82rem;
    color: var(--tf-color-muted, #7c818c);
}
.tf-page-breadcrumb a { color: inherit; text-decoration: none; }
.tf-page-breadcrumb a:hover { color: var(--tf-color-text, #14111e); }
.tf-page-breadcrumb i { font-size: .62rem; opacity: .6; }
.tf-page-breadcrumb > span:last-child { color: var(--tf-color-text, #14111e); }

.tf-page-title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 6px;
    line-height: 1.2;
}
.tf-page-subtitle {
    font-size: .9rem;
    color: var(--tf-color-muted, #7c818c);
    margin: 0;
    line-height: 1.6;
}

.tf-state-block {
    text-align: center;
    padding: 64px 24px;
    border: 1px dashed var(--tf-color-border, rgba(0, 0, 0, .12));
    border-radius: var(--tf-radius-lg, 16px);
}
.tf-state-block i { font-size: 2.4rem; color: var(--tf-color-border, rgba(0, 0, 0, .18)); display: block; margin-bottom: 14px; }
.tf-state-block__title { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.tf-state-block__text { font-size: .85rem; color: var(--tf-color-muted, #7c818c); margin: 0; }

.tf-search-results__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 28px;
}
.tf-search-results__titles { min-width: 0; }
.tf-search-results__form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 260px;
    max-width: 420px;
}
.tf-search-results__input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .14));
    border-radius: var(--tf-radius-sm, 8px);
    font: inherit;
    font-size: .88rem;
    background: var(--tf-color-surface, #fff);
    color: inherit;
}
.tf-search-results__input:focus {
    outline: none;
    border-color: var(--tf-color-primary, #14111e);
}
.tf-search-results__submit {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tf-color-primary, #14111e);
    border-radius: var(--tf-radius-sm, 8px);
    background: var(--tf-color-primary, #14111e);
    color: var(--tf-color-on-primary, #fff);
    cursor: pointer;
}

.tf-brand-detail__header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
}
.tf-brand-detail__logo {
    flex-shrink: 0;
    width: 110px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
    border-radius: var(--tf-radius-sm, 8px);
}
.tf-brand-detail__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tf-brand-detail__info { flex: 1; min-width: 0; }
.tf-brand-detail__desc { font-size: var(--tf-brand-detail-text-size, .88rem); line-height: 1.7; margin-top: 10px; color: var(--tf-brand-detail-text-color, inherit); font-family: var(--tf-brand-detail-text-font, inherit); font-weight: var(--tf-brand-detail-text-weight, inherit); }
.tf-brand-detail__title { color: var(--tf-brand-detail-title-color, inherit); font-family: var(--tf-brand-detail-title-font, inherit); font-size: var(--tf-brand-detail-title-size, inherit); font-weight: var(--tf-brand-detail-title-weight, inherit); }
.tf-brand-detail__desc p { margin-bottom: 10px; }
.tf-brand-detail__desc ul, .tf-brand-detail__desc ol { padding-left: 22px; margin-bottom: 10px; }
.tf-brand-detail__desc a { text-decoration: underline; }
.tf-brand-detail__products-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 18px; }
.tf-brand-detail__grid .tf-products__grid,
.tf-brand-detail__grid .row {
    --bs-gutter-x: var(--tf-product-gap, 22px);
    --bs-gutter-y: var(--tf-product-gap, 22px);
    row-gap: var(--tf-product-gap, 22px);
    column-gap: var(--tf-product-gap, 22px);
}

.tf-brand-detail__pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
}
.tf-brand-detail__page {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .14));
    border-radius: var(--tf-radius-sm, 8px);
    font-size: .84rem;
    text-decoration: none;
    color: inherit;
}
.tf-brand-detail__page.is-active {
    background: var(--tf-color-primary, #14111e);
    border-color: var(--tf-color-primary, #14111e);
    color: var(--tf-color-on-primary, #fff);
}

.tf-brands__head { margin-bottom: 24px; }
.tf-brands__count { font-size: .8rem; color: var(--tf-color-muted, #7c818c); margin: 8px 0 0; }

.tf-brands__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
}
.tf-brands__filter-btn {
    min-width: 36px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .12));
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    color: inherit;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.tf-brands__filter-btn:hover { border-color: var(--tf-color-primary, #14111e); }
.tf-brands__filter-btn.is-active {
    background: var(--tf-color-primary, #14111e);
    border-color: var(--tf-color-primary, #14111e);
    color: var(--tf-color-on-primary, #fff);
}

.tf-brands__group { margin-bottom: 34px; }
.tf-brands__group[hidden] { display: none; }
.tf-brands__letter {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08));
}
.tf-brands__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.tf-brands__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.tf-brands__logo {
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
    border-radius: var(--tf-radius-sm, 8px);
    transition: border-color .18s ease, transform .18s ease;
}
.tf-brands__item:hover .tf-brands__logo { border-color: var(--tf-color-primary, #14111e); transform: translateY(-2px); }
.tf-brands__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tf-brands__logo-fallback { font-size: 1.1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .5; }
.tf-brands__name { font-size: .82rem; text-align: center; line-height: 1.35; }

.tf-brands--cards-text .tf-brands__items { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.tf-brands--cards-text .tf-brands__logo { display: none; }
.tf-brands--cards-text .tf-brands__item {
    flex-direction: row;
    justify-content: flex-start;
    padding: 9px 12px;
    border-radius: var(--tf-radius-sm, 8px);
}
.tf-brands--cards-text .tf-brands__item:hover { background: var(--tf-color-surface-alt, rgba(0, 0, 0, .03)); }
.tf-brands--cards-text .tf-brands__name { text-align: left; font-size: .86rem; }

.tf-ot__shell { max-width: 940px; margin: 0 auto; }

.tf-ot__card {
    background: var(--tf-color-surface, #fff);
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
    border-radius: var(--tf-radius-lg, 14px);
    padding: 28px;
    margin-bottom: 18px;
}
.tf-ot__title { font-size: 1.3rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -.02em; }
.tf-ot__subtitle { font-size: .86rem; color: var(--tf-color-muted, #7c818c); margin: 0 0 22px; line-height: 1.6; }

.tf-ot__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tf-ot__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tf-ot__label { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--tf-color-muted, #7c818c); }
.tf-ot__input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .14));
    border-radius: var(--tf-radius-sm, 8px);
    font: inherit;
    font-size: .88rem;
    background: transparent;
    color: inherit;
}
.tf-ot__input:focus { outline: none; border-color: var(--tf-color-primary, #14111e); }
.tf-ot__error { font-size: .72rem; color: #dc2626; min-height: 1em; }

.tf-ot__submit {
    width: 100%;
    height: 46px;
    margin-top: 18px;
    border: 1px solid var(--tf-color-primary, #14111e);
    border-radius: var(--tf-radius-sm, 8px);
    background: var(--tf-color-primary, #14111e);
    color: var(--tf-color-on-primary, #fff);
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
}
.tf-ot__submit:disabled { opacity: .6; cursor: progress; }

.tf-ot__status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    margin-bottom: 18px;
    background: var(--tf-color-surface, #fff);
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
    border-radius: var(--tf-radius-lg, 14px);
}
.tf-ot__status[hidden] { display: none; }
.tf-ot__status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--tf-color-primary, #14111e);
    flex-shrink: 0;
    animation: tf-ot-pulse 1.4s ease infinite;
}
@keyframes tf-ot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.7); opacity: .4; }
}
.tf-ot__status-text { font-size: .82rem; font-weight: 500; flex: 1; }
.tf-ot__status-track { flex: 0 0 96px; height: 3px; border-radius: 99px; background: var(--tf-color-border, rgba(0, 0, 0, .1)); overflow: hidden; }
.tf-ot__status-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--tf-color-primary, #14111e); transition: width .35s ease; }

.tf-ot-card {
    background: var(--tf-color-surface, #fff);
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
    border-radius: var(--tf-radius-lg, 14px);
    margin-bottom: 18px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    animation: tf-ot-up .36s ease forwards;
}
@keyframes tf-ot-up { to { opacity: 1; transform: translateY(0); } }

.tf-ot-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 22px 15px;
    border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08));
}
.tf-ot-card__identity { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-ot-card__number { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.tf-ot-card__pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.tf-ot-card__pill.is-pending { background: #fef9c3; color: #854d0e; }
.tf-ot-card__pill.is-processing { background: #dbeafe; color: #1e40af; }
.tf-ot-card__pill.is-shipped { background: #e0f2fe; color: #0369a1; }
.tf-ot-card__pill.is-completed { background: #dcfce7; color: #166534; }
.tf-ot-card__pill.is-cancelled { background: #fee2e2; color: #991b1b; }
.tf-ot-card__meta { display: flex; flex-wrap: wrap; gap: 18px; }
.tf-ot-card__meta-item { font-size: .8rem; color: var(--tf-color-muted, #7c818c); }
.tf-ot-card__meta-item strong { font-weight: 600; color: inherit; }

.tf-ot-card__steps {
    display: flex;
    position: relative;
    padding: 18px 22px;
    background: var(--tf-color-surface-alt, rgba(0, 0, 0, .02));
    border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08));
}
.tf-ot-card__steps::before {
    content: '';
    position: absolute;
    top: 31px;
    left: 34px;
    right: 34px;
    height: 2px;
    background: var(--tf-color-border, rgba(0, 0, 0, .12));
}
.tf-ot-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.tf-ot-step__node {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tf-color-surface, #fff);
    border: 2px solid var(--tf-color-border, rgba(0, 0, 0, .14));
    font-size: .68rem;
    color: var(--tf-color-muted, #7c818c);
}
.tf-ot-step.is-done .tf-ot-step__node,
.tf-ot-step.is-current .tf-ot-step__node {
    background: var(--tf-color-primary, #14111e);
    border-color: var(--tf-color-primary, #14111e);
    color: var(--tf-color-on-primary, #fff);
}
.tf-ot-step.is-cancelled .tf-ot-step__node { background: #dc2626; border-color: #dc2626; color: #fff; }
.tf-ot-step__label { font-size: .64rem; font-weight: 600; text-align: center; color: var(--tf-color-muted, #7c818c); }
.tf-ot-step.is-done .tf-ot-step__label,
.tf-ot-step.is-current .tf-ot-step__label { color: inherit; }
.tf-ot-step__date { font-size: .6rem; color: var(--tf-color-muted, #7c818c); text-align: center; }

.tf-ot-card__cancelled {
    padding: 11px 22px;
    background: #fee2e2;
    border-bottom: 1px solid #fca5a5;
    font-size: .82rem;
    color: #991b1b;
}

.tf-ot-card__body,
.tf-ot-card__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding: 20px 22px;
}
.tf-ot-card__footer { border-top: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08)); background: var(--tf-color-surface-alt, rgba(0, 0, 0, .02)); }
.tf-ot-card__col { min-width: 0; }
.tf-ot-card__section-label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tf-color-muted, #7c818c);
    margin-bottom: 10px;
}
.tf-ot-card__section-label--spaced { margin-top: 14px; }
.tf-ot-card__address { font-size: .82rem; line-height: 1.55; }

.tf-ot-addr {
    padding: 14px 16px;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08));
    border-radius: 12px;
    background: var(--tf-color-surface-alt, #f5f5f5);
}
.tf-ot-addr__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tf-ot-addr__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: var(--tf-color-surface-alt, rgba(0, 0, 0, .04));
    font-size: 14px;
}
.tf-ot-addr.is-shipping .tf-ot-addr__icon { color: #e8890c; background: #fff7ed; }
.tf-ot-addr.is-billing .tf-ot-addr__icon { color: #2563eb; background: #eff6ff; }
.tf-ot-addr__title { font-size: .86rem; font-weight: 700; }
.tf-ot-addr__hint {
    margin-top: 2px; font-size: .64rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--tf-color-muted, #7c818c);
}
.tf-ot-addr__name { font-size: .82rem; font-weight: 700; margin-bottom: 3px; }
.tf-ot-addr__text { font-size: .8rem; line-height: 1.55; color: var(--tf-color-muted, #7c818c); }

.tf-ot-review {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 8px;
}
.tf-ot-stars { display: inline-flex; gap: 3px; }
.tf-ot-star {
    appearance: none; border: 0; background: transparent; padding: 0;
    color: #d0d0d0; font-size: 1rem; line-height: 1; cursor: pointer;
}
.tf-ot-star.is-on { color: #f5a623; }
.tf-ot-stars.is-locked .tf-ot-star { cursor: default; }
.tf-ot-review__status { font-size: .72rem; color: var(--tf-color-muted, #7c818c); }
.tf-ot-review__btn {
    margin-left: auto; appearance: none; border: 0; cursor: pointer;
    background: var(--tf-color-primary, #14111e); color: #fff;
    font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 6px 12px;
}
.tf-ot-review__btn:disabled,
.tf-ot-review__btn.is-done {
    opacity: .7; cursor: default;
}

.tf-ot-card__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tf-ot-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .07)); }
.tf-ot-item:last-child { border-bottom: none; }
.tf-ot-item__media {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .1));
    background: var(--tf-color-surface-alt, rgba(0, 0, 0, .03));
}
.tf-ot-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-ot-item__body { flex: 1; min-width: 0; }
.tf-ot-item__name { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.tf-ot-item__name a { color: inherit; text-decoration: none; }
.tf-ot-item__name a:hover { text-decoration: underline; }
.tf-ot-item__meta { font-size: .72rem; color: var(--tf-color-muted, #7c818c); margin-top: 2px; }
.tf-ot-item__price { font-size: .76rem; font-weight: 600; margin-top: 3px; }
.tf-ot-item__extra { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--tf-color-border, rgba(0, 0, 0, .12)); }
.tf-ot-item__extra-title { font-size: .7rem; font-weight: 700; }
.tf-ot-item__extra-row { font-size: .7rem; color: var(--tf-color-muted, #7c818c); margin-top: 2px; }
.tf-ot-item__artboard {
    display: inline-block; width: 34px; height: 34px; margin: 4px 4px 0 0;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .12));
}
.tf-ot-item__artboard img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tf-ot-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.tf-ot-timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--tf-color-border, rgba(0, 0, 0, .12));
}
.tf-ot-timeline__row { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.tf-ot-timeline__row:last-child { padding-bottom: 0; }
.tf-ot-timeline__dot {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    background: var(--tf-color-surface, #fff);
    border: 2px solid var(--tf-color-border, rgba(0, 0, 0, .14));
    position: relative; z-index: 1;
}
.tf-ot-timeline__row.is-done .tf-ot-timeline__dot,
.tf-ot-timeline__row.is-current .tf-ot-timeline__dot {
    background: var(--tf-color-primary, #14111e);
    border-color: var(--tf-color-primary, #14111e);
}
.tf-ot-timeline__body { flex: 1; min-width: 0; width: 100%; }
.tf-ot-timeline__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.tf-ot-timeline__label { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.tf-ot-timeline__row:not(.is-done):not(.is-current) .tf-ot-timeline__label { color: var(--tf-color-muted, #7c818c); font-weight: 500; }
.tf-ot-timeline__date { font-size: .7rem; color: var(--tf-color-muted, #7c818c); margin-top: 2px; white-space: nowrap; }
.tf-ot-timeline__date.is-muted { font-style: italic; }
.tf-ot-timeline__info { font-size: .7rem; color: var(--tf-color-muted, #7c818c); margin-top: 1px; }

.tf-ot-item.is-struck .tf-ot-item__name { text-decoration: line-through; color: var(--tf-color-muted, #7c818c); }
.tf-ot-item__badge {
    display: inline-flex; align-items: center;
    margin-top: 6px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid transparent; font-size: .68rem; font-weight: 600;
}
.tf-ot-item__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tf-ot-item__action {
    appearance: none; border: 0; background: transparent; padding: 0;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: inherit; text-decoration: underline; cursor: pointer;
}
.tf-ot-card__actions {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08));
}
.tf-ot-card__req {
    display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 4px;
    border: 1px solid transparent; font-size: .72rem; font-weight: 600;
}
.tf-ot-notices { padding: 0 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.tf-ot-notice {
    border: 1px solid var(--tf-color-border, rgba(0, 0, 0, .08));
    border-radius: 10px; padding: 12px 14px;
}
.tf-ot-notice__head { display: flex; align-items: flex-start; gap: 10px; }
.tf-ot-notice__copy { flex: 1; min-width: 0; }
.tf-ot-notice__title { font-size: .86rem; font-weight: 700; }
.tf-ot-notice__meta { margin-top: 3px; font-size: .72rem; color: var(--tf-color-muted, #7c818c); }
.tf-ot-notice__status {
    flex-shrink: 0; padding: 2px 8px; border-radius: 999px;
    border: 1px solid transparent; font-size: .68rem; font-weight: 600;
}

.tf-ot-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: .82rem;
    border-bottom: 1px solid var(--tf-color-border, rgba(0, 0, 0, .07));
}
.tf-ot-total:last-child { border-bottom: none; }
.tf-ot-total__label { color: var(--tf-color-muted, #7c818c); }
.tf-ot-total__value { font-weight: 600; }
.tf-ot-total.is-discount .tf-ot-total__value { color: #16a34a; }
.tf-ot-total.is-free .tf-ot-total__value { color: #16a34a; }
.tf-ot-total.is-grand { padding-top: 10px; font-size: .94rem; font-weight: 700; border-bottom: none; }

@media (max-width: 900px) {
    .tf-ot-card__body,
    .tf-ot-card__footer { grid-template-columns: 1fr; }
    .tf-ot-card__addresses { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .tf-search-results__head { align-items: stretch; }
    .tf-search-results__form { max-width: none; }
    .tf-brand-detail__header { flex-direction: column; }
    .tf-ot__card { padding: 20px; }
    .tf-ot__fields { grid-template-columns: 1fr; }
    .tf-ot-card__head { flex-direction: column; align-items: flex-start; }
    .tf-ot-card__steps { padding: 16px 12px; }
    .tf-ot-card__steps::before { left: 24px; right: 24px; }
    .tf-ot-step__label { font-size: .58rem; }
    .tf-brands__items { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-ot-card { animation: none; opacity: 1; transform: none; }
    .tf-ot__status-dot { animation: none; }
    .tf-brands__item:hover .tf-brands__logo { transform: none; }
}