/*
* PC Shop — стили личного кабинета WooCommerce.
* Подгружается только на is_account_page().
*/
/* === ОБЩИЙ КОНТЕЙНЕР === */
body.woocommerce-account .pc-container {
max-width: 1280px;
}
.woocommerce-account .entry-title,
.woocommerce-account h1 {
color: var(--pc-text);
font-size: 28px;
font-weight: 800;
margin: 0 0 24px;
}
.woocommerce-account .woocommerce {
color: var(--pc-text);
}
/* === ЛОГИН / РЕГИСТРАЦИЯ — таб-переключатель === */
.woocommerce-account #customer_login {
max-width: 480px;
margin: 0 auto;
}
/* Контейнер табов */
.pc-account-tabs {
display: flex;
gap: 0;
margin-bottom: 24px;
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 4px;
}
.pc-account-tab {
flex: 1;
padding: 12px 18px;
background: transparent;
color: var(--pc-text-muted);
border: none;
border-radius: var(--pc-radius-sm);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.pc-account-tab:hover {
color: var(--pc-text);
}
.pc-account-tab.is-active {
background: var(--pc-accent);
color: #fff;
}
/* Старый WC-разметка u-columns — ломаем разделение на 2 колонки, табы вместо этого */
.woocommerce-account #customer_login .u-columns,
.woocommerce-account .u-columns.col2-set {
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.woocommerce-account .col-1,
.woocommerce-account .col-2,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
clear: both;
}
/* Прячем заголовки h2 — они в табах теперь */
.woocommerce-account #customer_login .col-1 > h2,
.woocommerce-account #customer_login .col-2 > h2,
.woocommerce-LoginRegister-heading {
display: none !important;
}
/* Управляем видимостью форм через классы */
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
display: none;
}
.woocommerce-account.pc-show-login .col-1,
.woocommerce-account.pc-show-register .col-2 {
display: block;
}
/* По умолчанию (если JS не отработал) — показываем обе */
.woocommerce-account:not(.pc-show-login):not(.pc-show-register) .col-1,
.woocommerce-account:not(.pc-show-login):not(.pc-show-register) .col-2 {
display: block;
}
.woocommerce-account:not(.pc-show-login):not(.pc-show-register) .col-2 {
margin-top: 24px !important;
}
.woocommerce form.woocommerce-form.login,
.woocommerce form.woocommerce-form.register {
background: var(--pc-bg-card) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-md) !important;
padding: 28px !important;
box-shadow: var(--pc-shadow-sm);
}
.woocommerce form.woocommerce-form.login p,
.woocommerce form.woocommerce-form.register p {
margin-bottom: 18px;
}
.woocommerce form.woocommerce-form.login p:last-of-type,
.woocommerce form.woocommerce-form.register p:last-of-type {
margin-bottom: 0;
}
/* Текст политики приватности под формой регистрации */
.woocommerce form.register .woocommerce-privacy-policy-text {
color: var(--pc-text-muted) !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin: 20px 0 16px !important;
padding: 14px 16px;
background: var(--pc-bg-elevated);
border-radius: var(--pc-radius-sm);
border-left: 2px solid var(--pc-accent);
}
.woocommerce form.register .woocommerce-privacy-policy-text p {
margin: 0 !important;
color: var(--pc-text-muted) !important;
font-size: inherit !important;
}
.woocommerce form.register .woocommerce-privacy-policy-text a {
color: var(--pc-accent) !important;
font-weight: 600;
text-decoration: none;
}
.woocommerce form.register .woocommerce-privacy-policy-text a:hover {
text-decoration: underline;
}
/* "Запомнить меня" — выравниваем красиво */
.woocommerce form.login .woocommerce-form-login__rememberme {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin-right: 16px;
cursor: pointer;
color: var(--pc-text-muted) !important;
font-weight: 500 !important;
font-size: 13px !important;
}
.woocommerce form.login .woocommerce-form-login__rememberme input {
margin: 0 !important;
}
/* "Забыли пароль" в отдельной строке внизу */
.woocommerce form.login .lost_password {
margin-top: 16px !important;
text-align: center;
}
.woocommerce form.login .lost_password a {
color: var(--pc-text-muted) !important;
font-size: 13px;
text-decoration: none;
}
.woocommerce form.login .lost_password a:hover {
color: var(--pc-accent) !important;
}
/* Кнопки полностью на ширину карточки */
.woocommerce form.login button[name="login"],
.woocommerce form.register button[name="register"],
.woocommerce form.login .woocommerce-form-login__submit,
.woocommerce form.register .woocommerce-form-register__submit {
width: 100% !important;
padding: 14px 20px !important;
font-size: 14px !important;
margin-top: 8px !important;
}
/* Описание под полями (например, генератор пароля) */
.woocommerce form .form-row .description,
.woocommerce form .password-input + .show-password-input,
.woocommerce-password-hint {
color: var(--pc-text-muted) !important;
font-size: 13px !important;
margin-top: 6px;
}
.woocommerce-account h2 {
color: var(--pc-text);
font-size: 20px;
font-weight: 700;
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--pc-border);
}
/* Поля логина/регистрации */
.woocommerce form .form-row {
margin-bottom: 16px;
padding: 0 !important;
}
.woocommerce form.login .form-row label,
.woocommerce form.register .form-row label {
color: var(--pc-text) !important;
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
display: block !important;
}
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text,
.woocommerce-account form input.input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form select,
.woocommerce-account form textarea {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-sm) !important;
padding: 12px 14px !important;
font-size: 15px !important;
width: 100% !important;
box-sizing: border-box !important;
font-family: inherit !important;
}
.woocommerce form.login input.input-text:focus,
.woocommerce form.register input.input-text:focus,
.woocommerce-account form input:focus,
.woocommerce-account form select:focus {
outline: none !important;
border-color: var(--pc-accent) !important;
}
/* Описания полей (политика приватности и т.д.) */
.woocommerce form.register .woocommerce-privacy-policy-text {
color: var(--pc-text-muted) !important;
font-size: 13px !important;
line-height: 1.5;
margin-top: 16px;
}
.woocommerce form.register .woocommerce-privacy-policy-text a {
color: var(--pc-accent) !important;
}
/* Чекбокс "Запомнить меня" */
.woocommerce-form-login__rememberme,
.woocommerce form.login label.woocommerce-form__label-for-checkbox {
color: var(--pc-text) !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer;
}
.woocommerce-form-login__rememberme input,
.woocommerce-account input[type="checkbox"] {
accent-color: var(--pc-accent);
margin-right: 4px;
}
/* Кнопка "Войти" / "Зарегистрироваться" */
.woocommerce form.login button[name="login"],
.woocommerce form.register button[name="register"],
.woocommerce-account button.woocommerce-button.button {
background: var(--pc-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pc-radius-sm) !important;
padding: 14px 28px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
cursor: pointer;
transition: background 0.15s ease;
}
.woocommerce form.login button[name="login"]:hover,
.woocommerce form.register button[name="register"]:hover,
.woocommerce-account button.woocommerce-button.button:hover {
background: var(--pc-accent-hover) !important;
}
/* "Забыли пароль?" */
.woocommerce-LostPassword a,
.lost_password a {
color: var(--pc-accent) !important;
text-decoration: none;
font-size: 14px;
}
.woocommerce-LostPassword a:hover {
text-decoration: underline;
}
/* === DASHBOARD ЛИЧНОГО КАБИНЕТА === */
/* Flexbox layout вместо grid — стабильнее против WC/Astra defaults */
/* === Layout sidebar+content через CSS Grid с собственной обёрткой ===
* Раньше зависели от `.woocommerce-account .woocommerce { display: flex }`
* — но WC/Astra перебивали этот стиль или ставили обёртку с другими классами.
* Теперь у нас явная обёртка `.pc-account-grid` в template — гарантированно работает. */
.pc-account-grid {
display: grid !important;
grid-template-columns: 240px 1fr !important;
gap: 32px !important;
align-items: start !important;
width: 100% !important;
}
@media (max-width: 768px) {
.pc-account-grid {
grid-template-columns: 1fr !important;
}
}
/* Старые правила с float — обнуляем чтобы grid работал */
.pc-account-grid .woocommerce-MyAccount-navigation,
.pc-account-grid .woocommerce-MyAccount-content {
float: none !important;
margin: 0 !important;
width: auto !important;
max-width: none !important;
}
.pc-account-grid .woocommerce-MyAccount-navigation {
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 8px;
box-sizing: border-box;
}
.pc-account-grid .woocommerce-MyAccount-content {
min-width: 0 !important;
}
/* Пустые WC-notices ломают разметку — скрываем */
.woocommerce-notices-wrapper:empty {
display: none !important;
}
.woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
display: flex !important;
align-items: center;
gap: 12px;
padding: 12px 16px !important;
color: var(--pc-text-muted) !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: var(--pc-radius-sm);
transition: background 0.15s, color 0.15s;
position: relative;
}
/* Иконки перед пунктами — через mask-image, цвет наследуется */
.woocommerce-MyAccount-navigation ul li a::before {
content: '';
display: inline-block;
width: 18px;
height: 18px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
flex-shrink: 0;
opacity: 0.85;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.woocommerce-MyAccount-navigation-link--orders a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.woocommerce-MyAccount-navigation-link--downloads a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.woocommerce-MyAccount-navigation-link--edit-address a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.woocommerce-MyAccount-navigation-link--edit-account a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.woocommerce-MyAccount-navigation-link--warranty a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
/* v1.13.488: иконка для «Способы оплаты» (карта). */
.woocommerce-MyAccount-navigation-link--payment-methods a::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
/* "Выйти" — отделяем визуально от основной навигации */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid var(--pc-border);
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--pc-text-dim) !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
color: #ff5a5a !important;
background: rgba(255, 80, 80, 0.08) !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
background: var(--pc-bg-elevated);
color: var(--pc-text) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active > a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--pc-text) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active > a {
background: var(--pc-accent) !important;
color: #fff !important;
}
/* Контент дашборда */
.woocommerce-account .woocommerce-MyAccount-content {
flex: 1 1 auto !important;
min-width: 0 !important; /* критично: даёт flex-item ужиматься, без этого — overflow */
width: auto !important;
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 28px;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
}
.woocommerce-account .woocommerce-MyAccount-content p {
color: var(--pc-text);
line-height: 1.6;
}
.woocommerce-account .woocommerce-MyAccount-content a {
color: var(--pc-accent);
text-decoration: none;
font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
text-decoration: underline;
}
/* Кнопки внутри LK-контента — белый текст, без подчёркивания */
.woocommerce-account .woocommerce-MyAccount-content a.pc-btn,
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
color: #fff !important;
text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content a.pc-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
color: #fff !important;
text-decoration: none !important;
}
/* Action-card внутри dashboard — наследуют свой цвет, но не red от общего правила */
.woocommerce-account .woocommerce-MyAccount-content a.pc-action-card {
color: var(--pc-text) !important;
text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-content a.pc-action-card:hover {
text-decoration: none !important;
}
/* === КАРТОЧКА ЗАКАЗА (Мои заказы) === */
.pc-orders-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.pc-order-card {
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
transition: border-color 0.15s, background 0.15s;
}
.pc-order-card:hover {
background: var(--pc-bg-card-hover);
border-color: var(--pc-accent);
border-left-color: var(--pc-accent-hover);
}
.pc-order-card__main {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: center;
min-width: 0;
}
.pc-order-card__id-wrap,
.pc-order-card__date-wrap,
.pc-order-card__status-wrap,
.pc-order-card__total-wrap {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start !important;
justify-content: center;
min-height: 48px;
text-align: left;
}
.pc-order-card__status-wrap .pc-status,
.pc-order-card__id,
.pc-order-card__date,
.pc-order-card__date time,
.pc-order-card__total,
.pc-order-card__items,
.pc-order-card__label {
align-self: flex-start !important;
margin-left: 0 !important;
text-align: left !important;
}
/* Лейблы — единая точка вертикали + явный left */
.pc-order-card__label {
font-size: 11px;
font-weight: 700;
color: var(--pc-text-dim);
text-transform: uppercase;
letter-spacing: 0.8px;
line-height: 1.2;
height: 14px;
display: block;
}
/* Минимальные ширины — чтобы лейбл и значение точно были слева в колонке */
.pc-order-card__id-wrap { min-width: 70px; }
.pc-order-card__date-wrap { min-width: 110px; }
.pc-order-card__status-wrap { min-width: 130px; }
.pc-order-card__total-wrap { min-width: 130px; }
/* Pill «Обработка» — отрицательный margin-left компенсирует свой padding,
текст внутри пилюли визуально совпадает с лейблом «СТАТУС» сверху */
.pc-order-card__status-wrap .pc-status {
padding: 5px 12px !important;
margin-left: -12px !important;
}
.pc-order-card__label {
font-size: 11px;
font-weight: 700;
color: var(--pc-text-dim);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.pc-order-card__id {
color: var(--pc-accent);
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
.pc-order-card__date,
.pc-order-card__date time {
color: var(--pc-text);
font-size: 14px;
font-weight: 500;
}
.pc-order-card__total {
color: var(--pc-text);
font-size: 16px;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 2px;
}
.pc-order-card__total .amount,
.pc-order-card__total bdi {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.pc-order-card__items {
color: var(--pc-text-muted);
font-size: 12px;
font-weight: 500;
}
.pc-order-card__actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.pc-btn--sm {
padding: 10px 18px !important;
font-size: 12px !important;
}
/* Статус-бейдж — самостоятельный класс, не зависит от mark.
inline-flex с gap для иконки + текст, выравнено по центру. */
.pc-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
background: var(--pc-accent-dim);
color: var(--pc-accent);
white-space: nowrap;
}
.pc-status--processing,
.pc-status--pending,
.pc-status--on-hold {
background: rgba(255, 180, 60, 0.15);
color: #ffb43c;
}
.pc-status--completed {
background: rgba(60, 180, 90, 0.15);
color: #3cb45a;
}
.pc-status--cancelled,
.pc-status--failed,
.pc-status--refunded {
background: rgba(255, 80, 80, 0.15);
color: #ff5050;
}
@media (max-width: 800px) {
.pc-order-card {
flex-direction: column;
align-items: stretch;
}
.pc-order-card__main {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.pc-order-card__actions {
justify-content: flex-end;
}
}
/* === КАРТОЧКА АДРЕСА === */
.pc-address-grid {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
.pc-address-grid--2col {
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.pc-address-grid--2col {
grid-template-columns: 1fr 1fr;
}
}
.pc-address-card {
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
overflow: hidden;
transition: border-color 0.15s;
}
.pc-address-card:hover {
border-color: var(--pc-accent);
}
.pc-address-card__head {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-bottom: 1px solid var(--pc-border);
background: var(--pc-bg-card);
}
.pc-address-card__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pc-accent-dim);
color: var(--pc-accent);
border-radius: var(--pc-radius-md);
flex-shrink: 0;
}
.pc-address-card__head-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pc-address-card__title {
color: var(--pc-text) !important;
font-size: 15px !important;
font-weight: 700 !important;
margin: 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: left !important;
line-height: 1.2 !important;
}
.pc-address-card__desc {
color: var(--pc-text-muted);
font-size: 12px;
font-weight: 500;
}
.pc-address-card__edit {
color: var(--pc-accent) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
white-space: nowrap;
flex-shrink: 0;
transition: color 0.15s;
}
.pc-address-card__edit:hover {
color: var(--pc-accent-hover) !important;
}
.pc-address-card__body {
padding: 18px 20px;
}
.pc-address-card__body address {
color: var(--pc-text-muted);
font-style: normal;
line-height: 1.7;
font-size: 14px;
margin: 0;
border: none;
background: transparent;
}
.pc-address-card__empty {
color: var(--pc-text-dim);
font-style: italic;
margin: 0;
font-size: 14px;
}
.pc-address-card--empty .pc-address-card__icon {
background: var(--pc-bg-elevated);
color: var(--pc-text-dim);
}
/* === EMPTY STATE (загрузки, заказы без записей) === */
.pc-empty-state {
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 48px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.pc-empty-state__icon {
width: 72px;
height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--pc-accent-dim);
color: var(--pc-accent);
border-radius: 50%;
margin-bottom: 8px;
}
.pc-empty-state__title {
color: var(--pc-text);
font-size: 20px;
font-weight: 800;
margin: 0;
}
.pc-empty-state__text {
color: var(--pc-text-muted);
font-size: 14px;
line-height: 1.5;
max-width: 380px;
margin: 0 0 12px;
}
/* === ОБЩИЙ HEADER ДЛЯ ВСЕХ ENDPOINT-СТРАНИЦ ЛК === */
.pc-page-header {
margin: 0 0 28px;
padding: 0 0 20px;
border-bottom: 1px solid var(--pc-border);
}
.pc-page-header__title {
color: var(--pc-text);
font-size: 26px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 6px;
line-height: 1.2;
}
.pc-page-header__desc {
color: var(--pc-text-muted);
font-size: 15px;
line-height: 1.5;
margin: 0;
}
/* WC-описания (например, «Следующие адреса будут использованы...») */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type:not(.pc-action-card) {
color: var(--pc-text-muted);
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
}
/* === КАСТОМНЫЙ DASHBOARD === */
.pc-dashboard {
display: flex;
flex-direction: column;
gap: 28px;
}
.pc-dashboard__greeting {
margin: 0;
padding-bottom: 20px;
border-bottom: 1px solid var(--pc-border);
}
.pc-dashboard__hello {
color: var(--pc-text);
font-size: 26px;
font-weight: 800;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.pc-dashboard__name {
color: var(--pc-accent);
}
.pc-dashboard__intro {
color: var(--pc-text-muted);
font-size: 15px;
line-height: 1.5;
margin: 0;
}
/* Карточки статистики */
.pc-dashboard__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.pc-stat-card {
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pc-stat-card__label {
color: var(--pc-text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
.pc-stat-card__value {
color: var(--pc-text);
font-size: 24px;
font-weight: 800;
line-height: 1.2;
}
.pc-stat-card__value--accent {
color: var(--pc-accent);
}
.pc-stat-card__value .amount,
.pc-stat-card__value bdi {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
/* Action-cards (Заказы / Адреса / Профиль) */
.pc-dashboard__actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.pc-action-card {
display: flex !important;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
color: var(--pc-text) !important;
text-decoration: none !important;
transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.pc-action-card:hover {
border-color: var(--pc-accent);
background: var(--pc-bg-card-hover);
transform: translateX(2px);
}
.pc-action-card__icon {
display: inline-flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
background: var(--pc-accent-dim);
color: var(--pc-accent);
border-radius: var(--pc-radius-md);
flex-shrink: 0;
}
.pc-action-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.pc-action-card__title {
color: var(--pc-text);
font-size: 15px;
font-weight: 700;
}
.pc-action-card__desc {
color: var(--pc-text-muted);
font-size: 13px;
}
.pc-action-card__arrow {
color: var(--pc-text-dim);
font-size: 22px;
font-weight: 700;
transition: color 0.15s, transform 0.15s;
flex-shrink: 0;
}
.pc-action-card:hover .pc-action-card__arrow {
color: var(--pc-accent);
transform: translateX(4px);
}
/* CTA-кнопка под секциями */
.pc-dashboard__cta {
display: flex;
justify-content: flex-start;
margin-top: 8px;
}
@media (max-width: 600px) {
.pc-dashboard__stats {
grid-template-columns: 1fr;
}
.pc-action-card {
padding: 14px 16px;
}
}
/* Когда не залогинен — flex меняем на block (нет сайдбара, только формы login/register) */
.woocommerce-account:not(.logged-in) .woocommerce {
display: block !important;
}
/* === ТАБЛИЦА ЗАКАЗОВ — стиль «карточки на ряд» === */
body.woocommerce-account .my_account_orders,
body.woocommerce-account .woocommerce-orders-table {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
border-collapse: separate !important;
border-spacing: 0 10px !important;
width: 100% !important;
margin: 0 !important;
}
body.woocommerce-account .my_account_orders thead th,
body.woocommerce-account .woocommerce-orders-table thead th {
background: transparent !important;
color: var(--pc-text-dim) !important;
text-transform: uppercase !important;
font-size: 11px !important;
letter-spacing: 1px !important;
font-weight: 700 !important;
padding: 0 18px 6px !important;
border-bottom: none !important;
text-align: left !important;
}
body.woocommerce-account .my_account_orders tbody tr,
body.woocommerce-account .woocommerce-orders-table tbody tr {
background: var(--pc-bg-elevated);
transition: border-color 0.15s, background 0.15s;
}
body.woocommerce-account .my_account_orders tbody tr td,
body.woocommerce-account .woocommerce-orders-table tbody tr td {
color: var(--pc-text) !important;
background: var(--pc-bg-elevated) !important;
border: none !important;
border-top: 1px solid var(--pc-border) !important;
border-bottom: 1px solid var(--pc-border) !important;
padding: 18px 18px !important;
font-size: 14px;
vertical-align: middle;
}
body.woocommerce-account .my_account_orders tbody tr td:first-child,
body.woocommerce-account .woocommerce-orders-table tbody tr td:first-child {
border-left: 1px solid var(--pc-border) !important;
border-top-left-radius: var(--pc-radius-md);
border-bottom-left-radius: var(--pc-radius-md);
border-left: 3px solid var(--pc-accent) !important;
}
body.woocommerce-account .my_account_orders tbody tr td:last-child,
body.woocommerce-account .woocommerce-orders-table tbody tr td:last-child {
border-right: 1px solid var(--pc-border) !important;
border-top-right-radius: var(--pc-radius-md);
border-bottom-right-radius: var(--pc-radius-md);
}
body.woocommerce-account .my_account_orders tbody tr:hover td,
body.woocommerce-account .woocommerce-orders-table tbody tr:hover td {
background: var(--pc-bg-card-hover) !important;
}
/* Номер заказа — крупнее, красным */
body.woocommerce-account .woocommerce-orders-table__cell-order-number,
body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
color: var(--pc-accent) !important;
font-weight: 700 !important;
font-size: 15px !important;
text-decoration: none !important;
}
/* Статус заказа */
.woocommerce-orders-table__cell-order-status mark,
.woocommerce-orders-table mark.order-status {
background: var(--pc-accent-dim) !important;
color: var(--pc-accent) !important;
padding: 4px 10px !important;
border-radius: var(--pc-radius-sm);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
}
mark.order-status.status-completed {
background: rgba(60, 180, 90, 0.15) !important;
color: #3cb45a !important;
}
mark.order-status.status-pending,
mark.order-status.status-on-hold {
background: rgba(255, 180, 60, 0.15) !important;
color: #ffb43c !important;
}
mark.order-status.status-cancelled,
mark.order-status.status-failed {
background: rgba(255, 80, 80, 0.15) !important;
color: #ff5050 !important;
}
mark.order-status.status-processing {
background: rgba(80, 160, 255, 0.15) !important;
color: #50a0ff !important;
}
/* Кнопки в строке заказа (Просмотр / Оплатить / Отменить) */
.woocommerce-orders-table__cell-order-actions a.button {
background: transparent !important;
color: var(--pc-text) !important;
border: 1px solid var(--pc-border) !important;
padding: 8px 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-right: 4px;
border-radius: var(--pc-radius-sm) !important;
transition: border-color 0.15s, color 0.15s;
}
.woocommerce-orders-table__cell-order-actions a.button:hover {
border-color: var(--pc-accent) !important;
color: var(--pc-accent) !important;
}
.woocommerce-orders-table__cell-order-actions a.button.pay,
.woocommerce-orders-table__cell-order-actions a.button.view {
background: var(--pc-accent) !important;
color: #fff !important;
border-color: var(--pc-accent) !important;
}
.woocommerce-orders-table__cell-order-actions a.button.pay:hover,
.woocommerce-orders-table__cell-order-actions a.button.view:hover {
background: var(--pc-accent-hover) !important;
}
/* === АДРЕСА === */
.woocommerce-account .woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 0 !important;
}
.woocommerce-account .woocommerce-Address {
background: var(--pc-bg-elevated) !important;
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 20px;
}
.woocommerce-account .woocommerce-Address-title h3 {
color: var(--pc-text);
font-size: 18px;
font-weight: 700;
margin: 0 0 12px;
}
.woocommerce-account .woocommerce-Address-title .edit {
color: var(--pc-accent) !important;
font-size: 13px;
float: right;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.woocommerce-account .woocommerce-Address address {
color: var(--pc-text-muted);
font-style: normal;
line-height: 1.6;
}
/* === EDIT ADDRESS FORM (форма редактирования адреса) === */
.woocommerce-account .woocommerce form > h3 {
display: none !important; /* убираем дубль — заголовок уже в pc-page-header */
}
body.woocommerce-account .woocommerce-address-fields {
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 28px;
margin: 0;
}
body.woocommerce-account .woocommerce-address-fields__field-wrapper {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 18px 16px;
margin-bottom: 20px;
}
body.woocommerce-account .woocommerce-address-fields__field-wrapper > p,
body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Полноширинные поля */
body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="company_field"],
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="country_field"],
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="address_1_field"],
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="address_2_field"],
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="city_field"],
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="state_field"],
body.woocommerce-account .woocommerce-address-fields__field-wrapper [id*="postcode_field"] {
grid-column: 1 / -1;
}
/* Лейблы — белые читаемые */
body.woocommerce-account form .form-row label,
body.woocommerce-account .woocommerce-address-fields label {
color: var(--pc-text) !important;
font-weight: 600 !important;
font-size: 13px !important;
margin-bottom: 6px !important;
display: block !important;
opacity: 1 !important;
}
body.woocommerce-account form .form-row .required {
color: var(--pc-accent) !important;
}
/* Кнопка "Сохранить адрес" внизу формы */
body.woocommerce-account .woocommerce-address-fields > p:last-child {
margin: 24px 0 0 !important;
}
body.woocommerce-account .woocommerce-address-fields button[type="submit"] {
background: var(--pc-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pc-radius-sm) !important;
padding: 14px 28px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer;
}
/* === SELECT2 DARK THEME (для Страна/регион, Область) === */
body.woocommerce-account .select2-container--default .select2-selection--single,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
background: var(--pc-bg-card) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-sm) !important;
height: 46px !important;
min-height: 46px !important;
color: var(--pc-text) !important;
display: flex !important;
align-items: center !important;
padding: 0 14px !important;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--pc-text) !important;
line-height: 1.4 !important;
padding: 0 !important;
margin: 0 !important;
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
height: auto !important;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--pc-text-dim) !important;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 44px !important;
right: 8px !important;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--pc-text-muted) transparent transparent transparent !important;
}
/* Открытый dropdown — везде, не привязано к body-class */
.select2-dropdown {
background: var(--pc-bg-card) !important;
border: 1px solid var(--pc-border) !important;
color: var(--pc-text) !important;
border-radius: var(--pc-radius-sm) !important;
}
.select2-results__option {
color: var(--pc-text) !important;
padding: 10px 16px !important;
background: transparent !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: var(--pc-accent) !important;
color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
}
.select2-search--dropdown .select2-search__field {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-sm) !important;
padding: 8px 12px !important;
}
/* === EDIT ACCOUNT FORM (Анкета) === */
.woocommerce-EditAccountForm .form-row label,
.woocommerce-EditAccountForm label,
.woocommerce-account .edit-account label {
color: var(--pc-text) !important;
opacity: 1 !important;
font-weight: 600 !important;
font-size: 14px !important;
}
/* Описания под полями ("Так ваше имя будет отображаться...") */
.woocommerce-EditAccountForm em,
.woocommerce-EditAccountForm .form-row em,
.woocommerce-EditAccountForm .description {
color: var(--pc-text-muted) !important;
font-style: normal !important;
font-size: 13px !important;
display: block;
margin-top: 6px !important;
}
/* === EDIT ACCOUNT — наш кастомный layout === */
body.woocommerce-account .pc-account-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 16px;
margin-bottom: 0;
}
body.woocommerce-account .pc-account-grid .form-row-first,
body.woocommerce-account .pc-account-grid .form-row-last {
grid-column: span 1;
}
body.woocommerce-account .pc-account-grid .form-row-wide {
grid-column: 1 / -1;
}
body.woocommerce-account .pc-account-grid p.form-row {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
float: none !important;
}
/* Подсказка под полем (Display name) */
.pc-form-hint {
display: block;
color: var(--pc-text-muted);
font-size: 13px;
margin-top: 6px;
font-style: normal;
}
/* Карточка "Смена пароля" */
.pc-password-section {
background: var(--pc-bg-elevated);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 20px 24px;
margin: 28px 0 0;
}
.pc-password-section__head {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--pc-border);
}
.pc-password-section__title {
color: var(--pc-text);
font-size: 18px;
font-weight: 800;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.pc-password-section__desc {
color: var(--pc-text-muted);
font-size: 13px;
font-weight: 500;
margin: 0;
line-height: 1.4;
}
.pc-password-section__body {
display: flex;
flex-direction: column;
gap: 12px;
}
.pc-password-section__body p.form-row {
margin: 0 !important;
padding: 0 !important;
}
.pc-password-section__body p.form-row label {
margin-bottom: 4px !important;
}
/* Фиксируем input пароля компактно — через line-height вместо padding */
.pc-password-section input[type="password"],
body.woocommerce-account .password-input input[type="password"] {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 56px 0 14px !important;
line-height: 44px !important;
box-sizing: border-box !important;
}
/* === НАШ КАСТОМНЫЙ ТОГГЛ ПАРОЛЯ — pc-pw-wrap + pc-pw-toggle === */
body.woocommerce-account .pc-pw-wrap {
position: relative !important;
display: block !important;
width: 100% !important;
}
body.woocommerce-account .pc-pw-wrap input[type="password"],
body.woocommerce-account .pc-pw-wrap input[type="text"] {
width: 100% !important;
padding-right: 56px !important;
box-sizing: border-box !important;
}
/* Прячем ВСЕ WC-овские авто-добавленные кнопки в нашей карточке смены пароля */
body.woocommerce-account .pc-password-section .show-password-input,
body.woocommerce-account .pc-password-section button.show-password-input,
body.woocommerce-account .pc-pw-wrap .show-password-input,
body.woocommerce-account .pc-pw-wrap > button:not(.pc-pw-toggle),
body.woocommerce-account .pc-password-section > button:not(.pc-pw-toggle) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.woocommerce-account .pc-pw-toggle {
appearance: none !important;
-webkit-appearance: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
font: inherit !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 48px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
color: var(--pc-text) !important;
cursor: pointer !important;
z-index: 5 !important;
transition: color 0.15s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.woocommerce-account .pc-pw-toggle:hover {
color: var(--pc-accent) !important;
}
body.woocommerce-account .pc-pw-toggle::before {
content: '' !important;
display: block !important;
width: 20px !important;
height: 20px !important;
background-color: currentColor !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
mask-image: url("data:image/svg+xml;utf8,") !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
}
body.woocommerce-account .pc-pw-toggle.is-shown::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
mask-image: url("data:image/svg+xml;utf8,") !important;
}
/* === ИКОНКА show/hide пароля — pure flex подход === */
/* .password-input — обёртка с position: relative, button внутри absolute */
body.woocommerce-account .password-input,
body.woocommerce-account .woocommerce-form .password-input,
body.woocommerce-account form .password-input,
html body .password-input {
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
}
/* Input — занимает всю доступную ширину, фиксированная высота, место под иконку справа */
body.woocommerce-account .password-input input.input-text,
body.woocommerce-account .password-input input[type="password"],
body.woocommerce-account .password-input input[type="text"],
body.woocommerce-account input[type="password"] {
flex: 1 1 auto !important;
height: 46px !important;
box-sizing: border-box !important;
padding-right: 56px !important;
margin: 0 !important;
width: 100% !important;
}
/* Кнопка — absolute, растягивается на полную высоту input через top:0 + bottom:0 */
body.woocommerce-account .password-input button.show-password-input,
body.woocommerce-account button.show-password-input,
body button.show-password-input,
html body .password-input button.show-password-input {
appearance: none !important;
-webkit-appearance: none !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
font: inherit !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
left: auto !important;
transform: none !important;
width: 48px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
color: var(--pc-text) !important;
cursor: pointer !important;
z-index: 5;
transition: color 0.15s ease;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: none !important;
}
/* Input — полной ширины, с padding-right под иконку */
body.woocommerce-account .password-input input[type="password"],
html body .password-input input[type="password"] {
width: 100% !important;
padding-right: 56px !important;
box-sizing: border-box !important;
}
/* Прячем встроенный WC ::after (сломанная позиция) */
body button.show-password-input::after,
body .show-password-input::after {
content: none !important;
display: none !important;
}
/* Свой SVG-глазик через ::before mask-image, цвет наследуется через currentColor */
body.woocommerce-account button.show-password-input::before,
body button.show-password-input::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 20px !important;
height: 20px !important;
background-color: currentColor !important;
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
mask-image: url("data:image/svg+xml;utf8,") !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
}
/* Eye-off icon когда пароль показан */
body.woocommerce-account button.show-password-input.display-password::before,
body button.show-password-input.display-password::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,") !important;
mask-image: url("data:image/svg+xml;utf8,") !important;
}
body.woocommerce-account button.show-password-input:hover {
color: var(--pc-accent) !important;
}
body.woocommerce-account button.show-password-input:focus {
outline: 0 !important;
box-shadow: none !important;
}
body.woocommerce-account .password-input .show-password-input:hover,
body.woocommerce-account .show-password-input:hover {
color: var(--pc-accent) !important;
}
/* Сама dashicon ::after — центрируем абсолютно внутри обёртки + крупнее */
body.woocommerce-account .password-input .show-password-input::after,
body.woocommerce-account .show-password-input::after,
body .show-password-input::after {
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
width: auto !important;
height: auto !important;
font-size: 18px !important;
line-height: 1 !important;
color: inherit !important;
display: block !important;
margin: 0 !important;
}
body.woocommerce-account .password-input .show-password-input:hover,
body.woocommerce-account .show-password-input:hover {
color: var(--pc-accent) !important;
}
body.woocommerce-account .password-input .show-password-input.display-password,
body.woocommerce-account .show-password-input.display-password {
color: var(--pc-accent) !important;
}
/* Кнопка submit под формой */
.pc-account-submit {
margin: 28px 0 0 !important;
}
.woocommerce-EditAccountForm fieldset .form-row {
margin-bottom: 16px;
}
.woocommerce-EditAccountForm fieldset .form-row label {
color: var(--pc-text) !important;
font-size: 14px !important;
font-weight: 600 !important;
}
/* Поля паролей — явная рамка чтобы выделяться на фоне content-карточки */
.woocommerce-EditAccountForm .password-input,
.woocommerce-EditAccountForm input[type="password"] {
background: var(--pc-bg-elevated) !important;
}
/* === АДРЕСА — единый стиль карточки === */
.woocommerce-account .woocommerce-Address {
background: var(--pc-bg-elevated) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-md) !important;
padding: 0 !important;
overflow: hidden;
display: block !important;
}
.woocommerce-account .woocommerce-Address-title.title,
.woocommerce-account .woocommerce-Address > header.title,
.woocommerce-account .woocommerce-Address > header {
background: var(--pc-bg-card) !important;
border: 0 !important;
border-bottom: 1px solid var(--pc-border) !important;
padding: 14px 20px !important;
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
box-shadow: none !important;
}
body.woocommerce-account .woocommerce-Address-title h3,
body.woocommerce-account .woocommerce-Address > header h3,
body.woocommerce-account .woocommerce-Address > header.title h3,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h3 {
color: var(--pc-text) !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
text-align: left !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
flex: 1 1 auto;
border: none !important;
border-bottom: none !important;
width: auto !important;
}
.woocommerce-account .woocommerce-Address-title .edit,
.woocommerce-account .woocommerce-Address > header a.edit {
color: var(--pc-accent) !important;
background: transparent !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
float: none !important;
padding: 0 !important;
border: none !important;
flex-shrink: 0;
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
color: var(--pc-accent-hover) !important;
text-decoration: none !important;
}
.woocommerce-account .woocommerce-Address address {
color: var(--pc-text-muted) !important;
font-style: normal !important;
line-height: 1.7 !important;
padding: 18px 20px !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
font-size: 14px;
}
/* Текст «Вы ещё не настроили этот тип адреса» — внутри address или p */
.woocommerce-account .woocommerce-Address address:empty + p,
.woocommerce-account .woocommerce-Address > p {
color: var(--pc-text-muted) !important;
font-style: italic;
padding: 18px 20px !important;
margin: 0 !important;
border: none !important;
}
/* === ОБРАМЛЕНИЕ NOTICE-БЛОКОВ В LK (Загрузки, нет адреса и т.п.) === */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
border: 1px solid var(--pc-border) !important;
border-top: 3px solid var(--pc-accent) !important;
border-radius: var(--pc-radius-md) !important;
padding: 18px 22px !important;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message a.button {
background: var(--pc-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pc-radius-sm) !important;
padding: 12px 22px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin: 0 !important;
white-space: nowrap;
}
/* Поля анкеты — явный bg для контраста с .woocommerce-MyAccount-content */
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="tel"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-sm) !important;
padding: 12px 14px !important;
font-size: 15px !important;
}
.woocommerce-EditAccountForm input:focus,
.woocommerce-account form .form-row input:focus {
border-color: var(--pc-accent) !important;
outline: none !important;
}
/* Кнопка "Сохранить изменения" / "Регистрация" */
.woocommerce-account .woocommerce-Button.button,
.woocommerce-account button.woocommerce-Button,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
background: var(--pc-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pc-radius-sm) !important;
padding: 14px 28px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-top: 12px;
cursor: pointer;
transition: background 0.15s;
}
.woocommerce-account .woocommerce-Button.button:hover,
.woocommerce-account button.woocommerce-Button:hover {
background: var(--pc-accent-hover) !important;
}
/* === ORDER STATUS BADGES — расширенные селекторы (WC может выводить с/без mark) === */
body.woocommerce-account .woocommerce-orders-table__cell-order-status,
body.woocommerce-account td.woocommerce-orders-table__cell-order-status mark,
body.woocommerce-account td.order-status,
body.woocommerce-account mark.order-status {
background: var(--pc-accent-dim) !important;
color: var(--pc-accent) !important;
padding: 6px 14px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
display: inline-block !important;
border: none !important;
line-height: 1.4;
}
/* Статус-цвета: ищем по любому варианту наличия класса status-XXX */
body.woocommerce-account .woocommerce-orders-table__cell-order-status:has(.status-completed),
body.woocommerce-account td:has(mark.status-completed),
body.woocommerce-account mark.order-status.status-completed,
body.woocommerce-account .order-status.status-completed {
background: rgba(60, 180, 90, 0.15) !important;
color: #3cb45a !important;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-status:has(.status-pending),
body.woocommerce-account .woocommerce-orders-table__cell-order-status:has(.status-on-hold),
body.woocommerce-account td:has(mark.status-pending),
body.woocommerce-account td:has(mark.status-on-hold),
body.woocommerce-account mark.order-status.status-pending,
body.woocommerce-account mark.order-status.status-on-hold {
background: rgba(255, 180, 60, 0.15) !important;
color: #ffb43c !important;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-status:has(.status-cancelled),
body.woocommerce-account .woocommerce-orders-table__cell-order-status:has(.status-failed),
body.woocommerce-account td:has(mark.status-cancelled),
body.woocommerce-account td:has(mark.status-failed),
body.woocommerce-account mark.order-status.status-cancelled,
body.woocommerce-account mark.order-status.status-failed {
background: rgba(255, 80, 80, 0.15) !important;
color: #ff5050 !important;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-status:has(.status-processing),
body.woocommerce-account td:has(mark.status-processing),
body.woocommerce-account mark.order-status.status-processing {
background: rgba(255, 180, 60, 0.15) !important;
color: #ffb43c !important;
}
/* Если mark внутри td — само td не нужно стилить как badge, только mark внутри */
body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status:has(mark) {
background: transparent !important;
color: var(--pc-text) !important;
padding: 14px 16px !important;
border-radius: 0 !important;
}
body.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status mark {
display: inline-block !important;
}
/* === АДАПТИВ === */
@media (max-width: 900px) {
/* Layout — flex column на мобиле */
.woocommerce-account .woocommerce {
flex-direction: column !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 16px !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important;
padding: 20px !important;
}
/* Сайдбар горизонтальный на мобиле */
.woocommerce-MyAccount-navigation ul {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 4px;
}
.woocommerce-MyAccount-navigation ul li {
flex: 0 0 auto;
}
.woocommerce-MyAccount-navigation-link--customer-logout {
grid-column: 1 / -1;
margin-top: 4px !important;
}
/* Page-header чуть компактнее */
.pc-page-header {
margin-bottom: 20px;
padding-bottom: 16px;
}
.pc-page-header__title {
font-size: 22px;
}
/* Dashboard карточки — компакт */
.pc-dashboard__hello {
font-size: 22px;
}
.pc-dashboard__stats {
grid-template-columns: 1fr;
gap: 8px;
}
.pc-stat-card {
padding: 14px 16px;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.pc-stat-card__value {
font-size: 20px;
}
.pc-action-card {
padding: 14px 16px;
}
.pc-action-card__icon {
width: 40px;
height: 40px;
}
/* Карточки заказа — стек на мобиле */
.pc-order-card {
flex-direction: column;
align-items: stretch;
padding: 16px;
gap: 14px;
}
.pc-order-card__main {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pc-order-card__actions {
width: 100%;
justify-content: stretch;
}
.pc-order-card__actions .pc-btn {
flex: 1;
text-align: center;
}
/* Карточки адресов — 1 колонка */
.pc-address-grid--2col {
grid-template-columns: 1fr;
}
.pc-address-card__head {
padding: 14px 16px;
gap: 10px;
}
.pc-address-card__icon {
width: 36px;
height: 36px;
}
.pc-address-card__body {
padding: 16px;
}
/* Edit-address форма — 1 колонка */
body.woocommerce-account .woocommerce-address-fields {
padding: 20px;
}
body.woocommerce-account .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr;
gap: 14px;
}
/* Анкета — 1 колонка для имени/фамилии */
body.woocommerce-account .pc-account-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.pc-password-section {
padding: 20px;
}
/* Empty-state — компакт */
.pc-empty-state {
padding: 32px 20px;
}
.pc-empty-state__icon {
width: 56px;
height: 56px;
}
.pc-empty-state__title {
font-size: 18px;
}
/* Login/register — width на всю ширину */
.woocommerce-account #customer_login {
max-width: 100%;
}
.woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.woocommerce-MyAccount-navigation ul li {
flex: 0 0 auto;
}
.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .u-columns.col2-set {
grid-template-columns: 1fr;
}
.woocommerce-account .woocommerce-Addresses {
grid-template-columns: 1fr;
}
.woocommerce-account .my_account_orders thead {
display: none;
}
.woocommerce-account .my_account_orders tr {
display: block;
border-bottom: 1px solid var(--pc-border);
}
.woocommerce-account .my_account_orders td {
display: flex !important;
justify-content: space-between;
padding: 8px 16px !important;
border: none !important;
}
.woocommerce-account .my_account_orders td::before {
content: attr(data-title);
font-weight: 700;
color: var(--pc-text-muted);
text-transform: uppercase;
font-size: 11px;
}
}
/* ============================================================
* СТРАНИЦА КОНКРЕТНОГО ЗАКАЗА (/account/view-order/N/)
* ============================================================
* WC рендерит её через шаблон woocommerce/order/order-details.php
* с классами .woocommerce-table--order-details и
* .woocommerce-customer-details. Astra/WC-default красят их в
* белый — стилизуем под нашу тёмную тему.
*/
/* Параграф с номером, датой и статус-пиллой — card-стиль с красной
полоской слева (как в блоке «Смена пароля»). */
body.woocommerce-account .woocommerce-MyAccount-content > p:has(mark.order-status),
body.woocommerce-account .woocommerce-order-details > p,
body.woocommerce-account p.woocommerce-order-details__total {
font-size: 14.5px;
color: var(--pc-text-dim);
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 18px 22px;
margin: 0 0 32px;
line-height: 1.7;
}
/* Дата и номер заказа выделены акцентом */
body.woocommerce-account .woocommerce-MyAccount-content > p > mark,
body.woocommerce-account .woocommerce-order-details > p > mark {
background: transparent !important;
color: var(--pc-accent) !important;
font-weight: 700;
padding: 0 !important;
}
/* Inline-статус «ОБРАБОТКА» в параграфе — тот же бейдж и цвета,
что в списке заказов (оранжевый для processing/pending, зелёный для completed).
Иконка добавляется через ::before с SVG в mask-image (currentColor). */
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status,
body.woocommerce-account .woocommerce-order-details > p mark.order-status {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 4px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
border-radius: 100px !important;
margin: 0 !important;
border: none !important;
/* Дефолт — accent-dim как в списке */
background: var(--pc-accent-dim) !important;
color: var(--pc-accent) !important;
}
/* Иконка перед текстом — берём цвет от родительского mark через currentColor */
body.woocommerce-account mark.order-status::before {
content: '' !important;
display: inline-block !important;
width: 13px !important;
height: 13px !important;
background: currentColor !important;
flex-shrink: 0 !important;
/* Часы — для дефолта/processing/pending */
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
}
/* Чекмарк — для completed */
body.woocommerce-account mark.order-status.status-completed::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
}
/* Крестик в круге — для cancelled/failed/refunded */
body.woocommerce-account mark.order-status.status-cancelled::before,
body.woocommerce-account mark.order-status.status-failed::before,
body.woocommerce-account mark.order-status.status-refunded::before {
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
}
/* Processing — оранжевый (единый стиль везде) */
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status.status-processing,
body.woocommerce-account .woocommerce-order-details > p mark.order-status.status-processing {
background: rgba(255, 180, 60, 0.15) !important;
color: #ffb43c !important;
}
/* Pending / On-hold — оранжевый */
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status.status-pending,
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status.status-on-hold,
body.woocommerce-account .woocommerce-order-details > p mark.order-status.status-pending,
body.woocommerce-account .woocommerce-order-details > p mark.order-status.status-on-hold {
background: rgba(255, 180, 60, 0.15) !important;
color: #ffb43c !important;
}
/* Completed — зелёный */
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status.status-completed,
body.woocommerce-account .woocommerce-order-details > p mark.order-status.status-completed {
background: rgba(60, 180, 90, 0.15) !important;
color: #3cb45a !important;
}
/* Cancelled / Failed — красный */
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status.status-cancelled,
body.woocommerce-account .woocommerce-MyAccount-content > p mark.order-status.status-failed,
body.woocommerce-account .woocommerce-order-details > p mark.order-status.status-cancelled,
body.woocommerce-account .woocommerce-order-details > p mark.order-status.status-failed {
background: rgba(255, 80, 80, 0.15) !important;
color: #ff5050 !important;
}
/* Таблица деталей заказа — card-стиль с красной полоской слева */
body.woocommerce-account .woocommerce-table--order-details,
body.woocommerce-account table.shop_table.order_details {
width: 100% !important;
background: var(--pc-bg-card) !important;
border: 1px solid var(--pc-border) !important;
border-left: 3px solid var(--pc-accent) !important;
border-radius: var(--pc-radius-md) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden !important;
margin: 0 0 32px !important;
}
body.woocommerce-account .woocommerce-table--order-details thead th,
body.woocommerce-account table.shop_table.order_details thead th {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text-muted) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 14px 18px !important;
border: none !important;
border-bottom: 1px solid var(--pc-border) !important;
text-align: left !important;
}
body.woocommerce-account .woocommerce-table--order-details tbody td,
body.woocommerce-account .woocommerce-table--order-details tfoot th,
body.woocommerce-account .woocommerce-table--order-details tfoot td,
body.woocommerce-account table.shop_table.order_details tbody td,
body.woocommerce-account table.shop_table.order_details tfoot th,
body.woocommerce-account table.shop_table.order_details tfoot td {
background: transparent !important;
color: var(--pc-text) !important;
padding: 14px 18px !important;
border: none !important;
border-bottom: 1px solid var(--pc-border) !important;
font-size: 14.5px !important;
}
body.woocommerce-account .woocommerce-table--order-details tr:last-child td,
body.woocommerce-account .woocommerce-table--order-details tr:last-child th,
body.woocommerce-account table.shop_table.order_details tr:last-child td,
body.woocommerce-account table.shop_table.order_details tr:last-child th {
border-bottom: none !important;
}
body.woocommerce-account .woocommerce-table--order-details tfoot th,
body.woocommerce-account table.shop_table.order_details tfoot th {
color: var(--pc-text-muted) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 13px !important;
}
/* Ссылка на товар внутри таблицы заказа — НЕ красная */
body.woocommerce-account .woocommerce-table--order-details a,
body.woocommerce-account table.shop_table.order_details a {
color: var(--pc-text) !important;
text-decoration: none !important;
font-weight: 600 !important;
}
body.woocommerce-account .woocommerce-table--order-details a:hover,
body.woocommerce-account table.shop_table.order_details a:hover {
color: var(--pc-accent) !important;
}
/* Цены внутри таблицы заказа */
body.woocommerce-account .woocommerce-table--order-details .amount,
body.woocommerce-account table.shop_table.order_details .amount {
color: var(--pc-text) !important;
font-weight: 700 !important;
}
/* Итоговая строка в tfoot — крупнее, акцент-цвет.
PHP-фильтр в inc/woocommerce-account.php удаляет всю WC-разметку
у order_total и оставляет только текст внутри .pc-order-total —
так что конкурирующих правил .amount/bdi в DOM нет, и одно простое
правило работает без специфичности-войн. */
html body.woocommerce-account .pc-order-total {
color: var(--pc-accent) !important;
font-size: 22px !important;
font-weight: 800 !important;
white-space: nowrap !important;
display: inline-block !important;
}
/* TH «ИТОГО:» — также крупнее, чтобы был баланс с ценой */
html body.woocommerce-account .woocommerce-table--order-details tfoot tr:has(.pc-order-total) th,
html body.woocommerce-account table.shop_table.order_details tfoot tr:has(.pc-order-total) th {
color: var(--pc-text) !important;
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
}
/* На мобиле — уменьшаем итоговую сумму, чтобы не переносилась */
@media (max-width: 800px) {
html body.woocommerce-account .pc-order-total {
font-size: 17px !important;
}
html body.woocommerce-account .woocommerce-table--order-details tfoot tr:has(.pc-order-total) th,
html body.woocommerce-account table.shop_table.order_details tfoot tr:has(.pc-order-total) th {
font-size: 14px !important;
}
}
/* Блок «Информация о клиенте / адреса» */
body.woocommerce-account .woocommerce-customer-details {
margin-top: 8px;
}
/* Случай 1: заказ с двумя адресами — внутри есть .woocommerce-columns
с двумя .woocommerce-column. Каждый column — отдельная карточка. */
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
margin: 0 !important;
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-column {
background: var(--pc-bg-card) !important;
border: 1px solid var(--pc-border) !important;
border-left: 3px solid var(--pc-accent) !important;
border-radius: var(--pc-radius-md) !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
width: auto !important;
float: none !important;
}
/* Случай 2: заказ только с billing address (без shipping) — WC выводит
h2 + address прямо внутри .woocommerce-customer-details, без обёртки
.woocommerce-column. Сам .woocommerce-customer-details становится карточкой. */
body.woocommerce-account .woocommerce-customer-details:has(> address) {
background: var(--pc-bg-card) !important;
border: 1px solid var(--pc-border) !important;
border-left: 3px solid var(--pc-accent) !important;
border-radius: var(--pc-radius-md) !important;
overflow: hidden !important;
margin-top: 24px !important;
}
body.woocommerce-account .woocommerce-customer-details:has(> address) > .woocommerce-column__title,
body.woocommerce-account .woocommerce-customer-details:has(> address) > h2 {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
padding: 14px 18px !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid var(--pc-border) !important;
}
body.woocommerce-account .woocommerce-customer-details:has(> address) > address {
padding: 18px !important;
margin: 0 !important;
border: none !important;
}
/* Заголовок «Платёжный адрес» / «Адрес доставки» — тёмный, не белый.
Принудительно гасим все бордеры и outline (Astra/WC default
часто дают светлый top-border или outline вокруг h2). */
body.woocommerce-account .woocommerce-customer-details .woocommerce-column__title,
body.woocommerce-account .woocommerce-customer-details h2,
body.woocommerce-account .woocommerce-customer-details header h2 {
background: var(--pc-bg-elevated) !important;
color: var(--pc-text) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
padding: 14px 18px !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid var(--pc-border) !important;
outline: none !important;
box-shadow: none !important;
text-align: left !important;
}
/* Содержимое адреса */
body.woocommerce-account .woocommerce-customer-details address {
color: var(--pc-text) !important;
font-style: normal !important;
font-size: 14px !important;
line-height: 1.65 !important;
padding: 18px !important;
border: none !important;
margin: 0 !important;
background: transparent !important;
}
body.woocommerce-account .woocommerce-customer-details address p {
margin: 0 0 4px !important;
}
body.woocommerce-account .woocommerce-customer-details address .woocommerce-customer-details--phone,
body.woocommerce-account .woocommerce-customer-details address .woocommerce-customer-details--email {
color: var(--pc-text-dim) !important;
font-size: 13.5px !important;
margin-top: 8px !important;
}
body.woocommerce-account .woocommerce-customer-details address a {
color: var(--pc-text) !important;
text-decoration: none !important;
}
body.woocommerce-account .woocommerce-customer-details address a:hover {
color: var(--pc-accent) !important;
}
/* Заголовки h2 секций «Заказ» / «Информация о заказе» / «Информация о клиенте» */
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-order-details h2 {
color: var(--pc-text) !important;
font-size: 22px !important;
font-weight: 800 !important;
margin: 24px 0 16px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content h2:first-child,
body.woocommerce-account .woocommerce-order-details h2:first-child {
margin-top: 0 !important;
}
/* ============================================================
* СТРАНИЦА «ГАРАНТИЯ» (/account/warranty/)
* ============================================================ */
.pc-warranty-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 8px;
}
.pc-warranty-card {
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Полоска слева — всегда красная (как везде в LK), независимо от статуса.
Различие между активной/pending — только в цвете status-pill. */
.pc-warranty-card--active,
.pc-warranty-card--pending {
border-left-color: var(--pc-accent);
}
.pc-warranty-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.pc-warranty-card__title-block {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Match orders list: 11px label, 700 weight, dim color, 0.8px letter-spacing */
.pc-warranty-card__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--pc-text-dim);
}
/* Match orders list: 17px id, 800 weight, accent color (как в pc-order-card__id).
!important нужен потому что глобальное `h1, h2, h3 { color: var(--pc-text) }`
в main.css перебивает по принципу last-loaded при равной специфичности. */
.pc-warranty-card__title,
h3.pc-warranty-card__title {
font-size: 17px !important;
font-weight: 800 !important;
color: var(--pc-accent) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.pc-warranty-card__status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 100px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
white-space: nowrap;
background: var(--pc-accent-dim);
color: var(--pc-accent);
}
.pc-warranty-card__status--completed {
background: rgba(60, 180, 90, 0.15);
color: #3cb45a;
}
.pc-warranty-card__status--processing,
.pc-warranty-card__status--on-hold,
.pc-warranty-card__status--pending {
background: rgba(255, 180, 60, 0.15);
color: #ffb43c;
}
/* Match orders list: 14px meta, 500 weight, text color */
.pc-warranty-card__meta {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 14px;
font-weight: 500;
color: var(--pc-text);
padding-bottom: 14px;
border-bottom: 1px solid var(--pc-border);
}
.pc-warranty-card__meta strong {
color: var(--pc-text-dim);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-right: 6px;
}
/* Match orders list: 13px items, 500 weight */
.pc-warranty-card__items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: var(--pc-text);
line-height: 1.5;
}
.pc-warranty-card__items li {
padding-left: 16px;
position: relative;
}
.pc-warranty-card__items li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 1.5px;
background: var(--pc-accent);
border-radius: 1px;
}
.pc-warranty-card__foot {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding-top: 4px;
}
.pc-warranty-card__foot .pc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pc-warranty-card__foot .pc-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.pc-warranty-card__note {
font-size: 13px;
color: var(--pc-text-dim);
}
.pc-warranty-card__pending {
font-size: 13.5px;
line-height: 1.55;
color: var(--pc-text-dim);
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
font-style: italic;
}
/* Empty state — когда заказов нет вообще */
.pc-warranty-empty {
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 56px 32px;
text-align: center !important;
}
.pc-warranty-empty * {
text-align: center !important;
}
.pc-warranty-empty__icon {
display: inline-flex;
color: var(--pc-accent);
margin-bottom: 16px;
}
.pc-warranty-empty__title {
font-size: 22px;
font-weight: 800;
color: var(--pc-text);
margin: 0 0 12px;
}
html body .pc-warranty-empty__desc,
.pc-warranty-empty p.pc-warranty-empty__desc {
font-size: 14.5px !important;
line-height: 1.6 !important;
color: var(--pc-text-muted) !important;
max-width: 460px !important;
margin: 0 auto 24px !important;
text-align: center !important;
text-wrap: balance;
text-wrap: pretty;
display: block !important;
width: auto !important;
}
@media (max-width: 600px) {
.pc-warranty-card {
padding: 18px 18px;
}
.pc-warranty-card__head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.pc-warranty-card__meta {
gap: 4px;
flex-direction: column;
}
.pc-warranty-card__foot {
flex-direction: column;
align-items: stretch;
}
.pc-warranty-card__foot .pc-btn {
width: 100%;
justify-content: center;
}
.pc-warranty-card__note {
text-align: center;
}
}
/* ============================================================
* GUEST CHECKOUT — альтернатива регистрации
* Блоки: pc-guest-tracker (на /my-account/), pc-guest-save (на thank-you),
* pc-saved-orders (на /track-order/).
* ============================================================ */
.pc-guest-tracker {
display: block;
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-md);
padding: 12px 16px 14px;
margin: 0 auto 14px;
max-width: 460px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.pc-guest-tracker .pc-btn {
display: inline-block;
margin: 0 auto;
}
/* H1 «Личный кабинет» на /account/ — лишний, есть крошки */
body.woocommerce-account .entry-title,
body.woocommerce-account .page-title,
body.woocommerce-account h1.entry-title,
body.woocommerce-account .pc-page-title,
body.page-template-default.woocommerce-account .entry-header h1 {
display: none !important;
}
/* Иконка inline с заголовком слева в одной строке */
.pc-guest-tracker__icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
background: none;
border-radius: 0;
color: var(--pc-accent);
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-right: 8px;
}
.pc-guest-tracker__icon svg { width: 20px; height: 20px; }
/* Кнопка «Найти заказ» — primary, белый текст без подчёркивания */
.pc-guest-tracker a.pc-btn,
.pc-guest-tracker .pc-btn,
.pc-guest-tracker a.pc-btn.pc-btn--primary,
.pc-guest-tracker .pc-btn.pc-btn--primary {
text-decoration: none !important;
color: #ffffff !important;
}
.pc-guest-tracker a.pc-btn:hover,
.pc-guest-tracker .pc-btn:hover {
color: #ffffff !important;
text-decoration: none !important;
}
.pc-guest-tracker__body { flex: 1 1 auto; min-width: 0; }
.pc-guest-tracker__title {
margin: 0 0 6px !important;
padding: 0 !important;
font-size: 14px;
font-weight: 700;
color: var(--pc-text);
letter-spacing: 0.2px;
line-height: 1.3;
}
.pc-guest-tracker__text {
margin: 0 0 10px;
font-size: 13px;
color: var(--pc-text-muted);
line-height: 1.4;
}
.pc-guest-tracker__saved {
margin: 0 0 12px;
padding: 10px 12px;
background: var(--pc-bg-card);
border-radius: var(--pc-radius-sm);
}
.pc-guest-tracker__saved-label {
margin: 0 0 6px;
font-size: 11px;
color: var(--pc-text-dim);
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
}
.pc-guest-tracker__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.pc-guest-tracker__list a {
color: var(--pc-accent);
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.pc-guest-tracker__list a:hover {
color: var(--pc-accent-hover);
text-decoration: underline;
}
/* Thank-you page блок «Сохраните ссылку» */
.pc-guest-save {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-md);
padding: 20px 22px;
margin: 0 0 24px;
}
.pc-guest-save__icon {
flex: 0 0 auto;
color: var(--pc-accent);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pc-guest-save__body { flex: 1 1 auto; min-width: 0; }
.pc-guest-save__title {
margin: 0 0 8px;
font-size: 16px;
font-weight: 700;
color: var(--pc-text);
}
.pc-guest-save__text {
margin: 0 0 12px;
font-size: 14px;
color: var(--pc-text-muted);
line-height: 1.5;
}
.pc-guest-save__link-row {
display: flex;
gap: 8px;
align-items: stretch;
margin-bottom: 10px;
flex-wrap: wrap;
}
.pc-guest-save__link-row input[readonly] {
flex: 1 1 auto;
min-width: 0;
background: var(--pc-bg) !important;
color: var(--pc-text) !important;
border: 1px solid var(--pc-border) !important;
border-radius: var(--pc-radius-sm) !important;
padding: 9px 12px !important;
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace !important;
font-size: 12px !important;
}
.pc-guest-save__link-row input[readonly]:focus {
border-color: var(--pc-accent) !important;
outline: none !important;
}
.pc-guest-save .pc-btn[data-pc-copy] {
flex: 0 0 auto;
min-width: 130px;
}
.pc-guest-save .pc-btn[data-pc-copy].is-copied {
background: #3cb45a !important;
}
.pc-guest-save__hint {
margin: 0;
font-size: 12.5px;
color: var(--pc-text-dim);
line-height: 1.5;
}
/* /track-order/ — быстрые ссылки на сохранённые заказы */
.pc-saved-orders {
background: var(--pc-bg-card);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-sm);
padding: 14px 16px;
margin: 0 0 20px;
}
.pc-saved-orders__title {
margin: 0 0 8px;
font-size: 11.5px;
color: var(--pc-text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 700;
}
.pc-saved-orders__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.pc-saved-orders__list a {
color: var(--pc-accent);
text-decoration: none;
font-size: 13.5px;
font-weight: 600;
padding: 4px 0;
}
.pc-saved-orders__list a:hover {
color: var(--pc-accent-hover);
text-decoration: underline;
}
@media (max-width: 600px) {
.pc-guest-tracker {
flex-direction: column;
gap: 10px;
padding: 14px 16px;
}
.pc-guest-save {
flex-direction: column;
gap: 10px;
}
.pc-guest-save__link-row {
flex-direction: column;
}
.pc-guest-save .pc-btn[data-pc-copy] {
width: 100%;
}
}
/* === Карточки гостевых заказов на /my-account/ === */
.pc-guest-orders {
display: flex;
flex-direction: column;
gap: 8px;
}
.pc-guest-order {
display: block;
padding: 12px 14px;
background: var(--pc-bg);
border: 1px solid var(--pc-border);
border-radius: var(--pc-radius-sm);
text-decoration: none;
color: inherit;
transition: border-color .15s, transform .1s;
}
.pc-guest-order:hover {
border-color: var(--pc-accent);
transform: translateY(-1px);
}
.pc-guest-order__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.pc-guest-order__num {
font-weight: 700;
color: var(--pc-accent);
font-size: 14px;
}
.pc-guest-order__status {
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid currentColor;
color: #ffb43c;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.pc-guest-order__status--completed { color: #3cb45a; }
.pc-guest-order__status--cancelled,
.pc-guest-order__status--failed,
.pc-guest-order__status--refunded { color: #ff5050; }
.pc-guest-order__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12.5px;
color: var(--pc-text-muted);
}
.pc-guest-order__total {
font-weight: 700;
color: var(--pc-text);
}
.pc-guest-order__row {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--pc-border);
}
.pc-guest-order__warranty {
font-size: 11px;
color: var(--pc-text-dim);
display: inline-flex;
align-items: center;
gap: 4px;
}
.pc-guest-order__warranty--active {
color: #3cb45a;
font-weight: 600;
}
/* === Блок гарантии внутри view-order карточки === */
.pc-warranty-info {
display: flex;
gap: 14px;
align-items: flex-start;
margin: 18px 0 0;
padding: 16px 18px;
background: var(--pc-bg);
border: 1px solid var(--pc-border);
border-left: 3px solid var(--pc-accent);
border-radius: var(--pc-radius-sm);
}
.pc-warranty-info--active {
border-left-color: #3cb45a;
background: linear-gradient(135deg, rgba(60, 180, 90, 0.08), rgba(60, 180, 90, 0.02));
}
.pc-warranty-info--pending {
border-left-color: #ffb43c;
background: linear-gradient(135deg, rgba(255, 180, 60, 0.08), rgba(255, 180, 60, 0.02));
}
.pc-warranty-info__icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
}
.pc-warranty-info--active .pc-warranty-info__icon { color: #3cb45a; }
.pc-warranty-info--pending .pc-warranty-info__icon { color: #ffb43c; }
.pc-warranty-info__body { flex: 1 1 auto; min-width: 0; }
.pc-warranty-info__title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: var(--pc-text);
letter-spacing: 0.2px;
}
.pc-warranty-info__text {
margin: 0;
font-size: 14px;
color: var(--pc-text-muted);
line-height: 1.5;
}
.pc-warranty-info__text strong { color: var(--pc-text); font-weight: 700; }
/* === Фикс кнопки «Заказать снова» — была синяя дефолтная WC === */
.woocommerce-MyAccount .order-again .button,
.woocommerce-MyAccount-content .order-again a.button,
body .woocommerce .order-again a.button {
background: var(--pc-accent) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pc-radius-sm) !important;
padding: 10px 18px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
font-size: 13px !important;
transition: background .15s !important;
text-decoration: none !important;
}
.woocommerce-MyAccount .order-again .button:hover,
.woocommerce-MyAccount-content .order-again a.button:hover,
body .woocommerce .order-again a.button:hover {
background: var(--pc-accent-hover) !important;
}
/* v1.13.495: пробел между «Оплатить» и «Отмена» в строке Действия (WC order_data) */
.woocommerce-order-details .order_data .actions a,
.woocommerce-order-details .actions a.pay,
.woocommerce-order-details .actions a.cancel {
display: inline-block;
margin-left: 8px;
}
.woocommerce-order-details .actions a:first-child {
margin-left: 0;
}
/* ============================================================
* /account/ для НЕ залогиненного — формы Войти + Регистрация (v1.13.498)
* Узкая центрированная форма (460px). Обёртки прозрачные, без двойной карточки.
* ============================================================ */
/* Обёртки WC u-columns/col-1/col-2 — БЕЗ карточного стиля (это просто контейнеры) */
.woocommerce-account .u-columns,
.woocommerce-account .woocommerce > .col2-set,
.woocommerce-account #customer_login,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
display: block !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
width: 100% !important;
max-width: 460px !important;
margin: 0 auto !important;
float: none !important;
}
/* Дополнительно убираем H2 «Войти / Зарегистрироваться» внутри col-* — у нас уже есть табы */
.woocommerce-account .col-1 > h2,
.woocommerce-account .col-2 > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
display: none !important;
}
/* Внешняя обёртка .woocommerce на /account/ для НЕ залогиненного — без карточки */
body.woocommerce-account:not(.logged-in) .woocommerce {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Табы переключают видимость форм через body-класс (см. main.js initAccountTabs) */
body.pc-show-login .woocommerce-account .u-column2,
body.pc-show-login .woocommerce-account .col-2,
body.pc-show-login .woocommerce-form-register {
display: none !important;
}
body.pc-show-register .woocommerce-account .u-column1,
body.pc-show-register .woocommerce-account .col-1,
body.pc-show-register .woocommerce-form-login {
display: none !important;
}
/* Карточный стиль ТОЛЬКО на самих формах */
.woocommerce-form-login,
.woocommerce-form-register {
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 14px;
padding: 24px;
max-width: 460px;
margin: 12px auto 18px;
}
.woocommerce-account h2,
.woocommerce-form-login + h2,
.woocommerce-form-register + h2 {
font-size: 20px;
font-weight: 700;
margin: 0 0 16px;
color: var(--pc-text, #e8eaed);
}
.woocommerce-account .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
margin-bottom: 14px;
}
.woocommerce-account .form-row label,
.woocommerce-form-login label,
.woocommerce-form-register label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--pc-text-muted, #9aa0a6);
font-weight: 500;
}
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
width: 100%;
padding: 12px 14px;
background: var(--pc-bg-elevated, #161a20);
border: 1px solid var(--pc-border, #232830);
border-radius: 10px;
color: var(--pc-text, #e8eaed);
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.15s;
}
.woocommerce-account input:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
outline: none;
border-color: var(--pc-accent, #ff2a2a);
}
/* Кнопки «Войти», «Зарегистрироваться» — наш стиль primary, компактные */
.woocommerce-account button[type="submit"],
.woocommerce-account .button[name="login"],
.woocommerce-account .button[name="register"],
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
display: inline-block !important;
width: auto !important;
min-width: 110px !important;
padding: 9px 20px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
border-radius: var(--pc-radius-sm, 10px) !important;
border: 1px solid var(--pc-accent, #ff2a2a) !important;
background: var(--pc-accent, #ff2a2a) !important;
color: #ffffff !important;
cursor: pointer !important;
margin-top: 8px !important;
transition: filter 0.15s !important;
}
.woocommerce-account button[type="submit"]:hover,
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover {
filter: brightness(1.1);
}
/* «Запомнить меня» checkbox */
.woocommerce-form-login__rememberme {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13px;
margin-right: 14px;
cursor: pointer;
}
.woocommerce-form-login__rememberme input[type="checkbox"] {
accent-color: var(--pc-accent, #ff2a2a);
width: 16px;
height: 16px;
cursor: pointer;
}
/* «Забыли пароль?» / privacy ссылки */
.woocommerce-LostPassword,
.woocommerce-privacy-policy-text {
margin-top: 14px;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13px;
}
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-text a {
color: var(--pc-accent, #ff2a2a);
text-decoration: none;
}
.woocommerce-LostPassword a:hover {
text-decoration: underline;
}
/* «Войти Зарегистрироваться» — табы переключения формы (v1.13.498) */
.pc-account-tabs,
.pc-account-login-toggle,
.woocommerce-account .login-register-toggle,
.woocommerce-account .login-tabs,
.woocommerce-account .pc-login-tabs {
display: flex;
gap: 0;
max-width: 460px;
margin: 18px auto 0;
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 12px;
overflow: hidden;
}
.pc-account-tab {
flex: 1;
display: inline-block;
padding: 10px 14px;
background: transparent;
border: none;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.pc-account-tab.is-active {
background: var(--pc-accent, #ff2a2a);
color: #ffffff;
}
.pc-account-tab:not(.is-active):hover {
color: var(--pc-text, #e8eaed);
background: rgba(255, 255, 255, 0.04);
}
/* ============================================================
* /track-order/ — форма + результат (v1.13.507)
* Полная стилизация через файл (enqueue добавлен в functions.php).
* ============================================================ */
/* --- Форма поиска заказа --- */
.pc-track-card {
max-width: 460px;
margin: 18px auto 24px;
padding: 22px 24px;
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 14px;
color: var(--pc-text, #e8eaed);
box-sizing: border-box;
}
.pc-track-card *,
.pc-track-card *::before,
.pc-track-card *::after { box-sizing: border-box; }
.pc-track-card__intro {
margin: 0 0 18px;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13.5px;
line-height: 1.45;
text-align: center;
}
.pc-track-card form { margin: 0; padding: 0; }
.pc-track-card .pc-track-field {
display: block;
width: 100%;
margin: 0 0 14px;
}
.pc-track-card .pc-track-field__label {
display: block;
width: 100%;
margin: 0 0 6px;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.3;
}
.pc-track-card .pc-track-field__input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 11px 14px;
background: var(--pc-bg-elevated, #161a20);
border: 1px solid var(--pc-border, #232830);
border-radius: 10px;
color: var(--pc-text, #e8eaed);
font-size: 14px;
line-height: 1.4;
margin: 0;
font-family: inherit;
}
.pc-track-card .pc-track-field__input::placeholder { color: var(--pc-text-dim, #6c727b); }
.pc-track-card .pc-track-field__input:focus {
outline: none;
border-color: var(--pc-accent, #ff2a2a);
}
.pc-track-card .pc-track-form__submit {
margin: 14px 0 0;
text-align: center;
}
.pc-track-card .pc-track-form__submit .pc-btn {
display: inline-block;
min-width: 200px;
text-decoration: none;
}
/* --- Результат отслеживания --- */
.pc-track-result {
max-width: 920px;
margin: 0 auto 28px;
}
.pc-track-result__hero {
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 14px;
padding: 18px 24px 20px;
margin: 0 0 20px;
box-sizing: border-box;
}
.pc-track-result__hero > *:first-child {
margin-top: 0 !important;
}
.pc-track-result__title {
margin: 0 0 16px !important;
padding: 0 !important;
font-size: 22px;
font-weight: 800;
color: var(--pc-text, #e8eaed);
line-height: 1.2;
letter-spacing: 0.2px;
}
.pc-track-result__title-num { color: var(--pc-accent, #ff2a2a); }
/* Шапка-grid: 3 равные колонки с одинаковыми отступами */
.pc-track-result__meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 24px;
align-items: stretch;
}
.pc-track-result__meta-item {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 12px 14px;
background: var(--pc-bg-elevated, #161a20);
border: 1px solid var(--pc-border, #232830);
border-radius: 10px;
}
.pc-track-result__meta-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--pc-text-dim, #6c727b);
}
.pc-track-result__meta-value {
font-size: 15px;
font-weight: 600;
color: var(--pc-text, #e8eaed);
line-height: 1.2;
}
.pc-track-result__total {
color: var(--pc-accent, #ff2a2a);
font-weight: 700;
}
/* Статус-pill */
.pc-track-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--pc-bg-elevated, #161a20);
color: var(--pc-text, #e8eaed);
line-height: 1;
width: max-content;
max-width: 100%;
}
.pc-track-status::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #9aa0a6;
flex: 0 0 auto;
}
.pc-track-status--processing,
.pc-track-status--completed { background: rgba(34, 197, 94, 0.12); color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
.pc-track-status--processing::before,
.pc-track-status--completed::before { background: #4ade80; }
.pc-track-status--pending { background: rgba(250, 204, 21, 0.12); color: #facc15; border-color: rgba(250, 204, 21, 0.3); }
.pc-track-status--pending::before { background: #facc15; }
.pc-track-status--on-hold { background: rgba(96, 165, 250, 0.12); color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); }
.pc-track-status--on-hold::before { background: #60a5fa; }
.pc-track-status--cancelled,
.pc-track-status--failed,
.pc-track-status--refunded,
.pc-track-status--trash { background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.3); }
.pc-track-status--cancelled::before,
.pc-track-status--failed::before,
.pc-track-status--refunded::before,
.pc-track-status--trash::before { background: #f87171; }
/* Скрываем дублирующий h2 "Информация о заказе" — данные сразу под шапкой */
.pc-track-result h2.woocommerce-order-details__title,
.pc-track-result .woocommerce-order-details > h2 {
display: none !important;
}
/* Mobile: 1 колонка */
@media (max-width: 600px) {
.pc-track-result__meta { grid-template-columns: 1fr; }
.pc-track-result__title { font-size: 19px; }
}
/* === Legacy селекторы для form.track_order (если override не подхватился) === */
.pc-track-card {
max-width: 460px;
margin: 18px auto 24px;
padding: 22px 24px;
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 14px;
color: var(--pc-text, #e8eaed);
box-sizing: border-box;
}
.pc-track-card__intro {
margin: 0 0 16px;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13.5px;
line-height: 1.45;
text-align: center;
}
.pc-track-field {
display: block;
margin: 0 0 14px;
}
.pc-track-field__label {
display: block;
width: 100%;
margin: 0 0 6px;
color: var(--pc-text-muted, #9aa0a6);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
}
.pc-track-field__input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 11px 14px;
background: var(--pc-bg-elevated, #161a20);
border: 1px solid var(--pc-border, #232830);
border-radius: 10px;
color: var(--pc-text, #e8eaed);
font-size: 14px;
line-height: 1.4;
}
.pc-track-field__input::placeholder {
color: var(--pc-text-dim, #6c727b);
}
.pc-track-field__input:focus {
outline: none;
border-color: var(--pc-accent, #ff2a2a);
}
.pc-track-form__submit {
margin: 12px 0 0;
text-align: center;
}
.pc-track-form__submit .pc-btn {
display: inline-block;
min-width: 200px;
}
/* === Универсальный fallback: страница /track-order/ — независимо от шаблона ===
* Применяется к любому варианту разметки (старый WC track_order ИЛИ наш override)
* Селекторим через body.page класс /track-order/.
* =========================================================================== */
body.page .entry-content form.track_order,
body.page .entry-content form.pc-track-form {
max-width: 460px !important;
margin: 18px auto 24px !important;
padding: 22px 24px !important;
background: var(--pc-bg-card, #1b2027) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-radius: 14px !important;
box-sizing: border-box !important;
}
body.page form.track_order p,
body.page form.track_order .form-row,
body.page form.pc-track-form p,
body.page form.pc-track-form .form-row {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
body.page form.track_order label,
body.page form.pc-track-form label {
display: block !important;
width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
color: var(--pc-text-muted, #9aa0a6) !important;
font-size: 13px !important;
font-weight: 600 !important;
float: none !important;
}
body.page form.track_order input.input-text,
body.page form.track_order input[type="text"],
body.page form.track_order input[type="email"],
body.page form.pc-track-form input {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 11px 14px !important;
background: var(--pc-bg-elevated, #161a20) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-radius: 10px !important;
color: var(--pc-text, #e8eaed) !important;
font-size: 14px !important;
float: none !important;
margin: 0 !important;
}
body.page form.track_order input::placeholder,
body.page form.pc-track-form input::placeholder {
color: var(--pc-text-dim, #6c727b) !important;
}
body.page form.track_order input:focus,
body.page form.pc-track-form input:focus {
outline: none !important;
border-color: var(--pc-accent, #ff2a2a) !important;
}
body.page form.track_order .clear {
display: none !important;
}
body.page form.track_order button[type="submit"],
body.page form.track_order .button {
display: inline-block !important;
width: auto !important;
min-width: 200px !important;
padding: 12px 28px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
border-radius: 10px !important;
border: 1px solid var(--pc-accent, #ff2a2a) !important;
background: var(--pc-accent, #ff2a2a) !important;
color: #ffffff !important;
cursor: pointer !important;
margin: 8px 0 0 !important;
}
body.page form.track_order p:last-child {
text-align: center !important;
}
/* === Legacy селекторы для form.track_order (если override не подхватился) === */
form.pc-track-order-form {
max-width: 460px !important;
margin: 18px auto 24px !important;
padding: 22px 24px !important;
background: var(--pc-bg-card, #1b2027) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-radius: 14px !important;
color: var(--pc-text, #e8eaed) !important;
box-sizing: border-box !important;
}
form.pc-track-order-form > p,
form.pc-track-order-form > .form-row,
form.pc-track-order-form .form-row {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
form.pc-track-order-form .form-row label {
display: block !important;
width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
color: var(--pc-text-muted, #9aa0a6) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: none !important;
float: none !important;
}
form.pc-track-order-form .form-row input,
form.pc-track-order-form input.input-text,
form.pc-track-order-form input[type="text"],
form.pc-track-order-form input[type="email"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 11px 14px !important;
background: var(--pc-bg-elevated, #161a20) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-radius: 10px !important;
color: var(--pc-text, #e8eaed) !important;
font-size: 14px !important;
line-height: 1.4 !important;
margin: 0 !important;
float: none !important;
}
form.pc-track-order-form input::placeholder {
color: var(--pc-text-dim, #6c727b) !important;
}
form.pc-track-order-form input:focus {
outline: none !important;
border-color: var(--pc-accent, #ff2a2a) !important;
}
.pc-track-order-form__intro {
margin: 0 0 16px !important;
color: var(--pc-text-muted, #9aa0a6) !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
text-align: center !important;
}
.pc-track-order-form__submit {
margin: 8px 0 0 !important;
text-align: center !important;
}
.pc-track-order-form__submit .pc-btn {
display: inline-block !important;
min-width: 200px !important;
}
/* Результат отслеживания */
.pc-track-result {
max-width: 920px;
margin: 0 auto 24px;
}
.pc-track-result__header {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
align-items: center;
padding: 16px 20px;
margin: 0 0 18px;
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 12px;
}
.pc-track-result__row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pc-track-result__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--pc-text-dim, #6c727b);
font-weight: 600;
}
.pc-track-result__order {
font-size: 16px;
font-weight: 700;
color: var(--pc-accent, #ff2a2a);
}
.pc-track-result__value {
font-size: 14px;
color: var(--pc-text, #e8eaed);
font-weight: 500;
}
/* Original v1.13.500 form-row override остаётся ниже для legacy renderer */
.woocommerce form.track_order,
form.track_order {
max-width: 460px;
margin: 18px auto 24px !important;
padding: 22px 24px !important;
background: var(--pc-bg-card, #1b2027) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-radius: 14px !important;
color: var(--pc-text, #e8eaed) !important;
box-sizing: border-box;
overflow: hidden; /* clearfix для float-row */
}
form.track_order > p,
form.track_order > .form-row,
form.track_order > p.form-row,
form.track_order .form-row,
form.track_order p.form-row,
form.track_order .form-row-first,
form.track_order .form-row-last,
form.track_order .form-row-wide {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 14px !important;
padding: 0 !important;
float: none !important;
clear: both !important;
}
form.track_order .form-row label,
form.track_order p.form-row label {
display: block !important;
width: auto !important;
margin: 0 0 6px !important;
color: var(--pc-text-muted, #9aa0a6) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-transform: none !important;
}
form.track_order .form-row input.input-text,
form.track_order p.form-row input.input-text,
form.track_order input[type="text"],
form.track_order input[type="email"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 11px 14px !important;
background: var(--pc-bg-elevated, #161a20) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-radius: 10px !important;
color: var(--pc-text, #e8eaed) !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
form.track_order .form-row input.input-text::placeholder,
form.track_order input::placeholder {
color: var(--pc-text-dim, #6c727b) !important;
}
form.track_order .form-row input.input-text:focus,
form.track_order input:focus {
outline: none !important;
border-color: var(--pc-accent, #ff2a2a) !important;
}
form.track_order button[type="submit"],
form.track_order .button {
display: inline-block !important;
width: auto !important;
min-width: 180px !important;
padding: 12px 28px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
border-radius: 10px !important;
border: 1px solid var(--pc-accent, #ff2a2a) !important;
background: var(--pc-accent, #ff2a2a) !important;
color: #ffffff !important;
cursor: pointer !important;
margin-top: 8px !important;
transition: filter 0.15s !important;
}
form.track_order button[type="submit"]:hover,
form.track_order .button:hover {
filter: brightness(1.1);
}
/* Блок «Заказывали с другого устройства» — тоже узкий */
.pc-guest-find-order,
.woocommerce-account .pc-guest-find-order,
.woocommerce-account > .woocommerce-info,
.woocommerce-account > p:first-of-type {
max-width: 460px;
margin: 0 auto 18px;
}
/* === Гостевой view-order — содержимое центрируем, без sidebar === */
.woocommerce-MyAccount--guest .woocommerce-MyAccount-content {
max-width: 920px;
margin: 0 auto;
width: 100%;
}
/* ============================================================
* Контактные данные в view-order (v1.13.493)
* Чипсы вместо строчек с эмодзи: фон pc-panel, hover на accent.
* ============================================================ */
.pc-order-contacts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 24px;
}
.pc-order-contacts__item {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--pc-bg-elevated, #161a20);
border: 1px solid var(--pc-border, #232830);
border-radius: 10px;
color: var(--pc-text, #e8eaed);
text-decoration: none;
font-size: 14px;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pc-order-contacts__item:hover,
.pc-order-contacts__item:focus {
border-color: var(--pc-accent, #ff2a2a);
color: var(--pc-accent, #ff2a2a);
}
.pc-order-contacts__icon {
display: inline-flex;
color: var(--pc-accent, #ff2a2a);
}
.pc-order-contacts__value {
font-weight: 500;
letter-spacing: 0.2px;
}
@media (max-width: 600px) {
.pc-order-contacts {
flex-direction: column;
}
.pc-order-contacts__item {
width: 100%;
justify-content: flex-start;
}
}
/* ============================================================
* /account/payment-methods/ — список сохранённых карт (v1.13.488)
* ============================================================ */
.woocommerce-account .woocommerce-MyAccount-paymentMethods,
.woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods,
.woocommerce-MyAccount-content > p:has(+ table.account-payment-methods-table) {
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 14px;
padding: 22px;
color: var(--pc-text, #e8eaed);
}
.woocommerce-MyAccount-content .account-payment-methods-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 14px 0;
}
.woocommerce-MyAccount-content .account-payment-methods-table th,
.woocommerce-MyAccount-content .account-payment-methods-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--pc-border, #232830);
color: var(--pc-text, #e8eaed);
}
.woocommerce-MyAccount-content .account-payment-methods-table thead th {
color: var(--pc-text-muted, #9aa0a6);
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
}
/* «Сохранённых методов не обнаружено» — info-notice блок */
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content .woocommerce-info {
background: var(--pc-bg-elevated, #161a20) !important;
border: 1px solid var(--pc-border, #232830) !important;
border-left: 3px solid var(--pc-accent, #ff2a2a) !important;
color: var(--pc-text, #e8eaed) !important;
border-radius: 10px;
padding: 14px 18px !important;
margin: 14px 0 !important;
}
/* Ссылка/кнопка «Добавить способ оплаты» под уведомлением */
.woocommerce-MyAccount-content .woocommerce-Message a.button,
.woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-MyAccount-content > a.button {
display: inline-block;
background: var(--pc-accent, #ff2a2a);
color: #ffffff;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
margin-top: 10px;
transition: filter 0.15s;
}
.woocommerce-MyAccount-content > a.button:hover,
.woocommerce-MyAccount-content .woocommerce-Message a.button:hover {
filter: brightness(1.1);
color: #ffffff;
}
/* ============================================================
* /account/add-payment-method/ — стиль идентичный виджету YooKassa на /checkout/order-pay/
* (v1.13.490) Контейнер #1B2027, красный radio, ровные блоки.
* ============================================================ */
.woocommerce-add-payment-method form,
.woocommerce-add-payment-method .wc_payment_methods {
background: var(--pc-bg-card, #1b2027);
border: 1px solid var(--pc-border, #232830);
border-radius: 14px;
padding: 22px;
margin-bottom: 18px;
}
.woocommerce-add-payment-method ul.payment_methods,
.woocommerce-add-payment-method ul.wc_payment_methods {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: #1B2027 !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 12px;
overflow: hidden;
}
.woocommerce-add-payment-method ul.payment_methods > li,
.woocommerce-add-payment-method ul.wc_payment_methods > li {
background: transparent !important;
padding: 14px 18px !important;
margin: 0 !important;
list-style: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.woocommerce-add-payment-method ul.payment_methods > li:last-child,
.woocommerce-add-payment-method ul.wc_payment_methods > li:last-child {
border-bottom: none;
}
.woocommerce-add-payment-method ul.payment_methods label,
.woocommerce-add-payment-method ul.wc_payment_methods label {
color: var(--pc-text, #e8eaed) !important;
font-weight: 600;
cursor: pointer;
}
/* Radio button — красный наш акцент (вместо синего WP) */
.woocommerce-add-payment-method input[type="radio"] {
accent-color: var(--pc-accent, #ff2a2a) !important;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: middle;
cursor: pointer;
}
/* Payment-box (описание метода) — тёмный «утопленный» блок внутри */
.woocommerce-add-payment-method .payment_box,
.woocommerce-add-payment-method .payment_method_yookassa,
.woocommerce-add-payment-method .payment_method_yookassa_widget,
.woocommerce-add-payment-method [class*="payment_method_"] .payment_box {
background: rgba(0, 0, 0, 0.25) !important; /* тёмная вложенность поверх #1B2027 */
color: var(--pc-text-muted, #9aa0a6) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 8px;
padding: 12px 14px !important;
margin: 10px 0 0 !important;
font-size: 14px;
}
.woocommerce-add-payment-method .payment_box::before {
display: none !important;
}
.woocommerce-add-payment-method .payment_box p,
.woocommerce-add-payment-method .payment_box label {
color: var(--pc-text-muted, #9aa0a6) !important;
background: transparent !important;
margin: 0 !important;
}
/* Submit «Добавить способ оплаты» + кнопка «Добавить» на /payment-methods/
— стиль идентичный .pc-btn .pc-btn--primary (как кнопки в /account/orders/). */
.woocommerce-add-payment-method button[type="submit"],
.woocommerce-add-payment-method .button,
.woocommerce-MyAccount-content > a.button,
.woocommerce-MyAccount-content .woocommerce-Message a.button,
.woocommerce-MyAccount-content .woocommerce-info a.button {
display: inline-block !important;
padding: 14px 28px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
text-decoration: none !important;
border-radius: var(--pc-radius-sm, 10px) !important;
border: 1px solid var(--pc-accent, #ff2a2a) !important;
background: var(--pc-accent, #ff2a2a) !important;
color: #ffffff !important;
line-height: 1 !important;
cursor: pointer !important;
transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease, color 0.15s ease !important;
font-family: inherit !important;
}
.woocommerce-add-payment-method button[type="submit"]:hover,
.woocommerce-add-payment-method .button:hover,
.woocommerce-MyAccount-content > a.button:hover,
.woocommerce-MyAccount-content .woocommerce-Message a.button:hover,
.woocommerce-MyAccount-content .woocommerce-info a.button:hover {
background: var(--pc-accent-hover, #e02020) !important;
border-color: var(--pc-accent-hover, #e02020) !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}