:root {
     --bg: #fbfbfb;
     --card: #fff;
     --accent: #780d00;
     --muted: #978080;
     --text: #2d030b
}

.content-wrapper {
     max-width: 1140px;
     margin: 0 auto;
     padding: 48px 0px;
}

.page-title {
     text-align: center;
     font-family: 'Dihjauti', Arial, sans-serif;
     font-size: 48px;
     line-height: 110%;
     margin-bottom: 32px;
     font-weight: 700;
     color: #210201;
}

.profile-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 40px;                  /* было 20 → 40 (шире gap между колонками, как в Figma) */
     margin-bottom: 40px;
     align-items: start;          /* колонки не подтягиваются по высоте друг под друга */
}

.profile-card {
     padding: 0;                  /* было 28px 24px — в Figma карточки без внутренних padding'ов */
     display: flex;
     flex-direction: column;
     gap: 32px;                   /* ровно 32px между блоками внутри колонки (Имя/Телефон/Почта или Карта/Статус) */
}

.profile-card h4 {
     margin: 0 0 10px;
     color: #060606;
     font-weight: 400;
     font-size: 20px;
     font-weight: 700;
     line-height: 1.4;
     display: flex;
     align-items: center;
}

.edit-btn {
     background: transparent;
     border: none;
     margin-left: 12px;
     color: #b39999;
     font-family: 'Gill Sans Nova', Arial, sans-serif;
     font-size: 14px;
     font-weight: 400;
     cursor: pointer;
     padding: 0;
     text-decoration: none;
     transition: color 0.25s ease;
}

.edit-btn:hover {
     color: #780d00;
}

.field-group {
     /* margin-bottom: 28px — убрано, расстояние теперь задаётся
        через .profile-card { gap: 32px } */
     margin-bottom: 0;
}

.field-group:last-child {
     margin-bottom: 0;
}

.value {
     color: #1a0005;
     margin: 0;
     font-weight: 400;
     font-size: 18px;
     line-height: 1.5
}

.muted {
     color: #2d030b;
     margin: 0 0 18px;
     font-weight: 400
}

.discount {
     font-size: 48px;
     color: var(--accent);
     font-weight: 700;
     margin: 0
}

.change-pass-cont {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     margin-bottom: 45px;
}

.card-discount {
     display: flex;
     flex-direction: column;
     align-items: start;
     /* justify-content: center; */
     text-align: center
}

section h2 {
     text-align: center;
     font-size: 36px;
}

.btn-outline {
     background: transparent;
     border: 2px solid #2d030b;
     padding: 14px 47px;
     border-radius: 6px;
     cursor: pointer;
     font-family: 'Dihjauti', Arial, sans-serif;
     font-size: 14px;
     font-weight: 700;
     color: #2d030b;
     margin-top: 12px;
     transition: all 0.3s ease
}

.btn-outline:hover {
     background: #2d030b;
     color: #fff
}

.product-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
     margin-bottom: 30px
}

.product-grid.small {
     grid-template-columns: repeat(4, 1fr)
}

.prod {
     background: var(--card);
     border-radius: 8px;
     padding: 12px;
     border: 1px solid #f2f2f2;
     position: relative;
     text-align: center
}

.prod img {
     width: 100%;
     height: 160px;
     object-fit: contain;
     margin-bottom: 8px
}

.prod h5 {
     font-size: 14px;
     margin: 6px 0;
     color: var(--text)
}

.prod .meta {
     color: var(--muted);
     font-size: 13px;
     margin-bottom: 6px
}

.prod .price {
     color: var(--accent);
     font-weight: 700
}

.prod .sale {
     position: absolute;
     left: 10px;
     top: 10px;
     background: var(--accent);
     color: #fff;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 12px
}

.prod .fav {
     position: absolute;
     right: 8px;
     top: 8px;
     background: transparent;
     border: none;
     color: var(--accent);
     font-size: 16px
}

@media (max-width:1000px) {
     .product-grid {
          grid-template-columns: repeat(2, 1fr)
     }

     .profile-grid {
          grid-template-columns: 1fr;
          grid-auto-rows: auto
     }
}

@media (max-width: 768px) {
     .page-title {
          margin-bottom: 24px;
          font-size: 24px;
     }

     .profile-card {
          padding: 0px;
     }

     .content-wrapper{
          padding: 32px 0;
     }

     .account-section__title{
          font-size: 22px;
     }

     .profile-card h4{
          font-size: 18px;
     }

     .value{
          font-size: 16px;
     }

     .profile-form{
          gap: 24px;
     }

     .profile-grid{
          gap: 24px;
     }

     .account-section{
          padding: 32px 0 !important;
          margin-top: 0px !important;
     }
}

.account-section {
     padding: 48px 0;
     margin-top: 48px;
     /* border-top: 1px solid #eceaea; */
}

.account-section + .account-section {
     margin-top: 0;
}

.account-section__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     margin-bottom: 32px;
}

.account-section__title {
     font-family: 'Dihjauti', Arial, sans-serif;
     font-size: 36px;
     font-weight: 700;
     line-height: 120%;
     color: #210201;
     text-align: center;
     margin-bottom: 32px;
}

.account-section__header .account-section__title {
     margin-bottom: 0;
}

.account-section__link {
     font-family: 'Gill Sans Nova', Arial, sans-serif;
     font-size: 14px;
     color: #780d00;
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-color .2s ease;
}

.account-section__link:hover {
     border-bottom-color: #780d00;
}

.account-empty {
     padding: 32px 0;
     font-family: 'Gill Sans Nova', Arial, sans-serif;
     font-size: 16px;
     color: #978080;
     text-align: center;
}

.account-empty a {
     color: #780d00;
     text-decoration: none;
     border-bottom: 1px solid currentColor;
}

/* ===== Профиль: inline-редактирование ===== */
.profile-form {
     display: flex;
     flex-direction: column;
     gap: 32px;
}

/* По умолчанию форма редактирования скрыта.
   Открывается через JS — снимаем атрибут hidden и добавляем класс is-editing. */
.field-group .field-edit,
.field-group .field-edit[hidden] {
     display: none;
}

.field-group.is-editing .field-edit {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-top: 8px;
     padding: 16px;
     background-color: #fbfbfb;
     border: 1px solid #eceaea;
     border-radius: 8px;
}

/* Скрываем «Изменить» и текущее значение, когда активен режим редактирования */
.field-group.is-editing .edit-btn,
.field-group.is-editing [data-view] {
     display: none;
}

/* Универсально: hidden-атрибут должен скрывать любой элемент в форме профиля
   (на случай если какой-то более специфичный селектор перебьёт hidden) */
.profile-form [hidden] {
     display: none !important;
}

.field-edit__row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
}

.field-edit__input {
     height: 40px;
     padding: 0 14px;
     background-color: #fff;
     border: 1px solid #eceaea;
     border-radius: 4px;
     font-family: 'Gill Sans Nova', Arial, sans-serif;
     font-size: 16px;
     line-height: 100%;
     color: #210201;
     outline: none;
     transition: border-color .2s ease;
}

.field-edit__input:focus {
     border-color: #2d030b;
}

.field-edit__input::placeholder {
     color: #978080;
}

.field-edit__actions {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
}

@media (max-width: 639px) {
     .field-edit__row {
          grid-template-columns: 1fr;
     }
}

/* Старые селекторы для обратной совместимости */
.favorites,
.orders {
     padding: 48px 0;
}

.favorites h2,
.orders h2 {
     margin-bottom: 32px;
     font-size: 32px;
}

.orders {
     border-top: 1px solid #eceaea;
     margin-top: 48px;
}

/* Swiper Styles */
.favorites-swiper,
.orders-swiper {
     padding: 10px 60px;
     position: relative;
}

.swiper-slide {
     display: flex;
     justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background-color: #fbfbfb;
     border: 1px solid #eceaea;
     transition: all 0.3s ease;
     color: #2d030b;
}

.swiper-button-next:after,
.swiper-button-prev:after {
     font-size: 20px;
     font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
     background-color: #2d030b;
     color: #fbfbfb;
     border-color: #2d030b;
}

.swiper-button-prev {
     left: 0;
}

.swiper-button-next {
     right: 0;
}

.swiper-button-disabled {
     opacity: 0.5;
     cursor: not-allowed;
}

.products-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     margin: 0 auto;
}

.product-card {
     background-color: #fbfbfb;
     border-radius: 4px;
     overflow: hidden;
     width: 100%;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0px 2px 6px 0px #00000040;
}

.product-image-container {
     position: relative;
     background-color: #fbfbfb;
     padding: 12px;
     border-radius: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 280px;
}

.discount-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background-color: #780d00;
     color: #fbfbfb;
     padding: 2px 8px;
     border-radius: 5px;
     font-size: 16px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 19px;
}

.favorite-icon {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 28px;
     height: 28px;
     cursor: pointer;
     transition: transform 0.2s ease;
}

.favorite-icon:hover {
     transform: scale(1.1);
}

.product-image {
     width: 78px;
     height: 244px;
     object-fit: contain;
}

.product-info {
     padding: 16px;
}

.product-title {
     font-size: 18px;
     font-weight: 700;
     line-height: 21px;
     color: #2d030b;
     text-align: center;
     margin-bottom: 12px;
}

.product-pricing {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
}

.price-section {
     display: flex;
     align-items: center;
     gap: 4px;
}

.current-price {
     font-size: 24px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 29px;
     color: #780d00;
}

.old-price-container {
     position: relative;
     display: flex;
     align-items: center;
     gap: 4px;
}

.old-price {
     font-size: 18px;
     font-family: "Behrens Antiqua", serif;
     font-weight: 400;
     line-height: 22px;
     color: #978080;
}

.price-strikethrough {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background-color: #978080;
}

.ruble-icon {
     width: 12px;
     height: 24px;
}

.ruble-icon-small {
     width: 10px;
     height: 18px;
}

.add-to-cart-btn {
     background-color: #780d00;
     border-radius: 18px;
     padding: 6px;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease, transform 0.2s ease;
}

.add-to-cart-btn:hover {
     background-color: #5a0a00;
     transform: scale(1.05);
}

.add-to-cart-btn img {
     width: 20px;
     height: 20px;
}

@media (max-width: 639px) {

     .favorites-swiper,
     .orders-swiper {
          padding: 16px calc((100% - 280px) / 2) 16px;
     }


     .favorites-swiper .swiper-slide,
     .orders-swiper .swiper-slide {
          width: 280px !important;
     }

     .swiper-button-next,
     .swiper-button-prev {
          display: none;
     }

     .product-card:hover {
          transform: none;
          box-shadow: none;
     }

     .product-card {
          box-shadow: 0px 2px 6px 0px #00000040;
     }
}

/* Modal Authorization */
.auth-modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 9999;
     align-items: center;
     justify-content: center;
}

.auth-modal.show {
     display: flex;
}

.auth-modal-content {
     background: #fbfbfb;
     border-radius: 8px;
     padding: 40px 32px;
     max-width: 444px;
     width: 90%;
     position: relative;
     font-family: "Dihjauti", serif;
}

.auth-modal-title {
     font-size: 32px;
     font-weight: 700;
     color: var(--text);
     margin: 0 0 16px;            /* было 32 → 16, между title и subtitle компактнее */
     text-align: center;
     font-family: "Dihjauti", serif;
}

/* Подзаголовок под "Личный кабинет" — описывает действие (как в Figma) */
.auth-modal-subtitle {
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 140%;
     color: #2D030B;
     text-align: center;
     margin: 0 0 12px;
     padding: 0 8px;
}

/* Замена видимого чекбокса — мелкая ссылка-нота под кнопкой */
.auth-modal-note {
     font-family: "Gill Sans Nova", sans-serif;
     font-size: 12px;
     line-height: 140%;
     color: #978080;
     text-align: center;
     margin: 12px 0 0;
}

.auth-modal-note a {
     color: #978080;
     text-decoration: underline;
     transition: color .15s ease;
}

.auth-modal-note a:hover {
     color: #780d00;
}

.auth-tabs {
     display: flex;
     justify-content: center;
     gap: 48px;
     margin-bottom: 32px;
     font-family: "Dihjauti", serif;
     border-bottom: 2px solid #f3f3f3;
}

.auth-tab {
     background: transparent;
     border: none;
     padding: 0 0 12px 0;
     font-size: 16px;
     font-weight: 400;
     color: #978080;
     cursor: pointer;
     position: relative;
     transition: color 0.3s;
}

.model_form_container {
     /* background: #F3F3F3;
     opacity: 1;
     border-radius: 8px;
     padding: 24px;
     box-shadow: 0px 2px 6px 0px #00000040; */
}

.auth-tab.active {
     color: var(--text);
     font-weight: 700;
}

.auth-tab.active::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--text);
}

.auth-form-container {
     display: none;
}

.auth-form-container.active {
     display: block;
}

.auth-form-group {
     margin-bottom: 24px;
}

.auth-form-label {
     display: block;
     font-size: 16px;
     font-weight: 700;
     color: #2D030B;
     margin-bottom: 12px;
}

.auth-form-input {
     width: 100%;
     padding: 12px 16px;
     background-color: #F3F3F3;
     border: 1px solid #F3F3F3;
     border-radius: 5px;
     font-size: 16px;
     font-weight: 700;
     color: #978181;
     box-sizing: border-box;
     transition: border-color 0.3s, background-color 0.3s;
}

.auth-form-input:focus {
     outline: none;
     border-color: #2D030B;
     background-color: #fff;
     color: var(--text);
}

.auth-form-input::placeholder {
     color: #978080;
     opacity: 1;
}

.auth-form-error,
.auth-form-note {
     border-radius: 6px;
     padding: 12px 14px;
     font-size: 13px;
     line-height: 1.4;
     margin-bottom: 16px;
     font-family: "Gill Sans Nova", sans-serif;
}

.auth-form-error {
     background: #fff3f3;
     border: 1px solid #f0c2c2;
     color: #8f1a1a;
}

.auth-form-note {
     background: #f2f6ff;
     border: 1px solid #c6d4ff;
     color: #1a2a4a;
}

.auth-checkbox-group {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 12px;
}

.auth-checkbox {
     margin-top: 4px;
     cursor: pointer;
     width: 16px;
     height: 16px;
     accent-color: #780d00;
}

.auth-checkbox-label {
     font-size: 12px;
     font-weight: 400;
     color: #978080;
     line-height: 1.4;
     cursor: pointer;
     font-family: "Gill Sans Nova", sans-serif;
}

.auth-submit-btn {
     width: 100%;
     background: var(--text);
     color: #fff;
     border: none;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 700;
     height: 40px;
     text-transform: uppercase;
     cursor: pointer;
     transition: background-color 0.3s;
     font-family: "Dihjauti", serif;
     letter-spacing: 0.5px;
}

.auth-submit-btn:hover {
     background: #1a0206;
}

.auth-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: transparent;
     border: none;
     font-size: 36px;
     color: #210201;
     cursor: pointer;
     padding: 0;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.3s;
     line-height: 1;
}

.auth-close:hover {
     color: var(--text);
}

/* Phone auth steps */
.auth-step {
     display: none;
}

.auth-step.active {
     display: block;
}

.auth-step2-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.auth-back-btn {
     display: none !important;
     background: transparent;
     border: none;
     font-size: 24px;
     color: #2d030b;
     cursor: pointer;
     padding: 0;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.3s;
}

.auth-back-btn:hover {
     color: #978080;
}

.auth-code-info {
     text-align: center;
     font-size: 16px;
     color: #2d030b;
     line-height: 1.5;
     margin-bottom: 12px;
}

.auth-code-inputs {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-bottom: 24px;
}

.auth-code-digit {
     width: 40px;
     height: 40px;
     text-align: center;
     font-size: 14px;
     font-weight: 700;
     color: #2d030b;
     background: #F3F3F3;
     border: 2px solid #F3F3F3;
     border-radius: 6px;
     outline: none;
     transition: border-color 0.3s;
     font-family: "Dihjauti", serif;
}

.auth-code-digit:focus {
     border-color: #2d030b;
     background: #fff;
}

.auth-resend-info {
     color: #282828;
     margin-top: 16px;
     font-family: 'Gill Sans Nova', Arial, sans-serif;
     font-weight: 400;
     font-size: 14px;
     line-height: 120%;
     letter-spacing: 0%;
     text-align: center;
}

.auth-resend-btn {
     background: transparent;
     border: none;
     color: #780d00;
     font-size: 14px;
     cursor: pointer;
     text-decoration: underline;
     font-family: "Dihjauti", serif;
     padding: 0;
}

.auth-resend-btn:hover {
     color: #2d030b;
}

@media (max-width: 639px) {
     .auth-modal-content {
          padding: 24px;
          max-width: 90%;
     }

     .auth-modal-title {
          font-size: 28px;
          margin-bottom: 16px;
     }

     .auth-form-group {
          margin-bottom: 16px;
     }

     .auth-submit-btn {
          margin-top: 16px;
     }

     .auth-form-label {
          margin-bottom: 8px
     }

     .auth-code-digit {
          width: 40px;
          height: 40px;
          font-size: 14px;
     }

     .auth-code-inputs {
          gap: 8px;
     }
}

/* ============================================================
   Кнопка «Выйти из аккаунта»
   Делает logout через стандартный механизм Bitrix.
   Стилизована под .btn-outline (тонкая рамка, винный #2d030b),
   но с увеличенным внешним отступом — чтобы визуально отделять
   её от карточек профиля сверху и от секции «Избранное» снизу.
   ============================================================ */
.account-logout-wrapper {
     display: flex;
     justify-content: center;
     margin: 40px 0 56px;
}

.account-logout-btn {
     display: inline-block;
     background: transparent;
     border: 1px solid #210201;
     padding: 6px;
     /* height: 36px; */
     /* align-items: center; */
     border-radius: 4px;
     cursor: pointer;
     font-family: 'Dihjauti', Arial, sans-serif;
     font-size: 14px;
     font-weight: 700;
     color: #060606;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
}

.account-logout-btn:hover {
     background: #2d030b;
     color: #fff;
}

@media (max-width: 639px) {
     .account-logout-wrapper {
          margin: 24px 0 32px;
     }
}