/* ========================================= */
/* БАЗОВЫЕ ПОЛЯ И КНОПКИ                     */
/* ========================================= */
h1, h2, h3 { color: var(--text-main); margin-top: 0; font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 1.8em; }

input, select, textarea { 
    width: 100%; 
    padding: 10px 15px; 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    background: var(--bg-input); 
    color: var(--text-main); 
    font-family: inherit; 
    font-size: 1em;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
input[type="checkbox"],
input[type="radio"],
input[type="file"] {
    width: auto;
    max-width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px var(--focus-ring-alpha);
}

button { 
    background: var(--accent-blue); 
    color: var(--text-main); 
    padding: 10px 15px; 
    border: 1px solid var(--border-color); 
    border-radius: 10px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); 
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
button:hover { background: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.btn-black { background: var(--text-main); color: var(--bg-card); border: 1px solid var(--text-main); }
.btn-black:hover { background: var(--btn-black-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-black:active { transform: translateY(0); box-shadow: none; }
.btn-red { background: var(--bg-card); border-color: var(--danger); color: var(--danger); }
.btn-red:hover { background: var(--danger); color: white; }
.btn-small { width: auto; padding: 6px 12px; font-size: 0.9em; margin: 0;}

/* Значок доверия под кнопками покупки */
.safe-deal-note {
    margin: 6px 0 0;
    font-size: 0.72em;
    line-height: 1.4;
    color: var(--text-muted);
}
.safe-deal-note a {
    color: inherit;
    text-decoration: none;
}
.safe-deal-note a:hover {
    color: var(--text-main);
    text-decoration: underline;
}
.safe-deal-note--card {
    margin-top: 4px;
    font-size: 0.68em;
    line-height: 1.35;
}
.safe-deal-note--checkout {
    font-size: 0.88em;
    line-height: 1.45;
    margin: 14px 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--text-main);
}
.safe-deal-note--checkout a {
    color: var(--text-main);
    font-weight: 500;
}
.safe-deal-note--checkout a:hover {
    color: var(--success);
}
.safe-deal-note--sticky {
    margin: 0;
    width: 100%;
    font-size: 0.62em;
    line-height: 1.3;
    text-align: center;
}
.detail-sticky-bar__main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* ========================================= */
/* СЕТКА ТОВАРОВ И КАРТОЧКИ                  */
/* ========================================= */
.products-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 20px; 
    width: 100%;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
    height: 100%; /* Одинаковая высота всех карточек */
}
.product-card:hover { border-color: var(--text-main); }

/* Огромное фото товара */
.product-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1; /* Квадрат - занимает максимум места */
    border-radius: 12px;
    background: var(--bg-main);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    overflow: hidden;
}
.product-image-placeholder img { width: 100%; height: 100%; object-fit: cover; }

.product-title { font-weight: 600; font-size: 1.1em; margin-bottom: 8px; text-align: center; }
.product-price { font-weight: 700; font-size: 1.3em; margin-bottom: 8px; text-align: center; color: var(--text-main); }
.product-specs { color: var(--text-muted); font-size: 0.9em; text-align: center; margin-bottom: 5px; }

/* Кнопки прижаты к низу */
.item-actions {
    display: flex;
    flex-wrap: wrap;          /* кнопки переносятся, а не вылезают за карточку */
    gap: 8px;
    margin-top: auto; /* Всегда в самом низу карточки */
    width: 100%;
    padding-top: 15px;
}
.item-actions button {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 6px 10px;
    font-size: 0.88em;
    border-radius: 10px;
    margin: 0;
    white-space: nowrap;
}

/* ========================================= */
/* МОДАЛЬНЫЕ ОКНА                            */
/* ========================================= */
.modal, .materials-modal { 
    display: none; position: fixed; z-index: 1000; left: 0; top: 0; 
    width: 100%; height: 100%; background-color: var(--overlay-scrim);
    backdrop-filter: blur(4px); overflow-y: auto;
}
.modal-content, .materials-modal-content { 
    background-color: var(--bg-card); margin: 5vh auto; padding: 30px; 
    border-radius: var(--border-radius); border: 1px solid var(--border-color);
    position: relative; max-width: 500px; width: 90%;
}
.materials-modal-content { max-width: 650px; max-height: 85vh; overflow-y: auto; }
.close-btn { position: absolute; right: 20px; top: 20px; color: var(--text-muted); font-size: 24px; cursor: pointer; line-height: 1; }
.close-btn:hover { color: var(--text-main); }

.product-details-img { width: 100%; aspect-ratio: 1/1; background: var(--bg-main); border-radius: 12px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
.review-block { background: var(--bg-main); border: 1px dashed var(--border-color-thin); padding: 15px; border-radius: 10px; margin-top: 20px; text-align: center; color: var(--text-muted); font-size: 0.9em; }
.material-info { background: var(--bg-main); border-radius: 8px; padding: 15px; margin-bottom: 12px; border-left: 3px solid var(--border-color); text-align: left; }
.material-info strong { color: var(--text-main); font-size: 1.05em; display: block; margin-bottom: 5px;}
.material-info p { margin: 0; font-size: 0.9em; color: var(--text-muted); line-height: 1.5; }

.status-msg { margin-top: 10px; font-size: 14px; display: none; padding: 10px; border-radius: 8px; }
.status-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.status-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }

/* ========================================= */
/* БИРЖА ЗАКАЗОВ                             */
/* ========================================= */
.requests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.request-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.req-title { font-weight: 700; font-size: 1.1em; }
.req-type { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.req-desc { color: var(--text-main); font-size: 0.92em; }
.req-specs { color: var(--text-muted); font-size: 0.88em; }
.req-price { font-weight: 700; color: var(--success); }
.req-actions { margin-top: 10px; display: flex; gap: 10px; }
.req-actions button { width: auto; }

/* ========================================= */
/* КАБИНЕТ                                   */
/* ========================================= */
.cabinet-tabs { display: flex; gap: 10px; margin: 15px 0 20px; flex-wrap: wrap; }
.cabinet-tab {
    width: auto; background: var(--bg-card); color: var(--text-muted);
    border: 1px solid var(--border-color-thin); border-radius: 20px; padding: 8px 16px;
}
.cabinet-tab.active { background: var(--text-main); color: var(--bg-card); border-color: var(--text-main); }

.list-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
}
.list-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.list-card-desc { color: var(--text-muted); font-size: 0.9em; margin-bottom: 4px; }
.list-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.list-card-actions button { width: auto; }

.pill { font-size: 0.78em; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.pill-open { background: var(--info-bg); color: var(--info-fg); }
.pill-progress { background: var(--warn-bg); color: var(--warn-fg); }
.pill-done { background: var(--success-bg); color: var(--success); }
.pill-red { background: var(--danger-bg); color: var(--danger); }
.pill-rejected { background: var(--danger-bg); color: var(--danger); }

/* ========================================= */
/* ЗВЁЗДЫ И ОТЗЫВЫ                           */
/* ========================================= */
.star-picker { font-size: 2em; cursor: pointer; user-select: none; margin: 10px 0; letter-spacing: 4px; }
.star-picker span { color: var(--star-inactive); transition: color 0.15s; }
.star-picker span.active { color: var(--star-color); }
.review-item { background: var(--bg-main); border-radius: 8px; padding: 10px; margin-top: 8px; text-align: left; }
.review-stars { color: var(--star-color); }

/* ========================================= */
/* ЧАТ                                       */
/* ========================================= */
.chat-box {
    border: 1px solid var(--border-color-thin); border-radius: 12px; padding: 12px;
    height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
    background: var(--bg-main);
}
.chat-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 0.92em; word-break: break-word; }
.chat-mine { align-self: flex-end; background: var(--text-main); color: var(--bg-card); border-bottom-right-radius: 4px; }
.chat-theirs { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border-color-thin); border-bottom-left-radius: 4px; }

/* ===== Индикатор загрузки 3D-превью ===== */
#detailImg { position: relative; }
.viewer-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: .9em; background: var(--bg-main); border-radius: var(--radius-md, 14px); z-index: 2; }

.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 18px;
    margin-bottom: 18px;
}
.form-card input,
.form-card select,
.form-card textarea {
    margin-bottom: 10px;
}
.check-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: var(--text-muted);
    font-size: 0.95em;
}
.check-line input {
    width: auto;
    margin: 0;
}

/* Скрытый заголовок для aria-labelledby (модалки без видимого h2) */
.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;
}

/* Инпуты вне .form-card: перебиваем глобальное input{width:100%} в шапках/тулбарах/инлайн-рядах */
.search-input-wrapper input.search-input,
.search-input-wrapper select,
.search-input-wrapper textarea {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.chat-compose {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: stretch;
}
.chat-compose input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}
.chat-compose button {
    width: auto;
    flex: 0 0 auto;
}
.detail-inline-specs select {
    width: auto;
    max-width: 100%;
    margin: 0;
}
#customSizePanel input[type="number"],
#csUniform input,
#csAxes input {
    width: auto;
    max-width: 120px;
    margin: 0;
}
.mp-inline-fields input,
.mp-inline-fields select {
    width: auto;
    flex: 1 1 100px;
    min-width: 72px;
    max-width: 100%;
    margin: 0;
}
.maker-inline-dims input {
    width: auto;
    flex: 1 1 80px;
    min-width: 0;
    margin: 0;
}
.quick-fill-row input[type="url"] {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.maker-public-url-row input {
    width: auto;
    flex: 1 1 200px;
    min-width: 120px;
    margin: 0;
}

/* ========================================= */
/* АДАПТИВНОСТЬ                              */
/* ========================================= */



.card-skeleton { background: var(--bg-card); border: 1px solid var(--border-color-thin);
    border-radius: var(--border-radius); padding: 15px; }
.card-skeleton .sk { background: var(--border-color-thin); border-radius: 8px; position: relative; overflow: hidden; }
.card-skeleton .sk-img { aspect-ratio: 1/1; border-radius: 12px; margin-bottom: 14px; }
.card-skeleton .sk-line { height: 12px; margin: 9px auto; }
.card-skeleton .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation: skshimmer 1.3s infinite; }
@keyframes skshimmer { 100% { transform: translateX(100%); } }

/* ========================================= */
/* ГАЛЕРЕЯ ФОТО В КАРТОЧКЕ ТОВАРА             */
/* ========================================= */
.detail-thumbs { display: flex; gap: 8px; margin: -10px 0 16px; flex-wrap: wrap; }
.detail-thumb { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--border-color-thin);
    overflow: hidden; cursor: pointer; flex: 0 0 auto; padding: 0; background: var(--bg-card); }
.detail-thumb.active { border-color: var(--text-main); box-shadow: 0 0 0 1px var(--text-main); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-details-gallery { position: relative; }
.detail-gallery__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-color-thin);
    background: rgba(255,255,255,.92); color: var(--text-main); font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
}
.detail-gallery__prev { left: 8px; }
.detail-gallery__next { right: 8px; }
.detail-gallery__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: block; margin: 0 auto; }

.empty-state {
    text-align: center; padding: 28px 20px; margin: 12px 0;
    background: var(--bg-card); border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
}
.empty-state__icon { font-size: 2rem; margin-bottom: 10px; line-height: 1; }
.empty-state__text { color: var(--text-muted); margin: 0 0 14px; font-size: 0.95em; }
.empty-state__btn { margin-top: 4px; }

.recently-viewed { margin-bottom: 18px; }
.recently-viewed__head { font-size: 0.88em; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.recently-viewed__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.recently-viewed__item {
    flex: 0 0 108px; border: 1px solid var(--border-color-thin); border-radius: 12px;
    background: var(--bg-card); padding: 6px; cursor: pointer; text-align: left;
}
.recently-viewed__item img, .recently-viewed__ph {
    width: 100%; height: 72px; border-radius: 8px; object-fit: cover; display: block; margin-bottom: 6px;
}
.recently-viewed__ph { background: var(--bg-main); }
.recently-viewed__title {
    display: block; font-size: 0.72em; line-height: 1.25; color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Полка «Заберите сегодня» — компактные карточки, горизонтальный скролл */
.fast-today { margin-bottom: 16px; }
.fast-today__head {
    font-size: 0.95em; font-weight: 700; color: var(--text-main);
    margin-bottom: 10px; line-height: 1.3;
}
.fast-today__row {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.fast-today__card {
    flex: 0 0 118px; width: auto; min-width: 118px; max-width: 118px;
    border: 1px solid var(--border-color-thin); border-radius: 12px;
    background: var(--bg-card); padding: 6px; cursor: pointer; text-align: left;
    scroll-snap-align: start;
}
.fast-today__card img, .fast-today__ph {
    width: 100%; height: 68px; border-radius: 8px; object-fit: cover;
    display: block; margin-bottom: 5px;
}
.fast-today__ph { background: var(--bg-main); }
.fast-today__title {
    display: block; font-size: 0.7em; line-height: 1.25; color: var(--text-main);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 3px;
}
.fast-today__price {
    display: block; font-size: 0.78em; font-weight: 700; color: var(--text-main);
}

.passport-page__qr-hint { font-size: 0.78em; color: var(--text-muted); margin: 0; }

/* Цифровой паспорт изделия */
.passport-page { max-width: 420px; margin: 0 auto; }
.passport-page__back { margin-bottom: 12px; }
.passport-page__badge {
    display: inline-block; font-size: 0.75em; font-weight: 600; color: var(--success);
    background: var(--success-bg); border: 1px solid var(--success); border-radius: 999px;
    padding: 4px 10px; margin-bottom: 10px;
}
.passport-page__title { margin: 0 0 14px; font-size: 1.35em; line-height: 1.25; }
.passport-page__photo {
    width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px;
    border: 1px solid var(--border-color-thin); margin-bottom: 14px; display: block;
}
.passport-page__photo--ph {
    display: flex; align-items: center; justify-content: center; height: 160px;
    background: var(--bg-main); color: var(--text-muted); font-size: 0.9em;
}
.passport-page__meta { margin: 0 0 18px; }
.passport-page__meta > div { display: flex; gap: 10px; margin-bottom: 8px; font-size: 0.92em; }
.passport-page__meta dt { flex: 0 0 130px; color: var(--text-muted); margin: 0; }
.passport-page__meta dd { margin: 0; flex: 1; }
.passport-page__maker {
    background: none; border: none; padding: 0; color: var(--accent, #2563eb);
    font: inherit; cursor: pointer; text-decoration: underline;
}
.passport-page__qr-block { text-align: center; padding-top: 8px; border-top: 1px solid var(--border-color-thin); }
.passport-page__qr-block img { border-radius: 8px; border: 1px solid var(--border-color-thin); }
.passport-modal__hint { font-size: 0.88em; color: var(--text-muted); margin: 0 0 12px; line-height: 1.4; }
.passport-modal__qr { text-align: center; margin-bottom: 10px; }
.passport-modal__qr img { border-radius: 8px; border: 1px solid var(--border-color-thin); }
.passport-modal__link { font-size: 0.82em; word-break: break-all; margin: 0 0 12px; }
.passport-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ко-принт: мелочи в чекауте */
.checkout-addons { margin: 12px 0 16px; padding: 12px; border-radius: var(--radius-lg, 12px);
    border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-color-thin));
    background: color-mix(in srgb, var(--bg-card) 92%, var(--success) 8%); }
.checkout-addons__head { font-weight: 700; margin-bottom: 4px; }
.checkout-addons__hint { font-size: 0.85em; color: var(--text-muted); margin: 0 0 10px; }
.checkout-addons__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.checkout-addons__card {
    flex: 0 0 120px; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 8px; border-radius: 10px; border: 1px solid var(--border-color-thin);
    background: var(--bg-card); cursor: pointer; text-align: left;
}
.checkout-addons__card img, .checkout-addons__ph {
    width: 100%; height: 72px; object-fit: cover; border-radius: 8px; background: var(--bg-main);
}
.checkout-addons__title { font-size: 0.78em; line-height: 1.25; color: var(--text-main); }
.checkout-addons__price { font-size: 0.85em; font-weight: 700; }

/* Подарочная страница */
.gift-page { max-width: 420px; margin: 0 auto; }
.gift-page__badge { font-size: 0.85em; color: var(--text-muted); margin-bottom: 8px; }
.gift-page__title { margin: 0 0 12px; font-size: 1.35em; }
.gift-page__photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }
.gift-page__hint { font-size: 0.92em; color: var(--text-muted); margin: 0 0 14px; line-height: 1.45; }
.gift-page input, .gift-page textarea { margin-bottom: 10px; }

/* Значок «Проверенный печатник» */
.verified-badge { display: inline-block; background: var(--success-bg); color: var(--success);
    border: 1px solid var(--success); border-radius: 999px; font-size: 11px; font-weight: 600;
    padding: 2px 8px; vertical-align: middle; }
.reliable-badge { display: inline-block; background: var(--reliable-bg); color: var(--reliable-fg);
    border: 1px solid var(--reliable-border); border-radius: 999px; font-size: 11px; font-weight: 600;
    padding: 2px 8px; vertical-align: middle; }
.streak-badge { display: inline-block; background: color-mix(in srgb, var(--bg-card) 88%, var(--success) 12%);
    color: var(--text-main); border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border-color-thin));
    border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 8px; vertical-align: middle; }
.new-badge { display: inline-block; background: var(--bg-main); color: var(--text-muted);
    border: 1px solid var(--border-color-thin); border-radius: 999px; font-size: 11px; font-weight: 600;
    padding: 2px 8px; vertical-align: middle; }
.order-group { border: 1px solid var(--border-color-thin); border-radius: var(--radius-lg, 16px);
    padding: 10px; margin-bottom: 16px; background: var(--bg-main); }
.order-group-head { font-family: var(--font-display); font-weight: 600; font-size: .95em;
    padding: 4px 6px 10px; }
.order-group .list-card { margin-bottom: 10px; }
.order-group .list-card:last-child { margin-bottom: 0; }

/* Выпадающие списки — единый стиль с сайтом (своя стрелка вместо системной) */
select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
select::-ms-expand { display: none; }
/* Опции в раскрытом списке — чёрный текст на белом (убираем системный «оранжевый») */
select, select option { color: var(--text-main); }
select option { background-color: var(--bg-card); }
select option:checked { background-color: var(--bg-main); color: var(--text-main); }

/* Отступы между «стопкой» полей в модалках (жалобы, оформление, вход и т.п.) */
.modal-content > select,
.modal-content > input,
.modal-content > textarea { margin-bottom: 12px; }

/* Поле загрузки файла — нормальная брендовая кнопка вместо системной */
input[type="file"] { color: var(--text-muted); font-size: 0.95em; cursor: pointer; }
input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; cursor: pointer; color: var(--bg-card); background: var(--text-main);
    border: none; border-radius: 10px; padding: 9px 16px; margin-right: 12px;
    transition: background var(--duration-fast) var(--ease-out);
}
input[type="file"]::file-selector-button:hover { background: var(--btn-black-hover); }
input[type="file"]::-webkit-file-upload-button {
    font: inherit; font-weight: 600; cursor: pointer; color: var(--bg-card); background: var(--text-main);
    border: none; border-radius: 10px; padding: 9px 16px; margin-right: 12px;
}
input[type="file"]::-webkit-file-upload-button:hover { background: var(--btn-black-hover); }

/* Предзаказ — прогресс сбора */
.preorder-line { font-size: 0.82em; color: var(--text-muted); margin: 4px 0 2px; }
.preorder-line.ok { color: var(--success, #16a34a); }
.preorder-line.bad { color: var(--danger, #dc2626); }
.preorder-bar { height: 6px; border-radius: 4px; background: var(--bg-main, #eee); margin-top: 4px; overflow: hidden; }
.preorder-bar > span { display: block; height: 100%; background: var(--text-main, #111); border-radius: 4px; transition: width .3s; }

/* Этапы сделки (milestones) */
.ms-box:not(:empty) { margin: 8px 0; padding: 8px 10px; background: var(--bg-main, #f7f7f7); border-radius: 8px; }
.ms-title { font-size: 0.8em; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.88em; }
.ms-row + .ms-row { border-top: 1px solid var(--border-color-thin, #eee); }
.ms-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--border-color-thin); color: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 0.72em; }
.ms-row.done .ms-dot { background: var(--success, #16a34a); }
.ms-name { flex: 1; }
.ms-amt { font-weight: 600; }
.ms-st { font-size: 0.82em; color: var(--success, #16a34a); }

/* Раздел «Доход дизайнера» — строки моделей */
.designer-row { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border-color-thin, #eee); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: background .15s; }
.designer-row:hover { background: var(--bg-main, #f7f7f7); }
.designer-thumb { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: var(--bg-main, #eee); }
.designer-info { flex: 1; min-width: 0; }
.designer-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.designer-sub { font-size: 0.82em; color: var(--text-muted, #666); margin-top: 2px; }
.designer-money { text-align: right; flex: none; }
.designer-pending { font-size: 0.78em; color: var(--text-muted, #888); }

/* ========================================= */
/* ТОСТЫ                                     */
/* ========================================= */
.toast-root {
    position: fixed;
    z-index: 2000;
    top: var(--space-5);
    right: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    max-width: min(420px, calc(100vw - var(--space-8)));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color-thin);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(16px);
    transition:
        opacity var(--duration-normal) var(--ease-spring),
        transform var(--duration-normal) var(--ease-spring);
}

.toast--in {
    opacity: 1;
    transform: translateX(0);
}

.toast--out {
    opacity: 0;
    transform: translateX(16px);
}

.toast__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
}

.toast--success .toast__icon {
    background: var(--success-bg);
    color: var(--success);
}

.toast--error .toast__icon {
    background: var(--accent-blue);
    color: var(--danger);
}

.toast--info .toast__icon {
    background: var(--accent-blue);
    color: var(--text-main);
}

.toast__message {
    flex: 1;
    font-size: 0.92em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.toast--success {
    border-left: 3px solid var(--success);
}

.toast--error {
    border-left: 3px solid var(--danger);
}

.toast--info {
    border-left: 3px solid var(--border-color);
}



/* ========================================= */
/* КАТАЛОГ: стаггер, ховер, полёт в корзину  */
/* ========================================= */
.product-card--enter {
    opacity: 0;
    transform: translateY(12px);
    animation: productCardEnter var(--duration-normal) var(--ease-spring) forwards;
    animation-delay: calc(var(--pcard-i, 0) * 30ms);
}

@keyframes productCardEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-image-placeholder img {
    transition: transform var(--duration-normal) var(--ease-spring);
}


.fly-to-cart {
    position: fixed;
    z-index: 3000;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    transition:
        left 500ms var(--ease-spring),
        top 500ms var(--ease-spring),
        width 500ms var(--ease-spring),
        height 500ms var(--ease-spring),
        opacity 500ms var(--ease-out);
}

.cart-badge--pulse {
    animation: cartBadgePulse 420ms var(--ease-spring);
}

@keyframes cartBadgePulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ========================================= */
/* ТАБЛИЦА СРАВНЕНИЯ ОТКЛИКОВ                 */
/* ========================================= */
#bidsModal .modal-content {
    max-width: 760px;
}

.bids-compare-wrap {
    overflow-x: auto;
    margin-top: var(--space-3);
}

.bids-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92em;
}

.bids-table thead th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-color-thin);
    white-space: nowrap;
}

.bids-table tbody td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color-thin);
    vertical-align: top;
    color: var(--text-main);
}

.bids-row--best td {
    background: color-mix(in srgb, var(--focus-ring) 8%, var(--bg-card));
}

.bids-row--best td:first-child {
    box-shadow: inset 3px 0 0 var(--focus-ring);
}

.bids-table tbody tr:last-child td {
    border-bottom: none;
}

.bids-city-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}

.bids-msg {
    max-width: 220px;
    line-height: 1.45;
    word-break: break-word;
}

.bids-msg-empty {
    color: var(--text-muted);
}

.bids-action {
    white-space: nowrap;
}

.bids-action .btn-small {
    width: auto;
    min-width: 88px;
}


/* ========================================= */
/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ                        */
/* ========================================= */
.theme-toggle {
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 1.15em;
    line-height: 1;
}

/* ========================================= */
/* СКЕЛЕТОНЫ СПИСКОВ КАБИНЕТА               */
/* ========================================= */
.list-card--skeleton {
    pointer-events: none;
}

.list-card--skeleton .sk {
    background: var(--border-color-thin);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.list-card--skeleton .sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
    animation: skshimmer 1.3s infinite;
}


/* ========================================= */
/* ЖИВАЯ ВАЛИДАЦИЯ ПОЛЕЙ                     */
/* ========================================= */
input.field-invalid,
textarea.field-invalid,
select.field-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 1px var(--danger);
}

input.field-valid-flash,
textarea.field-valid-flash,
select.field-valid-flash {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 1px var(--success);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-error {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: var(--danger);
    margin-top: 4px;
}

.auth-pane .field-error {
    margin-bottom: 6px;
}


/* ========================================= */
/* ДИАЛОГ ПОДТВЕРЖДЕНИЯ (uiConfirm)           */
/* ========================================= */
.confirm-modal {
    max-width: 420px;
}

.confirm-modal__text {
    margin: 0 0 22px;
    line-height: 1.55;
    color: var(--text-main);
    white-space: pre-wrap;
}

.confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.confirm-modal__actions .btn-black,
.confirm-modal__actions .btn-red {
    min-width: 120px;
}

/* ========================================= */
/* ПОДСКАЗКИ ПОИСКА КАТАЛОГА                  */
/* ========================================= */
.search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 120;
    background: var(--bg-card);
    border: 1px solid var(--border-color-thin);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
}

.search-suggest__item {
    display: block;
    width: 100%;
    padding: 11px 16px 11px 45px;
    border: none;
    background: transparent;
    color: var(--text-main);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.search-suggest__item:hover,
.search-suggest__item--active {
    background: var(--bg-hover);
}

/* Publish button spinner */
.btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* GLB conversion progress bar (sellModal) */
.glb-progress-label { font-size: 0.82em; color: var(--text-muted); margin-bottom: 4px; }
.glb-progress-bar { height: 6px; border-radius: 4px; background: var(--bg-main, #eee); overflow: hidden; }
.glb-progress-fill { height: 100%; background: var(--text-main, #111); border-radius: 4px; transition: width .3s; }
.glb-progress-pct { font-size: 0.75em; color: var(--text-muted); margin-top: 2px; text-align: right; }

/* =====================================================
   EMOTIONAL MINIMALISM — КНОПКИ И АКЦЕНТЫ
   ===================================================== */

/* Главная CTA — градиент с нeonовым свечением */
.btn-black {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border: none !important;
    letter-spacing: 0.015em;
    position: relative;
    overflow: hidden;
}
.btn-black::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
}
.btn-black:hover {
    background: linear-gradient(135deg, var(--accent-dark, #4f46e5) 0%, #7c3aed 100%) !important;
    box-shadow: var(--accent-glow) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}
.btn-black:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: var(--accent-glow-sm) !important;
}
.btn-black:disabled {
    background: linear-gradient(135deg, #9ca3af, #a1a1aa) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.65;
}

/* Обычные кнопки — мягкий акцент при ховере */
button:not(.btn-black):not(.btn-red):not(.close-btn):not(.theme-toggle):not(.mobile-tab):not(.nav-tab):not(.cabinet-tab):not(.filter-toggle-btn):not(.fab):not(.fab-custom):not(.fab-top):not(.cat-chip):not(.auth-ghost-btn):not(.photo-lightbox__close):not(.maker-onboard__close):hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
}

/* Красная кнопка — чёткий акцент */
.btn-red:hover {
    background: var(--danger) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3) !important;
}

/* FAB — градиентный с лёгким свечением */
.fab-custom {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 28px var(--fab-shadow) !important;
}
.fab-custom:hover {
    box-shadow: var(--accent-glow) !important;
    transform: translateY(-3px) scale(1.01) !important;
}

/* =====================================================
   EMOTIONAL MINIMALISM — КАРТОЧКИ С НEONОВЫМ ХОВЕРОМ
   ===================================================== */
.product-card {
    transition:
        transform var(--duration-normal) var(--ease-spring),
        box-shadow var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .products-grid > .product-card:hover {
        border-color: rgba(99, 102, 241, 0.4) !important;
        box-shadow: var(--card-hover-glow) !important;
    }
    [data-theme="dark"] .products-grid > .product-card:hover {
        border-color: rgba(129, 140, 248, 0.35) !important;
    }
}

/* Инпуты — neon focus ring */
input:focus, select:focus, textarea:focus {
    border-color: var(--focus-ring) !important;
    box-shadow: 0 0 0 3px var(--focus-ring-alpha) !important;
    outline: none;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ТИПОГРАФИКА
   ===================================================== */
h1, h2, h3 {
    letter-spacing: -0.025em;
    line-height: 1.18;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

/* Ключевые числа — акцент-цвет */
.product-price {
    font-size: 1.3em;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
/* Fallback для тёмной темы и unsupported браузеров */
@supports not (-webkit-text-fill-color: transparent) {
    .product-price { color: var(--accent); }
}

/* =====================================================
   EMOTIONAL MINIMALISM — СИСТЕМА ПОДСКАЗОК (TOOLTIP)
   ===================================================== */

/* Применяется к любому элементу с data-hint */
[data-hint] {
    position: relative;
}
[data-hint]::before,
[data-hint]::after {
    pointer-events: none;
    z-index: 9990;
}

/* Пузырь подсказки */
[data-hint]::after {
    content: attr(data-hint);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #0f172a;
    color: #f8fafc;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    min-width: 130px;
    text-align: center;
    font-weight: 400;
    font-family: var(--font-body);
    letter-spacing: 0;
    opacity: 0;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Стрелка */
[data-hint]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border: 6px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

[data-hint]:hover::after,
[data-hint]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-hint]:hover::before {
    transform: translateX(-50%) translateY(0);
}

/* Для кнопок с data-hint — показываем после небольшой задержки */
button[data-hint]::after,
button[data-hint]::before {
    transition-delay: 0.3s;
}
button[data-hint]:hover::after,
button[data-hint]:hover::before {
    transition-delay: 0.3s;
}

/* Тёмная тема — светлые тултипы */
[data-theme="dark"] [data-hint]::after {
    background: #e8eaf6;
    color: #0f172a;
    border-color: rgba(0,0,0,0.1);
}
[data-theme="dark"] [data-hint]::before {
    border-top-color: #e8eaf6;
}

/* =====================================================
   EMOTIONAL MINIMALISM — АССИМЕТРИЯ И АКЦЕНТНЫЕ ЛИНИИ
   ===================================================== */

/* Левосторонняя акцентная линия на list-card */
.list-card {
    border-left: 3px solid transparent;
    transition: border-left-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast);
}
.list-card:hover {
    border-left-color: var(--accent, #6366f1);
    box-shadow: var(--shadow-md);
}

/* Активная вкладка кабинета — градиент */
.cabinet-tab.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Active nav chip */
.cat-chip.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Pill-статусы — чуть живее */
.pill-open { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--accent, #6366f1)33; }
.pill-done { background: var(--success-bg); color: var(--success); border: 1px solid var(--success)33; }

/* Пульсирующий текущий шаг заказа */
.order-step--active .order-step__dot {
    border-color: var(--accent, #6366f1) !important;
    box-shadow: 0 0 0 4px var(--focus-ring-alpha);
}

/* =====================================================
   EMOTIONAL MINIMALISM — ПРОГРЕСС-БАРЫ ГРАДИЕНТОМ
   ===================================================== */
.preorder-bar > span,
.maker-onboard__bar-fill,
.mp-occ-fill,
.print-progress-bar-fill,
.glb-progress-fill {
    background: var(--accent-gradient) !important;
}
.order-stepper__fill {
    background: var(--accent-gradient) !important;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ТОСТЫ С АКЦЕНТОМ
   ===================================================== */
.toast--success { border-left-color: var(--success) !important; }
.toast--error   { border-left-color: var(--danger)  !important; }
.toast--info    { border-left-color: var(--accent)  !important; }
.toast--info .toast__icon {
    background: var(--accent-blue);
    color: var(--accent);
}

/* =====================================================
   EMOTIONAL MINIMALISM — СКЕЛЕТОН SHIMMER С ТИНТОМ
   ===================================================== */
.card-skeleton .sk::after,
.list-card--skeleton .sk::after,
.mp-skeleton-row {
    background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent) !important;
}

/* =====================================================
   EMOTIONAL MINIMALISM — ТЁМНАЯ ТЕМА ДОП. АКЦЕНТЫ
   ===================================================== */
[data-theme="dark"] .search-filters-container {
    background: var(--bg-card);
    border-color: var(--border-color-thin);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
[data-theme="dark"] .product-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .product-price {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Убираем text-fill для элементов внутри кнопок */
button .product-price,
.item-actions .product-price {
    -webkit-text-fill-color: unset;
    background: none;
    color: var(--accent);
}

/* =====================================================
   EMOTIONAL MINIMALISM — ФИНАЛЬНЫЙ ПОЛИШ
   ===================================================== */

/* Заголовки фильтр-сайдбара — акцентная точка */
.side-h {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding-left: 10px;
    border-left: 2px solid var(--accent);
    margin: 14px 0 6px;
}
.side-h-first { margin-top: 0; }

/* Заголовки секций форм — градиент */
.form-section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-bottom: 10px;
}

/* Заголовки модалок — градиент */
.modal h2, .modal h3,
#sellModal h2, #checkoutModal h2,
#authModal h2, #disputeModal h2 {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Shine-эффект на основной CTA при наведении */
@keyframes em-shine {
    0%   { left: -80%; }
    100% { left: 130%; }
}
.btn-black::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}
.btn-black:hover::before {
    opacity: 1;
    animation: em-shine 0.55s ease-out;
}

/* Карточки товара — glow при наведении */
.product-card {
    transition: transform var(--duration-normal) var(--ease-spring),
                box-shadow var(--duration-normal) var(--ease-out);
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-hover-glow);
}

/* STL calc banner — display-шрифт на акционном тексте */
.stl-calc-banner__copy strong {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Кнопки выбора качества в calc — pill-style с акцентом на активном */
.stl-calc-q--pick .stl-calc-q__label {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.stl-calc-q--pick .stl-calc-q__price {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Безопасная сделка — visual trust badge */
.safe-deal-note a {
    color: var(--success);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition: border-color var(--duration-fast);
}
.safe-deal-note a:hover {
    border-bottom-color: transparent;
}