/* ══════════════════════════════════════════════════════════════════════
   Account section — design tokens.
   Brand-керовані токени (--otc-btn-*, --otc-card-*) приходять з admin
   `onetap_setting_template`. Тут лише FALLBACK для випадку коли admin
   не задав значення. Account-specific tokens (--otac-*) — статичні
   з Figma і не керовані з admin.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand fallbacks (override-яться з admin через :root у header.twig) */
  --otc-btn-primary: #392923;
  --otc-btn-primary-text: #FFFFFF;
  --otc-btn-primary-hover: #4D382E;
  --otc-btn-radius: 10px;
  /* УВАГА: --otc-card-radius / --otc-card-border НЕ визначаємо тут.
     Це admin/product-токени (їх задає :root у common/header.twig з налаштувань
     «Дизайн → Картка товару»). Якщо продублювати їх тут, personal-acc.css
     вантажиться ПІСЛЯ інлайн-стилю header → перебиває admin-значення, і product-картки
     на сторінках акаунта (Обране/Переглянуті) отримують чужий border/radius.
     Акаунт-компоненти (.acc-order-row, .acc-od-panel, .otc-loyalty-card…) мають власний
     статичний border/radius нижче (1px solid var(--otac-border) / 8px), без цих змінних. */

  /* Account static tokens (Figma constants) */
  --otac-text: #131314;
  --otac-text-muted: #606162;
  --otac-text-light: #7D7D7D;
  --otac-border: #DDDDDD;
  --otac-input-bg: #F7F7F7;
  --otac-status-orange: #C75E02;
  --otac-status-green: #577B28;
  --otac-status-muted: #7D7D7D;
  --otac-panel-bg: #FFFFFF;
  --otac-panel-padding: 12px;
  --otac-panel-gap: 24px;

  /* Typography scale */
  --otac-ff: 'Inter', sans-serif;
  --otac-fs-h1: 24px;
  --otac-fs-h2: 20px;
  --otac-fs-panel: 16px;
  --otac-fs-body-lg: 16px;
  --otac-fs-body: 14px;
  --otac-fs-caption: 12px;
  --otac-fs-btn-lg: 16px;
  --otac-fs-btn-md: 14px;
  --otac-lh-tight: 1.21;
  --otac-lh-body: 1.375;
  --otac-lh-normal: 1.43;
  --otac-fw-regular: 400;
  --otac-fw-medium: 500;
  --otac-fw-semibold: 600;
  --otac-fw-bold: 700;
}

.personal-acc {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 50px;
}
.personal-acc__wrapper-left {
  min-width: 295px;
}
.personal-acc__user {
  margin-bottom: 40px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  /* border: var(--border); */
  border-radius: 20px;
  padding: 10px;
}
.personal-acc__user__icon > path {
  stroke: rgba(41, 45, 50, 1);
}
.personal-acc__user__name {
  font-weight: 600;
  color: rgba(41, 45, 50, 1);
}
.personal-acc__user__maile {
  color: rgba(130, 130, 130, 1);
}
.personal-acc__wrapper-right {
  width: 100%;
}
.personal-acc__title {
  margin-bottom: 40px;
  height: 60px;
}
.personal-acc__body {
  display: flex;
  gap: 50px;
}
.left-options {
  min-width: 295px;
}
.left-options > a {
  box-sizing: border-box;
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: var(--border);
  padding: 5px 5px 5px 40px;
  cursor: pointer;
  color: rgba(0, 0, 0, 1);
}
.left-options > a:hover {
  background-color: rgba(239, 239, 239, 1);
  transition: var(--transition);
  color: rgba(0, 0, 0, 1);
}
.left-options > a:first-child {
  border-radius: 20px 20px 0 0;
}
.left-options > a:last-child {
  border-radius: 0 0 20px 20px;
}
.personal-acc__categories {
  box-sizing: border-box;
  width: 100%;
}
.personal-acc__categorie {
  width: 100%;
  min-height: 74px;
  padding: 24px 20px;
  border-radius: 20px;
  border: var(--border);
  transition: var(--transition);
  margin-bottom: 15px;
}
.personal-acc__categorie__subheader {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
}
.personal-acc__categorie__subheader__text {
  display: flex;
  align-items: center;
  gap: 20px;
}
.personal-acc__categorie__subheader__text > svg > path {
  stroke: rgba(41, 45, 50, 1);
}
.personal-acc__categorie__collapse {
  display: none;
  margin-top: 30px;
}
.personal-acc__categorie__collapse__input {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.personal-acc__categorie__collapse__input > input,
.personal-acc__categorie__collapse__input > select {
  height: 50px;
  padding: 5px 20px;
  border: var(--border);
  border-radius: 20px;
  position: relative;
}
.personal-acc__categorie__collapse__input > select {
  cursor: pointer;
}
.personal-acc__categorie__collapse__input input[type='date']::-webkit-calendar-picker-indicator {
  background-image: url('../image/calendar-icon.svg');
  width: 30px;
  height: 30px;
}
.personal-acc__categorie__collapse__input input[type='date']::before {
  content: '';
  position: absolute;
  top: 0;
  right: 70px;
  width: 1px;
  height: 50px;
  background-color: rgba(232, 232, 232, 1);
}
.personal-acc__categorie__collapse__input > label {
  white-space: nowrap;
  margin-bottom: 20px;
}
.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../image/arrow-icon.svg');
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 30px;
}
.custom-select select::-ms-expand {
  display: none;
}
.personal-acc__categorie__collapse__btns {
  display: flex;
  gap: 20px;
  width: 100%;
  padding-top: 30px;
  margin-top: 30px;
}
.personal-acc__categorie__collapse__add-number {
  display: flex;
  gap: 20px;
  cursor: pointer;
  float: none !important;
}
.personal-acc__categorie__collapse__add-number > div {
  color: rgba(255, 130, 140, 1);
}
.personal-acc__categorie__collapse__change {
  /* margin-top: 30px; */
  margin: 20px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  color: rgba(255, 130, 140, 1);
  cursor: pointer;
}
.personal-acc__categorie__collapse__radio-group,
.personal-acc__categorie__collapse__radio {
  display: flex;
  gap: 20px;
}
/* вибраний юзер */
.active-user,
.active-user > path {
  stroke: var(--color-main);
  color: var(--color-main);
}
/* вибрана категорія */
.active-options,
.left-options > .active-options:hover {
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
}
.active-options > .text-h3 {
  color: #fff;
}
.active-options > svg > path {
  stroke: #fff;
}
@media (max-width: 1199px) {
  .personal-acc {
    gap: 20px;
  }
  .personal-acc__categorie__collapse__input.col-md-4 {
    flex-basis: calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
  .personal-acc__categorie-addresses .personal-acc__categorie__collapse__input.col-md-2 {
    flex-basis: calc(30% - 15px);
    max-width: calc(30% - 15px);
  }
}
@media (max-width: 992px) {
  .personal-acc {
    flex-direction: column;
  }
  .personal-acc__categorie {
    min-height: 54px;
    padding: 15px 40px;
  }
  .personal-acc__title {
    height: auto;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .personal-acc__categorie__collapse__input.col-md-4 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .personal-acc__categorie-addresses .personal-acc__categorie__collapse__input.col-md-2 {
    flex-basis: calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
  .personal-acc__categorie__subheader__text > div {
    font-size: 15px;
    line-height: 26px;
  }
  .personal-acc__categorie__collapse__input {
    margin-bottom: 20px;
  }
  .personal-acc__categorie__collapse__input > input,
  .personal-acc__categorie__collapse__input > select {
    height: 40px;
    padding: 5px 15px;
    border-radius: 10px;
  }
  .personal-acc__categorie__collapse__radio {
    flex-direction: column;
    gap: 10px;
  }
}

/* wishes style */

.personal-acc__wishes {
  padding-bottom: 40px; /* breathing room between last card and footer */
}
/* Wishlist grid — uses the global --otc-card-w (from module_onetap_setting_template_card_width)
   and --otc-grid-gap, so wishlist cards look identical to featured_plus / category / search. */
.personal-acc__wishes__products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--otc-card-w, 275px), 1fr));
  gap: var(--otc-grid-gap, 16px);
  width: 100%;
  justify-content: start;
}
.personal-acc__wishes__products .product-card-wrapper {
  max-width: var(--otc-card-w, 275px);
  width: 100%;
}
@media (max-width: 768px) {
  .personal-acc__wishes__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .personal-acc__wishes__products .product-card-wrapper {
    max-width: none;
  }
}
@media (max-width: 400px) {
  .personal-acc__wishes {
    padding-bottom: 80px; /* room for fixed mobile bottom nav */
  }
  .personal-acc__wishes__products {
    gap: 10px;
  }
}
.personal-acc__wishes__no-products {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  font-weight: 600;
}
/* .personal-acc__wishes__products {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
} */
.add-product {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
}
.personal-acc__wishes__product-card__descr {
  color: #000;
}
.personal-acc__wishes__product-card__descr:hover {
  color: #000;
}
@media (max-width: 584px) {
  .personal-acc__wishes__product-card {
    padding: 20px 10px;
    width: 100%;
    height: 345px;
  }
  .personal-acc__wishes__product-card > img {
    height: 138px;
    margin-bottom: 16px;
  }
  .personal-acc__wishes__product-card__price {
    margin-bottom: 9px;
  }
  .personal-acc__wishes__product-card__descr {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 9px;
    color: #000;
  }
  .personal-acc__wishes__product-card__packing {
    color: rgba(117, 117, 117, 1);
    margin-bottom: 15px;
  }
}
/* historu style */
.personal-acc__filter {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 30px;
}
.personal-acc__filter__input-block {
  position: relative;
}
.personal-acc__filter__input-block > input {
  padding: 12px 210px 12px 50px;
  width: 545px;
  height: 45px;
  border: var(--border);
}
.personal-acc__filter__input-block > svg {
  position: absolute;
  top: 14px;
  left: 20px;
}
.personal-acc__filter__input-block_btns {
  position: absolute;
  right: 0px;
  top: 0;
}
.personal-acc__filter__input-block_web-btn {
  width: 200px;
  height: 45px;
  padding: 10px 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.personal-acc__filter__input-block_phone-filter {
  display: none;
}
.personal-acc__filter__input > placeholder {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.btn-transparent.dropdown-toggle {
  display: flex;
  width: 203px;
  height: 46px;
  padding: 10px 26px;
  position: relative;
}
.btn-transparent.dropdown-toggle::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 10px;
  height: 10px;
  background-image: url('/catalog/view/theme/onetap/image/arrow-icon.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
.personal-acc__card-box {
  width: 100%;
  min-height: 93px;
  border: var(--border);
  margin-bottom: 20px;
}
.personal-acc__items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr 20px;
  gap: 10px;
  padding: 17px 40px;
  width: 100%;
  min-height: 59px;
  cursor: pointer;
}
.personal-acc__card-box__title_nub {
  grid-column: 1/2;
  grid-row: 1/2;
}
.personal-acc__card-box__title_date {
  grid-column: 2/3;
  grid-row: 1/2;
}
.personal-acc__card-box__title_status {
  grid-column: 3/4;
  grid-row: 1/2;
}
.personal-acc__card-box__title_price {
  grid-column: 4/5;
  grid-row: 1/2;
}
.personal-acc__card-box__title_price > span {
  display: none;
}
.personal-acc__card-box__title_products {
  grid-column: 5/6;
  grid-row: 1/2;
}
.personal-acc__card-box__title_arrow {
  grid-column: 6/7;
  grid-row: 1/2;
}
.personal-acc__card-box__title > div {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
}
.personal-acc__card-box__title_status {
  color: rgba(13, 194, 67, 1);
}
.personal-acc__card-box__title_date {
  color: rgba(122, 122, 122, 1);
}
.personal-acc__card-box__title_products {
  display: flex;
  gap: 20px;
}
.personal-acc__card-box__title_products > img {
  height: 59px;
  object-fit: contain;
}
.personal-acc__card-box__collapse {
  display: none;
}
.personal-acc__card-box__collapse > div:first-child {
  padding: 17px 40px;
}
.personal-acc__card-box__collapse__bonus {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.personal-acc__card-box__collapse__product-wrapper {
  padding: 15px 40px;
  width: 100%;
  min-height: 90px;
  border: var(--border);
  margin-bottom: 20px;
}
.personal-acc__history__product-grid {
  display: grid;
  grid-template-columns: 1fr 5fr 2fr 1fr 1fr;
  justify-self: center;
  gap: 20px;
}
@media (max-width: 1400px) {
  .personal-acc__card-box__collapse__product-wrapper {
    padding: 15px 20px;
  }
  .personal-acc__history__product-grid {
    gap: 8px;
  }
}
.personal-acc__history__product-grid_img {
  height: 59px;
  object-fit: contain;
  grid-column: 1/2;
  grid-row: 1/2;
}
.personal-acc__history__product-grid_name {
  grid-column: 2/3;
  grid-row: 1/2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personal-acc__history__product-grid_feedback {
  display: flex;
  gap: 10px;
  grid-column: 3/4;
  grid-row: 1/2;
  cursor: pointer;
}
.personal-acc__history__product-grid_feedback > div {
  color: rgba(13, 194, 67, 1);
}
.personal-acc__history__product-grid_count {
  grid-column: 4/5;
  grid-row: 1/2;
}
.personal-acc__history__product-grid_count > span {
  display: none;
}
.personal-acc__history__product-grid_price {
  grid-column: 5/6;
  grid-row: 1/2;
}
.personal-acc__history__product-grid_price > span {
  display: none;
}
.personal-acc__card-box__collapse__product-wrapper > img,
.personal-acc__card-box__collapse__product-wrapper > div {
  display: flex;
  align-items: center;
}
.card-box__descr > h2 {
  font-weight: 700;
}
.card-box__descr_option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-box__descr_option > h3:first-child {
  font-weight: 600;
}
.card-box__descr_option > h3 {
  margin-top: 0;
  word-break: break-all;
}
.personal-acc__card-box__collapse__total {
  width: 100%;
  height: 100%;
  padding: 17px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 20px;
  background-color: rgba(242, 242, 242, 1);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.personal-acc__card-box__collapse__total > button {
  padding: 15px 20px;
}
.personal-acc__card-box__collapse__total div:nth-child(2) {
  font-weight: 700;
}
@media (max-width: 1118px) {
  .personal-acc__filter__input-block {
    width: 100%;
  }
  .personal-acc__card-box__collapse__product-wrapper > img {
    height: 78px;
  }
  .personal-acc__filter__input-block_web-btn,
  .personal-acc__filter__input-block_web-filter {
    display: none;
  }
  .personal-acc__filter__input-block_phone-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: transparent;
    border: none;
    border-left: var(--border);
  }
  .personal-acc__filter__input-block > input {
    padding: 12px 50px;
    width: 100%;
    height: 45px;
  }
}
@media (max-width: 768px) {
  .personal-acc__card-box__title {
    padding: 24px 20px;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr) auto;
    gap: 15px;
  }
  .personal-acc__card-box__title_nub {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .personal-acc__card-box__title_date {
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: end;
  }
  .personal-acc__card-box__title_status {
    grid-column: 1/3;
    grid-row: 1/2;
  }
  .personal-acc__card-box__title_price {
    grid-column: 1/3;
    grid-row: 3/4;
    display: flex;
    justify-content: space-between;
  }
  .personal-acc__card-box__title_price > span {
    display: flex;
    justify-content: end;
  }
  .personal-acc__card-box__title_products {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  .personal-acc__card-box__title .personal-acc__card-box__title_arrow {
    display: none;
  }
  .personal-acc__card-box__collapse__product-wrapper {
    padding: 15px 20px;
  }
  .personal-acc__card-box__collapse > div:first-child {
    padding: 17px 20px;
  }
  .card-box__descr_option {
    flex-direction: column;
    align-items: start;
  }
  .personal-acc__history__product-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 80px auto;
    grid-area: auto;
    gap: 10px;
  }
  .personal-acc__history__product-grid_img {
    object-fit: contain;
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .personal-acc__history__product-grid_name {
    grid-column: 2 / end;
    grid-row: 1/2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .personal-acc__history__product-grid_feedback {
    grid-column: 1 / end;
    grid-row: 4/5;
  }
  .personal-acc__history__product-grid_count {
    grid-column: 1 / end;
    grid-row: 2/3;
    display: flex;
    justify-content: space-between;
  }
  .personal-acc__history__product-grid_price {
    grid-column: 1 / end;
    grid-row: 3/4;
    display: flex;
    justify-content: space-between;
  }
  .personal-acc__history__product-grid_count > span {
    display: flex;
  }
  .personal-acc__history__product-grid_price > span {
    display: flex;
  }
  .personal-acc__card-box__collapse__total {
    padding: 17px 20px;
  }
}
.total-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 650px) {
  .card-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }
  .total-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
  }
  .button-wrapper {
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 460px) {
  .total-wrapper a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* section bonus style */
.personal-acc__bonus__header {
  width: 100%;
  min-height: 159px;
  padding: 40px;
  background-color: var(--color-main);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.personal-acc__bonus__header h1,
.personal-acc__bonus__header > h3 {
  color: #fff;
  margin: 0;
}
.personal-acc__bonus__header > div {
  height: 31px;
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 20px;
}
.personal-acc__bonus__header > h3 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.personal-acc__bonus__header a {
  color: #fff !important;
}
.personal-acc__bonus__statuses {
  width: 100%;
  min-height: 185px;
  padding: 40px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  border: var(--border);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.personal-acc__bonus__status {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.personal-acc__bonus__status_text {
  margin-bottom: 40px;
  text-align: center;
}
.personal-acc__bonus__status_count {
  font-family: 'Inter';
  font-size: 50px;
  font-weight: 400;
  line-height: 13px;
}
@media (max-width: 768px) {
  .personal-acc__bonus__header {
    padding: 24px 35px;
  }
  .personal-acc__bonus__statuses {
    flex-direction: column;
    padding: 24px 35px;
  }
  .personal-acc__bonus__status {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .personal-acc__bonus__status_text {
    margin-bottom: 0;
  }
  .personal-acc__bonus__status_count {
    font-family: 'Inter';
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
  }
}

/* comparison section style */
.personal-acc__comparison_header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.personal-acc__filter__input-block_web-filter {
  margin-right: 25px;
}
.personal-acc__comparison_header > .personal-acc__filter__input-block_web-filter > button {
  display: flex;
  align-items: center;
  height: 56px;
}
.personal-acc__comparison_header > .personal-acc__filter__input-block_web-filter > button::after {
  width: 16px;
  top: 22px;
}
.personal-acc__comparison_header_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.personal-acc__comparison_header_btns a {
  color: #fff !important;
}
.personal-acc__comparison__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 50%));
  /* justify-content: center; */
  gap: 20px;
}
.personal-acc__comparison__product {
  width: 100%;
}
.personal-acc__comparison__descr_characteristics {
  margin-top: 20px;
  padding: 35px 40px;
  border: var(--border);
}
.personal-acc__comparison__descr_characteristics > .card-box__descr,
.personal-acc__comparison__descr_characteristics .card-box__descr_option {
  flex-direction: column;
  align-items: start;
}
.personal-acc__comparison__descr-mob {
  border: var(--border);
}

.circle-grup-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
@media (max-width: 1118px) {
  .personal-acc__comparison_header {
    flex-direction: column;
  }
  .personal-acc__comparison_header > .personal-acc__filter__input-block_web-filter {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }
  .personal-acc__comparison_header > .personal-acc__filter__input-block_web-filter > button {
    width: 100%;
  }
  .personal-acc__comparison_header_btns {
    flex-direction: column;
  }
  .personal-acc__comparison_header_btns > .btn-custom {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .personal-acc__comparison__descr_characteristics {
    padding: 15px;
  }
}
.return-title {
  font-size: 26px;
  margin-top: 0;
  margin-bottom: 15px;
}
.return-desc {
  margin-bottom: 30px;
}
.return-form {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 50px;
}
.return-form fieldset {
  flex-grow: 1;
  border: var(--border);
  padding: 40px 20px 10px;
  height: fit-content;
}
.return-form__left {
  width: 41%;
}
.return-form__buttons {
  width: 100%;
  margin: 0;
}
.return-form h2 {
  margin-top: 0;
  margin-bottom: 25px;
  padding: 0;
  border: none;
  font-weight: 700;
}
.return-form__right h2 {
  font-size: 26px;
}
.return-form fieldset .form-group {
  flex-direction: column;
  row-gap: 20px;
  margin: 0px 0px 30px;
}
.return-form fieldset .form-group::before,
.return-form fieldset .form-group::after {
  display: none;
}
.return-form fieldset .form-group label::before {
  display: none;
}
.return-form fieldset .form-group label {
  font-weight: 600;
  padding: 0;
  text-align: left;
  margin-bottom: 0;
}
.return-form fieldset .form-group input {
  border: var(--border);
  border-radius: 8px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  padding: 11px 16px;
  color: #000;
  height: 50px;
  max-width: 300px;
}
.return-form fieldset .form-group textarea {
  border: var(--border);
  border-radius: 8px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  padding: 11px 16px;
  color: #000;
  resize: none;
}
.return-form fieldset .form-group input[type='radio'] {
  display: inline-block;
  height: 13px;
  width: 13px;
  margin: 0;
  position: static;
}
.return-form__group {
  display: flex;
  justify-content: space-between;
  column-gap: 20px;
}
.return-form__group .form-group {
  width: 100%;
  max-width: 300px;
}
.return-form__quantity {
  flex-direction: row !important;
  align-items: center;
  column-gap: 40px;
}
.return-form__quantity label {
  min-width: 195px;
}
.return-form__quantity input {
  width: 81px;
  height: 39px !important;
}
.return-form__reason {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  column-gap: 40px;
}
.return-form__reason label {
  min-width: 195px;
}
.return-form__reason .radio {
  padding-top: 15px;
}
.return-form__reason .radio:first-of-type {
  padding-top: 0px;
}
.return-form__reason .radio label {
  color: #2d2d32;
  font-size: 15px;
  font-weight: 400 !important;
  line-height: 22px;
}
.return-form__opened {
  flex-direction: row !important;
  align-items: center;
  column-gap: 40px;
}
.return-form__opened label {
  min-width: 195px;
}
.return-form__opened label.radio-inline {
  min-width: 1px;
  color: #2d2d32;
  font-size: 15px;
  font-weight: 400 !important;
  line-height: 22px;
}
.return-form__opened .radio-inline + .radio-inline {
  margin-left: 65px;
}
.return-form .input-group.date {
  display: flex;
  align-items: center;
  width: 100%;
}

.return-form .input-group.date .input-group-btn {
  display: inline-block;
  width: fit-content;
}
.return-form .input-group.date button {
  border: var(--border);
  border-radius: 0px 8px 8px 0px;
  background: #fff;
  height: 50px;
  padding: 8px 16px;
}
.return-submit {
  display: flex;
  border: none;
  border-radius: 15px;
  background: var(--color-main);
  transition: var(--transition);
  margin-left: auto;
  padding: 20px 40px;
}
.return-submit:hover,
.return-submit:focus,
.return-submit:active {
  background: var(--hover-add);
  transition: var(--transition);
}
@media (max-width: 1439px) {
  .return-form {
    column-gap: 30px;
  }
}
@media (max-width: 1199px) {
  .return-form__group {
    flex-direction: column;
  }
  .return-form__reason {
    flex-direction: column !important;
  }
  .return-form fieldset {
    width: calc(50% - 15px);
  }
}
@media (max-width: 767px) {
  .return-title {
    font-size: 20px;
  }
  .return-form {
    row-gap: 20px;
    flex-direction: column;
  }
  .return-form fieldset {
    padding: 20px 10px;
    width: 100%;
    border-radius: 15px;
  }
  .return-form h2 {
    font-size: 20px;
  }
  .return-form fieldset .form-group {
    row-gap: 15px;
    margin-bottom: 20px;
  }
  .return-form__reason .radio {
    padding-top: 10px;
  }
  .return-submit {
    padding: 10px 20px;
  }
}
@media (max-width: 475px) {
  .return-form__opened {
    column-gap: 15px;
  }
  .return-form__opened label {
    min-width: fit-content;
  }
  .return-form__opened .radio-inline + .radio-inline {
    margin-left: 20px;
  }
  .return-form__quantity {
    column-gap: 15px;
  }
  .return-form__quantity label {
    min-width: fit-content;
  }
}
.personal-acc__categorie__collapse__inputs.empty {
  float: none;
}
.personal-acc__categorie__collapse__inputs.empty h3 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
}
.personal-acc__categorie__collapse__add-number {
  justify-content: center;
}
.personal-acc__categorie__collapse__ready {
  border: 2px solid var(--color-main);
  background: #fefefe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px 20px;
  padding: 20px;
  float: none !important;
  margin-bottom: 20px;
}
.personal-acc__categorie__collapse__ready-text {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.personal-acc__categorie__collapse__ready-text p {
  color: #000;
  margin: 0;
}
.personal-acc__categorie__collapse__ready-text p:last-of-type {
  color: #4e4e4e;
}
.personal-acc__categorie__collapse__ready-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  outline: none;
  cursor: pointer;
  border: 1px solid rgb(222, 224, 229);
  border: var(--border);
  background-color: #fff;
  border-radius: 50%;
}
.personal-acc__categorie__collapse__ready-button.active {
  border-color: var(--color-main);
  background-color: var(--color-main);
}
.personal-acc__categorie__collapse__ready-button.active svg path {
  fill: #fff;
}
.personal-acc__categorie-addresses .personal-acc__categorie__collapse__btns button {
  padding: 11px 40px;
}
.personal-acc__categorie-addresses .personal-acc__categorie__collapse__btns {
  position: relative;
}
.personal-acc__categorie-addresses .personal-acc__categorie__collapse__btns::before {
  content: '';
  display: block;
  width: calc(100% - 100px);
  height: 1px;
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.personal-acc__categorie__collapse__delete {
  margin-top: 20px;
}
.personal-acc__categorie__collapse__delete button {
  width: 150px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  background: var(--color-delete);
  margin-left: auto;
}
@media (max-width: 425px) {
  .personal-acc__categorie__collapse__btns {
    justify-content: center;
  }
  .personal-acc__categorie__collapse__btns button {
    padding: 8px 15px !important;
    border-radius: 10px;
    min-width: 120px;
  }
  .personal-acc__categorie-addresses .personal-acc__categorie__collapse__btns::before {
    width: 100%;
  }
}
.personal-acc__categorie__collapse__inputs.add__new {
  display: none;
}
/* .personal-acc__categorie__collapse__add-number {
  display: none;
} */
.personal-acc__categorie__collapse__inputs.empty .personal-acc__categorie__collapse__add-number {
  display: flex !important;
}
/* .personal-acc__categorie__collapse__ready {
  display: none;
} */
.personal-acc__categorie-addresses .personal-acc__categorie__collapse__btns {
  display: none;
}
/* .personal-acc__categorie__collapse__inputs.empty {
  display: none;
} */
.personal-acc__categorie__collapse__inputs.success_text svg path {
  fill: var(--color-main);
}

.personal-acc__categorie__collapse__radio-group .subscribe-label {
  align-items: center;
  column-gap: 5px;
}

/* ════════════════════════════════════════════════════════════════════
   Account Profile Dashboard (new design 1:1)
   ════════════════════════════════════════════════════════════════════ */

/* Page grid: 260px sidebar + 1fr main, 40px gap */
.acc-page{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:40px;
  align-items:start;
  padding:24px 0 60px;
}
/* Гість (wishlist без обов'язкової авторизації) — без лівого сайдбара,
   контент на всю ширину контейнера. */
.acc-page--no-sidebar{
  grid-template-columns:1fr;
  gap:0;
}

/* ── Sidebar ── */
.acc-sidebar{
  position:sticky;
  top:24px;
  background:#fff;
  border-radius:14px;
  font-size:14px;
}
.acc-sidebar__close{display:none;background:none;border:0;font-size:28px;line-height:1;padding:6px 12px;color:#666;cursor:pointer;align-self:flex-end;}
/* Sidebar groups — Figma 715:77238 spec: група = title + links, gap 16px;
   між групами 16px + лінія 1px #DDDDDD + 16px. */
.acc-sidebar__group{
  padding: 16px 0;
  border-bottom:1px solid var(--otac-border);
}
.acc-sidebar__group:first-of-type{padding-top:0;}
.acc-sidebar__group:last-child{border-bottom:0;padding-bottom:0;}
.acc-sidebar__group-title{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-h1);     /* 24px */
  font-weight:var(--otac-fw-medium); /* 500 */
  line-height:var(--otac-lh-tight);
  color:var(--otac-text);
  padding:0;
  margin:0 0 16px;                 /* gap title → links */
  letter-spacing:0;
}
.acc-sidebar__link{
  display:flex;align-items:center;gap:10px;
  min-height:50px;box-sizing:border-box;
  padding:10px 8px;
  color:var(--otac-text);text-decoration:none;
  border-radius:6px;
  margin:0;
  transition:background .15s, color .15s;
  position:relative;
  font-family:var(--otac-ff);
  font-size:16px;                  /* Figma: 16px Regular, lh 22px */
  font-weight:var(--otac-fw-regular);
  line-height:22px;
}
.acc-sidebar__link:hover{background:#F7F7F7;color:var(--otac-text);text-decoration:none;}
/* Активний пункт — лише сірий фон; текст лишається #131314 Regular (Figma). */
.acc-sidebar__link.is-active{background:#F7F7F7;}
.acc-sidebar__link-icon{flex-shrink:0;color:var(--otac-text-light);}
.acc-sidebar__link.is-active .acc-sidebar__link-icon{color:var(--otc-btn-primary);}
/* Індикатор-крапка — інлайн після тексту, 10px #EC2424 (Figma). */
.acc-sidebar__dot{
  flex-shrink:0;
  width:10px;height:10px;border-radius:50%;background:#EC2424;
}
.acc-sidebar__link--danger{color:#EC2424;}
.acc-sidebar__link--danger:hover{color:#c81e1e;background:#FDECEA;}
.acc-sidebar__link--danger .acc-sidebar__link-icon{color:#EC2424;}
.acc-sidebar__link--muted{color:var(--otac-text-light);}
.acc-sidebar__link--muted .acc-sidebar__link-icon{color:var(--otac-text-light);}
.acc-sidebar__backdrop{display:none;}
.acc-sidebar-toggle{
  display:none;
  align-items:center;gap:8px;
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;
  padding:10px 14px;
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  color:var(--otac-text);cursor:pointer;
  margin:16px 0;
}

/* ── Main content ── */
.acc-main{min-width:0;}
.acc-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-family:var(--otac-ff);
  font-size:12px;
  color:var(--otac-text-light);
  margin-bottom:16px;
}
.acc-breadcrumb a{color:var(--otac-text-light);text-decoration:none;display:inline-flex;align-items:center;}
.acc-breadcrumb a:hover{color:var(--otac-text);}
.acc-breadcrumb__current{color:var(--otac-text);font-weight:var(--otac-fw-medium);}
.acc-breadcrumb__sep{color:var(--otac-text-light);opacity:.5;}
/* Breadcrumb винесено над меню (прямий нащадок .container, поза .acc-page).
   Верхній відступ від хедера; нижній gap дає padding-top самого .acc-page.
   padding-left:14px — вирівнює «домик» по лівому краю заголовка «Мій акаунт»
   (.acc-sidebar__group-title має таке саме padding:0 14px). */
.container > .acc-breadcrumb{
  margin-top:20px;
  margin-bottom:0;
}

@media (max-width: 991px) {
  .container > .acc-breadcrumb{
    margin-top:12px;
  }
}

/* Вирівнювання колонок по верхній лінії (десктоп ≥992): заголовок меню
   «Мій акаунт» має стояти на одній лінії з «Профіль». Прибираємо верхній
   відступ невидимої картки сайдбара (8px) + першої групи (16px) = 24px,
   що дорівнює нульовому верхньому відступу контент-заголовка. Figma 440:67157:
   верхній фрейм — row з вирівнюванням по верху. */
@media (min-width:992px){
  body:has(.acc-profile-page) .acc-sidebar{padding-top:0;}
  body:has(.acc-profile-page) .acc-sidebar__group:first-of-type{padding-top:0;}
}

.acc-profile-page{
  display:flex;
  flex-direction:column;
  gap:40px;
}
@media (max-width: 991px) {
  .acc-profile-page{
    gap:24px;
  }
}
.acc-profile-title{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-h1);
  font-weight:var(--otac-fw-semibold);
  line-height:var(--otac-lh-tight);
  color:var(--otac-text);
  margin:0 0 4px;letter-spacing:0;
}

/* ── Hero (welcome + stats LEFT, loyalty card RIGHT) ── */
.acc-hero{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:24px;
  align-items:stretch;
}
.acc-hero__left{
  display:flex;flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
.acc-hero__welcome-row{display:flex;align-items:center;gap:16px;}
.acc-hero__avatar-wrap{position:relative;flex-shrink:0;}
.acc-hero__avatar-initial{
  width:100px;height:100px;border-radius:50%;
  background:#16a085;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;font-weight:600;letter-spacing:.5px;
}
.acc-hero__avatar-img{width:100px;height:100px;border-radius:50%;object-fit:cover;display:block;}
/* The [hidden] attribute toggled by JS post-upload needs to win over the
   explicit display:flex on the initial circle (otherwise the user sees BOTH
   the new image AND the placeholder letter stacked vertically, and on reload
   the same conflict gives a "ghost" image at the top of the page). */
.acc-hero__avatar-wrap > [hidden]{display:none !important;}
.acc-hero__avatar-edit{
  position:absolute;bottom:0;right:0;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--otac-border);color:var(--otac-text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  padding:0;
}
.acc-hero__avatar-edit:hover{background:#F7F7F7;color:#000;}
.acc-avatar-file{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.acc-hero__welcome-text{display:flex;flex-direction:column;gap:8px;min-width:0;}
.acc-hero__welcome-line{display:flex;align-items:center;gap:6px;}
.acc-hero__welcome{font-size:18px;font-weight:600;color:var(--otac-text);letter-spacing:-.01em;}
.acc-hero__verified{flex-shrink:0;}
.acc-hero__since{font-size:14px;line-height:20px;color:var(--otac-text-muted);}

/* Inline stats row — на референсі це одна горизонтальна смуга, label + value на одній лінії,
   між групами вертикальні роздільники, м'яка тонка лінія і легка обвідка. */
.acc-stats-row{
  display:flex;align-items:stretch;
  background:#fff;
  border:1px solid #ececec;
  border-radius:10px;
  overflow:hidden;
}
.acc-stat{
  flex:1 1 0;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;
  border-right:1px solid #ececec;
}
.acc-stat:last-child{border-right:0;}
.acc-stat__label{font-size:13px;color:#5a5a5a;font-weight:500;letter-spacing:-.005em;}
.acc-stat__value{font-size:14px;font-weight:700;color:var(--otac-text);}

/* Loyalty card — точна сітка референсу:
   ┌────────────────────────────┐
   │ [BRONZE]            [B]   │  head
   │                            │
   │ Your rewards    Progress   │  body row 1 (sub-labels)
   │ 278 / €5.56     ▓▓▓▓ 53%  │  body row 2 (amt + progress)
   │                            │
   │ [Credit history] €238 to.. │  foot
   └────────────────────────────┘ */
/* Loyalty card — Figma spec: 14px radius, 1px tier-color border, 10/12/8/12 padding,
   8px gap. Radial gradient: tier-color at top-right → transparent → white base. */
.acc-tier{
  background:
    radial-gradient(circle at 67% 140%, #cd8f63 0%, rgba(255,255,255,0) 100%),
    #ffffff;
  border:1px solid #d3ab79;
  border-radius:14px;
  padding:10px 12px 8px 12px;
  position:relative;
  overflow:visible;
  display:flex;flex-direction:column;
  width:400px;
  max-width:100%;
  height:166px;
  gap:8px;
}
/* Tier color overrides — Figma 733:82678/82859/82867/82875 spec.
   Each tier has unique radial-gradient at 67% 140% + matching border. */
.acc-tier--silver{
  background:
    radial-gradient(circle at 67% 140%, #8C919C 0%, rgba(255,255,255,0) 100%),
    #ffffff;
  border-color:#879199;
}
.acc-tier--gold{
  background:
    radial-gradient(circle at 67% 140%, #FCD765 0%, rgba(255,255,255,0) 100%),
    #ffffff;
  border-color:#EDC64B;
}
.acc-tier--platinum{
  background:
    radial-gradient(circle at 67% 140%, #9FB4CC 0%, rgba(255,255,255,0) 100%),
    #ffffff;
  border-color:#B2C1D2;
}

.acc-tier__head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:4px;            /* head→body = 8px gap + 4 = 12px (Figma) */
}
/* BRONZE — 18px Semibold з градієнтною заливкою тексту (Figma). */
.acc-tier__badge{
  font-size:18px;font-weight:600;letter-spacing:.01em;
  text-transform:uppercase;
  padding:0;
  background:linear-gradient(90deg, #BFA38E 0%, #BB7151 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Badge colors per tier — суцільний колір (скидаємо градієнт). */
.acc-tier--silver   .acc-tier__badge{background:none;color:#879199;-webkit-text-fill-color:#879199;}
.acc-tier--gold     .acc-tier__badge{background:none;color:#B6921F;-webkit-text-fill-color:#B6921F;}
.acc-tier--platinum .acc-tier__badge{background:none;color:#6B89A8;-webkit-text-fill-color:#6B89A8;}

/* Shield — за скляним блоком (Figma): z-index:1 < body(2), тож матове скло
   перекриває нижню частину щита (видно його розмито за блоком). */
.acc-tier__shield{
  position:absolute;
  top:-13px;           /* Figma: y=-13 */
  right:32px;          /* Figma: x=288 у 400px-картці → 32px від правого краю */
  width:80px;          /* Figma: 80×88 */
  height:auto;
  z-index:1;
  pointer-events:none;
  display:inline-block;
}
.acc-tier__shield--css svg{display:block;width:100%;height:auto;}
.acc-tier__shield--img img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

/* Inner glass card — Figma spec (bronze): 8px radius, 1px white border, 10px padding,
   12px gap, fill #C57F50 @10%, backdrop blur 10, drop shadow X0/Y1/B8 #AD6342 @20%.
   Silver/Gold body backgrounds await Figma reference — only shadow tint diverges. */
.acc-tier__body{
  display:flex;flex-direction:column;
  flex:1 1 auto;
  position:relative;
  z-index:2;
  background:rgba(197,127,80,.10);
  border:1px solid #ffffff;
  border-radius:8px;
  padding:10px;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  box-shadow:0 1px 8px 0 rgba(173,99,66,.20);
}
/* 2 колонки + вертикальний пунктир посередині (Figma). */
.acc-tier__row{display:flex;align-items:stretch;gap:10px;flex:1 1 auto;}
.acc-tier__col{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  flex:1 1 0;min-width:0;
}
.acc-tier__sep{
  flex:0 0 1px;align-self:stretch;
  border-left:1px dashed rgba(255,255,255,.9);
}
/* Inner-block shadow tinted per tier */
.acc-tier--silver   .acc-tier__body{
  background:rgba(140,145,156,.10);
  box-shadow:0 1px 8px 0 rgba(135,145,153,.20);
}
.acc-tier--gold     .acc-tier__body{
  background:rgba(252,215,101,.10);
  box-shadow:0 1px 8px 0 rgba(237,198,75,.20);
}
.acc-tier--platinum .acc-tier__body{
  background:rgba(159,180,204,.10);
  box-shadow:0 1px 8px 0 rgba(178,193,210,.20);
}

.acc-tier__col--left,.acc-tier__col--right{
  display:flex;flex-direction:column;
  justify-content:space-between;
  gap:12px;min-width:0;
}
.acc-tier__sublabel{
  font-size:12px;color:var(--otac-text);font-weight:500;
}
.acc-tier__sublabel--right{text-align:left;}
.acc-tier__amt{
  font-size:14px;line-height:20px;color:var(--otac-text);font-weight:600;
  white-space:nowrap;
}
.acc-tier__amt-money{font-weight:400;color:var(--otac-text);font-size:14px;margin-left:4px;}
.acc-tier__sublabel-hint{
  display:inline-block;cursor:help;color:var(--otac-text);opacity:.7;
  font-size:10px;margin-left:2px;font-weight:400;
}
.acc-tier__sublabel-hint:hover{opacity:1;}
.acc-tier__progress-wrap{display:flex;align-items:center;gap:10px;}
.acc-tier__progress-bar{
  flex:1 1 auto;height:8px;border-radius:12px;
  background:#ffffff;overflow:hidden;
  position:relative;
}
.acc-tier__progress-bar > span{
  display:block;height:100%;
  background:#392923;  /* Solid dark brown — як в макет */
  border-radius:100px;
  transition:width .4s ease;
  min-width:12px !important;  /* ← ГАРАНТУЄ що bar видно навіть при 0% */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.acc-tier__progress-pct{font-size:14px;color:var(--otac-text);font-weight:400;min-width:34px;text-align:right;}
/* Silver/Gold/Platinum — overrides progress fill to tier-specific dark color */
.acc-tier--silver   .acc-tier__progress-bar > span{background:#3A4047;}
.acc-tier--silver   .acc-tier__progress-pct{color:#3A4047;}
.acc-tier--gold     .acc-tier__progress-bar > span{background:#5C4810;}
.acc-tier--gold     .acc-tier__progress-pct{color:#5C4810;}
.acc-tier--platinum .acc-tier__progress-bar > span{background:#324558;}
.acc-tier--platinum .acc-tier__progress-pct{color:#324558;}
/* Деталь під progress-bar: "€X з €Y" — пояснює прогрес в грошовому еквіваленті */
.acc-tier__progress-detail{
  font-size:10px;color:var(--otac-text);opacity:.75;font-weight:500;
  margin-top:4px;letter-spacing:.02em;
}
.acc-tier__progress-detail strong{font-weight:700;opacity:1;}

.acc-tier__foot{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;
}
.acc-tier__btn{
  justify-self:center;
  background:#fff;color:var(--otac-text);font-size:12px;font-weight:500;
  padding:6px 12px;border-radius:6px;text-decoration:none;
  border:1px solid var(--otac-border);
  transition:background .15s;
}
.acc-tier__btn:hover{background:#F7F7F7;color:var(--otac-text);text-decoration:none;}
.acc-tier__remaining{
  justify-self:center;
  font-size:12px;color:#3D3D3E;display:inline-flex;align-items:center;gap:8px;
}

/* ── Section heading — H2 на сторінках, Figma Subtitle 16 SemiBold ── */
.acc-section{display:flex;flex-direction:column;gap:16px;}
.acc-section__head{display:flex;justify-content:space-between;align-items:center;}
.acc-section__title{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-h2);          /* 20px */
  font-weight:var(--otac-fw-semibold);   /* 600 */
  line-height:var(--otac-lh-tight);
  color:var(--otac-text);
  margin:0;letter-spacing:0;
}
.acc-section__sub{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-regular);
  line-height:var(--otac-lh-normal);
  color:var(--otac-text-light);
  margin:4px 0 0;
}
.acc-section__view-all{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-medium);
  color:var(--otc-btn-primary);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
}
/* Стрілка «View all» — 24px (Figma 753:83717). Перекриває inline width/height у SVG. */
.acc-section__view-all svg{width:24px;height:24px;flex-shrink:0;}
.acc-section__view-all:hover{color:var(--otc-btn-primary-hover);}
.acc-section__view-all:hover{color:var(--otac-text);text-decoration:none;}

/* ── Recent orders grid ── */
.acc-orders-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
/* Order card — Figma 468:75040: border #DDDDDD, radius 8, padding 12, gap 16. */
.acc-order-card{
  background:#fff;border:1px solid var(--otac-border);border-radius:8px;
  padding:12px;display:flex;flex-direction:column;gap:16px;
}
.acc-order-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.acc-order-card__id{font-size:14px;line-height:20px;font-weight:400;color:var(--otac-text);}
.acc-order-card__date{font-size:14px;line-height:20px;color:var(--otac-text-light);margin-top:2px;}
.acc-order-card__status{font-size:14px;line-height:20px;color:var(--otac-status-green);font-weight:400;flex-shrink:0;}
/* Кольори статусу за Figma: in-transit/в обробці → помаранчевий, доставлено → зелений, скасовано → сірий. */
.acc-order-card__status--shipped,
.acc-order-card__status--pending,
.acc-order-card__status--processing{color:var(--otac-status-orange);}
.acc-order-card__status--delivered,
.acc-order-card__status--received{color:var(--otac-status-green);}
.acc-order-card__status--cancelled,
.acc-order-card__status--canceled{color:var(--otac-status-muted);}
.acc-order-card__thumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.acc-order-card__thumb{
  width:60px;height:60px;border-radius:4px;overflow:hidden;
  background:#fafafa;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.acc-order-card__thumb img{width:100%;height:100%;object-fit:cover;}
/* «+N» — простий текст (Figma), не плитка. */
.acc-order-card__thumb--more{
  width:auto;height:auto;background:none;border-radius:0;
  font-size:14px;color:var(--otac-text);font-weight:400;
}
.acc-order-card__actions{display:flex;gap:12px;margin-top:auto;}
/* Кнопки картки: 36px, 14px Medium, radius 8, рівні половини (Figma). */
.acc-order-card__actions .acc-btn{flex:1 1 0;min-height:36px;padding:9px 12px;font-size:14px;border-radius:8px;}

/* ══════════════════════════════════════════════════════════════════════
   Button system — 2 розміри (Large / Medium) × 5 variants.
   Large (16px / 10px radius) — page buttons (Order again, Save, Add new)
   Medium (14px / 8px radius) — modal buttons (Maybe later, Confirm)
   Variants: primary (filled), outline, danger, link, icon.
   --otc-btn-* tokens приходять з admin onetap_setting_template.
   ══════════════════════════════════════════════════════════════════════ */
.acc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;min-height:44px;
  font-family:var(--otac-ff);
  font-weight:var(--otac-fw-medium);
  font-size:var(--otac-fs-btn-lg);
  line-height:1.25;
  border-radius:var(--otc-btn-radius,10px);
  border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
  box-sizing:border-box;
}
.acc-btn--md{
  font-size:var(--otac-fs-btn-md);
  line-height:1.29;
  border-radius:8px;
  min-height:40px;
}
.acc-btn--block{width:100%;}

/* Variants */
.acc-btn--primary,
.acc-btn--dark{ /* --dark alias for back-compat */
  background:var(--otc-btn-primary);
  color:var(--otc-btn-primary-text);
  border-color:var(--otc-btn-primary);
}
.acc-btn--primary:hover,
.acc-btn--dark:hover{
  background:var(--otc-btn-primary-hover);
  border-color:var(--otc-btn-primary-hover);
  color:var(--otc-btn-primary-text);
  text-decoration:none;
}

.acc-btn--outline,
.acc-btn--ghost{ /* --ghost alias for back-compat */
  background:#FFFFFF;
  color:var(--otac-text);
  border-color:var(--otac-border);
}
.acc-btn--outline:hover,
.acc-btn--ghost:hover{
  background:#FAFAFA;
  color:var(--otac-text);
  border-color:#B0B0B0;
  text-decoration:none;
}

.acc-btn--danger{
  background:#D32F2F;color:#FFFFFF;border-color:#D32F2F;
}
.acc-btn--danger:hover{
  background:#B71C1C;color:#FFFFFF;border-color:#B71C1C;text-decoration:none;
}
.acc-btn--danger:disabled{background:#F5B8B3;border-color:#F5B8B3;cursor:not-allowed;}

.acc-btn--link{
  background:transparent;border:0;
  padding:0;min-height:0;border-radius:0;
  color:var(--otc-btn-primary);
  font-weight:var(--otac-fw-medium);
}
.acc-btn--link:hover{
  color:var(--otc-btn-primary-hover);
  text-decoration:underline;
}

.acc-btn--icon{
  background:transparent;border:0;
  padding:8px;min-height:0;border-radius:6px;
  color:var(--otac-text-light);
  width:32px;height:32px;
}
.acc-btn--icon:hover{
  color:var(--otac-text);
  background:#F7F7F7;
}

/* ── Recent activity grid — у референсі це не картки з рамками, а текстові блоки
       зі вертикальною лінією-роздільником між ними ── */
.acc-activity-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  background:transparent;
  border-top:1px solid #ececec;
  border-bottom:1px solid #ececec;
  padding:14px 0;
}
.acc-activity-card{
  padding:0 18px;display:flex;flex-direction:column;gap:6px;
  border-right:1px solid #ececec;min-width:0;
}
.acc-activity-card:first-child{padding-left:0;}
.acc-activity-card:last-child{border-right:0;padding-right:0;}
.acc-activity-card__title{font-size:14px;font-weight:700;color:var(--otac-text);letter-spacing:-.005em;}
.acc-activity-card__text{font-size:12.5px;color:#6a6a6a;line-height:1.45;}
.acc-activity-card__date{font-size:11.5px;color:#9a9a9a;margin-top:auto;padding-top:6px;}

/* ── Promocodes grid ── */
.acc-promo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, 260px);  /* Figma: картка 260px */
  justify-content:start;
  gap:14px;
  align-items:stretch;
}
.acc-promo-card{
  background:#fff;border:1px solid var(--otac-border);border-radius:8px;
  display:flex;flex-direction:column;
  position:relative;
  text-align:center;
  height:100%;
  min-height:291px;       /* Figma spec */
}
/* Top — однакова висота в усіх картках: flex:1 розтягує верх, тож роздільник
   і низ опиняються на одному рівні незалежно від вмісту (напр. опційного рядка
   «Мін. сума»). Низ має фіксовану структуру → теж однаковий по всіх картках. */
.acc-promo-card__top{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:12px;
}
.acc-promo-card__head{display:flex;justify-content:center;}
.acc-promo-card__badge{width:40px;height:40px;color:var(--otac-text);}
.acc-promo-card__discount{
  font-size:20px;font-weight:500;color:#577B28;line-height:1.2;
}
.acc-promo-card__meta{display:flex;flex-direction:column;gap:5px;width:100%;}
.acc-promo-card__name{font-size:14px;line-height:20px;font-weight:500;color:var(--otac-text);}
.acc-promo-card__min{font-size:14px;line-height:20px;font-weight:400;color:var(--otac-text-light);}
/* Перфорація-роздільник — пунктир із боковими «заглибинами» (ticket-notch).
   Насічка = коло, відцентроване рівно на бічному краю картки, обрізане clip-path
   до ВНУТРІШНЬОЇ половини. Видно лише дугу, що вгинається всередину (як виріз),
   а біла заливка перекриває пряму лінію бордюру в цьому місці. */
.acc-promo-card__divider{
  position:relative;
  height:0;margin:0 12px;
  border-top:1px dashed var(--otac-border);
}
.acc-promo-card__divider::before,
.acc-promo-card__divider::after{
  content:"";
  position:absolute;top:50%;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:1px solid var(--otac-border);
  transform:translateY(-50%);
}
/* ліва насічка: центр на лівому краю картки, лишаємо праву (внутрішню) половину */
.acc-promo-card__divider::before{left:-22px;clip-path:inset(0 0 0 50%);}
/* права насічка: центр на правому краю, лишаємо ліву (внутрішню) половину */
.acc-promo-card__divider::after{right:-22px;clip-path:inset(0 50% 0 0);}
.acc-promo-card__bottom{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:12px;
}
.acc-promo-card__code-row{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--otac-input-bg);border-radius:8px;
  padding:9px 12px;min-height:40px;width:100%;box-sizing:border-box;
}
.acc-promo-card__code{
  font-family:var(--otac-ff);font-size:16px;line-height:22px;
  color:var(--otac-text);font-weight:500;letter-spacing:.02em;
  background:transparent;
}
.acc-promo-card__copy{
  background:none;border:0;cursor:pointer;color:var(--otac-text-light);
  display:inline-flex;align-items:center;padding:0;border-radius:4px;flex-shrink:0;
}
.acc-promo-card__copy:hover{color:var(--otac-text);}
.acc-promo-card__valid{font-size:14px;line-height:20px;color:var(--otac-text-light);}
/* Countdown badge — показується замість дати коли лишилось ≤24h до кінця промокода.
   Червонуватий-помаранчевий для urgency, tabular-nums щоб цифри не стрибали. */
.acc-promo-countdown{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:600;
  color:#d9602b;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.acc-promo-countdown.is-expired{color:#9a9a9a;font-weight:500;}

.acc-empty{
  background:#fff;border:1px dashed #e0e0e0;border-radius:10px;
  padding:24px;text-align:center;color:#9a9a9a;font-size:13px;
}

/* ════════════════════════════════════════════════════════════════════
   Responsive — Tablet & Mobile
   ════════════════════════════════════════════════════════════════════ */

/* Tablet: collapse promo to 2 cols, orders to 2 cols, activity to 2 cols */
@media (max-width:1199px){
  .acc-orders-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .acc-promo-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .acc-activity-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .acc-hero{grid-template-columns:1fr;}
  .acc-tier{max-width:none;}
}

/* Mobile (≤991): sidebar becomes drawer, single-column grids */
@media (max-width:991px){
  /* Bootstrap .container обмежує max-width 720px на 768-991 → пуста гарма по боках.
     Розширюємо до full width коли всередині .acc-page, бо сайдбар сховано. */
  body:has(.acc-page) > .container,
  .container:has(.acc-page){
    max-width:100% !important;
    width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
    overflow-x:clip;
  }
  /* acc-page просто заповнює контейнер (без 100vw-breakout — він додавав ширину
     скролбару й давав горизонтальний overflow справа). Бічний відступ 12px дає
     контейнер; верхній 18px — відступ від breadcrumb до заголовка (на десктопі
     цей gap дає padding-top:24px, на ≤991 його треба явно повернути). */
  .acc-page{
    grid-template-columns:1fr;gap:16px;
    margin:0;
    width:auto;max-width:100%;
    padding:18px 0 40px;
    box-sizing:border-box;
  }
  .acc-sidebar-toggle{display:inline-flex;}
  .acc-sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:88%;max-width:340px;
    z-index:9999;
    transform:translateX(-100%);
    transition:transform .25s;
    overflow-y:auto;
    padding:16px 0;
    box-shadow:0 4px 24px rgba(0,0,0,.15);
  }
  body.acc-sidebar-open .acc-sidebar{transform:translateX(0);}
  body.acc-sidebar-open .acc-sidebar__backdrop{
    display:block;
    position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9998;
  }
  .acc-sidebar__close{display:inline-flex;margin:0 12px 4px auto;}

  /* Hero на мобілі (Figma 461:74526): аватар 64px, ім'я 16px Semibold,
     gap welcome-row 12px, текст gap 4px, gap до stats 16px. */
  .acc-hero__left{justify-content:flex-start;gap:16px;}
  .acc-hero__welcome-row{gap:12px;}
  .acc-hero__welcome-text{gap:4px;}
  .acc-hero__welcome{font-size:16px;}
  .acc-hero__avatar-img{width:64px;height:64px;}
  .acc-hero__avatar-initial{width:64px;height:64px;font-size:26px;}
  .acc-hero__avatar-edit{width:24px;height:24px;}

  /* Stats — один бордований блок з вертикальними роздільниками,
     value (16px Semibold) над label (14px Regular #606162). */
  .acc-stats-row{
    display:flex;align-items:stretch;
    background:#fff;border:1px solid var(--otac-border);border-radius:8px;overflow:hidden;
  }
  .acc-stat{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:6px 12px;margin:0;text-align:center;
    border:0;border-right:1px solid var(--otac-border);
  }
  .acc-stat:last-child{border-right:0;}
  .acc-stat__value{font-size:16px;font-weight:600;line-height:22px;color:var(--otac-text);order:0;}
  .acc-stat__label{font-size:14px;font-weight:400;line-height:20px;color:var(--otac-text-muted);order:1;}

  /* Tier card на мобілі: повна ширина; щит лишається 80px (Figma top-13/right32). */
  .acc-tier{width:100%;max-width:100%;height:auto;min-height:166px;}

  /* Carousel-секції: orders/activity/promo — горизонтальний скрол з partial-card.
     Negative margin = parent padding (12px) to break out to viewport edges,
     then re-add internal padding so first card aligns з contentом.
     scroll-padding-left:12px — щоб snap залишав 12px gap зліва при resetі скролу
     (інакше snap притискає першу карту до самого краю viewport). */
  .acc-orders-grid,.acc-activity-grid,.acc-promo-grid{
    display:flex;gap:12px;overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-padding-left:12px;
    margin:0 -12px;padding:0 12px 8px;
    -webkit-overflow-scrolling:touch;
  }
  .acc-order-card,.acc-activity-card,.acc-promo-card{
    flex:0 0 280px;scroll-snap-align:start;
  }
  .acc-order-card{flex:0 0 260px;}   /* Figma 468:75277 — картка замовлення 260px */
  .acc-promo-card{flex:0 0 220px;}
  .acc-activity-card{flex:0 0 280px;}
  .acc-profile-title{font-size:22px;}
}

@media (max-width:500px){
  .acc-promo-card{flex-basis:65%;}
}

/* ════════════════════════════════════════════════════════════════════
   Order History page (1:1 reference)
   ════════════════════════════════════════════════════════════════════ */

.acc-orders-page{display:flex;flex-direction:column;gap:20px;}

/* Filters bar — search + 2 selects in a row */
/* Order History filters — Figma 652:58840 spec: 1px #DDDDDD border, radius 8px, padding 12px */
/* Filters bar — Figma 652:58840: search (fill) + 40px + [select 24px select].
   Інпут 48px, padding 12, radius 8, 1px #DDDDDD; текст 16px Regular; іконки 24px. */
.acc-orders-filters{
  display:flex;align-items:center;gap:24px;
}
.acc-orders-filters__search{
  flex:2 1 0;margin-right:16px;          /* 24px gap + 16 = 40px до селектів */
  display:flex;align-items:center;gap:12px;
  height:48px;box-sizing:border-box;
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;
  padding:12px;
  color:var(--otac-text-light);
}
/* Іконка пошуку — праворуч, 24px (Figma Right Icon) */
.acc-orders-filters__search svg{order:1;width:24px;height:24px;flex-shrink:0;}
.acc-orders-filters__search input{
  flex:1 1 auto;order:0;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--otac-ff);
  font-size:16px;line-height:22px;font-weight:400;
  color:var(--otac-text);
}
.acc-orders-filters__search input::placeholder{color:var(--otac-text-light);}
.acc-orders-filters__select{position:relative;display:block;flex:1 1 0;}
.acc-orders-filters__select select{
  width:100%;height:48px;box-sizing:border-box;
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;
  padding:0 40px 0 12px;
  font-family:var(--otac-ff);
  font-size:16px;font-weight:400;
  color:var(--otac-text);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23131314' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;
}
.acc-orders-filters__select select:focus{outline:none;border-color:var(--otac-text);}

/* Orders list — collapsible rows. Figma 668:74979/Order spec:
   white bg, 1px DDDDDD, radius 8px, padding 12px, gap 16px */
.acc-orders-list{display:flex;flex-direction:column;gap:20px;}
.acc-order-row{
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.acc-order-row[open]{box-shadow:0 1px 4px rgba(0,0,0,.04);}
.acc-order-row__head{
  display:grid;
  /* thumbs — фіксована колонка (232px), щоб «Sum» був на однаковому x у всіх
     рядках незалежно від кількості прев'ю (1 чи 3). */
  grid-template-columns:1fr 1fr 232px 24px;
  gap:12px;
  align-items:center;
  padding:12px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.acc-order-row__head::-webkit-details-marker{display:none;}
.acc-order-row__left{display:flex;flex-direction:column;gap:4px;min-width:0;}
.acc-order-row__id{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-regular);
  color:var(--otac-text);
}
.acc-order-row__status{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-regular);
}
/* Status colors per Figma textStyle fills */
.acc-order-row__status--in_process{color:var(--otac-status-orange);}    /* #C75E02 */
.acc-order-row__status--received  {color:var(--otac-status-green);}     /* #577B28 */
.acc-order-row__status--canceled  {color:var(--otac-status-muted);}     /* #7D7D7D */
.acc-order-row__center{display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:var(--otac-text);}
.acc-order-row__total-label{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  color:var(--otac-text-light);
  font-weight:var(--otac-fw-regular);
}
.acc-order-row__total-value{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-regular);
  color:var(--otac-text);
}
.acc-order-row__thumbs{display:flex;gap:8px;align-items:center;justify-content:flex-end;}
.acc-order-row__thumb{
  width:60px;height:60px;border-radius:4px;overflow:hidden;
  background:#FAFAFA;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.acc-order-row__thumb img{width:100%;height:100%;object-fit:cover;}
.acc-order-row__thumb--more{
  background:transparent;
  color:var(--otac-text);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-regular);
  width:20px;
  border:0;
}
.acc-order-row__chevron{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:var(--otac-text-light);
  transition:transform .2s;
}
.acc-order-row[open] .acc-order-row__chevron{transform:rotate(180deg);}

/* Expanded body: main column (delivery + tracking + products) + side panel */
.acc-order-row__body{
  display:grid;
  grid-template-columns:1fr 240px;
  gap:24px;
  padding:14px 18px 18px;
}
.acc-order-row__main{
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.acc-order-row__products{display:flex;flex-direction:column;gap:14px;}
.acc-order-row__product{
  display:grid;
  grid-template-columns:80px 1fr 110px 130px;
  gap:14px;align-items:flex-start;
  padding-top:14px;
}
.acc-order-row__product:first-child{padding-top:0;}
.acc-order-row__product-img{
  width:80px;height:80px;border-radius:8px;overflow:hidden;
  background:#fafafa;border:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:center;
}
.acc-order-row__product-img img{width:100%;height:100%;object-fit:cover;}
.acc-order-row__product-info{display:flex;flex-direction:column;gap:4px;min-width:0;}
.acc-order-row__product-name{font-size:14px;font-weight:600;color:var(--otac-text);line-height:1.3;}
.acc-order-row__product-options{
  display:flex;flex-wrap:wrap;gap:6px 12px;
  font-size:12px;color:#6a6a6a;line-height:1.4;
}
.acc-order-row__product-options span{display:inline;}
.acc-order-row__product-qty{font-size:12px;color:#9a9a9a;margin-top:auto;padding-top:4px;}
.acc-order-row__product-price-col{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  position:relative;padding-top:4px;
}
.acc-order-row__discount-badge{
  display:inline-block;font-size:11px;font-weight:700;color:#fff;
  background:#0a8a52;padding:3px 8px;border-radius:4px;letter-spacing:-.01em;
}
.acc-order-row__product-price{font-size:15px;font-weight:700;color:var(--otac-text);}
.acc-order-row__product-price-old{font-size:12px;color:#9a9a9a;text-decoration:line-through;}
.acc-order-row__product-actions{display:flex;flex-direction:column;gap:6px;}
.acc-btn--sm{padding:6px 8px;font-size:11px;}

/* Side panel */
.acc-order-row__side{
  display:flex;flex-direction:column;gap:6px;
  padding-left:0;
}
.acc-order-row__meta-line{font-size:13px;color:var(--otac-text);line-height:1.5;}
.acc-order-row__meta-line--muted{color:#6a6a6a;font-size:12.5px;}
.acc-order-row__meta-line--total{color:var(--otac-text);font-size:13px;margin-bottom:6px;}
.acc-order-row__meta-line--total strong{font-weight:700;}
.acc-order-row__side-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.acc-order-row__side-actions .acc-btn--primary,
.acc-order-row__side-actions .acc-btn--outline{width:100%;}
.acc-order-row__side-actions .acc-btn--link{
  align-self:flex-start;padding:4px 0;
}

/* ════════════════════════════════════════════════════════════════════
   ORDER HISTORY — Figma 652-58793 редізайн (Tasks 5-8 з плану)
   Експандований body: 2-кол grid (products | side-panel)
   ════════════════════════════════════════════════════════════════════ */

/* Розширений body — grid layout.
   DOM order: <aside class="acc-od-side"> ПЕРШИЙ, потім <div class="acc-od-products">.
   На desktop через grid-template-areas позиціонуємо products → ліва колонка (1fr),
   side → права (280px). На mobile DOM-порядок дає side зверху без CSS-magic. */
.acc-order-row__body{
  display:grid;
  grid-template-columns:1fr 316px;
  grid-template-areas:"products side";
  gap:24px;
  padding:4px 12px 12px 12px;   /* вирівняно з head (12px); без border — Figma open state */
}
.acc-order-row__body .acc-od-products{grid-area:products;}
.acc-order-row__body .acc-od-side{
  grid-area:side;
  padding-top: 16px;
}

/* ─── Product list scoped to order-row body ─── */
.acc-order-row__body .acc-od-products{display:flex;flex-direction:column;padding:0;}
.acc-order-row__body .acc-od-product{
  display:grid;
  grid-template-columns:80px 1fr 150px 160px;
  gap:16px;
  align-items:start;           /* назва/контент зверху рядка (Figma) */
  padding:16px 0;
  border:0;
}
.acc-order-row__body .acc-od-product + .acc-od-product{border-top:1px solid var(--otac-border);}

/* Thumb 80×80, radius 4 (Figma) */
.acc-order-row__body .acc-od-product__thumb{
  display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;border-radius:4px;
  background:#F4F4F5;overflow:hidden;text-decoration:none;
}
.acc-order-row__body .acc-od-product__thumb img{width:100%;height:100%;object-fit:cover;}

/* Info column: name + chips */
.acc-order-row__body .acc-od-product__info{
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.acc-order-row__body .acc-od-product__name{
  font:400 14px/20px 'Inter',sans-serif;color:#131314;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.acc-order-row__body .acc-od-product__chips{
  display:flex;flex-wrap:wrap;gap:4px;
}
.acc-order-row__body .acc-od-product__chip{
  display:inline-flex;align-items:center;
  padding:5px 8px;background:rgba(0,0,0,.05);border-radius:999px;
  font:400 12px/1 'Inter',sans-serif;color:#7D7D7D;
}

/* Price column — right-aligned stack */
.acc-order-row__body .acc-od-product__price{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  position:relative;
  min-height:80px;             /* висота прев'ю — щоб «x1» опустився донизу */
}
.acc-order-row__body .acc-od-product__discount-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 8px;background:#F1AC4C;color:#131314;border-radius:24px;
  font:500 12px/1 'Inter',sans-serif;
  align-self:flex-start;
}
.acc-order-row__body .acc-od-product__price-current{
  font:600 18px/1.3 'Inter',sans-serif;color:#131314;
}
/* Зі знижкою ціна зелена (Figma Discount price #577B28) */
.acc-order-row__body .acc-od-product__price--discount .acc-od-product__price-current{color:#577B28;}
.acc-order-row__body .acc-od-product__price-current--sale{
  /* Admin → Дизайн і стилі → "Actual special price color".
     Var emit-ться в common/header.twig:60 з fallback #E53935. */
  color:var(--otc-actual-special-color, #E53935);
}
.acc-order-row__body .acc-od-product__price-old{
  font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;text-decoration:line-through;
}
.acc-order-row__body .acc-od-product__qty{
  font:400 14px/20px 'Inter',sans-serif;color:#3D3D3E;
  margin-top:auto;            /* «x1» донизу колонки ціни (Figma) */
}

/* Actions column — 2 stacked white buttons (full-width within actions col per Figma) */
.acc-order-row__body .acc-od-product__actions{
  display:flex;flex-direction:column;gap:8px;align-self:stretch;
}
.acc-od-product__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:36px;padding:0 12px;     /* Figma: 36px, fills 160px column */
  background:#FFFFFF;color:#131314;
  border:1px solid var(--otac-border);border-radius:8px;
  font:400 14px/1 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .15s, border-color .15s;
  box-sizing:border-box;
}
.acc-od-product__btn:hover{background:#F4F4F5;color:#131314;text-decoration:none;}

/* ─── Side panel: meta (зверху) + actions (Figma 652:62014) ─── */
.acc-od-side{
  display:flex;flex-direction:column;gap:10px;
}
.acc-od-side__btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;
  background:#FFFFFF;color:#131314;
  border:1px solid #DDDDDD;border-radius:8px;
  font:500 14px/1.286 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .15s, border-color .15s;
}
.acc-od-side__btn:hover{background:#F4F4F5;color:#131314;text-decoration:none;}
.acc-od-side__btn--primary{
  background:var(--otc-ret-brand, #392923);color:#FFFFFF;border:0;
}
.acc-od-side__btn--primary:hover{
  background:var(--otc-ret-brand-hover, #4D382E);color:#FFFFFF;
}

.acc-od-side__row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;
}
.acc-od-side__link{
  display:inline-flex;align-items:center;justify-content:center;
  font:500 14px/1.286 'Inter',sans-serif;
  color:#131314;text-decoration:underline;    /* black per Figma — раніше зелений #577B28 */
}
.acc-od-side__link:hover{color:#131314;text-decoration:underline;}

.acc-od-side__meta{
  order:-1;                /* meta-блок зверху, перед кнопками (Figma) */
  margin:0 0 14px;         /* 10px flex-gap + 14 = 24px до кнопок */
  display:flex;flex-direction:column;gap:12px;
}
.acc-od-side__meta-row{font:400 14px/20px 'Inter',sans-serif;color:var(--otac-text-light);}

/* ═══ Mobile responsive (≤500px) — Figma 652-58677 ═══ */
@media (max-width:991px){
  /* Filters mobile (Figma 652-66257): пошук на всю ширину, далі два селекти в ряд. */
  .acc-orders-filters{
    flex-flow:row wrap;align-items:stretch;gap:12px;
  }
  .acc-orders-filters__search{
    flex:1 1 100%;margin-right:0;height:44px;padding:8px 12px;
  }
  .acc-orders-filters__search svg{order:0;}          /* іконка зліва на моб */
  .acc-orders-filters__search input{font-size:14px;}
  .acc-orders-filters__select{flex:1 1 0;}
  .acc-orders-filters__select select{height:44px;font-size:14px;padding:8px 40px 8px 12px;}
  .acc-orders-list{gap:12px;}

  /* Mobile head (Figma 652-66260): рядок1 id+chevron, рядок2 status+total,
     рядок3 thumbs. display:contents піднімає id/status у грід шапки. */
  .acc-order-row__head{
    grid-template-columns:1fr auto;
    gap:10px 12px;padding:12px;
  }
  .acc-order-row__left{display:contents;}
  .acc-order-row__id{grid-column:1;grid-row:1;}
  .acc-order-row__chevron{grid-column:2;grid-row:1;align-self:center;justify-self:end;}
  .acc-order-row__status{grid-column:1;grid-row:2;}
  .acc-order-row__center{grid-column:2;grid-row:2;align-items:flex-end;justify-content:center;}
  .acc-order-row__total-label{display:none;}   /* на моб лише значення суми */
  .acc-order-row__thumbs{grid-column:1/-1;grid-row:3;}

  /* Mobile body: single column, DOM order рендериться як є.
     Оскільки в Twig <aside class="acc-od-side"> ПЕРЕД <div class="acc-od-products">,
     side renderiться зверху, products знизу — точно як на Figma 652-58677. */
  .acc-order-row__body{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:"side" "products" !important;
    gap:16px !important;
    padding:0 12px 12px 12px;
  }

  /* Mobile sidebar — Figma 652-58677:
       Row 1 (full):   meta block (Placed / Estimated / Total)
       Row 2:          [Order again]  [Order information]   ← 1fr 1fr
       Row 3 (full):   [Return]       [View invoice]        ← 1fr 1fr inside .acc-od-side__row
     Реалізація: grid 1fr 1fr, meta+row span full width, order:-1 на meta — піднімає вище. */
  /* Sidebar становится 2-col grid (для Order again | Order info ряда) */
  .acc-order-row__body .acc-od-side{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
  }
  .acc-order-row__body .acc-od-side > .acc-od-side__btn{height:40px;}
  /* Return + Invoice row — full width, 1fr 1fr inside (50/50 на mobile, було 1fr auto) */
  .acc-order-row__body .acc-od-side > .acc-od-side__row{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .acc-order-row__body .acc-od-side > .acc-od-side__row .acc-od-side__btn,
  .acc-order-row__body .acc-od-side > .acc-od-side__row .acc-od-side__link{height:40px;}
  /* Meta — full width AND перший (order:-1 в grid) */
  .acc-order-row__body .acc-od-side > .acc-od-side__meta{
    grid-column:1/-1;
    order:-1;
    margin-top:0;margin-bottom:8px;
  }

  /* Product row — 2-col grid (thumb + info), price overlay top-right, actions span full */
  .acc-order-row__body .acc-od-product{
    /* Mobile product card 1:1 з Figma 652-58677:
         Row 1 — [thumb 130×130]  [name + chips + +N More]
         Row 2 — [x1]   ───────   [old strikethrough] [current price/bold]
         Row 3 — [Write a review]  [Order again] (1fr 1fr) */
    grid-template-columns:60px 1fr;
    grid-template-areas:
      "thumb info"
      "price price"
      "actions actions";
    gap:8px;
    padding:12px 0;
    position:static;
  }
  /* Thumb 60×60, radius 4 (Figma) */
  .acc-order-row__body .acc-od-product__thumb{
    grid-area:thumb;
    width:60px;height:60px;border-radius:4px;
  }
  /* Info — name 14px Regular + chips + more */
  .acc-order-row__body .acc-od-product__info{
    grid-area:info;
    padding-right:0;
    display:flex;flex-direction:column;gap:4px;
  }
  .acc-order-row__body .acc-od-product__name{
    font:400 14px/20px 'Inter',sans-serif;color:#131314;
    -webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  }
  .acc-order-row__body .acc-od-product__chips{
    display:flex;flex-wrap:wrap;gap:4px;
  }
  .acc-order-row__body .acc-od-product__chip{
    font:400 10px/1 'Inter',sans-serif;color:#7D7D7D;
    background:rgba(0,0,0,.05);border-radius:100px;padding:3px 5px;
  }
  /* +N More — plain text 10px (Figma) */
  .acc-order-row__body .acc-od-product__more{
    font:500 10px/1 'Inter',sans-serif;color:#131314;
  }

  /* Price row — qty LEFT + (badge + old + current) RIGHT (Figma: gap 20, без рамок). */
  .acc-order-row__body .acc-od-product__price{
    grid-area:price;
    position:static;
    min-height:0;
    display:flex;flex-direction:row;align-items:center;
    gap:6px;
    padding:0;
  }
  .acc-order-row__body .acc-od-product__qty{
    order:-1;margin:0;
    margin-right:auto;     /* qty фіксована зліва, прайси розжимають праворуч */
    font:400 14px/20px 'Inter',sans-serif;color:#3D3D3E;
  }
  .acc-order-row__body .acc-od-product__discount-badge{
    order:0;
  }
  .acc-order-row__body .acc-od-product__price-old{
    order:1;
    font:400 12px/1 'Inter',sans-serif;color:#7D7D7D;
    text-decoration:line-through;
    align-self:center;
  }
  .acc-order-row__body .acc-od-product__price-current{
    order:2;
    font:600 16px/1 'Inter',sans-serif;color:#131314;
  }
  /* Sale tint — same admin "Окремий колір актуальної акційної ціни" as desktop.
     Without this, the mobile-only override above resets sale prices back to #131314. */
  .acc-order-row__body .acc-od-product__price-current--sale{
    color:var(--otc-actual-special-color, #E53935);
  }
  /* Actions — 2 кнопки 1fr/1fr, 36px (Figma) */
  .acc-order-row__body .acc-od-product__actions{
    grid-area:actions;
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
    margin-top:0;
  }
  .acc-od-product__btn{height:36px;font-size:14px;font-weight:400;border-radius:8px;}
  /* Side-panel кнопки на моб — 36px (Figma 66260) */
  .acc-order-row__body .acc-od-side > .acc-od-side__btn,
  .acc-order-row__body .acc-od-side > .acc-od-side__row .acc-od-side__btn,
  .acc-order-row__body .acc-od-side > .acc-od-side__row .acc-od-side__link{height:36px;}
}

/* ════════════════════════════════════════════════════════════════════
   Order Details page (account/order/info) — 1:1 з референсом.
   Layout:
     header (title + meta + invoice link)
     mobile-only actions row (Return + Order again)
     2-col body:
       LEFT: delivery panel (address + method + timeline+status) → products list
       RIGHT (sidebar): actions buttons (Order again + Return) → totals → payment
   ════════════════════════════════════════════════════════════════════ */

.acc-od-page{display:flex;flex-direction:column;gap:14px;}
.acc-od-back{
  display:none;align-items:center;gap:6px;
  font-size:13px;color:#6a6a6a;text-decoration:none;
  padding:6px 0;margin:0 0 4px;
}
.acc-od-back:hover{color:var(--otac-text);text-decoration:none;}

/* ── Header: title + meta (date + invoice link) — Figma 652:70094 ── */
.acc-od-header{display:flex;flex-direction:column;gap:8px;}
.acc-od-title{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-h1);
  font-weight:var(--otac-fw-semibold);
  line-height:var(--otac-lh-tight);
  color:var(--otac-text);
  margin:0;letter-spacing:0;
}
.acc-od-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.acc-od-meta__date{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  color:var(--otac-text-light);
}
.acc-od-meta__invoice{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-medium);
  color:var(--otc-btn-primary);
  text-decoration:none;
  padding-left:16px;
  border-left:1px solid var(--otac-border);
}
.acc-od-meta__invoice:hover{color:var(--otc-btn-primary-hover);text-decoration:underline;}

/* Mobile-only actions row (replaces sidebar actions on small screens) */
.acc-od-actions-mobile{display:none;}

/* ── 2-column body grid — Figma 652:70450 ── */
.acc-od-body{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:flex-start;}
.acc-od-main{display:flex;flex-direction:column;gap:16px;min-width:0;}

/* ── Panel base — Figma 652:70504 standard panel: white bg, 1px DDDDDD, radius 8px, padding 12px, gap 24px ── */
.acc-od-panel{
  background:var(--otac-panel-bg);
  border:1px solid var(--otac-border);
  border-radius:8px;
  padding:var(--otac-panel-padding);
  display:flex;flex-direction:column;gap:var(--otac-panel-gap);
}
.acc-od-panel__title{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-panel);
  font-weight:var(--otac-fw-semibold);
  line-height:var(--otac-lh-body);
  color:var(--otac-text);
  margin:0;letter-spacing:0;
}

/* ── Delivery details panel: 2-col row (address | method) + timeline ── */
.acc-od-delivery__row{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:14px;
}
.acc-od-delivery__col{display:flex;flex-direction:column;gap:6px;min-width:0;}
.acc-od-delivery__label{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:#9a9a9a;
}
.acc-od-delivery__label svg{flex-shrink:0;color:#9a9a9a;}
.acc-od-delivery__value{font-size:13px;color:var(--otac-text);line-height:1.45;}
.acc-od-delivery__value--method{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.acc-od-delivery__method-text{flex:1 1 auto;min-width:0;}

.acc-od-carrier-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:28px;border-radius:5px;
  font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  flex-shrink:0;
}

/* ── Tracking panel head: placed date + status badge ── */
.acc-od-tracking__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.acc-od-tracking__date{font-size:13px;color:var(--otac-text);font-weight:500;}
.acc-od-status{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;
  background:rgba(154,154,154,0.12);color:#6a6a6a;
  flex-shrink:0;
}
/* Compat для старого .acc-od-timeline-wrap (вже не використовується, але стилі залишаємо неагресивними) */
.acc-od-timeline-wrap{position:relative;}
/* Status color variants */
.acc-od-status--processing,
.acc-od-status--in_process,
.acc-od-status--in_processing,
.acc-od-status--pending,
.acc-od-status--shipped { background:rgba(233,117,10,0.12);color:#e9750a; }
.acc-od-status--complete,
.acc-od-status--completed,
.acc-od-status--delivered,
.acc-od-status--received,
.acc-od-status--paid { background:rgba(22,160,133,0.12);color:#16a085; }
.acc-od-status--canceled,
.acc-od-status--cancelled,
.acc-od-status--refunded,
.acc-od-status--failed { background:rgba(154,154,154,0.12);color:#9a9a9a; }

.acc-od-timeline{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.acc-od-timeline::before{
  content:'';position:absolute;left:5px;top:6px;bottom:6px;
  width:1px;background:#e0e0e0;z-index:0;
}
.acc-od-timeline__step{
  display:flex;align-items:flex-start;gap:14px;position:relative;
}
.acc-od-timeline__dot{
  flex-shrink:0;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2px solid #c4c4c4;
  margin-top:3px;position:relative;z-index:1;
}
.acc-od-timeline__step.is-current .acc-od-timeline__dot{
  background:var(--otc-btn-primary);border-color:var(--otc-btn-primary);
}
.acc-od-timeline__body{flex:1 1 auto;min-width:0;}
.acc-od-timeline__title{font-size:13px;font-weight:600;color:var(--otac-text);line-height:1.3;}
.acc-od-timeline__time{font-size:12px;color:#9a9a9a;line-height:1.4;margin-top:1px;}
.acc-od-timeline__expand{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:10px;
  font-size:13px;color:var(--otac-text);text-decoration:none;
}
.acc-od-timeline__expand:hover{color:#000;text-decoration:underline;}

/* ── 2-column body: products list + sidebar panels ── */
.acc-od-body{
  display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:flex-start;
}

/* ── Products panel — compact list usingclean grid ── */
.acc-od-products-panel{padding:0;}
.acc-od-products{display:flex;flex-direction:column;}
.acc-od-product{
  display:grid;grid-template-columns:64px minmax(0, 1fr) auto auto;
  column-gap:14px;row-gap:6px;
  align-items:flex-start;
  padding:14px 18px;border-bottom:1px solid #f0f0f0;
  min-width:0;
}
.acc-od-product:last-child{border-bottom:0;}
.acc-od-product__img{
  width:64px;height:64px;border-radius:8px;overflow:hidden;
  background:#fafafa;border:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  grid-row:1 / span 2;
}
.acc-od-product__img img{width:100%;height:100%;object-fit:cover;}
.acc-od-product__info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.acc-od-product__name{
  font-size:13px;font-weight:600;color:var(--otac-text);line-height:1.3;text-decoration:none;
  overflow-wrap:anywhere;
}
.acc-od-product__name:hover{color:#000;text-decoration:underline;}
.acc-od-product__opts{
  display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;color:#6a6a6a;line-height:1.4;
  min-width:0;
}
.acc-od-product__opts span{overflow-wrap:anywhere;min-width:0;}
.acc-od-product__opt--more{color:var(--otac-text);font-weight:600;}
.acc-od-product__qty{font-size:11px;color:#9a9a9a;margin-top:2px;}
.acc-od-product__price-col{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  flex-shrink:0;text-align:right;
}
.acc-od-product__badge{
  display:inline-block;font-size:10px;font-weight:700;color:#fff;
  background:#0a8a52;padding:2px 6px;border-radius:4px;letter-spacing:-.01em;
}
.acc-od-product__price{font-size:14px;font-weight:700;color:var(--otac-text);line-height:1.2;}
.acc-od-product__price-old{font-size:11px;color:#9a9a9a;text-decoration:line-through;}
.acc-od-product__actions{
  display:flex;flex-direction:column;gap:5px;flex-shrink:0;align-items:flex-end;
}
.acc-od-product__actions .acc-btn{
  padding:6px 12px;font-size:11px;min-width:0;
  white-space:nowrap;
}
.acc-od-product--voucher .acc-od-product__img{background:#fafafa;}

/* ── Right sidebar: panels ── */
.acc-od-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px;min-width:0;}
.acc-od-side__actions{display:flex;flex-direction:column;gap:8px;}
.acc-od-side__actions .acc-btn{padding:11px 16px;font-size:13px;text-align:center;}
.acc-od-panel{
  background:#fff;border:1px solid #ececec;border-radius:10px;
  padding:16px 18px;
}
.acc-od-panel__title{
  font-size:14px;font-weight:700;color:var(--otac-text);margin:0 0 12px;letter-spacing:-.005em;
}
.acc-od-totals{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.acc-od-totals__row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13px;color:var(--otac-text);
}
.acc-od-totals__label{color:#6a6a6a;}
.acc-od-totals__row--total{
  padding-top:10px;border-top:1px solid #ececec;margin-top:4px;font-size:14px;font-weight:700;
}
.acc-od-totals__row--total .acc-od-totals__label{color:var(--otac-text);}
.acc-od-info{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid #f5f5f5;}
.acc-od-info:first-of-type{border-top:0;padding-top:0;}
.acc-od-info__label{font-size:12px;color:#9a9a9a;}
.acc-od-info__value{font-size:13px;color:var(--otac-text);line-height:1.4;}

/* ── Tablet ≤1199: narrower sidebar ── */
@media (max-width:1199px){
  .acc-od-body{grid-template-columns:1fr 280px;gap:16px;}
}

/* ── Mobile ≤991: single column, mobile actions row, sidebar stacks below main ── */
@media (max-width:991px){
  .acc-od-back{display:inline-flex;}
  .acc-od-title{font-size:18px;}

  /* Mobile actions row visible, sidebar actions hidden */
  .acc-od-actions-mobile{
    display:flex;gap:8px;width:100%;
  }
  .acc-od-actions-mobile .acc-btn{flex:1 1 0;text-align:center;padding:11px;min-width:0;}
  .acc-od-side__actions{display:none;}

  .acc-od-body{grid-template-columns:1fr;gap:14px;min-width:0;}
  .acc-od-main,.acc-od-side{min-width:0;max-width:100%;}
  .acc-od-side{position:static;top:auto;}
  .acc-od-page{min-width:0;max-width:100%;}

  /* Delivery row stacks vertically на мобілі */
  .acc-od-delivery__row{grid-template-columns:1fr;gap:14px;}

  /* Tracking head на мобілі — wrap з gap */
  .acc-od-tracking__head{flex-wrap:wrap;gap:8px;}

  /* Product card на мобілі — ТІЛЬКИ для сторінки деталей замовлення
     (.acc-od-detail-page). Раніше було unscoped і протікало в історію замовлень,
     ламаючи її grid через display:flex !important. */
  .acc-od-detail-page .acc-od-products-panel{padding:0;}
  .acc-od-detail-page .acc-od-product{
    display:flex !important;flex-wrap:wrap;align-items:flex-start;
    gap:10px;padding:14px;
    grid-template-columns:none !important;grid-template-rows:none !important;
    min-width:0;width:100%;box-sizing:border-box;
  }
  .acc-od-detail-page .acc-od-product__img{flex:0 0 56px;width:56px;height:56px;grid-row:auto !important;}
  .acc-od-detail-page .acc-od-product__info{
    flex:1 1 0;min-width:0;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .acc-od-detail-page .acc-od-product__name{overflow-wrap:anywhere;word-break:break-word;}
  .acc-od-detail-page .acc-od-product__opts{min-width:0;overflow-wrap:anywhere;}
  .acc-od-detail-page .acc-od-product__opts span{overflow-wrap:anywhere;min-width:0;max-width:100%;}
  .acc-od-detail-page .acc-od-product__price-col{
    flex:0 0 100%;width:100%;
    flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;
    gap:8px;flex-wrap:wrap;min-width:0;
    margin-top:4px;
  }
  .acc-od-detail-page .acc-od-product__actions{
    flex:0 0 100%;width:100%;
    flex-direction:row;gap:6px;align-items:stretch;
    margin-top:6px;min-width:0;
  }
  .acc-od-detail-page .acc-od-product__actions .acc-btn{
    flex:1 1 0;min-width:0;width:auto;
    padding:8px 4px;font-size:11px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    box-sizing:border-box;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Favorites (Wishlist) page — 1:1 reference
   ════════════════════════════════════════════════════════════════════ */

.acc-favs-page{display:flex;flex-direction:column;gap:18px;}

/* Filters row — search input + 2 checkboxes inline */
.acc-favs-filters{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.acc-favs-filters .acc-orders-filters__search{flex:1 1 320px;min-width:240px;}

/* Custom checkbox — square box with checkmark, бо native checkbox замінений */
.acc-favs-checkbox{
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;font-size:14px;color:var(--otac-text);font-weight:500;
  user-select:none;
}
.acc-favs-checkbox input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.acc-favs-checkbox__box{
  width:20px;height:20px;border-radius:4px;
  background:#fff;border:1px solid #DDDDDD;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, border-color .12s;
  flex-shrink:0;
}
.acc-favs-checkbox__box svg{opacity:0;transition:opacity .1s;}
.acc-favs-checkbox input:checked + .acc-favs-checkbox__box{
  background:var(--otc-btn-primary);border-color:var(--otc-btn-primary);
}
.acc-favs-checkbox input:checked + .acc-favs-checkbox__box svg{opacity:1;}
.acc-favs-checkbox:hover .acc-favs-checkbox__box{border-color:var(--otac-text);}

/* Wishlist grid — картки 1:1 як у каталозі/модулях. Ключ: картка НЕ розтягується
   ширше за свою рідну ширину (per-scope card_width ~350px), інакше object-fit:cover
   зумить/обрізає нативні 350×400. Тому НЕ форсимо width:100% на .product-card-wrapper —
   діє per-scope `width:350px;max-width:100%` → картка = min(350, клітинка):
   на широкій клітинці (планшет 2-кол ~420px) вона лишається 350px (як модулі),
   на вузькій (моб.) стискається. justify-items:center центрує картку в клітинці. */
.acc-favs-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap:18px !important;
  align-items:start !important;
  justify-items:center !important;
  margin:0 !important;max-width:none !important;
}
/* НЕ чіпаємо width картки — тільки скидаємо margin (per-scope width:350;max-width:100%). */
.acc-favs-grid .product-card-wrapper{
  margin:0 !important;
}
/* Внутрішня .product-card-rating заповнює (вже обмежену) картку. */
.acc-favs-grid .product-card-rating{
  max-width:none !important;
  margin:0 !important;
  width:100% !important;
}
/* Зображення заповнює картку (картка ≤350px → 1:1 з нативними 350×400, без зуму). */
.acc-favs-grid .product-card-rating__image-area,
.acc-favs-grid .product-card-rating__product-img,
.acc-favs-grid .product-card-rating a > img,
.acc-favs-grid .product-card-rating__product-img img{
  width:100% !important;
  max-width:100% !important;
}
.acc-favs-grid .product-card-rating__image-area{
  margin:0 !important;
}
/* Базовий стиль картки, який onetap_home.twig застосовує глобально на сторінках
   з модулями, але якого НЕМАЄ на сторінці акаунта (шаблон home-модуля не рендериться) →
   на «Обраному» кути зображення були квадратні. Обрізаємо вміст по радіусу картки:
   overflow:hidden на .product-card-wrapper (його per-scope border-radius = card_border_radius,
   напр. 10px) клипає зображення до тих самих заокруглених кутів, що й у модулях.
   Беремо радіус з самої картки (per-scope), а не з --otc-card-radius — вони можуть
   розходитись (header vs модуль), а per-scope = джерело правди для цієї картки. */
.acc-favs-grid .product-card-wrapper,
.acc-favs-grid .product-card-rating{
  overflow:hidden !important;
}
.acc-favs-grid .product-card-rating{
  border-radius:inherit !important;
}
.acc-favs-grid .product-card-rating__product-img,
.acc-favs-grid .product-card-rating .product-image{
  overflow:hidden !important;
}
/* ≤600px: auto-fill з min 280px дав би 1 клітинку на всю ширину → зум картинки.
   Форсимо 2 колонки (як каталог на моб.) — клітинки малі, картинка стискається. */
@media (max-width:600px){
  .acc-favs-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}

/* Wishlist empty state — heart "плаваюче", без сірого круга-фону, 80×80, color #131314 */
.acc-favs-page .otac-empty__icon{
  background:transparent !important;
  width:80px !important;
  height:80px !important;
  color:#131314 !important;
}
.acc-favs-page .otac-empty__icon svg{
  width:80px !important;
  height:80px !important;
}
/* Title 20/medium (Figma textStyle: 20px medium); sub 16/regular */
.acc-favs-page .otac-empty__title{font:500 20px/1.3 'Inter',sans-serif !important;color:#131314 !important;}
.acc-favs-page .otac-empty__sub{font:400 16px/1.5 'Inter',sans-serif !important;color:#606162 !important;max-width:none !important;}

/* ═══════════════════════════════════════════════════════════════════
   Remove Product confirm modal — Figma 640×265, title 32 / sub 16
   Перевизначає базові .acc-modal__* стилі через #acc-favs-remove-modal.
   ═══════════════════════════════════════════════════════════════════ */
#acc-favs-remove-modal .acc-modal__dialog{
  width:640px !important;max-width:calc(100vw - 32px) !important;
  height:auto !important;max-height:none !important;
  padding:0 0 24px !important;
  border-radius:12px !important;
  display:block !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
/* Title row: title по центру, close в правому верхньому куті absolute.
   Padding-top 24 = відступ від верху popup'а до close-блоку. */
#acc-favs-remove-modal .acc-modal__head{
  position:relative !important;
  display:flex !important;
  justify-content:center !important;align-items:flex-start !important;
  padding:24px 24px 0 !important;
  margin:0 !important;
}
#acc-favs-remove-modal .acc-modal__close{
  position:absolute !important;
  top:16px !important;right:16px !important;
  width:32px !important;height:32px !important;
}
/* Title — 32px, по центру, 16px зверху (від хрестика-блоку) */
#acc-favs-remove-modal .acc-modal__title{
  font:600 32px/1.21 'Inter',sans-serif !important;
  color:#131314 !important;
  text-align:center !important;
  margin:16px 0 0 !important;
  letter-spacing:0 !important;
}
/* Subtitle — 16px, центровано, 40px відступ знизу до кнопок */
#acc-favs-remove-modal .acc-favs-remove-modal__text{
  margin:8px 24px 40px !important;
  padding:0 !important;
  font:400 16px/1.5 'Inter',sans-serif !important;
  color:#606162 !important;
  text-align:center !important;
}
/* Buttons row — 200×48, gap 24. 40px між subtitle і buttons задає margin-bottom subtitle. */
#acc-favs-remove-modal .acc-favs-remove-modal__actions{
  display:flex !important;
  justify-content:center !important;
  gap:24px !important;
  margin:0 24px !important;
  padding:0 !important;
}
#acc-favs-remove-modal .acc-favs-remove-modal__cancel,
#acc-favs-remove-modal .acc-favs-remove-modal__confirm{
  width:200px !important;height:48px !important;
  padding:0 !important;
  border-radius:8px;cursor:pointer;
  font:500 16px/1 'Inter',sans-serif;
  transition:background .15s;
  box-sizing:border-box;
}
#acc-favs-remove-modal .acc-favs-remove-modal__cancel{
  background:#FFFFFF;border:1px solid #DDDDDD;color:#131314;
}
#acc-favs-remove-modal .acc-favs-remove-modal__cancel:hover{background:#FAFAFA;}
#acc-favs-remove-modal .acc-favs-remove-modal__confirm{
  background:#392923;color:#FFFFFF;border:0;
}
#acc-favs-remove-modal .acc-favs-remove-modal__confirm:hover{background:#4D382E;}
/* Mobile — Figma 1568-163136: padding 12, заголовок 20px medium, підзаголовок 14px,
   кнопки В РЯДОК (Cancel + Remove поруч, рівні, gap 12, висота 44). */
@media (max-width:500px){
  #acc-favs-remove-modal .acc-modal__dialog{
    width:calc(100vw - 32px) !important;
    height:auto !important;max-height:none !important;
    padding:0 0 12px !important;
  }
  #acc-favs-remove-modal .acc-modal__head{padding:12px 12px 0 !important;}
  #acc-favs-remove-modal .acc-modal__close{top:12px !important;right:12px !important;}
  #acc-favs-remove-modal .acc-modal__title{font:500 20px/1.4 'Inter',sans-serif !important;margin-top:8px !important;}
  #acc-favs-remove-modal .acc-favs-remove-modal__text{
    margin:8px 12px 24px !important;
    font-size:14px !important;line-height:20px !important;
  }
  /* Кнопки в рядок: рівні по ширині, висота 44, шрифт 14px */
  #acc-favs-remove-modal .acc-favs-remove-modal__actions{
    flex-direction:row !important;gap:12px !important;margin:0 12px !important;
  }
  #acc-favs-remove-modal .acc-favs-remove-modal__cancel,
  #acc-favs-remove-modal .acc-favs-remove-modal__confirm{
    flex:1 1 0 !important;width:auto !important;height:44px !important;
    font-size:14px !important;
  }
}

/* ≤1199: колонки підбирає auto-fill (базове правило minmax(280px,1fr)) —
   явний 2-col оверрайд прибрано, бо на full-width він давав завеликі клітинки. */

/* Tablet ≤ 991: less side-panel width, smaller thumbs */
@media (max-width:991px){
  /* Фільтри (Figma 652-66257): search на повну ширину, 2 select-и в ряд, gap 12. */
  .acc-orders-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"search search" "select1 select2";
    gap:12px;
  }
  .acc-orders-filters__search{grid-area:search;height:44px;padding:8px 12px;}
  .acc-orders-filters__search svg{order:0;}          /* іконка зліва на моб */
  .acc-orders-filters__search input{font-size:14px;}
  .acc-orders-filters__select:nth-of-type(1){grid-area:select1;}
  .acc-orders-filters__select:nth-of-type(2){grid-area:select2;}
  .acc-orders-filters__select select{height:44px;font-size:14px;padding:8px 40px 8px 12px;}

  /* Заголовок order-row (Figma 652-66260): рядок1 ID+chevron, рядок2 status+total,
     рядок3 thumbs. display:contents піднімає id/status у грід шапки. */
  .acc-order-row__head{
    grid-template-columns:1fr auto;
    grid-template-areas:none;
    gap:10px 12px;
    padding:12px;
  }
  .acc-order-row__left{display:contents;}
  .acc-order-row__id{grid-area:auto;grid-column:1;grid-row:1;}
  .acc-order-row__chevron{grid-area:auto;grid-column:2;grid-row:1;align-self:center;justify-self:end;}
  .acc-order-row__status{grid-area:auto;grid-column:1;grid-row:2;}
  .acc-order-row__center{
    grid-area:auto;grid-column:2;grid-row:2;
    display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  }
  .acc-order-row__center .acc-order-row__total-label{display:none;}
  .acc-order-row__thumbs{
    grid-area:auto;grid-column:1/-1;grid-row:3;
    display:flex;justify-content:flex-start;margin-top:0;
  }
  .acc-order-row__thumb{width:60px;height:60px;}

  /* ── Mobile order row product card: повний rewrite на flex-wrap ──
     Викидаємо grid + grid-areas. Простий flex-row з wrap: image+info на
     одному рядку, потім ціна на повну ширину, потім actions на повну ширину.
     Кожен елемент має min-width:0 і overflow-wrap:anywhere для гарантії
     що нічого не вилазить за viewport незалежно від довжини тексту. */
  html, body{overflow-x:hidden;max-width:100vw;}
  .acc-page,.acc-main,.acc-orders-page,.acc-orders-list,
  .acc-order-row,.acc-order-row__body,.acc-order-row__products{
    min-width:0;max-width:100%;
  }
  .acc-page{overflow-x:hidden;}

  /* ── Order Details page — просто заповнює контейнер (без 100vw-breakout).
     Бічний відступ дає контейнер (12px); тут лише нижній — інакше падінги
     контейнера й блоку накладались (подвоювались). */
  .acc-page--detail-fullbleed,
  .acc-page:has(.acc-od-detail-page){
    margin:0 !important;
    width:auto !important;
    max-width:100% !important;
    padding:0 0 40px !important;
    box-sizing:border-box !important;
  }
  body .acc-od-detail-page{
    width:100%;max-width:none;
  }

  .acc-order-row__body{display:block !important;padding:14px;}
  .acc-order-row__products{display:block;}

  .acc-order-row__product{
    display:flex !important;flex-wrap:wrap;align-items:flex-start;
    gap:10px;padding:12px 0;
    grid-template-columns:none !important;grid-template-areas:none !important;
    min-width:0;width:100%;box-sizing:border-box;
  }
  .acc-order-row__product:first-child{padding-top:0;}
  .acc-order-row__product-img{
    flex:0 0 56px;width:56px;height:56px;
    grid-area:auto !important;
  }
  .acc-order-row__product-info{
    flex:1 1 0;min-width:0;
    grid-area:auto !important;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .acc-order-row__product-name{
    font-size:13px;
    overflow-wrap:anywhere;word-break:break-word;
  }
  .acc-order-row__product-options{
    display:flex;flex-wrap:wrap;gap:2px 8px;
    font-size:11px;min-width:0;
    overflow-wrap:anywhere;
  }
  .acc-order-row__product-options span{overflow-wrap:anywhere;min-width:0;max-width:100%;}
  .acc-order-row__product-price-col{
    flex:0 0 100%;width:100%;
    display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;
    grid-area:auto !important;
    margin-top:4px;
  }
  .acc-order-row__product-actions{
    flex:0 0 100%;width:100%;
    display:flex;flex-direction:row;gap:6px;
    grid-area:auto !important;
    margin-top:6px;
  }
  .acc-order-row__product-actions .acc-btn{
    flex:1 1 0;min-width:0;width:auto;
    padding:8px 4px;font-size:11px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    box-sizing:border-box;
  }
  .acc-order-row__side-actions .acc-btn{min-width:0;}
  .acc-order-row__side{
    border-top:1px solid #f0f0f0;padding-top:14px;
  }
  /* Side actions на мобільному: "Order again" + "Order information" в один ряд */
  .acc-order-row__side-actions{flex-direction:row;gap:8px;}
  .acc-order-row__side-actions .acc-btn{flex:1 1 0;text-align:center;padding:10px;}

  /* Favorites (Figma 652-67147): search на повну ширину, нижче — рядок з 2 чекбоксами.
     gap:12px 24px → 12px між рядком пошуку і рядком чекбоксів, 24px між чекбоксами;
     margin-bottom:24px → відступ від фільтрів до сітки. */
  .acc-favs-filters{gap:12px 24px;}
  .acc-favs-filters .acc-orders-filters__search{flex:1 1 100%;margin-bottom:0;font-size:14px;}
  /* ≤991: колонки лишаємо на auto-fill (базове minmax(280px,1fr)); тут лише
     трохи тісніший gap на планшеті. */
  #wishes-products.acc-favs-grid{gap:14px 12px !important;}
}

/* ════════════════════════════════════════════════════════════════════
   Notifications page — 1:1 reference
   ════════════════════════════════════════════════════════════════════ */

.acc-notif-page{display:flex;flex-direction:column;gap:14px;}
.acc-notif-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;
  margin-bottom:4px;
}
.acc-notif-settings-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid #e5e5e5;border-radius:8px;
  padding:8px 14px;font-size:13px;color:var(--otac-text);font-weight:500;
  text-decoration:none;
  transition:background .15s, border-color .15s;
}
.acc-notif-settings-btn:hover{background:#fafafa;color:var(--otac-text);text-decoration:none;border-color:#d0d0d0;}

/* Tabs row — підкреслена активна вкладка чорною лінією знизу */
.acc-notif-tabs{
  display:flex;align-items:center;gap:0;
  border-bottom:1px solid #ececec;
  margin-bottom:4px;
}
.acc-notif-tab{
  flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 10px;
  font-size:14px;font-weight:500;color:#6a6a6a;
  text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .12s, border-color .12s;
}
.acc-notif-tab:hover{color:var(--otac-text);text-decoration:none;}
.acc-notif-tab.is-active{color:var(--otac-text);font-weight:700;border-bottom-color:var(--otac-text);}

/* List items — title bold, body (smaller, grey), date (tiny grey), trash icon на правому краю.
   Розділені тонкою лінією знизу. */
.acc-notif-list{display:flex;flex-direction:column;}
/* Notification item — Figma 675-75222 (desktop) / 675-75312 (mobile).
   Колонка: head-рядок [title | trash], нижче body+date на всю ширину. */
.acc-notif-item{
  display:flex;flex-direction:column;gap:10px;
  padding:12px 0;
  border-bottom:1px solid #f0f0f0;
  overflow:hidden;
}
.acc-notif-item:last-child{border-bottom:0;}
.acc-notif-item__head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.acc-notif-item__title{font-size:16px;font-weight:600;color:var(--otac-text);line-height:22px;letter-spacing:0;}
.acc-notif-item__bodywrap{display:flex;flex-direction:column;gap:8px;min-width:0;}
.acc-notif-item__body{font-size:16px;font-weight:400;color:var(--otac-text);line-height:22px;}
.acc-notif-item__date{font-size:14px;color:#7D7D7D;line-height:20px;margin-top:0;}
.acc-notif-item__remove{
  background:none;border:0;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex-shrink:0;
  transition:opacity .12s;
}
.acc-notif-item__remove svg{width:16px;height:18px;display:block;}
.acc-notif-item__remove:hover{opacity:.7;}

/* ── Pagination — page-strip + prev/next chevrons under notification list ── */
.acc-notif-pagination{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:18px 0 4px;
}
.acc-notif-pagination__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:6px;
  color:var(--otac-text);text-decoration:none;
  border:1px solid #e5e5e5;background:#fff;
  cursor:pointer;transition:background .12s, border-color .12s, color .12s;
}
.acc-notif-pagination__btn:hover{background:#f5f5f5;border-color:#d0d0d0;}
.acc-notif-pagination__btn.is-disabled{
  opacity:.4;cursor:not-allowed;pointer-events:none;
}
.acc-notif-pagination__pages{
  display:flex;align-items:center;gap:4px;
  list-style:none;margin:0;padding:0;
}
.acc-notif-pagination__page{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;
  border-radius:6px;
  font:500 13px/1 'Inter',sans-serif;color:#6a6a6a;
  text-decoration:none;
  transition:background .12s, color .12s;
}
.acc-notif-pagination__page:hover{background:#f5f5f5;color:var(--otac-text);text-decoration:none;}
.acc-notif-pagination__page.is-current{
  background:var(--otc-btn-primary,#392923);color:#fff;font-weight:600;
}
@media (max-width:500px){
  .acc-notif-pagination{gap:4px;padding:14px 0 4px;}
  .acc-notif-pagination__btn,
  .acc-notif-pagination__page{width:28px;height:28px;min-width:28px;font-size:12.5px;}
}

/* Mobile (≤991): tabs full-width stretched (equal share), settings btn compact */
@media (max-width:991px){
  .acc-notif-head{align-items:stretch;}
  .acc-notif-settings-btn{padding:7px 12px;font-size:12.5px;}
  .acc-notif-tabs{overflow-x:visible;width:100%;}
  .acc-notif-tab{
    flex:1 1 0;min-width:0;padding:10px 6px;
    font-size:13px;text-align:center;white-space:nowrap;
  }
  /* Mobile (Figma 675-75312): gap 6, заголовок/текст 14px */
  .acc-notif-item{padding:12px 0;gap:6px;}
  .acc-notif-item__title{font-size:14px;line-height:20px;}
  .acc-notif-item__body{font-size:14px;line-height:20px;}
  .acc-notif-item__date{font-size:14px;}
}

/* ════════════════════════════════════════════════════════════════════
   My delivery addresses page — 1:1 reference
   ════════════════════════════════════════════════════════════════════ */

/* My delivery addresses — Figma 696:59501 1:1 (desktop)
   2 секції (Home/Pickup) gap 24, кожна — section title 16/500 + 2-col wrap grid 538×hug card. */
.acc-addr-page{display:flex;flex-direction:column;gap:24px;font-family:'Inter',sans-serif;}

.acc-addr-flash{
  background:#e6f7ee;color:#0a8a52;border:1px solid #c8ebd8;
  padding:10px 14px;border-radius:8px;font-size:13px;
}

/* Section: title 16/500 + grid */
.acc-addr-section{display:flex;flex-direction:column;gap:16px;}
.acc-addr-section__title{
  margin:0;
  font:500 16px/1.375 'Inter',sans-serif;
  color:#131314;
}

/* 2-col wrap grid, cards 538×hug, gap 24 (Figma layout_96IC37) */
.acc-addr-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 538px));
  justify-content:start;
  gap:24px;
}

/* Regular card — fill white, border 1px #DDDDDD, radius 8, padding 12, primary 16/400 + sub 16/400 #7D7D7D, trash справа */
.acc-addr-card{
  display:flex;align-items:center;gap:12px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:8px;
  padding:12px;
  text-decoration:none;color:inherit;
  position:relative;
  transition:border-color .15s, background .15s;
  width:538px;max-width:100%;
  box-sizing:border-box;
}
.acc-addr-card:hover{border-color:#7D7D7D;text-decoration:none;color:inherit;}
.acc-addr-card--default{border-color:#131314;}

/* Add-new card — штрихпунктирна (dashed 4,4) CTA-рамка. SVG-бордер замість
   border-style:dashed, щоб штрихи були рівно 4/4 як у Figma (1670-185508) і
   масштабувались. Desktop height алігниться з сусідніми картками (home 74 / pickup 112). */
.acc-addr-card--add{
  justify-content:center;
  background-color:#FFFFFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%23DDDDDD' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
  border:0;
  cursor:pointer;
  padding:24px;
  gap:10px;
}
.acc-addr-card--add-home{height:74px;}
.acc-addr-card--add-pickup{height:112px;}
.acc-addr-card--add:hover{
  background-color:#FAFAFA;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%237D7D7D' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
}
.acc-addr-card__add-icon{
  width:24px;height:24px;
  color:#131314;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.acc-addr-card__add-text{
  font:600 16px/1.375 'Inter',sans-serif;
  color:#131314;
}

/* Card body — column з primary + sub */
.acc-addr-card__body{
  display:flex;flex-direction:column;gap:6px;
  flex:1 1 auto;min-width:0;
}
.acc-addr-card__primary{
  font:400 16px/1.375 'Inter',sans-serif;color:#131314;
}
.acc-addr-card__sub{
  font:400 16px/1.375 'Inter',sans-serif;color:#7D7D7D;
}

/* Pickup type pill — bg #F7F7F7, radius 100, padding 6×8, icon 20 + 14/400 text */
.acc-addr-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 8px;
  background:#F7F7F7;
  border-radius:100px;
  width:fit-content;
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
}
.acc-addr-pill svg{flex-shrink:0;}

/* Trash icon button — red, no border, just icon */
.acc-addr-card__icon-btn{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#EC2424;background:transparent;
  text-decoration:none;border:0;cursor:pointer;
  flex-shrink:0;
  transition:opacity .12s;
}
.acc-addr-card__icon-btn:hover{opacity:.7;text-decoration:none;}
.acc-addr-card__icon-btn--danger{color:#EC2424;}

/* Mobile responsive — Figma не має mobile цього node, але OneTap brkpts 1367/992/501/500 */
@media (max-width:1366px){
  .acc-addr-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .acc-addr-card{width:100%;}
}
@media (max-width:991px){
  .acc-addr-grid{grid-template-columns:1fr;gap:12px;}
  /* На моб картка Add сама в рядку (нема сусідньої адреси) → фіксовані desktop-висоти
     не потрібні. Однакова висота для обох (Figma 1670-185508). */
  .acc-addr-card--add-home,
  .acc-addr-card--add-pickup{height:auto;}
}

/* Payment methods — використовує acc-addr-* картку, додаткові стилі для brand-логотипу */
.acc-pay-card__brand{
  width:34px;height:22px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;overflow:hidden;
  background:#fafafa;
}
.acc-pay-card__brand svg{display:block;}

/* Add-payment form */
.acc-pay-form{
  background:#fff;border:1px solid #ececec;border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:14px;
  max-width:440px;
}
.acc-pay-form__row{display:flex;flex-direction:column;gap:6px;}
.acc-pay-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.acc-pay-form__label{font-size:12.5px;color:#6a6a6a;font-weight:500;}
.acc-pay-form__input{
  width:100%;height:42px;
  background:#fff;border:1px solid #e5e5e5;border-radius:8px;
  padding:0 14px;font-size:14px;color:var(--otac-text);
  font-family:'SF Mono','Menlo',monospace;letter-spacing:.04em;
  outline:none;transition:border-color .12s;
}
select.acc-pay-form__input{
  font-family:inherit;letter-spacing:normal;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;
}
.acc-pay-form__input:focus{border-color:var(--otac-text);}
.acc-pay-form__note{font-size:12px;color:#9a9a9a;line-height:1.4;}
.acc-pay-form__actions{display:flex;gap:10px;justify-content:flex-end;}
.acc-pay-form__actions .acc-btn{flex:0 0 auto;padding:9px 18px;}
.acc-pay-form-err{
  background:#fdecea;color:#c0392b;border:1px solid #fadbd7;
  padding:10px 14px;border-radius:8px;font-size:13px;
}

/* ════════════════════════════════════════════════════════════════════
   Personal data page — 1:1 reference (Profile information / Security)
   ════════════════════════════════════════════════════════════════════ */

/* Personal data — Figma 711-72446 (desktop) / 710-71396 (mobile).
   Список рядків без картки-рамки: тільки нижні роздільники #DDDDDD.
   Іконки 24px, label 16 Medium #131314, value 16 Regular #606162 (моб 14px). */
.acc-personal-page{display:flex;flex-direction:column;gap:24px;}

.acc-personal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
/* Колонка: section title + список, gap 24 (Figma) */
.acc-personal-col{display:flex;flex-direction:column;gap:24px;min-width:0;}
.acc-personal-section-title{
  font:600 16px/22px 'Inter',sans-serif;
  color:#131314;
  margin:0;letter-spacing:0;
}

/* Без рамки/фону — просто рядки з нижніми роздільниками */
.acc-personal-card{
  display:flex;flex-direction:column;
  background:transparent;border:0;border-radius:0;
}
.acc-personal-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;
  border-bottom:1px solid #DDDDDD;
  text-decoration:none;color:inherit;
}
/* Останній рядок ТЕЖ з лінією (Figma: усі рядки мають нижній бордер). */

/* Split row — person-іконка + First/Last поряд (gap 12) + один pencil, без вертикального роздільника */
.acc-personal-row--split{
  padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;
}
.acc-personal-row--split .acc-personal-field{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;min-width:0;
  text-decoration:none;color:inherit;
}

.acc-personal-field__icon{
  width:24px;height:24px;color:#131314;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.acc-personal-field__icon svg{width:24px;height:24px;}
.acc-personal-field__main{
  display:flex;flex-direction:column;gap:4px;
  flex:1 1 auto;min-width:0;
}
.acc-personal-field__label{
  font:500 16px/22px 'Inter',sans-serif;color:#131314;
}
.acc-personal-field__value{
  font:400 16px/22px 'Inter',sans-serif;color:#606162;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acc-personal-field__value--mask{letter-spacing:.15em;}
.acc-personal-field__pencil{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:#606162;flex-shrink:0;
  transition:color .12s;
}
.acc-personal-field__pencil svg{width:24px;height:24px;}
.acc-personal-row:hover .acc-personal-field__pencil,
.acc-personal-row--split .acc-personal-field:hover .acc-personal-field__pencil{
  color:#131314;
}

/* Tablet & mobile — 1-col stack, value 14px (Figma 710-71396) */
@media (max-width:991px){
  .acc-personal-grid{grid-template-columns:1fr;gap:24px;}
  .acc-personal-field__value{font-size:14px;line-height:20px;}
  .acc-personal-row--split{grid-template-columns:1fr;gap:0;}
  .acc-personal-row--split .acc-personal-field{
    border-bottom:1px solid #DDDDDD;
  }
  .acc-personal-row--split .acc-personal-field:last-child{border-bottom:0;}
}

/* ════════════════════════════════════════════════════════════════════
   My promocodes standalone page — 1:1 reference (4-col)
   ════════════════════════════════════════════════════════════════════ */

.acc-promo-page{display:flex;flex-direction:column;gap:18px;}

/* 4-col grid override (Profile dashboard має `.acc-promo-grid` 4-col за замовч.,
   але standalone-сторінка має використовувати свій layout з більшим gap). */
.acc-promo-grid--4col{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

/* Tablet (≤1199): 3 cols. Mobile/tablet narrow (≤991): 2 cols. */
@media (max-width:1199px){
  .acc-promo-grid--4col{grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (max-width:991px){
  /* Standalone My promocodes page: keep a real 2-col grid with EQUAL cards.
     Overrides the dashboard carousel rule (.acc-promo-grid{display:flex;overflow-x:auto})
     that otherwise turns these into uneven horizontal-scroll cards. */
  .acc-promo-grid--4col{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    overflow:visible;
    margin:0;
    padding:0;
  }
  .acc-promo-grid--4col .acc-promo-card{flex:initial;width:auto;}
  /* Equalize the bottom section so the dashed divider + notches line up across
     cards in a row. The "valid" line wraps to 2 lines on some cards (e.g.
     "Valid for first order only") and 1 on others — reserve 2 lines so the
     bottom block has a constant height and the divider sits at the same Y. */
  .acc-promo-grid--4col .acc-promo-card__valid{
    min-height:32px;
    display:flex;align-items:center;justify-content:center;text-align:center;
  }
  /* Mobile font sizes per Figma "Promocode / Size=Mobile" (node 1310:135659):
     discount 16, name/scope/code/valid 12, badge 32. Desktop sizes (20/14/16)
     are too large in a ~155px-wide card. */
  .acc-promo-grid--4col .acc-promo-card__badge{width:32px;height:32px;}
  .acc-promo-grid--4col .acc-promo-card__discount{font-size:16px;line-height:22px;}
  .acc-promo-grid--4col .acc-promo-card__name{font-size:12px;line-height:18px;}
  .acc-promo-grid--4col .acc-promo-card__min{font-size:12px;line-height:18px;}
  .acc-promo-grid--4col .acc-promo-card__code{font-size:12px;line-height:16px;}
  .acc-promo-grid--4col .acc-promo-card__valid{font-size:12px;line-height:16px;}
}
@media (max-width:500px){
  .acc-promo-grid--4col{grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;}
}

/* ── Empty state — generic, використовується на My promocodes (порожня) і подібних ── */
.acc-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:60px 20px;
  gap:10px;
  max-width:420px;margin:20px auto;
}
/* Payment methods page — 160px відступ від h1 "Способи оплати" до empty-state блоку */
.acc-pay-page .acc-empty-state{
  margin-top:160px;
  padding-top:0;
}
@media (max-width:992px){
  .acc-pay-page .acc-empty-state{margin-top:80px;}
}
.acc-empty-state__icon{color:var(--otac-text);margin-bottom:6px;flex-shrink:0;}
.acc-empty-state__title{font-size:16px;font-weight:700;color:var(--otac-text);letter-spacing:-.005em;}
.acc-empty-state__subtitle{font-size:13px;color:#9a9a9a;line-height:1.5;}
.acc-empty-state__cta{
  margin-top:14px;padding:10px 22px;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ════════════════════════════════════════════════════════════════════
   Modal — generic (used by Change password popup and others)
   ════════════════════════════════════════════════════════════════════ */

.acc-modal{
  position:fixed;inset:0;z-index:10000;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.acc-modal.is-open{display:flex;}
body.acc-modal-open{overflow:hidden;}
.acc-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  cursor:pointer;
}
.acc-modal__dialog{
  position:relative;z-index:1;
  background:#fff;border-radius:14px;
  width:100%;max-width:440px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  display:flex;flex-direction:column;
  max-height:calc(100vh - 40px);
  overflow:hidden;
}
.acc-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 14px;
}
.acc-modal__title{
  font-size:17px;font-weight:700;color:var(--otac-text);margin:0;
  letter-spacing:-.01em;
}
.acc-modal__close{
  background:none;border:0;cursor:pointer;color:#6a6a6a;
  width:30px;height:30px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
}
.acc-modal__close:hover{background:#f5f5f5;color:var(--otac-text);}
.acc-modal__body{
  padding:6px 20px 20px;
  display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;
}
/* Change Password modal — 24px між полями (label→input лишається 4px через .acc-pwd-field) */
#acc-pwd-form{gap:24px;}

/* Password fields with eye-toggle.
   gap:4px label→input — стандарт (див. feedback_field_label_gap_4px) */
.acc-pwd-field{display:flex;flex-direction:column;gap:4px;}
.acc-pwd-field__label{
  font:600 14px/1 'Inter',sans-serif;
  color:var(--otac-text);
  margin:0;padding:0;display:block;
}
.acc-pwd-field__input-wrap{position:relative;}
.acc-pwd-field__input{
  width:100%;height:42px;
  background:#fff;border:1px solid #e5e5e5;border-radius:8px;
  padding:0 40px 0 14px;font-size:13.5px;color:var(--otac-text);
  outline:none;transition:border-color .12s;
}
.acc-pwd-field__input::placeholder{color:#9a9a9a;}
.acc-pwd-field__input:focus{border-color:var(--otac-text);}
.acc-pwd-field__eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;
  background:none;border:0;cursor:pointer;color:#9a9a9a;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;
}
.acc-pwd-field__eye:hover{color:var(--otac-text);background:#f5f5f5;}
.acc-pwd-field__error{
  background:#fdecea;color:#c0392b;border:1px solid #fadbd7;
  padding:10px 12px;border-radius:8px;font-size:12.5px;
}
.acc-pwd-submit{width:100%;padding:11px;font-size:13.5px;}

/* ── Change password modal — Figma 715-75673 (desktop) / 715-75760 (mobile).
   Scoped під #acc-pwd-modal, щоб не зачепити інші .acc-modal / .acc-pwd-field. ── */
#acc-pwd-modal .acc-modal__dialog{
  width:600px;max-width:calc(100vw - 32px);
  padding:24px;
  display:flex;flex-direction:column;gap:24px;
}
#acc-pwd-modal .acc-modal__head{padding:0;border:0;margin:0;}
#acc-pwd-modal .acc-modal__title{font:500 24px/1.3 'Inter',sans-serif;letter-spacing:0;}
#acc-pwd-modal .acc-modal__close{width:40px;height:40px;}
#acc-pwd-modal .acc-modal__body{padding:0;display:flex;flex-direction:column;gap:24px;}
#acc-pwd-modal .acc-pwd-field{gap:4px;}
#acc-pwd-modal .acc-pwd-field__label{font:500 16px/22px 'Inter',sans-serif;color:#131314;}
#acc-pwd-modal .acc-pwd-field__input{
  height:48px;padding:0 44px 0 12px;
  font-size:16px;line-height:22px;color:#131314;
  border-color:#DDDDDD;
}
#acc-pwd-modal .acc-pwd-field__input::placeholder{color:#7D7D7D;}
#acc-pwd-modal .acc-pwd-field__eye{right:12px;width:24px;height:24px;color:#7D7D7D;}
#acc-pwd-modal .acc-pwd-field__eye svg{width:24px;height:24px;}
#acc-pwd-modal .acc-pwd-submit{
  width:100%;height:48px;padding:12px;border-radius:10px;
  font:500 16px/20px 'Inter',sans-serif;
}

@media (max-width:500px){
  /* Mobile: keep modals CENTERED (not bottom-sheet). Padding 12px so dialog never
     touches viewport edge; max-height 92vh allows internal scroll for tall content. */
  .acc-modal{padding:12px;align-items:center;}
  .acc-modal__dialog{border-radius:14px;max-height:92vh;max-width:100%;width:100%;}

  /* Change password — Figma 715-75760: padding 12, заголовок 18, поля 14/44, кнопка 44 */
  #acc-pwd-modal .acc-modal__dialog{width:100%;max-width:100%;padding:12px;gap:24px;}
  #acc-pwd-modal .acc-modal__title{font-size:18px;}
  #acc-pwd-modal .acc-modal__close{width:32px;height:32px;}
  #acc-pwd-modal .acc-pwd-field__label{font-size:14px;line-height:20px;}
  #acc-pwd-modal .acc-pwd-field__input{height:44px;font-size:14px;line-height:20px;padding:0 40px 0 12px;}
  #acc-pwd-modal .acc-pwd-submit{height:44px;border-radius:8px;font-size:14px;line-height:18px;}
}

/* Larger modal variant — для Add payment method (potrzebuje більше місця для полів) */
.acc-modal__dialog--lg{max-width:480px;}
.acc-modal__dialog--md{max-width:480px;}
.acc-modal__dialog--sm{max-width:380px;}

/* Modal head з центрованим title (для DOB-модалки) */
.acc-modal__head--center{text-align:center;flex-direction:column-reverse;align-items:center;padding-bottom:6px;}
.acc-modal__head--center .acc-modal__close{position:absolute;top:12px;right:12px;}
.acc-modal__head--center .acc-modal__title{font-size:18px;}

/* ═══════════════════════════════════════════════════════════════════
   DOB modal — Figma 806:83337 1:1
   Container 640w hug-height, padding 24, gap 40 між блоками:
     Block 1: Title 32/500 + Subtitle 16/400 #606162 (gap 12)
     Block 2: DOB field (label 16/500 + 3 selects 100/160/110×48 r10 + helper 14/400 #606162) gap 8
     Block 3: Buttons row space-between: Skip (hug, 48h) + Save (200×48 #392923)
   ═══════════════════════════════════════════════════════════════════ */
#acc-dob-modal .acc-modal__dialog{
  width:640px;max-width:calc(100vw - 32px);
  padding:24px;
  position:relative;
  /* hug-height (no fixed min-height) */
}
#acc-dob-modal .acc-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.2);}

/* Close button — absolute top-right */
#acc-dob-modal .acc-dob-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;
  border:0;background:transparent;cursor:pointer;
  color:#131314;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .15s;
  z-index:2;
}
#acc-dob-modal .acc-dob-close:hover{background:rgba(0,0,0,.06);}

/* Form — column align-center, gap 40 between BLOCKS */
.acc-dob-form{
  display:flex;flex-direction:column;
  align-items:center;
  gap:40px;
  padding:0;margin:0;
  width:100%;
}

/* ── Block 1: Title + Subtitle (gap 12) ── */
.acc-dob-title-block{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;width:100%;
}
.acc-dob-title{
  margin:0;
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;
  text-align:center;
  letter-spacing:0;
}
.acc-dob-subtitle{
  margin:0;
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;
  text-align:center;
}

/* ── Block 2: DOB field-block (gap 8) ── */
.acc-dob-field-block{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;
}
.acc-dob-field{
  display:flex;flex-direction:column;
  gap:4px;  /* label → row 4px (standard, see feedback_field_label_gap_4px) */
}
.acc-dob-field__label{
  font:500 16px/1 'Inter',sans-serif;color:#131314;
  margin:0;padding:0;display:block;
  text-align:left;
}
.acc-dob-row{
  display:flex;gap:8px;align-items:flex-end;
}
.acc-dob-row select{
  height:48px;flex-shrink:0;
  padding:12px;padding-right:36px;
  background:#FFFFFF;
  border:1px solid #DDDDDD;border-radius:10px;
  font:400 16px/1.375 'Inter',sans-serif;color:#131314;
  outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1l6 6 6-6' stroke='%23131314' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  box-sizing:border-box;
}
.acc-dob-row select[name="dob_day"]   { width:100px; }
.acc-dob-row select[name="dob_month"] { width:160px; }
.acc-dob-row select[name="dob_year"]  { width:110px; }
.acc-dob-row select:focus{border-color:#131314;}
.acc-dob-helper{
  margin:0;
  font:400 14px/1.43 'Inter',sans-serif;color:#606162;
  text-align:center;
}
.acc-dob-error{
  font:400 13px/1.4 'Inter',sans-serif;
  color:#c0392b;
  background:#fdecea;border:1px solid #fadbd7;
  padding:8px 12px;border-radius:8px;
  text-align:center;
}

/* ── Block 3: Buttons row (space-between) ── */
.acc-dob-actions{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  gap:12px;
}
.acc-dob-skip{
  height:48px;padding:12px;
  background:#FFFFFF;border:0;cursor:pointer;
  font:500 16px/1.25 'Inter',sans-serif;color:#131314;
  text-align:center;
}
.acc-dob-skip:hover{color:#606162;}
.acc-dob-submit{
  width:200px;height:48px;padding:12px;
  background:#392923;color:#FFFFFF;
  border:0;border-radius:10px;cursor:pointer;
  font:500 16px/1.25 'Inter',sans-serif;
  text-align:center;
  transition:background .15s;
}
.acc-dob-submit:hover{background:#4D382E;}

/* Responsive — Figma тільки desktop, але адаптуємо під OneTap brkpts */
@media (max-width:700px){
  #acc-dob-modal .acc-modal__dialog{width:calc(100vw - 16px);padding:20px;}
  .acc-dob-form{gap:24px;}
  .acc-dob-title{font-size:24px;}
  .acc-dob-subtitle{font-size:14px;}
}
@media (max-width:420px){
  .acc-dob-row select[name="dob_day"]   { width:80px; }
  .acc-dob-row select[name="dob_month"] { width:130px; }
  .acc-dob-row select[name="dob_year"]  { width:90px; }
  .acc-dob-row select{font-size:14px;padding-left:12px;}
  .acc-dob-submit{width:auto;flex:1;}
}

/* legacy .acc-dob-note застаріле (twig тепер використовує .acc-dob-helper) */
.acc-dob-note{display:none;}

/* ── Birthday modal — святкова версія "Celebrate with us" з купоном-подарунком ── */
.acc-bday-body{align-items:stretch;text-align:center;}
.acc-bday-subtitle{font-size:13.5px;color:var(--otac-text);font-weight:500;}
.acc-bday-lead{font-size:12.5px;color:#6a6a6a;line-height:1.5;margin-bottom:6px;}

.acc-bday-card{
  background:#fff;border:1px solid #ececec;border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;
  text-align:center;align-items:center;
}
.acc-bday-card__badge{margin-bottom:2px;}
.acc-bday-card__discount{
  font-size:18px;font-weight:700;color:#0a8a52;
  letter-spacing:-.01em;
}
.acc-bday-card__name{font-size:12px;color:var(--otac-text);font-weight:600;}
.acc-bday-card__scope{font-size:11px;color:#9a9a9a;}
.acc-bday-card__divider{
  border-top:1px dashed #d0d0d0;margin:6px -16px 4px;height:0;width:calc(100% + 32px);
}
.acc-bday-card__code-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#f5f5f5;border-radius:6px;padding:6px 12px;
  margin:4px 0 2px;width:100%;
}
.acc-bday-card__code{
  font-family:'SF Mono','Menlo',monospace;font-size:13px;
  color:var(--otac-text);font-weight:600;letter-spacing:.05em;
  background:transparent;
}
.acc-bday-card__valid{font-size:11px;color:#9a9a9a;}

.acc-bday-actions{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;
}
.acc-bday-skip{
  background:none;border:0;cursor:pointer;
  font-size:13px;color:#6a6a6a;font-weight:500;padding:8px 4px;
}
.acc-bday-skip:hover{color:var(--otac-text);text-decoration:underline;}
.acc-bday-actions .acc-btn--dark{padding:10px 22px;font-size:13px;text-decoration:none;}

/* ── Birthday popup — Figma 806:83814 audit fixes ─────────────────────────
   Task 1: balloons | Task 4: hero | Task 5: title | Task 8: code box | Task 2: ticket-card */

/* Dialog must allow overflow so floating balloons can stick out past corners.
   Base `.acc-modal__dialog{overflow:hidden}` is scoped via this child class. */
.acc-bday-dialog{position:relative;overflow:visible;}
.acc-bday-dialog .acc-modal__body{overflow:auto;}

/* Floating balloons — 4 around dialog, large per Figma 806:83814 macet.
   z-index:10 so they render ON TOP of dialog content (per Figma — balloons float in front). */
.acc-bday-balloon{
  position:absolute;width:120px;height:auto;pointer-events:none;z-index:10;
  user-select:none;
}
.acc-bday-balloon--tl{top:120px;left:-60px;width:130px;}
.acc-bday-balloon--tr{top:280px;right:-70px;width:140px;}
.acc-bday-balloon--bl{top:430px;left:-55px;width:115px;}
.acc-bday-balloon--br{top:450px;right:-60px;width:130px;}
@media (max-width:500px){
  /* Mobile sizes per Figma — large balloons partially outside dialog edges */
  .acc-bday-balloon--tl{top:110px;left:-50px;width:110px;}
  .acc-bday-balloon--tr{top:240px;right:-58px;width:120px;}
  .acc-bday-balloon--bl{top:400px;left:-48px;width:100px;}
  .acc-bday-balloon--br{top:430px;right:-50px;width:115px;}
}
/* All inner content above balloons */
.acc-bday-hero, .acc-bday-head, .acc-bday-body{position:relative;z-index:1;}

/* Hero banner — beaver scene, full-width with rounded top corners matching dialog */
.acc-bday-hero{
  margin:0 0 12px;
  height:140px;overflow:hidden;
  border-radius:14px 14px 0 0;
}
.acc-bday-hero__img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:500px){
  .acc-bday-hero{height:120px;}
}

/* Title override — Figma uses 20px medium; base modal uses 17px bold */
.acc-bday-title{font-size:20px !important;font-weight:500 !important;letter-spacing:-.01em;}

/* Coupon card — ticket-style with real D-cutouts using CSS mask.
   The mask cuts semi-circle holes at left/right edges of each section, so the
   card border curves INWARD at those points (border-radius alone can't do this).
   __top and __bottom share the cut Y position (notch_y from bottom of __top). */
.acc-bday-card{
  background:transparent;border:0;border-radius:0;
  padding:0;display:flex;flex-direction:column;gap:0;
  text-align:center;align-items:stretch;
  position:relative;overflow:visible;
}
.acc-bday-card__top{
  padding:16px 16px 14px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:1px solid #ececec;border-bottom:0;
  border-radius:8px 8px 0 0;
  position:relative;
  /* Cut two semicircle notches from BOTTOM edge (left + right). Mask hides border. */
  -webkit-mask-image:
    radial-gradient(circle 10px at 0 100%, transparent 9px, #000 10px),
    radial-gradient(circle 10px at 100% 100%, transparent 9px, #000 10px);
          mask-image:
    radial-gradient(circle 10px at 0 100%, transparent 9px, #000 10px),
    radial-gradient(circle 10px at 100% 100%, transparent 9px, #000 10px);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.acc-bday-card__bottom{
  padding:14px 16px 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1px solid #ececec;border-top:0;
  border-radius:0 0 8px 8px;
  position:relative;
  /* Cut two semicircle notches from TOP edge (left + right) — mirrors __top */
  -webkit-mask-image:
    radial-gradient(circle 10px at 0 0, transparent 9px, #000 10px),
    radial-gradient(circle 10px at 100% 0, transparent 9px, #000 10px);
          mask-image:
    radial-gradient(circle 10px at 0 0, transparent 9px, #000 10px),
    radial-gradient(circle 10px at 100% 0, transparent 9px, #000 10px);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.acc-bday-card__badge-img{width:32px;height:32px;display:block;}
.acc-bday-card__top .acc-bday-card__discount{margin:2px 0 0;}

/* Horizontal dashed line BETWEEN the two notch cutouts (per Figma macet).
   margin-x = notch radius so the line starts/ends exactly where the curves do. */
.acc-bday-card__divider-wrap{
  display:block;height:1px;margin:0 16px;
  background-image:linear-gradient(to right, #d0d0d0 50%, transparent 50%);
  background-size:8px 1px;background-repeat:repeat-x;
}

/* Code row polish — 8px radius, slightly larger padding */
.acc-bday-card__code-wrap{display:flex;flex-direction:column;gap:6px;width:100%;}
.acc-bday-card__code-row{
  border-radius:8px;padding:8px 14px;
}
.acc-bday-card__copy{
  background:none;border:0;cursor:pointer;color:#6a6a6a;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;flex-shrink:0;
}
.acc-bday-card__copy:hover{color:var(--otac-text);background:rgba(0,0,0,.05);}

/* Actions row — "Maybe later" (text-only, left) + "Start shopping" (filled, right).
   Override account-modals.css mobile column-reverse + full-width rules per Figma. */
.acc-bday-actions{
  display:flex !important;flex-direction:row !important;
  align-items:center;justify-content:space-between !important;
  gap:12px;margin-top:14px;
}
.acc-bday-actions .acc-bday-skip{
  background:none;border:0;cursor:pointer;
  font:500 14px/1 'Inter',sans-serif;color:#131314;
  padding:10px 4px;flex-shrink:0;width:auto !important;
}
.acc-bday-actions .acc-bday-skip:hover{text-decoration:underline;}
.acc-bday-actions .acc-btn--primary{
  width:160px !important;height:44px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  font:500 14px/1 'Inter',sans-serif;border-radius:8px;
  background:var(--otc-btn-primary,#392923);color:#fff;
  text-decoration:none;flex-shrink:0;
}
@media (max-width:500px){
  .acc-bday-actions{justify-content:space-between !important;}
  .acc-bday-actions .acc-btn--primary{width:160px !important;}
}

/* ── Delete account modal — warning + DELETE-confirm input + red CTA ── */
.acc-del-form{gap:14px;}
.acc-del-warn{
  font-size:16px;color:#131314;line-height:1.5;
}
.acc-del-input{font-family:'SF Mono','Menlo',monospace;letter-spacing:.04em;}
.acc-del-actions{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:4px;
}
.acc-del-actions .acc-btn{padding:12px 20px;font-size:14px;min-width:120px;}

/* ════════════════════════════════════════════════════════════════════
   Delete account modal — Figma 640×326 ПРЯМОКУТНИЙ (border-radius 0).
   Title 24px, gap 24px між блоками.
   Перебиваємо .acc-modal__dialog--sm { max-width:380px } та base 440.
   ════════════════════════════════════════════════════════════════════ */
#acc-del-modal .acc-modal__dialog,
#acc-del-modal .acc-modal__dialog.acc-modal__dialog--sm{
  width:640px !important;
  max-width:640px !important;
  min-height:326px !important;
  border-radius:0 !important;
}
#acc-del-modal .acc-modal__title{
  font:600 24px/1.21 'Inter',sans-serif !important;
  letter-spacing:0;
}
/* Head padding 24px з усіх боків — узгоджено з body */
#acc-del-modal .acc-modal__head{padding:24px 24px 0 !important;}
/* Body — 24px gap між блоками (warn / input / actions), 24px padding */
#acc-del-modal .acc-modal__body{
  padding:24px !important;
  gap:24px !important;
}
#acc-del-modal .acc-del-form{gap:24px !important;}
#acc-del-modal .acc-del-warn{
  font:400 16px/1.5 'Inter',sans-serif;
  color:#131314;
}
#acc-del-modal .acc-del-actions{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center;
  gap:12px;
  margin-top:0 !important;
}
#acc-del-modal .acc-del-actions .acc-btn{
  padding:12px 20px;font-size:14px;min-width:120px;
  border-radius:8px;
}

/* Danger button variant — Figma deep red #DC2626, used by Delete account */
.acc-btn--danger{background:#DC2626;color:#fff;border-color:#DC2626;}
.acc-btn--danger:hover{background:#B91C1C;color:#fff;border-color:#B91C1C;text-decoration:none;}
.acc-btn--danger:disabled{background:#FECACA;border-color:#FECACA;cursor:not-allowed;opacity:1;}

@media (max-width:700px){
  #acc-del-modal .acc-modal__dialog,
  #acc-del-modal .acc-modal__dialog.acc-modal__dialog--sm{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   NPS Score survey page — 1:1 reference (Step 1)
   ════════════════════════════════════════════════════════════════════ */

.nps-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  max-width:1160px;margin:0 auto;  /* 1120 form + 20*2 padding */
  padding:48px 20px;
  flex:1 0 auto;
  width:100%;
}
/* Title block — обмежуємо ширину 640, щоб довгі заголовки не розтягувалися на 1120 */
.nps-page__title,
.nps-page__subtitle,
.nps-page__rewards{
  max-width:640px;
  margin-left:auto;margin-right:auto;
}

/* Sticky footer для NPS — приклеює footer до низу viewport коли контент короткий + центрує форму */
body:has(.nps-page){
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body:has(.nps-page) > .wrap{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
body:has(.nps-page) > .wrap > main,
body:has(.nps-page) > .wrap > .container{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}
body:has(.nps-page) > .wrap > footer,
body:has(.nps-page) > .wrap > .onetap-footer{
  flex-shrink:0;
}
/* ── NPS Page typography — Figma 572-63040 ─────────────────── */
.nps-page__title{
  font:500 32px/1.21 'Inter',sans-serif;  /* Figma: Text Font/32px Medium */
  color:#131314;                            /* Figma: Text */
  margin:0 0 8px;
  letter-spacing:-.005em;
}
.nps-page__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;  /* Figma: Text Font/16px Regular */
  color:#606162;                            /* Figma: '400' */
  margin:0 0 8px;
}
.nps-page__rewards{
  font:600 16px/1.375 'Inter',sans-serif;  /* Figma: Text Font/16px SemiBold */
  color:#606162;
  margin:0 0 40px;
  display:inline-flex;align-items:center;gap:6px;
}
.nps-page__rewards-icon{
  /* Гарантуємо рендер 🎁 emoji незалежно від системного шрифту */
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji','EmojiOne Color',sans-serif;
  display:inline-block;line-height:1;
}

.nps-form{
  width:100%;max-width:1120px;margin:0 auto;
  display:flex;flex-direction:column;gap:16px;
}

/* ── Slider numbers row — Figma layout_VXLKNO ──────────────
   row: justify-content space-between, align-items flex-end. Each cell column
   с цифрою + 1×14 separator + (для active) 30×30 knob absolute поверх. */
.nps-slider{
  position:relative;width:100%;
  padding:24px 0 36px;  /* верх — простір для зростання тексту active, низ — для absolute knob */
}
.nps-slider__numbers{
  display:flex;justify-content:space-between;align-items:flex-end;
  width:100%;
  position:relative;
}
.nps-slider__num{
  /* reset native button */
  background:transparent;border:0;padding:0;cursor:pointer;
  /* column layout — цифра зверху, риска знизу */
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:16px;height:32px;
  position:relative;
  font:400 14px/1.43 'Inter',sans-serif;  /* Figma: 14 Regular */
  color:#606162;                            /* Figma: '400' */
  transition:font-weight .12s, color .12s, height .12s;
}
.nps-slider__num:hover{color:#131314;}
.nps-slider__num:focus-visible{outline:2px solid #392923;outline-offset:4px;border-radius:4px;}
.nps-slider__num-text{display:block;line-height:1;}
.nps-slider__num-mark{
  /* Vertical separator 1×14 #BCBCBC */
  display:block;width:1px;height:14px;background:#BCBCBC;
}
.nps-slider__num-knob{
  /* 30×30 white circle з border, position absolute relative to cell,
     центрується left:50% transform:translateX(-50%) → гарантовано над цифрою.
     Vertical center збігається з центром track-bar (top:46+15 = середина track). */
  position:absolute;top:46px;left:50%;
  transform:translate(-50%, 0);
  width:30px;height:30px;border-radius:100px;
  background:#FFFFFF;
  border:1px solid #DDDDDD;                 /* Figma: '100' */
  box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
  z-index:2;                                /* над track-bar */
  display:flex;align-items:center;justify-content:center;
}
.nps-slider__num-knob-dot{
  /* Inner dark dot — Figma fill_VK3EG4 #392923. Knob має padding 8 (30-16=14 inner area). */
  display:block;
  width:14px;height:14px;border-radius:100px;
  background:#392923;
}

/* Active cell — Figma layout_J3IVQY (height 38, 16 SemiBold) */
.nps-slider__num.is-active{
  height:38px;
  font:600 16px/1.375 'Inter',sans-serif;
  color:#131314;
}
.nps-slider__num.is-active .nps-slider__num-knob{opacity:1;}

/* Ghost knob — показуємо knob на cell n=5 з зниженою прозорістю при initial state
   (.nps-slider.is-pristine + .nps-slider__num.is-ghost). Підказка для користувача: можна клікати.
   Як тільки користувач клікає будь-який номер — клас is-pristine знімається через JS, ghost зникає. */
.nps-slider.is-pristine .nps-slider__num.is-ghost .nps-slider__num-knob{
  opacity:.45;
  transition:opacity .25s ease;
}
.nps-slider.is-pristine .nps-slider__num.is-ghost:hover .nps-slider__num-knob{
  opacity:.7;
}

/* ── Horizontal track bar — Figma Frame 891 (layout_NKE71D) ──
   Full width × 14px pill (#F7F7F7 fill, radius 9). Knob лежит ON it (centerline matches).
   Position absolute below numbers row, на 46px вниз от верха .nps-slider__num (cell.top + 46 → коинцідент із knob.top).
   Knob's vertical center при top:46+15 = 61 → track centerline at top:46+7 = 53 (i.e. knob viseть слегка над track? — checkbox below). */
.nps-slider__track{
  position:absolute;
  left:0;right:0;
  /* Track centerline = knob centerline.
     slider padding-top 24 + cell top:0 + knob.top:46 + knob.height/2:15 = 85px = knob center.
     track top = 85 - 7 (half of 14) = 78. */
  top:78px;
  height:14px;
  background:#F7F7F7;                        /* Figma: '50' */
  border-radius:9px;                         /* Figma: borderRadius 9 */
  z-index:1;
  cursor:pointer;                            /* user розуміє що track клікабельний */
  touch-action:none;                         /* для drag з touch */
}
.nps-slider__track:hover{background:#EFEFEF;}

/* ── Legend bar — Figma layout_ZZL7ZE ───────────────────── */
.nps-slider__legend{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;
  background:#F7F7F7;                       /* Figma: '50' */
  border-radius:8px;
  padding:12px;
  margin-top:8px;
}
.nps-slider__legend-btn{
  background:transparent;border:0;padding:6px 8px;cursor:pointer;
  font:400 16px/1.375 'Inter',sans-serif;  /* Figma: 16 Regular */
  color:#131314;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:6px;
  transition:background .12s;
}
.nps-slider__legend-btn:hover{background:rgba(0,0,0,.04);}
.nps-slider__legend-btn:focus-visible{outline:2px solid #392923;outline-offset:2px;}

/* ── Error message ─────────────────────────── */
.nps-error{
  background:#fdecea;color:#c0392b;border:1px solid #fadbd7;
  padding:10px 14px;border-radius:8px;
  font:400 13px/1.4 'Inter',sans-serif;
}

/* ── Submit button — Figma layout_6ZHL4H (fill_IZ06Y6 #392923) ── */
.nps-actions{display:flex;justify-content:center;margin-top:24px;}
.nps-submit{
  width:200px;height:48px;
  padding:12px;
  background:#392923;
  color:#FFFFFF;
  border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;   /* Figma: Button Font/Large */
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;justify-content:center;align-items:center;
  transition:background .12s, transform .08s;
}
.nps-submit:hover:not(:disabled){background:#4d382e;}
.nps-submit:active:not(:disabled){transform:scale(.97);}
.nps-submit:disabled{opacity:.5;cursor:not-allowed;}
.nps-submit:focus-visible{outline:2px solid #392923;outline-offset:2px;}
.nps-submit--link{color:#FFFFFF;}

/* ── Адаптив 4 breakpoints OneTap (1367/992/501/500) ────── */
@media (max-width:1367px){
  .nps-form{max-width:960px;}
}
@media (max-width:992px){
  .nps-form{max-width:720px;}
}
@media (max-width:501px){
  .nps-page__title{font-size:22px;}
  .nps-page__rewards{margin-bottom:28px;}
  .nps-form{max-width:100%;}
  .nps-slider__num{font-size:12px;width:14px;}
  .nps-slider__num.is-active{font-size:14px;}
  .nps-slider__num-knob{width:24px;height:24px;top:42px;}
  .nps-slider__legend-btn{font-size:13px;padding:4px 6px;}
  .nps-submit{width:100%;max-width:280px;}
}
@media (max-width:500px){
  .nps-page{padding:24px 16px;}
}

@media (max-width:560px){
  .nps-page{margin:28px auto 40px;}
  .nps-page__title{font-size:20px;}
  .nps-slider__num{font-size:11px;padding:4px 0;}
  .nps-slider__num.is-active{font-size:14px;}
  .nps-slider__legend{font-size:11.5px;flex-direction:row;}
  .nps-submit{width:100%;}
}

/* ── NPS Step 2 — Positive flow Path A (8-10): Delivery + Customer service stars ── */
/* Step 3 (delivery + service stars) — Figma 576-64922 layout_M6988N padding 0 500 → inner 1000, content 920 */
.nps-page--step3{position:relative;max-width:1000px;}
.nps-page--step3 .nps-page__title,
.nps-page--step3 .nps-page__subtitle{
  max-width:920px;margin-left:auto;margin-right:auto;
  font-family:'Inter',sans-serif;
}
.nps-page--step3 .nps-page__title{font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin-bottom:8px;}
.nps-page--step3 .nps-page__subtitle{font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0;}
/* Progress bar — same Figma spec as Step 2 (5 segments × height 6 radius 12, padding 0 172, dark #392923 active) */
.nps-page--step3 .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;   /* 920 - 172*2 */
  margin:0 auto 32px;
}
.nps-page--step3 .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;transition:background .2s;
}
.nps-page--step3 .nps-progress__seg.is-filled{background:#392923;}

/* Back link top-left */
.nps-back{
  position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;color:var(--otac-text);text-decoration:none;font-weight:500;
  padding:6px 8px;
}
.nps-back:hover{color:#000;text-decoration:none;}

/* 4-segment progress bar */
.nps-progress{
  display:flex;align-items:center;gap:6px;
  width:300px;max-width:60%;
  margin:8px auto 28px;
}
.nps-progress__seg{
  flex:1 1 auto;height:3px;border-radius:2px;
  background:#e0e0e0;
  transition:background .2s;
}
.nps-progress__seg.is-filled{background:#1a1a1a;}

/* Step 2 form: 2 rate rows + actions row */
.nps-step3-form{
  width:100%;max-width:920px;margin:80px auto 0;  /* 80px gap від subtitle до rate rows — Figma layout_M6988N gap */
  display:flex;flex-direction:column;gap:40px;
}

/* Rate row: label left, stars right (Figma layout_K5RJRH row space-between) */
.nps-rate-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:0;
  border-bottom:0;
}
.nps-rate-row__label{
  font:400 16px/1.375 'Inter',sans-serif;
  color:#131314;
}

/* Stars row — Figma layout_J7149F gap 12, star 32×32 */
.nps-stars{display:inline-flex;gap:12px;}
.nps-star{
  background:none;border:0;cursor:pointer;
  padding:0;line-height:0;
  color:#DDDDDD;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s, transform .12s;
}
.nps-star svg{display:block;fill:currentColor;width:32px;height:32px;}
.nps-star:hover{transform:scale(1.05);}
.nps-star.is-filled{color:#F79E02;}    /* Figma Yellow */
.nps-star:focus-visible{outline:2px solid #392923;outline-offset:2px;border-radius:4px;}

/* Bottom row: Skip left + Continue dark right — Figma layout_4EU1JN */
.nps-step3-actions{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:24px;
}
.nps-step3-skip{
  background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:12px;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;
  color:#131314;text-decoration:none;
  transition:background .12s;
}
.nps-step3-skip:hover{background:#F7F7F7;color:#131314;text-decoration:none;}
.nps-step3-skip:focus-visible{outline:2px solid #392923;outline-offset:2px;}
.nps-step3-submit{
  width:200px;height:48px;padding:12px;
  background:#392923;color:#FFFFFF;
  border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, transform .08s;
}
.nps-step3-submit:hover:not(:disabled){background:#4d382e;}
.nps-step3-submit:active:not(:disabled){transform:scale(.97);}
.nps-step3-submit:disabled{opacity:.5;cursor:not-allowed;}

@media (max-width:1367px){
  .nps-step3-form{max-width:800px;}
  .nps-page--step3 .nps-page__title,
  .nps-page--step3 .nps-page__subtitle{max-width:800px;}
}
@media (max-width:992px){
  .nps-step3-form{max-width:640px;}
  .nps-page--step3 .nps-page__title,
  .nps-page--step3 .nps-page__subtitle{max-width:640px;}
  .nps-page--step3 .nps-progress{max-width:480px;}
}
@media (max-width:560px){
  .nps-back{position:static;margin-bottom:8px;}
  .nps-page--step3 .nps-progress{margin:0 auto 18px;width:auto;max-width:100%;}
  .nps-step3-form{max-width:100%;gap:32px;}
  .nps-rate-row{flex-wrap:wrap;gap:10px;}
  .nps-rate-row__label{flex:1 1 auto;font-size:14px;}
  .nps-stars{gap:8px;}
  .nps-star, .nps-star svg{width:28px;height:28px;}
  .nps-step3-actions{flex-direction:column;gap:12px;align-items:stretch;}
  .nps-step3-skip, .nps-step3-submit{width:100%;}
}

/* ── NPS Step 3 — text feedback з voice-to-text recording ── */
.nps-page--step4{max-width:760px;}
.nps-step4-form{width:100%;display:flex;flex-direction:column;gap:18px;margin-top:16px;}

/* Картка з полем + recording row */
.nps-step4-card{
  background:#fff;border:1px solid #e5e5e5;border-radius:12px;
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;
  position:relative;
}
.nps-step4-card__label{font-size:13px;color:var(--otac-text);font-weight:600;}
.nps-step4-card__textarea-wrap{position:relative;}
.nps-step4-card__textarea{
  width:100%;min-height:78px;
  border:0;outline:none;background:transparent;
  font-size:14px;color:var(--otac-text);line-height:1.5;
  resize:vertical;
  font-family:inherit;
}
.nps-step4-card__textarea::placeholder{color:#9a9a9a;}

/* Avatar bubble (зелений кружечок з ініціалом) — в правому-нижньому куті textarea */
.nps-step4-avatar{
  position:absolute;
  right:-10px;bottom:-22px;
  width:42px;height:42px;border-radius:50%;
  background:#16a085;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:600;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  z-index:1;
}

.nps-step4-card__divider{height:1px;background:#f0f0f0;margin:4px 0;}

/* Recording row: text-block + Start-recording button */
.nps-step4-card__rec-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.nps-step4-card__rec-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.nps-step4-card__rec-title{font-size:13px;color:var(--otac-text);font-weight:600;}
.nps-step4-card__rec-sub{font-size:12px;color:#6a6a6a;line-height:1.4;}

.nps-rec-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #e5e5e5;border-radius:999px;
  padding:8px 14px;font-size:13px;color:var(--otac-text);font-weight:500;
  cursor:pointer;flex-shrink:0;
  transition:border-color .12s, background .12s;
}
.nps-rec-btn:hover{border-color:var(--otac-text);}
.nps-rec-btn__dot{
  width:8px;height:8px;border-radius:50%;
  background:transparent;flex-shrink:0;
  transition:background .12s;
}
.nps-rec-btn__mic{flex-shrink:0;}
.nps-rec-btn__timer{
  font-variant-numeric:tabular-nums;font-size:12px;color:#9a9a9a;
}

/* Recording state: red dot pulsing, label changes to "Stop" */
.nps-rec-btn.is-recording{
  border-color:#e74c3c;background:#fdecea;color:#c0392b;
}
.nps-rec-btn.is-recording .nps-rec-btn__dot{
  background:#e74c3c;
  animation:nps-rec-pulse 1s infinite;
}
.nps-rec-btn.is-recording .nps-rec-btn__mic{display:none;}
@keyframes nps-rec-pulse{
  0%   { box-shadow:0 0 0 0 rgba(231,76,60,.55); }
  70%  { box-shadow:0 0 0 6px rgba(231,76,60,0); }
  100% { box-shadow:0 0 0 0 rgba(231,76,60,0); }
}

@media (max-width:560px){
  .nps-step4-card__rec-row{flex-direction:column;align-items:stretch;}
  .nps-rec-btn{justify-content:center;}
  .nps-step4-avatar{width:36px;height:36px;font-size:15px;right:-6px;bottom:-18px;}
}

/* ── NPS Step 4 — Rate your products: product row (image + ratings) + textarea card + attach ── */
.nps-page--step5{max-width:760px;}
.nps-step5-form{width:100%;display:flex;flex-direction:column;gap:18px;margin-top:12px;}

/* Product row: ліва колонка (image + name) + права (ratings stacked) */
.nps-prod-row{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;align-items:start;
  padding:18px 0;
}
.nps-prod-row__product{display:flex;flex-direction:column;align-items:center;gap:10px;}
.nps-prod-row__img{
  width:120px;height:120px;border-radius:10px;overflow:hidden;
  background:#fafafa;border:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:center;
}
.nps-prod-row__img img{width:100%;height:100%;object-fit:cover;}
.nps-prod-row__name{
  font-size:12.5px;color:var(--otac-text);line-height:1.3;text-align:center;
  font-weight:500;
}

.nps-prod-row__ratings{display:flex;flex-direction:column;gap:18px;min-width:0;}
.nps-prod-row__line{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
}
.nps-prod-row__label{font-size:13px;color:var(--otac-text);font-weight:500;}
.nps-prod-row__recommend{display:flex;flex-direction:column;gap:8px;}

/* Smaller slider variant for 0-5 recommend */
.nps-slider--small .nps-slider__numbers{grid-template-columns:repeat(6, 1fr);margin-bottom:6px;}
.nps-slider--small .nps-slider__num{font-size:12px;padding:4px 0;}
.nps-slider--small .nps-slider__num.is-active{font-size:15px;}
.nps-slider--small .nps-slider__track{margin:6px 0 12px;}
.nps-slider--small .nps-slider__legend{font-size:11.5px;}

/* Step 4 textarea-card перевикористовує step3-card стилі */
.nps-step5-card{
  background:#fff;border:1px solid #e5e5e5;border-radius:12px;
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;
  position:relative;
}

/* Attach file row */
.nps-attach{
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  font-size:13px;color:var(--otac-text);font-weight:500;
  padding:6px 0;
  align-self:flex-start;
}
.nps-attach:hover{color:#000;}
.nps-attach svg{flex-shrink:0;}
.nps-attach__count{font-size:12px;color:#9a9a9a;font-weight:400;}

@media (max-width:768px){
  .nps-prod-row{grid-template-columns:1fr;gap:14px;}
  .nps-prod-row__product{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;}
  .nps-prod-row__img{width:96px;height:96px;}
  .nps-prod-row__name{text-align:left;font-size:13.5px;}
  .nps-prod-row__line{flex-direction:column;align-items:flex-start;}
}

/* ── NPS Step 5 — Share your experience: Google review ── */
.nps-page--step6{max-width:760px;}

.nps-step6-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:18px 0 24px;
  align-items:stretch;
}

.nps-step6-col{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  text-align:left;
}
.nps-step6-col__heading{font-size:15px;font-weight:700;color:var(--otac-text);margin:0;letter-spacing:-.005em;}
.nps-step6-col__desc{font-size:12.5px;color:#6a6a6a;line-height:1.5;margin:0 0 6px;}

.nps-step6-write-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;font-size:13px;
  align-self:flex-start;
}

/* Right card з stars + Google logo */
.nps-step6-card{
  background:#fff;border:1px solid #ececec;border-radius:12px;
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.nps-step6-card__label{font-size:12px;color:#6a6a6a;font-weight:500;}
.nps-step6-card__stars{display:inline-flex;gap:3px;}
.nps-step6-card__google{margin-top:4px;}

/* Bottom form: question + 2 buttons row */
.nps-step6-form{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:14px;text-align:center;
}
.nps-step6-q{font-size:13px;color:var(--otac-text);font-weight:500;}
.nps-step6-actions{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;justify-content:center;
}
.nps-step6-actions .acc-btn{padding:10px 22px;font-size:13px;}
.nps-step6-submit--highlight{box-shadow:0 0 0 3px rgba(26,26,26,.15);}

@media (max-width:560px){
  .nps-step6-grid{grid-template-columns:1fr;gap:14px;}
  .nps-step6-col{align-items:flex-start;}
  .nps-step6-write-btn{width:100%;justify-content:center;}
  .nps-step6-actions{width:100%;flex-direction:column-reverse;}
  .nps-step6-actions .acc-btn{width:100%;}
}

/* ── NPS Negative flow Step 2 (Path B 0-7) — issue checkboxes grid + textarea ── */
.nps-page--neg{max-width:760px;}
.nps-step2neg-form{
  width:100%;display:flex;flex-direction:column;gap:18px;margin-top:8px;
}

.nps-issue-block{display:flex;flex-direction:column;gap:10px;}
.nps-issue-block__label{
  font-size:13px;color:var(--otac-text);font-weight:600;
}

/* 3-col checkbox grid */
.nps-issue-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px 18px;
}
.nps-issue-cell{
  display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:13.5px;color:var(--otac-text);
}
.nps-issue-cell input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.nps-issue-cell__box{
  width:18px;height:18px;border-radius:5px;flex-shrink:0;
  background:#fff;border:1.5px solid #cfcfcf;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, border-color .12s;
}
.nps-issue-cell__box svg{opacity:0;transition:opacity .1s;}
.nps-issue-cell input:checked + .nps-issue-cell__box{background:var(--otc-btn-primary);border-color:var(--otc-btn-primary);}
.nps-issue-cell input:checked + .nps-issue-cell__box svg{opacity:1;}
.nps-issue-cell:hover .nps-issue-cell__box{border-color:var(--otac-text);}
.nps-issue-cell__label{line-height:1.3;}

/* Textarea — bordered, без card-wrapper (як на референсі) */
.nps-issue-textarea{
  width:100%;min-height:130px;
  background:#fff;border:1px solid #e5e5e5;border-radius:10px;
  padding:14px 16px;font-size:14px;color:var(--otac-text);line-height:1.5;
  outline:none;resize:vertical;font-family:inherit;
  transition:border-color .12s;
}
.nps-issue-textarea::placeholder{color:#9a9a9a;}
.nps-issue-textarea:focus{border-color:var(--otac-text);}

@media (max-width:768px){
  .nps-issue-grid{grid-template-columns:repeat(2, 1fr);gap:10px 12px;}
}
@media (max-width:420px){
  .nps-issue-grid{grid-template-columns:1fr;gap:10px;}
}

/* ── Branch Y/N step (negative flow step 4) — centered "No, thanks" + "Yes" buttons ── */
.nps-page--branch{text-align:center;}
.nps-branch-actions{
  display:flex;justify-content:center;align-items:center;
  gap:12px;
  margin:80px auto 60px;
  flex-wrap:wrap;
}
.nps-branch-btn{padding:11px 22px;font-size:14px;}

@media (max-width:560px){
  .nps-branch-actions{margin:24px auto 20px;flex-direction:column;width:100%;}
  .nps-branch-btn{width:100%;}
}

/* ── NPS Survey already completed — centered checkmark + title + subtitle ── */
.nps-completed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:60vh;
  padding:48px 20px;
  gap:14px;
}
.nps-completed__icon-wrap{
  width:54px;height:54px;border-radius:50%;
  background:#e6f7ee;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.nps-completed__title{
  font-size:22px;font-weight:700;color:var(--otac-text);
  margin:0;letter-spacing:-.01em;
}
.nps-completed__subtitle{
  font-size:13.5px;color:#9a9a9a;line-height:1.5;margin:0;
}

@media (max-width:560px){
  .nps-completed{min-height:50vh;}
  .nps-completed__title{font-size:18px;}
}

/* ─────────────────────────────────────────────────────────────────────
   NPS Negative-flow completion — Figma 606:66093 desktop / mobile
   Mascot 150×150 (matches positive thank-you) + title + 3-rows info card
   ───────────────────────────────────────────────────────────────────── */
.nps-page--completed-neg{
  max-width:1000px !important;text-align:center;
  padding-top:0 !important;     /* terminal page — no top padding */
}

/* Thanks block — mascot + title group (Figma layout_JM7XG2 column align center gap 40) */
.nps-thanks-neg{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px;
  width:100%;max-width:920px;margin:0 auto;     /* margin-top reset — page padding handles header gap */
}
.nps-thanks-neg__mascot{
  width:150px;height:150px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nps-thanks-neg__mascot img{display:block;width:100%;height:100%;object-fit:contain;}
.nps-thanks-neg__text{
  display:flex;flex-direction:column;gap:8px;width:100%;
}
.nps-thanks-neg__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0;
}
.nps-thanks-neg__heart{display:inline-block;margin-left:4px;line-height:1;}
.nps-thanks-neg__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0;
}

/* Info card — Figma layout_HNRDV6 width 600 fixed padding 24 gap 24 */
.nps-completed-neg__card{
  width:600px;max-width:100%;
  margin:80px auto 0;
  padding:24px;
  background:transparent;
  border:1px solid #DDDDDD;
  border-radius:8px;
  display:flex;flex-direction:column;gap:24px;
  text-align:left;
  box-sizing:border-box;
}
/* Row — Figma layout_IG4YHA row gap 12 */
.nps-completed-neg__row{
  display:flex;align-items:flex-start;gap:12px;
}
.nps-completed-neg__icon{
  width:24px;height:24px;color:#131314;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.nps-completed-neg__icon svg{display:block;}
/* Text col — Figma layout_U2Y9GS column gap 4 */
.nps-completed-neg__text{
  flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.nps-completed-neg__title{font:600 16px/1.375 'Inter',sans-serif;color:#131314;}
.nps-completed-neg__desc{font:400 16px/1.375 'Inter',sans-serif;color:#7D7D7D;}

.nps-completed-neg__actions{
  display:flex;justify-content:center;
  margin:40px auto 0;
}
.nps-completed-neg__cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:48px;padding:12px;
  background:#392923;color:#FFFFFF;text-decoration:none;
  border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;
  transition:background .12s;
}
.nps-completed-neg__cta:hover{background:#4d382e;color:#FFFFFF;text-decoration:none;}

/* ── Responsive ── */
@media (max-width:992px){
  .nps-thanks-neg,
  .nps-completed-neg__card{max-width:520px;}
}
@media (max-width:660px){
  .nps-completed-neg__card{width:100%;}
}
@media (max-width:501px){
  /* Mobile per design feedback — match positive thank-you sizing */
  .nps-page--completed-neg{padding-top:0 !important;}
  .nps-thanks-neg{gap:24px;}
  .nps-thanks-neg__mascot{width:75px;height:100px;}
  .nps-thanks-neg__title{font-size:20px;}
  .nps-thanks-neg__subtitle{font-size:14px;line-height:1.43;}
  /* 40px subtitle→card gap on mobile per user request */
  .nps-completed-neg__card{margin-top:40px;padding:16px;gap:20px;}
  .nps-completed-neg__actions{margin-top:32px;}
  .nps-completed-neg__cta{width:auto;min-width:160px;}
}

/* "Add Date of birth" invite — dashed-border button-card на профілі коли DOB не задано */
.acc-dob-invite{
  display:flex;align-items:center;gap:12px;
  background:transparent;
  border:2px dashed #cfcfcf;border-radius:14px;
  padding:18px 20px;
  width:100%;text-align:left;cursor:pointer;
  font-size:16px;font-weight:700;color:var(--otac-text);letter-spacing:-.005em;
  transition:border-color .15s, background .15s;
}
.acc-dob-invite:hover{border-color:var(--otac-text);background:#fafafa;}
.acc-dob-invite__icon{
  width:32px;height:32px;border-radius:8px;
  background:#f5f5f5;color:var(--otac-text);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.acc-dob-invite__text{flex:1 1 auto;}
.acc-dob-invite__chev{flex-shrink:0;color:#6a6a6a;}

/* ═══════════════════════════════════════════════════════════════════
   Add new address modal — Figma 1:1: width 480, fields 24px gap,
   labels 14/600 з 4px gap до input (per feedback_field_label_gap_4px).
   ═══════════════════════════════════════════════════════════════════ */
/* Dialog 600px, padding 24, gap 24 між head/form (Figma 707-63367) */
.acc-addr-modal__dialog{
  width:600px;max-width:calc(100vw - 32px);
  padding:24px;
  display:flex;flex-direction:column;gap:24px;
}
/* Header — заголовок 24px Medium, хрестик 40px, без власних padding/border */
.acc-addr-modal__dialog .acc-modal__head{padding:0;border:0;margin:0;}
.acc-addr-modal__dialog .acc-modal__title{font:500 24px/1.3 'Inter',sans-serif;letter-spacing:0;}
.acc-addr-modal__dialog .acc-modal__close{width:40px;height:40px;}

/* Form — поля 24px gap. Вища специфічність на padding, щоб перебити
   універсальний `.acc-modal__body{padding}` з ≤767 медіа-блоку. */
.acc-addr-form{display:flex;flex-direction:column;gap:24px;padding:0;}
.acc-addr-modal__dialog .acc-addr-form{padding:0;}
/* Лейбли 16 Medium; інпути 48px, border #DDDDDD, placeholder 16 #7D7D7D (scoped) */
.acc-addr-form .acc-pwd-field{gap:4px;}
.acc-addr-form .acc-pwd-field__label{font:500 16px/22px 'Inter',sans-serif;color:#131314;}
.acc-addr-form .acc-pwd-field__input{
  height:48px;padding:0 12px;
  font-size:16px;line-height:22px;color:#131314;
  border-color:#DDDDDD;
}
.acc-addr-form .acc-pwd-field__input::placeholder{color:#7D7D7D;}
.acc-addr-form .acc-pwd-field__input-wrap .acc-pwd-field__input{padding-right:44px;}
.acc-addr-form .acc-pwd-field__eye{color:#7D7D7D;}

.acc-addr-form__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}
/* [modal h-scroll fix] grid items default to min-width:auto → широкий дочірній
   (pretty-select shell / довгий текст) розпирав колонку і давав горизонтальний
   скрол модалки. Дозволяємо колонкам стискатися і глушимо будь-який x-overflow. */
.acc-addr-form__grid > *{ min-width:0; }
.acc-addr-form__grid .ps-shell{ max-width:100%; min-width:0; }
.acc-addr-form,
.acc-addr-modal__dialog,
.acc-addr-modal__dialog .acc-modal__body{ overflow-x:hidden; }
.acc-addr-form__select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1l6 6 6-6' stroke='%23131314' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:36px;
}
/* Custom checkbox "Set as default" — 20×20, #392923 (Figma) */
.acc-addr-form__check{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
  user-select:none;
}
.acc-addr-form__check input{position:absolute;opacity:0;pointer-events:none;}
.acc-addr-form__check-box{
  width:20px;height:20px;border-radius:4px;
  border:1px solid #DDDDDD;background:#FFFFFF;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s;
}
.acc-addr-form__check-box svg{opacity:0;transition:opacity .15s;}
.acc-addr-form__check input:checked + .acc-addr-form__check-box{background:#392923;border-color:#392923;}
.acc-addr-form__check input:checked + .acc-addr-form__check-box svg{opacity:1;}
.acc-addr-form__check-label{font:400 14px/1.43 'Inter',sans-serif;color:#131314;}

/* Cancel/Save row — кнопки 48px, radius 10, 16 Medium; Save мін-ширина 140 */
.acc-addr-form__actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.acc-addr-form__cancel{
  height:48px;padding:0 24px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:10px;
  font:500 16px/20px 'Inter',sans-serif;color:#131314;
  cursor:pointer;
}
.acc-addr-form__cancel:hover{background:#FAFAFA;}
.acc-addr-form__save{
  min-width:140px;height:48px;padding:0 24px;
  background:#392923;color:#FFFFFF;
  border:0;border-radius:10px;cursor:pointer;
  font:500 16px/20px 'Inter',sans-serif;
}
.acc-addr-form__save:hover{background:#4D382E;}

/* ═══════════════════════════════════════════════════════════════════
   Add pickup point modal — Shipping method radio cards + Pickup point button
   ═══════════════════════════════════════════════════════════════════ */
/* Dialog 600px, padding 24, gap 24 (Figma 1719-200635) */
.acc-pickup-modal__dialog{
  width:600px;max-width:calc(100vw - 32px);
  padding:24px;
  display:flex;flex-direction:column;gap:24px;
}
.acc-pickup-modal__dialog .acc-modal__head{padding:0;border:0;margin:0;}
.acc-pickup-modal__dialog .acc-modal__title{font:500 24px/1.3 'Inter',sans-serif;letter-spacing:0;}
.acc-pickup-modal__dialog .acc-modal__close{width:40px;height:40px;}

.acc-pickup-form{display:flex;flex-direction:column;gap:24px;padding:0;}
.acc-pickup-modal__dialog .acc-pickup-form{padding:0;}
.acc-pickup-section{display:flex;flex-direction:column;gap:16px;}
.acc-pickup-section__title{
  font:500 16px/22px 'Inter',sans-serif;color:#131314;
}
.acc-pickup-methods{display:flex;flex-direction:column;gap:12px;}
/* Метод — row: radio + інфо-колонка (label+logo / days) + ціна справа */
.acc-pickup-method{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  border:1px solid #DDDDDD;border-radius:8px;
  background:#FFFFFF;cursor:pointer;
  transition:border-color .15s, background .15s;
}
.acc-pickup-method:hover{border-color:#7D7D7D;}
.acc-pickup-method.is-active{
  border-color:#131314;
  background:rgba(57,41,35,0.05);
}
.acc-pickup-methods label {
  margin-bottom: 0;
}
.acc-pickup-method input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.acc-pickup-method__radio{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid #DDDDDD;background:#FFFFFF;
  flex-shrink:0;position:relative;box-sizing:border-box;
  transition:all .15s;
}
.acc-pickup-method.is-active .acc-pickup-method__radio{border-color:#392923;border-width:6px;}
.acc-pickup-method__info{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:6px;
}
.acc-pickup-method__head{display:flex;align-items:center;gap:6px;}
.acc-pickup-method__label{
  font:500 16px/22px 'Inter',sans-serif;color:#131314;
}
.acc-pickup-method__logo{
  height:26px;width:auto;object-fit:contain;
}
.acc-pickup-method__days{
  font:400 16px/22px 'Inter',sans-serif;color:#7D7D7D;
}
.acc-pickup-method__price{
  font:600 16px/22px 'Inter',sans-serif;color:#131314;
  margin-left:auto;text-align:right;flex-shrink:0;
}
/* Pickup-location — сіра кнопка (hug), Figma fill #F7F7F7, radius 10, h48 */
.acc-pickup-select{
  align-self:flex-start;
  height:48px;padding:0 12px;
  background:#F7F7F7;border:0;border-radius:10px;
  font:500 16px/20px 'Inter',sans-serif;color:#131314;
  text-align:center;cursor:pointer;
  transition:background .15s;
}
.acc-pickup-select:hover{background:#EFEFEF;}

@media (max-width:500px){
  /* Add pickup point — Figma 1719-200720 (Mobile): padding 12, заголовок 18,
     label/days 14px, кнопка локації 44px/radius8, кнопки футера в рядок. */
  .acc-pickup-modal__dialog{padding:12px;gap:24px;}
  .acc-pickup-modal__dialog .acc-modal__title{font-size:18px;}
  .acc-pickup-modal__dialog .acc-modal__close{width:32px;height:32px;}
  .acc-pickup-method__label{font-size:14px;line-height:20px;}
  .acc-pickup-method__days{font-size:14px;line-height:20px;}
  .acc-pickup-method__logo{height:22px;}
  .acc-pickup-select{height:44px;border-radius:8px;font-size:14px;}

  /* Add address — Figma 707-63314 (Mobile): padding 12, заголовок 18,
     поля 14px/44px, gap 12, City/State/ZIP у стовпчик, кнопки в рядок 44px. */
  .acc-addr-modal__dialog{padding:12px;gap:24px;}
  .acc-addr-modal__dialog .acc-modal__title{font-size:18px;}
  .acc-addr-modal__dialog .acc-modal__close{width:32px;height:32px;}
  .acc-addr-form{gap:12px;}
  .acc-addr-form .acc-pwd-field__label{font-size:14px;line-height:20px;}
  .acc-addr-form .acc-pwd-field__input{height:44px;font-size:14px;line-height:20px;padding:0 12px;}
  .acc-addr-form .acc-pwd-field__input-wrap .acc-pwd-field__input{padding-right:40px;}
  .acc-addr-form__grid{grid-template-columns:1fr;gap:12px;}
  .acc-addr-form__actions{gap:12px;margin-top:12px;}
  .acc-addr-form__cancel,
  .acc-addr-form__save{
    flex:1 1 0;min-width:0;height:44px;padding:12px;
    font-size:14px;line-height:18px;border-radius:8px;
  }
}

/* Universal modal responsive — гарантуємо адаптивність всіх модалів (password, payment, address) */
@media (max-width:767px){
  .acc-modal__dialog,
  .acc-modal__dialog--lg,
  .acc-modal__dialog--md{max-width:100%;}
  .acc-modal__head{padding:16px 16px 12px;}
  .acc-modal__body{padding:6px 16px 16px;}
  .acc-modal__title{font-size:16px;}
  .acc-pm-actions{flex-direction:column-reverse;gap:8px;}
  .acc-pm-actions .acc-btn{width:100%;text-align:center;padding:11px;}
  .acc-addr-form__grid{grid-template-columns:1fr;}
}

/* Payment method modal — accordion-style провайдери (поля під обраним) */
.acc-pm-form{gap:12px;}
.acc-pm-providers{display:flex;flex-direction:column;gap:10px;}

/* Wrapper навколо кожного провайдера — містить header (radio plate) і body (fields) */
.acc-pm-provider-row{
  background:#fff;border:1px solid #e5e5e5;border-radius:10px;
  overflow:hidden;
  transition:border-color .12s;
}
.acc-pm-provider-row.is-active{border-color:var(--otac-text);}

/* Header plate (radio + label + logo) — клікабельний */
.acc-pm-provider{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  cursor:pointer;
  transition:background .12s;
  margin:0;
}
.acc-pm-provider:hover{background:#fafafa;}
.acc-pm-provider input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.acc-pm-provider__radio{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:#fff;border:1.5px solid #cfcfcf;position:relative;
  transition:border-color .12s;
}
.acc-pm-provider input:checked + .acc-pm-provider__radio{border-color:var(--otc-btn-primary);}
.acc-pm-provider input:checked + .acc-pm-provider__radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--otc-btn-primary);
}
.acc-pm-provider__label{flex:1 1 auto;font-size:13.5px;color:var(--otac-text);font-weight:600;}
.acc-pm-provider__logo{flex-shrink:0;}

/* Provider body — поля під обраним провайдером.
   Згорнуто за замовчуванням (max-height:0), розгорнуто на .is-active. */
.acc-pm-provider-body{
  max-height:0;overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
  padding:0 14px;
  display:flex;flex-direction:column;gap:12px;
}
.acc-pm-provider-row.is-active .acc-pm-provider-body{
  max-height:600px;padding:6px 14px 14px;
  border-top:1px solid #f0f0f0;
}

.acc-pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Info-block для PayPal/Google Pay (без полів картки) */
.acc-pm-info{
  display:flex;gap:10px;align-items:flex-start;
  background:#f9fafb;border:1px solid #ececec;border-radius:8px;
  padding:10px 12px;
}
.acc-pm-info__text{font-size:12.5px;color:#3a3a3a;line-height:1.5;}

/* Billing address mini-section з checkbox */
.acc-pm-billing{display:flex;flex-direction:column;gap:8px;padding-top:6px;}
.acc-pm-billing__title{font-size:12.5px;color:var(--otac-text);font-weight:600;}
.acc-pm-billing__check{font-size:13px;}

/* Bottom actions row: Cancel ghost (left) + Save dark (right) */
.acc-pm-actions{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:6px;
}
.acc-pm-actions .acc-btn--ghost{padding:10px 22px;font-size:13px;}
.acc-pm-actions .acc-btn--dark{padding:10px 28px;font-size:13px;}

/* ════════════════════════════════════════════════════════════════════
   Sales & Offers page — 1:1 reference (3-col banner-style cards)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Sales & Offers — Figma 730:79109 (desktop) / 730:79078 (mobile).
   Ticket-картки 353×419: hero 160 (radial-градієнт + фото справа), body,
   перфорація «квитка», статусний низ (бар / промокод / повідомлення) + CTA.
   ════════════════════════════════════════════════════════════════════ */
.acc-so-page{display:flex;flex-direction:column;gap:20px;font-family:'Inter',sans-serif;}

/* Вкладки-фільтри: h36 r10; активна — сірий фон + темна рамка (Figma Toggle) */
.acc-so-tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
.acc-so-tabs::-webkit-scrollbar{display:none;}
.acc-so-tab{
  height:36px;padding:0 12px;border-radius:10px;flex:0 0 auto;
  background:#fff;border:1px solid #DDDDDD;color:#131314;
  font-family:inherit;font-size:14px;font-weight:400;line-height:1;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.acc-so-tab:hover{border-color:#B9B9B9;}
.acc-so-tab.is-active{background:#EDEDED;border-color:#131314;font-weight:500;}

.acc-so-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(353px, 100%), 353px));
  justify-content:start;
  gap:20px;
}

.acc-so-card{
  background:#fff;border:1px solid #DDDDDD;border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden;
  min-height:419px;
}
.acc-so-card[hidden]{display:none;}

/* Hero 160px: radial-градієнт (orange/violet чергуються), фото справа за край */
.acc-so-card__hero{
  position:relative;height:160px;flex:0 0 160px;overflow:hidden;
  display:flex;align-items:center;
}
.acc-so-card__hero--orange{background:radial-gradient(120% 170% at 28% 38%, #F7B253 40%, #F08E06 100%);}
.acc-so-card__hero--violet{background:#E9D7F8;}
.acc-so-card__hero--expired{filter:grayscale(1);}
.acc-so-card__hero-text{position:relative;z-index:2;padding:0 10px;display:flex;flex-direction:column;gap:4px;}
.acc-so-card__kicker{font-size:14px;font-weight:400;line-height:20px;color:#131314;}
.acc-so-card__headline{font-size:36px;font-weight:800;line-height:1.2;color:#131314;letter-spacing:-.01em;white-space:nowrap;}
.acc-so-card__img{
  position:absolute;top:0;right:0;height:100%;width:52%;
  object-fit:cover;object-position:center;z-index:1;display:block;
}
/* Figma-маскоти оффер-карток (нода 3824:253234, картка 332px, шапка 160px):
   offer  — посуда 181×260 @ x177,y-64 → лівий край 53.3%, вихід за верх/низ шапки;
   friend — бобер із подарунком 284×284 @ x109,y-37;
   bday   — фото-сцена на ВСЮ шапку (cover). Прозорі PNG → contain (пропорції
   боксу = пропорціям картинки, тож crop відсутній). */
.acc-so-card__img--offer{
  top:-40%;left:53.3%;right:auto;width:54.5%;height:162.5%;
  object-fit:contain;object-position:center;
}
.acc-so-card__img--friend{
  top:-23%;left:32.8%;right:auto;width:85.5%;height:177.5%;
  object-fit:contain;object-position:center;
}
.acc-so-card__img--bday{
  top:0;left:0;right:auto;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Birthday: фіолетова підкладка під фото (Figma fallback #EAD7F9). */
.acc-so-card__hero--bday{background:#EAD7F9;}

/* Body: назва 14/500 + опис 14/400 #5F6061 */
.acc-so-card__body{padding:12px;display:flex;flex-direction:column;gap:8px;}
.acc-so-card__title{font-size:14px;font-weight:500;line-height:20px;color:#131314;}
.acc-so-card__desc{font-size:14px;font-weight:400;line-height:20px;color:#5F6061;}

/* Перфорація «квитка»: пунктир + напівкруглі виїмки по краях */
.acc-so-card__perf{
  position:relative;height:24px;flex:0 0 24px;margin-top:auto;
  display:flex;align-items:center;
}
.acc-so-card__perf::before{
  content:'';flex:1;margin:0 24px;border-top:1px dashed #DDDDDD;
}
.acc-so-card__notch{
  position:absolute;top:0;width:24px;height:24px;border-radius:50%;
  background:#fff;border:1px solid #DDDDDD;box-sizing:border-box;
}
.acc-so-card__notch--l{left:-13px;}
.acc-so-card__notch--r{right:-13px;}

/* Низ: бар/код/повідомлення + кнопка */
.acc-so-card__foot{
  padding:12px;display:flex;flex-direction:column;gap:10px;flex:1 0 auto;
}

/* Прогрес-бар: трек h16 r100 #F7F7F7, заливка #332723 зі смужками */
.acc-so-bar{height:16px;border-radius:100px;background:#F7F7F7;overflow:hidden;}
.acc-so-bar__fill{
  display:block;height:100%;border-radius:50px;min-width:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.25) 0 2px, transparent 2px 10px), #332723;
}
.acc-so-bar__label{font-size:16px;font-weight:400;line-height:22px;color:#131314;text-align:center;}

/* Промокод-плашка: h40 r8 #F7F7F7, код по центру + copy */
.acc-so-code{
  height:40px;border-radius:8px;background:#F7F7F7;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.acc-so-code__value{font-size:14px;font-weight:500;color:#131314;letter-spacing:.02em;}
.acc-so-code__copy{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;padding:2px;cursor:pointer;color:#131314;
}
.acc-so-expires{font-size:14px;font-weight:400;color:#5F6061;text-align:center;}
.acc-so-expires b{font-weight:500;font-size:16px;color:#131314;}
.acc-so-expires span{color:#7D7D7D;}

.acc-so-msg{font-size:14px;font-weight:400;line-height:20px;color:#5F6061;text-align:center;padding:4px 12px;}
.acc-so-apply-msg{font-size:13px;color:#C82A2A;text-align:center;}

/* Expired: сірий блок + дата */
.acc-so-dead{
  border-radius:8px;background:#F7F7F7;color:#7D7D7D;
  font-size:14px;font-weight:500;line-height:20px;text-align:center;
  padding:10px 12px;
}
.acc-so-expired-on{font-size:14px;font-weight:400;color:#131314;text-align:center;padding-bottom:4px;}

/* Кнопки: h40 r8; dark = CTA з налаштувань теми, light = біла з рамкою */
.acc-so-btn{
  height:40px;border-radius:8px;margin-top:auto;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;
  text-decoration:none;transition:background .15s,border-color .15s;
  box-sizing:border-box;
}
.acc-so-btn--dark{
  background:var(--otc-btn-primary, #332723);color:var(--otc-btn-primary-text, #FFFFFF);border:none;
}
.acc-so-btn--dark:hover{background:var(--otc-btn-primary-hover, #4A3A33);color:var(--otc-btn-primary-text, #FFFFFF);text-decoration:none;}
.acc-so-btn--light{
  background:#fff;color:#131314;border:1px solid #DDDDDD;
}
.acc-so-btn--light:hover{border-color:#B9B9B9;color:#131314;text-decoration:none;}

/* Tablet ≤1199: 2 cols. Mobile ≤767: 1 col (Figma mobile 730:79078). */
@media (max-width:1199px){
  .acc-so-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:767px){
  .acc-so-grid{grid-template-columns:1fr;gap:16px;}
}

/* ════════════════════════════════════════════════════════════════════
   Loyalty Program — 1:1 reference (history table + edu section + tiers)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Loyalty Program (account) — Figma 730:81859 1:1
   Title + Credit transaction history card + bottom split (info col + 4 tier cards 2×2)
   ════════════════════════════════════════════════════════════════════ */
.acc-loyalty-page{display:flex;flex-direction:column;gap:24px;font-family:'Inter',sans-serif;}
.acc-loyalty-page__title{
  margin:0;
  font:600 24px/1.21 'Inter',sans-serif;
  color:var(--otac-text);
}

/* ─── Credit transaction history card ─────────────────────────── */
.acc-loyalty-tx{
  display:flex;flex-direction:column;gap:16px;
  padding:24px;
  background:#FFFFFF;
  border:1px solid var(--otac-border,#DDDDDD);
  border-radius:8px;
}
.acc-loyalty-tx__title{
  margin:0;
  font:600 20px/1.21 'Inter',sans-serif;
  color:var(--otac-text);
}
.acc-loyalty-tx__list{
  display:flex;flex-direction:column;
}
.acc-loyalty-tx__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-bottom:1px solid var(--otac-border,#DDDDDD);
}
.acc-loyalty-tx__row:last-child{border-bottom:0;}
.acc-loyalty-tx__meta{
  display:flex;flex-direction:column;gap:4px;
  min-width:0;flex:1 1 auto;
}
.acc-loyalty-tx__date{
  font:400 14px/1.43 'Inter',sans-serif;
  color:#7D7D7D;
}
.acc-loyalty-tx__label{
  font:400 16px/1.375 'Inter',sans-serif;
  color:var(--otac-text);
}
.acc-loyalty-tx__label a{
  color:var(--otac-text);text-decoration:underline;
}
.acc-loyalty-tx__label a:hover{color:#000;}
.acc-loyalty-tx__amount{
  flex-shrink:0;
  font:600 16px/1.375 'Inter',sans-serif;
  font-variant-numeric:tabular-nums;
}
.acc-loyalty-tx__amount--pos{color:#577B28;}
.acc-loyalty-tx__amount--neg{color:var(--otac-text);}

/* Pagination — Figma chip-style (40×40, F7F7F7 idle, white+border active) */
.acc-loyalty-tx__pagination{
  display:flex;justify-content:flex-start;align-items:center;
  gap:8px;
  margin-top:8px;
}
.acc-loyalty-tx__pagination .pagination{
  display:flex;gap:8px;margin:0;padding:0;list-style:none;
}
.acc-loyalty-tx__pagination .pagination > li > a,
.acc-loyalty-tx__pagination .pagination > li > span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  background:#F7F7F7;
  border:0;
  border-radius:8px;
  font:400 16px/1.21 'Inter',sans-serif;
  color:var(--otac-text);
  text-decoration:none;
}
.acc-loyalty-tx__pagination .pagination > .active > a,
.acc-loyalty-tx__pagination .pagination > .active > span{
  background:#FFFFFF;
  border:1px solid #7D7D7D;
}

/* ─── Bottom split: info col (left) + tier cards 2×2 (right) ─── */
.acc-loyalty-edu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.acc-loyalty-edu__info{
  display:flex;flex-direction:column;gap:34px;
}
.acc-loyalty-edu__block{
  display:flex;flex-direction:column;gap:8px;
}
.acc-loyalty-edu__title{
  margin:0;
  font:600 16px/1.375 'Inter',sans-serif;
  color:var(--otac-text);
}
.acc-loyalty-edu__body{
  margin:0;
  font:400 14px/1.43 'Inter',sans-serif;
  color:#606162;
}
/* "What are credits?" — body+pill in 1 row */
.acc-loyalty-edu__credits-row{
  display:flex;align-items:center;gap:8px;
}
.acc-loyalty-edu__credits-row .acc-loyalty-edu__body{flex:1;min-width:0;}
.acc-loyalty-edu__pill{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  padding:10px;
  background:#FFFFFF;
  border:1px solid var(--otac-border,#DDDDDD);
  border-radius:8px;
  font:500 14px/1.43 'Inter',sans-serif;
  color:var(--otac-text);
  white-space:nowrap;
}

/* ─── Tier cards (4 × 259×120, 2×2 grid) ─── */
.acc-loyalty-edu__tiers{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 259px));
  gap:20px;
  justify-content:end;
  align-content:start;
}
.acc-loyalty-tier{
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  width:259px;max-width:100%;
  min-height:120px;
  padding:10px 12px 8px;
  background:#FFFFFF;
  border:1px solid var(--otac-border,#DDDDDD);
  border-radius:14px;
  box-sizing:border-box;
  position:relative;overflow:hidden;
}
.acc-loyalty-tier--bronze   { background: radial-gradient(circle at 67% 140%, rgba(205,143,99,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color:#D3AB79; }
.acc-loyalty-tier--silver   { background: radial-gradient(circle at 67% 140%, rgba(140,145,156,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color:#879199; }
.acc-loyalty-tier--gold     { background: radial-gradient(circle at 67% 140%, rgba(252,215,101,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color:#EDC64B; }
.acc-loyalty-tier--platinum { background: radial-gradient(circle at 67% 140%, rgba(159,180,204,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color:#B2C1D2; }
.acc-loyalty-tier--current::before{
  content:"●";position:absolute;top:8px;right:10px;
  color:#577B28;font-size:14px;line-height:1;
}
.acc-loyalty-tier__head{
  display:flex;align-items:center;gap:8px;
}
.acc-loyalty-tier__icon{
  width:24px;height:26px;
  object-fit:contain;
  flex-shrink:0;
}
.acc-loyalty-tier__name{
  font:500 14px/1.43 'Inter',sans-serif;
  color:var(--otac-text);
}
.acc-loyalty-tier__rate{
  font:400 14px/1.43 'Inter',sans-serif;
  color:var(--otac-text);
}
.acc-loyalty-tier__example{
  font:400 14px/1.43 'Inter',sans-serif;
  color:var(--otac-text);
}

/* ─── Mobile responsive (OneTap 1367/992/501) ─── */
@media (max-width:1367px){
  .acc-loyalty-edu__tiers{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;}
  .acc-loyalty-tier{width:100%;max-width:none;}
}
@media (max-width:992px){
  .acc-loyalty-page__title{font-size:20px;}
  .acc-loyalty-tx{padding:16px;}
  .acc-loyalty-tx__title{font-size:18px;}
  .acc-loyalty-edu{grid-template-columns:1fr;gap:24px;}
  .acc-loyalty-edu__tiers{justify-content:stretch;}
  .acc-loyalty-edu__credits-row{flex-direction:column;align-items:flex-start;gap:12px;}
  .acc-loyalty-edu__pill{align-self:flex-start;}
}
@media (max-width:501px){
  .acc-loyalty-edu__tiers{grid-template-columns:1fr;gap:12px;}
  .acc-loyalty-tier{min-height:auto;padding:12px;}
  .acc-loyalty-tx__row{flex-wrap:wrap;}
  .acc-loyalty-tx__pagination .pagination > li > a,
  .acc-loyalty-tx__pagination .pagination > li > span{min-width:32px;height:32px;padding:0 8px;font-size:14px;}
}

/* ════════════════════════════════════════════════════════════════════
   Notification settings modal (.acc-ns-modal)
   Десктоп: центрована карточка ~480px з backdrop.
   Мобайл: full-screen панель з sticky header/footer.
   Toggles — iOS-style track + circle, зелений в активному стані.
   ════════════════════════════════════════════════════════════════════ */
body.acc-modal-open{overflow:hidden;}

.acc-ns-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.acc-ns-modal.is-open{display:flex;}
.acc-ns-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,0.45);
}
/* Dialog — Figma 698-62606: 600px, padding 24, gap 24, radius 8, без внутрішніх роздільників */
.acc-ns-modal__dialog{
  position:relative;
  width:100%;max-width:600px;
  background:#fff;border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  display:flex;flex-direction:column;gap:24px;
  padding:24px;
  max-height:calc(100vh - 40px);
  overflow:hidden;
}

/* Header — title 24px Medium + close 40px */
.acc-ns-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0;border:0;margin:0;
}
.acc-ns-modal__title{
  font:500 24px/1.3 'Inter',sans-serif;color:var(--otac-text);margin:0;letter-spacing:0;
}
.acc-ns-modal__close{
  width:40px;height:40px;border-radius:50%;
  background:transparent;border:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--otac-text);
  transition:background .15s;
}
.acc-ns-modal__close:hover{background:#f0f0f0;}

/* Body — список рядків, gap 24, без роздільників */
.acc-ns-modal__body{
  padding:0;overflow-y:auto;flex:0 1 auto;
  display:flex;flex-direction:column;gap:24px;
}
.acc-ns-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0;margin:0;cursor:pointer;
  user-select:none;
}
.acc-ns-row + .acc-ns-row{border-top:0;}
/* Wishlist-рядок: label + hint у колонку (Figma), тогл праворуч */
.acc-ns-row__text{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;}
.acc-ns-row__label{
  flex:1 1 auto;min-width:0;
  font:500 16px/22px 'Inter',sans-serif;color:var(--otac-text);
}
.acc-ns-row__text .acc-ns-row__label{flex:0 0 auto;}
.acc-ns-row__hint{
  margin:0;
  font:400 14px/20px 'Inter',sans-serif;color:#7D7D7D;
}

/* Toggle — Figma: 50×24, knob 20, ON #0FA379, OFF #DDDDDD */
.acc-ns-switch{
  position:relative;display:inline-flex;align-items:center;flex-shrink:0;
  width:50px;height:24px;
}
.acc-ns-switch input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.acc-ns-switch__track{
  position:absolute;inset:0;
  background:#DDDDDD;border-radius:100px;
  transition:background .18s;
}
.acc-ns-switch__track::after{
  content:'';position:absolute;
  top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:transform .2s;
}
.acc-ns-switch input:checked + .acc-ns-switch__track{background:#0FA379;}
.acc-ns-switch input:checked + .acc-ns-switch__track::after{transform:translateX(26px);}

/* Footer — Cancel (зліва) + Save (справа), space-between; кнопки 48px, radius 10.
   Селектор скоуплено під .acc-ns-modal, щоб перебити глобальний `footer:not(.onetap-footer)`
   (stylesheet.css), який інакше додає margin-top:120px, темний фон і білий текст. */
.acc-ns-modal .acc-ns-modal__foot{
  display:flex;justify-content:space-between;gap:12px;
  padding:0;margin:0;border:0;
  background:#fff;color:var(--otac-text);
}
.acc-ns-modal__foot .acc-btn{
  height:48px;padding:12px;border-radius:10px;
  font:500 16px/20px 'Inter',sans-serif;
  display:inline-flex;align-items:center;justify-content:center;
}
.acc-ns-modal__foot .acc-btn--primary{min-width:140px;}

/* Mobile — Figma 698-61746: bottom-sheet, padding 12, title 18px,
   футер-бар внизу (кнопки в рядок, рівні, 44px, radius 8, шрифт 14px). */
@media (max-width:600px){
  .acc-ns-modal{padding:0;align-items:flex-end;}
  .acc-ns-modal__dialog{
    max-width:none;width:100%;
    max-height:90vh;
    border-radius:8px 8px 0 0;
    padding:12px;gap:24px;
  }
  .acc-ns-modal__title{font-size:18px;}
  .acc-ns-modal__close{width:32px;height:32px;}
  .acc-ns-modal .acc-ns-modal__foot{
    margin:0 -12px -12px;padding:10px 12px;gap:10px;
    border-top:1px solid #DDDDDD;
    box-shadow:0 0 15px rgba(0,0,0,0.2);
  }
  .acc-ns-modal__foot .acc-btn{
    flex:1 1 0;height:44px;border-radius:8px;font-size:14px;line-height:18px;
  }
  .acc-ns-modal__foot .acc-btn--primary{min-width:0;}
}

/* ══════════════════════════════════════════════════════════════════════
   Onetap form primitives — used by Edit account, Address form, etc.
   Replaces bootstrap .form-control / .form-horizontal styling so the
   account inputs match the rest of the site (auth modal, checkout fields).
   ══════════════════════════════════════════════════════════════════════ */
.otac-form{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
.otac-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:500px){.otac-field-row{grid-template-columns:1fr;}}

.otac-field{display:flex;flex-direction:column;gap:4px;}
.otac-field>label{
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body);
  font-weight:var(--otac-fw-medium);
  line-height:1.3;
  color:var(--otac-text);
  display:flex;align-items:center;gap:2px;
}
.otac-field__req{color:#D32F2F;font-weight:600;}
.otac-field>input,
.otac-field>select,
.otac-field>textarea{
  width:100%;padding:12px 14px;
  font-family:var(--otac-ff);
  font-size:var(--otac-fs-body-lg);
  font-weight:var(--otac-fw-regular);
  line-height:var(--otac-lh-body);
  color:var(--otac-text);
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.otac-field>input:focus,
.otac-field>textarea:focus{
  outline:none;
  border-color:var(--otc-btn-primary);
  box-shadow:0 0 0 3px rgba(57,41,35,0.08);
}
/* ТЗ FR-07: фокус СЕЛЕКТА — без box-shadow (стиль исходной кнопки),
   остаётся только подсветка бордера. */
.otac-field>select:focus{
  outline:none;
  border-color:var(--otc-btn-primary);
  box-shadow:none;
}
.otac-field>textarea{resize:vertical;min-height:96px;font-family:inherit;}
.otac-field.is-error>input,
.otac-field.is-error>select,
.otac-field.is-error>textarea{border-color:#D32F2F;box-shadow:0 0 0 3px rgba(211,47,47,0.08);}
.otac-field__error{font:400 12px/1.3 'Inter',sans-serif;color:#D32F2F;margin-top:2px;}
.otac-field__optional{font-weight:400;color:var(--otac-text-light);}
.otac-field--inline{flex-direction:row;align-items:center;gap:8px;}

.otac-radio-group{display:flex;flex-wrap:wrap;gap:12px 20px;}
.otac-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:400 14px/1.3 'Inter',sans-serif;color:var(--otac-text);}
.otac-radio input{accent-color:var(--otc-btn-primary);width:16px;height:16px;}

.otac-form__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;}
.otac-form__actions .acc-btn{min-width:140px;}
@media (max-width:500px){
  .otac-form__actions{flex-direction:column-reverse;}
  .otac-form__actions .acc-btn{width:100%;}
}

.otac-alert{padding:12px 14px;border-radius:8px;font:500 14px/1.4 'Inter',sans-serif;margin-bottom:16px;}
.otac-alert--error{background:#FDECEA;color:#A02323;border:1px solid #F5C6C2;}
.otac-alert--success{background:#E8F5E9;color:#1B5E20;border:1px solid #C8E6C9;}

/* ══════════════════════════════════════════════════════════════════════
   Mobile responsive — unified breakpoints для всього Account розділу.
   OneTap breakpoints: 1367 / 992 / 501 / 500.
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet ≤ 991px — поверх існуючих breakpoints, для гарантії покриття */
@media (max-width:991px){
  /* Page H1 — Title 20 Medium на mobile (24px Semibold на desktop) */
  .acc-profile-title{
    font-size:var(--otac-fs-h2);
    font-weight:var(--otac-fw-semibold);
  }
  /* Sidebar group titles — менші на mobile (24px → 18px) */
  .acc-sidebar__group-title{font-size:18px;padding:0 14px 8px;}

  /* Order Details — header meta wrap на mobile */
  .acc-od-header{gap:6px;}
  .acc-od-meta{gap:8px;}
  .acc-od-meta__invoice{padding-left:0;border-left:0;}

  /* Form actions — все стек reverse + 100% width на mobile */
  .acc-od-side__actions{flex-direction:column;}

  /* Breadcrumb mobile — менший шрифт */
  .acc-breadcrumb{font-size:12px;gap:6px;}

  /* Referral mobile styles moved to account-modals.css (new Figma 1:1 markup) */

  /* Promocodes на mobile */
  .acc-promos-grid{grid-template-columns:1fr;}

  /* Notification settings group — менший padding */
  .otac-notif-group{padding:12px;}
  .otac-notif-row{padding:10px 0;}
  .otac-notif-row__label{font-size:14px;}
}

/* Phone ≤ 500px — точніше покриття */
@media (max-width:500px){
  /* Birthday popup — dialog узяти ширини viewport */
  .acc-modal--bday .acc-modal__dialog{
    width:calc(100vw - 16px) !important;
    max-width:none !important;
    padding:12px !important;
  }

  /* H1 — менший на phone */
  .acc-profile-title{font-size:20px;}
  .acc-od-title{font-size:18px;}

  /* Order History thumbnails 48×48 на phone */
  .acc-order-row__thumb{width:48px;height:48px;}

  /* Address / Payment cards — повна ширина */
  .acc-addr-grid{grid-template-columns:1fr;gap:12px;}

  /* Personal data cards — повна ширина */
  .acc-personal-grid{grid-template-columns:1fr;gap:16px;}

  /* Loyalty tier benefit cards — 1 col на phone */
  .acc-loyalty-edu__aside--cards{grid-template-columns:1fr;}

  /* Referral phone styles moved to account-modals.css (new Figma 1:1 markup) */

  /* Notification settings dialog padding на phone */
  .otac-notif-group{padding:10px;}

  /* Form fields — більший touch target */
  .otac-field>input,
  .otac-field>select,
  .otac-field>textarea{padding:14px;}

  /* Buttons block на phone (повна ширина для primary actions) */
  .acc-od-side__actions .acc-btn{width:100%;}

  /* Wishlist — 2 col на phone (≤500): auto-fill з min 280px тут дав би 1 клітинку
     на всю ширину → картинку зумило б. Форсимо 2 колонки, клітинки ~small = картинка
     стискається (як у каталозі на моб.), без зуму. */
  .acc-favs-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}

/* ══════════════════════════════════════════════════════════════════════
   Info pages — Figma 1682:183140 ACTUAL pages spec (real UI, not artboard labels).
   Layout: container max-1440 з padding 0 240px desktop (16px mobile).
   Структура: breadcrumb → H1 24px Semibold → секції gap 40px з підзаголовками
   20px Semibold + 16px regular body.
   ══════════════════════════════════════════════════════════════════════ */
.otc-info-page{
  width:100%;
  background:#FFFFFF;
  font-family:var(--otac-ff);
  display:flex;flex-direction:column;
}
.otc-info-page__wrap{
  width:100%;max-width:1440px;margin:0 auto;
  padding:24px 240px 80px;
  box-sizing:border-box;
  display:flex;flex-direction:column;gap:40px;
}

/* Breadcrumb — Figma component 43:17822, padding 0 240px, gap 8px */
.otc-info-page__breadcrumb{
  font-family:var(--otac-ff);
  font-size:12px;
  color:var(--otac-text);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.otc-info-page__breadcrumb a{color:var(--otac-text);text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
.otc-info-page__breadcrumb a:hover{color:var(--otc-btn-primary);}
.otc-info-page__breadcrumb__home{width:24px;height:24px;color:var(--otac-text);}
.otc-info-page__sep{color:var(--otac-text);opacity:.5;}
.otc-info-page__current{color:var(--otac-text);}

/* Title — H1 24px Semibold (Text Font/24ps Semibold) */
.otc-info-page__title{
  font-family:var(--otac-ff);
  font-size:24px;
  font-weight:var(--otac-fw-semibold);
  line-height:1.21;
  color:var(--otac-text);
  margin:0;
  letter-spacing:0;
}

/* Content article — formatted HTML rendered from admin description */
.otc-info-page__content{
  display:flex;flex-direction:column;gap:40px;
}
/* Section h2 (Figma Text Font/20px Semibold) — 20px Semibold #131314 */
.otc-info-page__content h2{
  font-family:var(--otac-ff);
  font-size:20px;
  font-weight:var(--otac-fw-semibold);
  line-height:1.21;
  color:var(--otac-text);
  margin:0 0 24px;letter-spacing:0;
}
/* Sub-heading h3 (Figma 16px SemiBold) — для карточок типу "Unapproved returns" */
.otc-info-page__content h3{
  font-family:var(--otac-ff);
  font-size:16px;
  font-weight:var(--otac-fw-semibold);
  line-height:1.375;
  color:var(--otac-text);
  margin:0 0 12px;letter-spacing:0;
}
.otc-info-page__content h4{
  font-family:var(--otac-ff);
  font-size:16px;
  font-weight:var(--otac-fw-semibold);
  line-height:1.375;
  color:var(--otac-text);
  margin:0 0 8px;
}
/* Body — 16px regular #131314 */
.otc-info-page__content p,
.otc-info-page__content li,
.otc-info-page__content dd,
.otc-info-page__content dt{
  font-family:var(--otac-ff);
  font-size:16px;
  font-weight:var(--otac-fw-regular);
  line-height:1.375;
  color:var(--otac-text);
  margin:0;
}
.otc-info-page__content p + p{margin-top:12px;}
.otc-info-page__content ul,
.otc-info-page__content ol{
  padding-left:24px;display:flex;flex-direction:column;gap:8px;margin:0;
}
.otc-info-page__content section{
  display:flex;flex-direction:column;
}
.otc-info-page__content section + section{margin-top:0;}
/* Plain text links — exclude CTA/btn-styled anchors so brown text isn't applied on top of buttons */
.otc-info-page__content a:not([class*="cta"]):not([class*="btn"]):not([class*="__cta"]){
  color:var(--otc-btn-primary);text-decoration:underline;
}
.otc-info-page__content a:not([class*="cta"]):not([class*="btn"]):not([class*="__cta"]):hover{color:var(--otc-btn-primary-hover);}
.otc-info-page__content img{
  max-width:100%;height:auto;border-radius:12px;display:block;
}

/* Cards row (для Refund Policy Exclusions: 3 horizontal cards) */
.otc-info-cards{
  display:flex;flex-direction:column;gap:16px;
}
.otc-info-card{
  display:flex;flex-direction:column;gap:12px;
}

/* 2-col grid (Delivery & Payment: Shipping methods + Payment methods) */
.otc-info-grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.otc-info-grid-2__card{
  background:var(--otac-input-bg);
  border-radius:8px;
  padding:24px;
  display:flex;flex-direction:column;gap:24px;
}

/* Carrier/Payment logos row (Delivery & Payment) — Figma 1047:121186/121262 */
.otc-info-logos{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  margin-top:8px;
}
.otc-info-logo{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.otc-info-logo img{
  width:78px;height:50px;
  object-fit:contain;display:block;
  background:transparent;
}
.otc-info-logo img.otc-info-logo-img--bordered{
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:4px;
}
.otc-info-logo span{
  font:var(--otac-fw-regular) 14px/1.21 var(--otac-ff);
  color:var(--otac-text);
}

/* FAQ accordion (Delivery & Payment, Returns & Refunds) */
.otc-info-faq{
  display:flex;flex-direction:column;gap:12px;
}
.otc-info-faq__item{
  border-bottom:1px solid var(--otac-border);
  padding:12px 0;
}
.otc-info-faq__item summary{
  font-family:var(--otac-ff);
  font-size:18px;
  font-weight:var(--otac-fw-medium);
  line-height:1.11;
  color:var(--otac-text);
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;
  padding:8px 0;
}
.otc-info-faq__item summary::-webkit-details-marker{display:none;}
.otc-info-faq__item summary::after{
  content:"";
  width:24px;height:24px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23131314' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
  transition:transform .2s;
  flex-shrink:0;
}
.otc-info-faq__item[open] summary::after{transform:rotate(180deg);}
.otc-info-faq__item__body{
  padding:8px 0 0;
  font:var(--otac-fw-regular) 16px/1.375 var(--otac-ff);
  color:var(--otac-text);
}

/* Tablet ≤1199 — зменшити horizontal padding */
@media (max-width:1199px){
  .otc-info-page__wrap{padding:24px 60px 60px;}
}

/* Tablet ≤991 — менший padding + 2-col → 1-col grid */
@media (max-width:991px){
  /* Заголовок → перший блок = 24px (моб. Figma); секції МІЖ собою лишаються 40px
     (гэп контенту нижче). Container (wrap) provides the ONLY side padding. */
  .otc-info-page__wrap{padding:16px 16px 48px;gap:24px;}
  .otc-info-page__title{font-size:22px;}
  .otc-info-page__content{gap:40px;}
  .otc-info-page__content h2{font-size:18px;margin-bottom:16px;}
  .otc-info-grid-2{grid-template-columns:1fr;gap:16px;}
  .otc-info-grid-2__card{padding:16px;}
  .otc-info-faq__item summary{font-size:16px;}
}

/* Phone ≤500 — мінімальні padding + 14px body */
@media (max-width:500px){
  .otc-info-page__wrap{padding:12px 16px 32px;gap:24px;}
  .otc-info-page__title{font-size:20px;}
  .otc-info-page__content{gap:40px;}
  .otc-info-page__content h2{font-size:17px;}
  .otc-info-page__content h3,
  .otc-info-page__content h4{font-size:15px;}
  .otc-info-page__content p,
  .otc-info-page__content li{font-size:14px;}
  .otc-info-faq__item summary{font-size:15px;}
  .otc-info-faq__item__body{font-size:14px;}
}

/* ══════════════════════════════════════════════════════════════════════
   Info: Contact page — Figma 1019:112586
   2-col grid: info card (F7F7F7 з logo+items+social) + form card (white)
   ══════════════════════════════════════════════════════════════════════ */
.otc-contact-page{display:flex;flex-direction:column;}
/* Grid: 2 колонки 700×623, gap 40 (= 1440 разом), bleed на 100vw → блоки 700×623 поміщаються на десктопі ≥1440 */
.otc-contact-page__grid{
  display:grid;
  grid-template-columns:minmax(0, 700px) minmax(0, 700px);
  gap:40px;
  justify-content:center;
  align-items:stretch;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  box-sizing:border-box;
}

/* LEFT: info card з F7F7F7 bg — Figma 1019:117184: 700×623, padding 24px, gap 40px */
.otc-contact-info-card{
  background:var(--otac-input-bg);
  border-radius:8px;
  padding:24px;
  display:flex;flex-direction:column;gap:40px;
  align-self:stretch;
  min-height:623px;
  width:100%;
  box-sizing:border-box;
}
.otc-contact-info-card__brand{
  display:flex;align-items:center;justify-content:flex-start;
  height:40px;
}
.otc-contact-info-card__brand-logo{
  /* Пропорція Figma (лого 200 у картці 540) до живої картки 700 → 260×40. */
  width:260px;height:40px;
  object-fit:contain;display:block;flex-shrink:0;
}
.otc-contact-info-card__brand-name{
  font-family:var(--otac-ff);
  font-size:20.42px;font-weight:var(--otac-fw-medium);
  color:var(--otc-btn-primary);
  letter-spacing:.04em;
}
.otc-contact-info-card__title{
  font-family:var(--otac-ff);
  font-size:20px;font-weight:var(--otac-fw-semibold);
  line-height:1.21;color:var(--otac-text);
  margin:0;
}
.otc-contact-info-card__items{
  display:flex;flex-direction:column;gap:24px;
}
/* Contact item — Figma 1019:117683: column gap 16px з head-row (icon+label) + body */
.otc-contact-item{
  display:flex;flex-direction:column;gap:16px;
}
.otc-contact-item__head{
  display:flex;align-items:center;gap:12px;
}
.otc-contact-item__icon{
  flex-shrink:0;width:32px;height:32px;
  object-fit:contain;
}
.otc-contact-item__label{
  font:var(--otac-fw-medium) 20px/1.21 var(--otac-ff);
  color:var(--otac-text);
}
.otc-contact-item__body{
  display:flex;flex-direction:column;gap:8px;
  padding-left:44px; /* align з label під icon 32 + gap 12 */
}
.otc-contact-item__value{
  font:var(--otac-fw-regular) 16px/1.4 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-contact-item__value a{color:var(--otac-text);text-decoration:none;}
.otc-contact-item__value a:hover{color:var(--otc-btn-primary);}
.otc-contact-item__muted{color:#606162;font-size:14px;}

/* Social media row — Figma 1019:113948 — 6 icons 32×32 gap 24px */
.otc-contact-social{
  display:flex;flex-wrap:wrap;gap:24px;
  margin-top:0;
}
.otc-contact-social__item{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  background:transparent;
  border-radius:0;
  transition:transform .15s;
  text-decoration:none;
}
.otc-contact-social__item:hover{
  transform:translateY(-2px);
  text-decoration:none;
}
.otc-contact-social__item img{
  width:32px;height:32px;
  object-fit:contain;display:block;
}
.otc-contact-social__item i{
  font-size:24px;line-height:1;color:var(--otac-text);
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
}

/* RIGHT: form — Figma 1019:117185: 700×623, TRANSPARENT (no bg, no border), gap 24px */
.otc-contact-form-card{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  display:flex;flex-direction:column;gap:24px;
  align-self:stretch;
  min-height:623px;
  width:100%;
  box-sizing:border-box;
}
.otc-contact-form-card__head{
  display:flex;flex-direction:column;gap:12px;
  align-self:stretch;
}
.otc-contact-form-card__title{
  font-family:var(--otac-ff);
  font-size:24px;font-weight:var(--otac-fw-semibold);
  line-height:1.21;color:var(--otac-text);
  margin:0;
}
.otc-contact-form-card__sub{
  font:var(--otac-fw-regular) 16px/1.375 var(--otac-ff);
  color:#606162;margin:0;
}
/* Submit button — Figma 1019:117247: 300×48, brown bg, 10px radius, white text */
.otc-contact-form-card__submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:300px;height:48px;padding:12px;
  background:var(--otc-btn-primary, #392923);
  color:var(--otc-btn-primary-text, #FFFFFF);
  border:0;border-radius:10px;
  font:var(--otac-fw-medium) 16px/1.25 var(--otac-ff);
  cursor:pointer;
  align-self:flex-end;
  transition:background .15s;
}
.otc-contact-form-card__submit:hover{
  background:var(--otc-btn-primary-hover, #4D382E);
  color:#FFFFFF;
}
/* Inputs / textarea — white bg, 1px DDDDDD border, 8px radius, 12px padding, 16px Medium label */
.otc-contact-form-card .otac-field{
  display:flex;flex-direction:column;gap:4px;
}
.otc-contact-form-card .otac-field > label{
  font:var(--otac-fw-medium) 16px/1 var(--otac-ff);
  color:var(--otac-text);
  margin:0;padding:0;
  display:block;
}
.otc-contact-form-card .otac-field input,
.otc-contact-form-card .otac-field textarea,
.otc-contact-form-card .otac-field select{
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;
  padding:12px;
  font:var(--otac-fw-regular) 16px/1.375 var(--otac-ff);
  color:var(--otac-text);
  outline:none;
  transition:border-color .15s;
  width:100%;
}
.otc-contact-form-card .otac-field input:focus,
.otc-contact-form-card .otac-field textarea:focus,
.otc-contact-form-card .otac-field select:focus{
  border-color:var(--otc-btn-primary, #392923);
}
.otc-contact-form-card .otac-field textarea{
  min-height:120px;resize:vertical;
}
.otc-contact-form-card .otac-field--select select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23131314' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
.otc-contact-form-card .otac-field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}

/* Map iframe full-width below grid */
.otc-contact-map{
  width:100%;aspect-ratio:21/9;border:0;
  border-radius:8px;overflow:hidden;
  display:block;margin-top:24px;
}

@media (max-width:1439px){
  .otc-contact-page__grid{padding:0 24px;}
}
@media (max-width:991px){
  .otc-contact-page__grid{
    grid-template-columns:1fr;
    gap:24px;
    padding:0 24px;
  }
  .otc-contact-info-card{padding:24px;gap:32px;min-height:auto;}
  .otc-contact-form-card{min-height:auto;}
  .otc-contact-info-card__brand-logo{width:200px;height:30px;}
  .otc-contact-form-card .otac-field-row{grid-template-columns:1fr;gap:16px;}
  .otc-contact-form-card__submit{width:100%;align-self:stretch;}
}
@media (max-width:500px){
  .otc-contact-page__grid{padding:0 16px;gap:16px;}
  .otc-contact-info-card__brand-logo{width:200px;height:30px;}
  .otc-contact-info-card{padding:16px;gap:24px;}
  .otc-contact-info-card__title{font-size:18px;}
  .otc-contact-form-card__title{font-size:20px;}
  .otc-contact-item__label{font-size:18px;}
  .otc-contact-item__body{padding-left:36px;}
  .otc-contact-map{aspect-ratio:16/9;}
}

/* Contact success overlay — Figma 1019:118091 */
.otc-contact-success{
  position:fixed;inset:0;background:rgba(0,0,0,.2);
  z-index:9999;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.otc-contact-success.is-open{display:flex;}
.otc-contact-success__dialog{
  background:#FFFFFF;border-radius:16px;padding:32px;
  max-width:420px;width:100%;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.otc-contact-success__icon{
  width:56px;height:56px;border-radius:50%;
  background:#577B28;color:#FFFFFF;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.otc-contact-success__title{
  font:var(--otac-fw-semibold) 20px/1.3 var(--otac-ff);
  color:var(--otac-text);margin:0 0 8px;
}
.otc-contact-success__text{
  font:var(--otac-fw-regular) 14px/1.4 var(--otac-ff);
  color:var(--otac-text-muted);margin:0 0 24px;
}

/* ══════════════════════════════════════════════════════════════════════
   Referral banner — Figma 1193:118957: 1440×160, brown #392923, radius 8px.
   Адаптивний: позиціонування decorations у % від базы 1440×160.
   Текст WHITE LEFT-aligned, 48px Bold title + 20px Medium sub.
   ══════════════════════════════════════════════════════════════════════ */
.otc-referral-banner{
  background:var(--otc-btn-primary, #392923);
  border-radius:8px;
  position:relative;
  overflow:hidden;
  /* Figma: 1440×160, aspect-ratio 9:1 на широких viewport, адаптивно зменшується.
     Banner extends -240px (wrap padding) кожного боку через .otc-info-page__content вище. */
  width:auto;
  max-width:1440px;
  aspect-ratio:9/1;
  min-height:120px;
  margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  padding:0 80px;
  box-sizing:border-box;
}
/* Selectors з тагом + class щоб обігнати specificity .otc-info-page__content p (0,1,1) */
.otc-referral-banner h1.otc-referral-banner__title,
.otc-referral-banner h2.otc-referral-banner__title{
  font:var(--otac-fw-bold) clamp(20px, 2.8vw, 48px)/1.21 var(--otac-ff);
  color:#FFFFFF !important;
  margin:0;
  text-align:center;
  position:relative;z-index:2;
  white-space:nowrap;
}
.otc-referral-banner p.otc-referral-banner__sub{
  font:var(--otac-fw-medium) clamp(11px, 1.3vw, 20px)/1.21 var(--otac-ff);
  color:#FFFFFF !important;
  margin:0;
  text-align:center;
  position:relative;z-index:2;
  white-space:nowrap;
}
@media (max-width:991px){
  .otc-referral-banner__title,
  .otc-referral-banner__sub{white-space:normal;}
  .otc-referral-banner{padding:24px 16px;}
}
/* Decorations — абсолютне позиціонування у % від Figma base 1440×160 */
.otc-referral-banner__decor{
  position:absolute;
  pointer-events:none;
}
.otc-referral-banner__decor img{
  width:100%;height:100%;object-fit:contain;display:block;
}
/* TR coin (110×110 at 1330,-6) — 92.36%/-3.75% від 1440/160 */
.otc-referral-banner__decor--circle-tr{
  top:-3.75%;left:92.36%;
  width:7.64%;aspect-ratio:1;
}
/* TL blur circle (100×100 at 19,-25) — 1.32%/-15.6% */
.otc-referral-banner__decor--circle-tl{
  top:-15.6%;left:1.32%;
  width:6.94%;aspect-ratio:1;
  background:#FFCF6C;border-radius:50%;
  filter:blur(10px);
}
/* MID big blur (192×192 at 624,60) — 43.33%/37.5% */
.otc-referral-banner__decor--circle-mid{
  top:37.5%;left:43.33%;
  width:13.33%;aspect-ratio:1;
  background:#FFCF6C;border-radius:50%;
  opacity:.4;
  filter:blur(8px);
}
/* BL coin (73×73 at 177,111) — 12.29%/69.4% */
.otc-referral-banner__decor--circle-bl{
  top:69.4%;left:12.29%;
  width:5.07%;aspect-ratio:1;
}
/* Pct1 % icon (34×39 at 447,-3) — 31%/-1.9% */
.otc-referral-banner__decor--pct1{
  top:-1.9%;left:31.04%;
  width:2.36%;aspect-ratio:34/39;
  opacity:.4;
}
/* Pct2 % icon (42×47 at 1281,102) — 88.96%/63.75% */
.otc-referral-banner__decor--pct2{
  top:63.75%;left:88.96%;
  width:2.92%;aspect-ratio:42/47;
  opacity:.4;
}
/* Transparent decorative imgs */
.otc-referral-banner__decor--tr1{
  top:-12.5%;left:64.86%;
  width:2.71%;aspect-ratio:1;
}
.otc-referral-banner__decor--tr2{
  top:47.5%;left:1.25%;
  width:2.71%;aspect-ratio:1;
}

/* Tablet 501-991px: пропорційно зменшується, blur/transparent декорації приховуються */
@media (max-width:991px){
  .otc-referral-banner{aspect-ratio:auto;min-height:180px;padding:32px 24px;}
  .otc-referral-banner__decor--circle-tl,
  .otc-referral-banner__decor--circle-mid,
  .otc-referral-banner__decor--pct1,
  .otc-referral-banner__decor--pct2,
  .otc-referral-banner__decor--tr1,
  .otc-referral-banner__decor--tr2{display:none;}
}
/* Mobile ≤500px: banner заповнює ширину контейнера (без фікс 351px і без бокових
   відступів — контейнер .otc-info-page__wrap вже дає padding). Figma mobile = 375px
   frame з 12px inset, тобто banner = повна ширина контенту. */
@media (max-width:500px){
  .otc-referral-banner{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:auto !important;
    min-height:260px;
    padding:24px 20px !important;
    gap:8px;
    display:flex;flex-direction:column;
    align-items:center !important;justify-content:center;
    align-self:stretch !important;
    margin:0 !important;
  }
  .otc-referral-banner h1.otc-referral-banner__title,
  .otc-referral-banner h2.otc-referral-banner__title{
    font-size:24px !important;
    line-height:1.21;
    white-space:normal !important;
    text-align:center;
  }
  .otc-referral-banner p.otc-referral-banner__sub{
    font-size:14px !important;
    line-height:1.35;
    white-space:normal !important;
    text-align:center;
  }
  /* Усі декорації видимі, перепозиціоновані під 351×260 */
  .otc-referral-banner__decor{display:block;}
  /* TL star/coin (~50×50) — top-left 5%/5% */
  .otc-referral-banner__decor--circle-tl{
    top:23%;left:-5%;
    width:18%;aspect-ratio:1;
    background:#FFCF6C;border-radius:50%;
    filter:blur(8px);
  }
  /* TR coin "5%" (~80×80) — top-right 5%/5%, основна іконка */
  .otc-referral-banner__decor--circle-tr{
    top:6%;left:auto;right:3%;
    width:26%;aspect-ratio:1;
  }
  /* MID big blur "5%" (~120×120 opacity 0.4) — by center */
  .otc-referral-banner__decor--circle-mid{
    top:38%;left:30%;
    width:40%;aspect-ratio:1;
    background:#FFCF6C;border-radius:50%;
    opacity:.4;
    filter:blur(10px);
  }
  /* BL coin "5%" (~60×60) — bottom-left */
  .otc-referral-banner__decor--circle-bl{
    top:auto;bottom:5%;left:5%;
    width:22%;aspect-ratio:1;
  }
  /* Pct1 % icon — top-mid */
  .otc-referral-banner__decor--pct1{
    top:4%;left:32%;
    width:14%;aspect-ratio:34/39;
    opacity:.5;
  }
  /* Pct2 % icon — mid-right */
  .otc-referral-banner__decor--pct2{
    top:50%;left:auto;right:5%;
    width:16%;aspect-ratio:42/47;
    opacity:.5;
  }
  /* Transparent decoration coins */
  .otc-referral-banner__decor--tr1{display:none;}
  .otc-referral-banner__decor--tr2{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════
   Referral cards (Section 3) — Figma 1197:119005: stacked column в одному
   F7F7F7 блоці на ширину контейнера, 32px gap між картами з divider 1px #DDDDDD.
   Divider — pseudo-element ::before по центру gap.
   ══════════════════════════════════════════════════════════════════════ */
.otc-referral-cards{
  display:flex;flex-direction:column;
  width:100%;
  background:#F7F7F7;
  border-radius:8px;
  padding:24px;
  gap:32px;
  box-sizing:border-box;
}
.otc-referral-card{
  display:flex;flex-direction:column;
  gap:16px;
  position:relative;
}
.otc-referral-card + .otc-referral-card::before{
  content:'';
  position:absolute;
  top:-16px;left:0;right:0;
  border-top:1px solid #DDDDDD;
}
.otc-referral-card h3{
  font:var(--otac-fw-medium) 24px/1.21 var(--otac-ff);
  color:#131314;
  margin:0;
}
.otc-referral-card p{
  font:var(--otac-fw-regular) 18px/1.4 var(--otac-ff);
  color:#131314;
  margin:0;
}
@media (max-width:991px){
  .otc-referral-cards{padding:16px;gap:24px;}
  .otc-referral-card + .otc-referral-card::before{top:-12px;}
  .otc-referral-card h3{font-size:20px;}
  .otc-referral-card p{font-size:16px;}
}
@media (max-width:500px){
  .otc-referral-card h3{font-size:18px;}
  .otc-referral-card p{font-size:14px;}
}

/* ══════════════════════════════════════════════════════════════════════
   Loyalty/Referral landing info — Figma 998:104188 + 1192:117906
   Hero (48px title + CTA 300×60), sections gap 120px (mobile 40px).
   ══════════════════════════════════════════════════════════════════════ */
.otc-loyalty-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:80px;
  height:500px;
  min-height:500px;
  text-align:center;
  position:relative;
  overflow:hidden;
  margin-bottom:80px;
  padding:0 24px;
  box-sizing:border-box;
  background:transparent;
  border-radius:0;
  /* Bleed на повну viewport ширину (Figma база 1920×500) — декорації в % розкладаються правильно */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
/* Inner content frame між title і CTA — sub + steps з gap 24px */
.otc-loyalty-hero__content{
  display:flex;flex-direction:column;align-items:center;
  gap:24px;
  position:relative;z-index:1;
}
/* Steps row: Shop → Collect → Save more */
.otc-loyalty-hero__steps{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:16px;
}
.otc-loyalty-hero__step{
  display:inline-flex;flex-direction:row;align-items:center;gap:8px;
}
.otc-loyalty-hero__step img{
  width:24px;height:24px;object-fit:contain;
}
.otc-loyalty-hero__step span{
  font:var(--otac-fw-medium) 20px/1.21 var(--otac-ff);
  color:var(--otac-text);
}
.otc-loyalty-hero__arrow{
  width:38px;height:2px;
  background:#BCBCBC;
  position:relative;
}
.otc-loyalty-hero__arrow::after{
  content:'';position:absolute;right:-1px;top:50%;
  width:8px;height:8px;
  border-top:2px solid #BCBCBC;border-right:2px solid #BCBCBC;
  transform:translateY(-50%) rotate(45deg);
}
/* Hero decorative images — Figma 1000:105177/179/181/182/108177/108179 */
.otc-loyalty-hero__decor{
  position:absolute;pointer-events:none;
  user-select:none;
  z-index:0;
}
/* Decorations — Figma base 1920×500. % positions для адаптивності. */
/* B 1 (82.39×86.63 at 1443.28, 350.51) — 75.2%/70.1% */
.otc-loyalty-hero__decor--b1{
  top:70.1%;left:75.17%;
  width:4.29%;aspect-ratio:82.39/86.63;
}
/* B 2 (93.16×95.35 at 470.89, 46) — 24.5%/9.2% */
.otc-loyalty-hero__decor--b2{
  top:9.2%;left:24.53%;
  width:4.85%;aspect-ratio:93.16/95.35;
}
/* % 1 (34×39 at 1080, 26) — 56.25%/5.2% */
.otc-loyalty-hero__decor--pct1{
  top:5.2%;left:56.25%;
  width:1.77%;aspect-ratio:34/39;
}
/* % 2 (42×47 at 355, 283) — 18.49%/56.6% */
.otc-loyalty-hero__decor--pct2{
  top:56.6%;left:18.49%;
  width:2.19%;aspect-ratio:42/47;
}
/* transparent 1 (39×39 at 598, 375) — 31.15%/75% */
.otc-loyalty-hero__decor--small1{
  top:75%;left:31.15%;
  width:2.03%;aspect-ratio:1;
  opacity:.7;
}
/* transparent 2 (39×39 at 1367, 121) — 71.2%/24.2% */
.otc-loyalty-hero__decor--small2{
  top:24.2%;left:71.2%;
  width:2.03%;aspect-ratio:1;
  opacity:.7;
}
.otc-loyalty-hero__decor img{width:100%;height:100%;object-fit:contain;display:block;}
.otc-loyalty-hero > *:not(.otc-loyalty-hero__decor){position:relative;z-index:1;}
.otc-loyalty-hero__title{
  font-family:var(--otac-ff);
  font-size:48px;font-weight:var(--otac-fw-semibold);
  line-height:1.21;color:var(--otac-text);
  margin:0;letter-spacing:0;
}
.otc-loyalty-hero__sub{
  font-family:var(--otac-ff);
  font-size:20px;font-weight:var(--otac-fw-regular);
  line-height:1.21;color:var(--otac-text);
  margin:0;max-width:618px;
}
.otc-loyalty-hero__cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:300px;min-height:60px;padding:12px;
  background:var(--otc-btn-primary, #392923);
  color:var(--otc-btn-primary-text, #FFFFFF);
  border-radius:14px;border:0;
  font:var(--otac-fw-medium) 20px/1 var(--otac-ff);
  text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.otc-loyalty-hero__cta:hover{
  background:var(--otc-btn-primary-hover, #4D382E);
  color:var(--otc-btn-primary-text, #FFFFFF);
  text-decoration:none;
}

.otc-loyalty-section{
  display:flex;flex-direction:column;gap:40px;
  margin-bottom:80px;
  box-sizing:border-box;
}
.otc-loyalty-section:last-child{margin-bottom:0;}
/* "How to earn credits" та FAQ — H2 LEFT (variant 43:18299) */
.otc-loyalty-section--left,
.otc-loyalty-section--left h2,
.otc-loyalty-section--left p{
  text-align:left !important;
}
/* --left: ТІЛЬКИ text-align зліва. align-items не чіпаємо (default stretch),
   щоб діти flex column займали 100% ширини контейнера. */
.otc-loyalty-section--left > *{
  width:100%;
}
/* --centered: тільки text-align (НЕ align-items center, бо це ламає flex items до min-content width).
   Сами h2/p отримують text-align: center, а width лишається 100% (stretch). */
.otc-loyalty-section--centered{text-align:center;}
.otc-loyalty-section--centered > *{width:100%;}
.otc-loyalty-section--centered > .otc-loyalty-rate{width:100%;max-width:594px;align-self:center;}
.otc-loyalty-section h2{
  font-family:var(--otac-ff);
  font-size:32px;font-weight:var(--otac-fw-semibold);
  line-height:1.21;color:var(--otac-text);
  margin:0;text-align:inherit;
}
.otc-loyalty-section p{
  font-family:var(--otac-ff);
  font-size:18px;font-weight:var(--otac-fw-regular);
  line-height:1.21;color:var(--otac-text);
  margin:0;
}

/* Loyalty highlight pill "1 credit = 0.02 €" — Figma 1008:108397
   F7F7F7 bg + border + width 594px + row з icon 80×80 + 32px Medium text LEFT */
.otc-loyalty-rate{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  background:#F7F7F7;
  border:1px solid #DDDDDD;
  border-radius:8px;padding:24px;gap:24px;
  width:100%;max-width:594px;
  margin:0 auto;
  box-sizing:border-box;
  flex-wrap:nowrap;
}
.otc-loyalty-rate__icon{
  width:80px;height:80px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:0 !important;
}
.otc-loyalty-rate__text{
  font:var(--otac-fw-medium) 32px/1.21 var(--otac-ff);
  color:var(--otac-text);
  text-align:left;
  white-space:nowrap;
  flex-shrink:0;
}

/* 2-cards row "How to activate your rewards" — Figma 1008:108403
   Each card: white bg + 1px DDDDDD + 8px radius + padding 24px + space-between flex */
.otc-loyalty-2cards{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;
}
.otc-loyalty-card{
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  border-radius:8px;padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.otc-loyalty-card__body{
  display:flex;flex-direction:column;gap:16px;
}
.otc-loyalty-card h3{
  font:var(--otac-fw-medium) 24px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-loyalty-card p{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-loyalty-card__muted{color:#7D7D7D !important;}
.otc-loyalty-card__cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:48px;padding:12px;
  background:var(--otc-btn-primary, #392923);
  color:var(--otc-btn-primary-text, #FFFFFF);
  border-radius:10px;border:0;
  font:var(--otac-fw-medium) 16px/1.25 var(--otac-ff);
  text-decoration:none;cursor:pointer;align-self:flex-start;
}
.otc-loyalty-card__cta:hover{background:var(--otc-btn-primary-hover);color:#fff;text-decoration:none;}

/* "How to earn credits" — Figma 1008:108422 row layout: text LEFT + image RIGHT 300px */
.otc-loyalty-earn-card{
  background:var(--otac-input-bg);
  border-radius:8px;padding:24px;
  display:flex;align-items:center;justify-content:center;gap:24px;
}
.otc-loyalty-earn-card__body{
  flex:1;display:flex;flex-direction:column;gap:40px;
}
.otc-loyalty-earn-card__head{
  display:flex;flex-direction:column;gap:12px;
}
.otc-loyalty-earn-card__head h3{
  font:var(--otac-fw-medium) 24px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-loyalty-earn-card__head p{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:#606162;margin:0;
}
.otc-loyalty-earn-card__list{
  display:flex;flex-direction:column;gap:16px;
  list-style:none;padding:0;margin:0;
}
.otc-loyalty-earn-card__list li{
  position:relative;
  padding-left:20px;
  font:var(--otac-fw-regular) 18px/1.4 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-loyalty-earn-card__list li::before{
  content:"•";
  position:absolute;
  left:0;top:0;
  color:var(--otac-text);
  font-size:18px;line-height:1.4;
}
.otc-loyalty-earn-card__decor{
  flex-shrink:0;width:300px;
  display:flex;align-items:center;justify-content:center;
}
.otc-loyalty-earn-card__decor img{
  max-width:100%;height:auto;object-fit:contain;
  border-radius:0 !important;
}
/* 5 stars block — Figma "Credits for feedback" (1008:108444 frame 299×300):
   row wrap gap 12px, 3 filled top + 2 (1 filled + 1 empty) bottom.
   Кожна зірка Figma 81×90. */
.otc-loyalty-stars{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
}
.otc-loyalty-stars__row{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:12px;
}
.otc-loyalty-stars img{
  width:81px;height:90px;
  object-fit:contain;
  border-radius:0 !important;
}
@media (max-width:991px){
  .otc-loyalty-stars img{width:64px;height:71px;}
  .otc-loyalty-stars{gap:8px;}
  .otc-loyalty-stars__row{gap:8px;}
}

/* Loyalty levels grid — Figma 1008:108455:
   row wrap, gap 40px, cards 540×186 hug. 2x2 layout на десктопі (≥1160px), 1x4 на mobile.
   Потрібна section width 1120px (540×2 + 40). Wrap content 960px → extension -80px з боків. */
.otc-loyalty-tiers{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 540px));
  justify-content:center;
  gap:40px;
  width:100%;
}
/* Section-wide extension: усі loyalty секції розширені за wrap padding на 80px кожен бік,
   щоб контент займав 1120 (грид 540×2+40, earn-cards, FAQ, 2-cards row). Pill всередині лишається 594 центр. */
@media (min-width:1200px){
  .otc-info-page__content > section.otc-loyalty-section{
    margin-left:-80px;
    margin-right:-80px;
  }
}
.otc-loyalty-tier{
  border:1px solid;border-radius:14px;padding:24px;
  display:flex;flex-direction:column;justify-content:center;gap:24px;
  align-items:stretch;text-align:left;
  width:540px;max-width:100%;
  min-height:186px;
  box-sizing:border-box;
}
/* Tier inner: head з gap 8px + rate + example group (gap 4px) */
.otc-loyalty-tier__example-group{
  display:flex;flex-direction:column;gap:4px;
}
.otc-loyalty-tier__head{
  display:flex;align-items:center;gap:8px;
}
.otc-loyalty-tier__icon{
  width:42px;height:46px;
  object-fit:contain;flex-shrink:0;
}
.otc-loyalty-tier__name{
  font:var(--otac-fw-medium) 24px/1.21 var(--otac-ff);
  color:var(--otac-text);
}
.otc-loyalty-tier__rate{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-loyalty-tier__example{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
/* tier color variants */
.otc-loyalty-tier--bronze   { background: radial-gradient(circle at 67% 140%, rgba(205,143,99,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color: #D3AB79; }
.otc-loyalty-tier--silver   { background: radial-gradient(circle at 67% 140%, rgba(140,145,156,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color: #879199; }
.otc-loyalty-tier--gold     { background: radial-gradient(circle at 67% 140%, rgba(252,215,101,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color: #EDC64B; }
.otc-loyalty-tier--platinum { background: radial-gradient(circle at 67% 140%, rgba(159,180,204,1) 0%, rgba(255,255,255,0) 100%), #FFFFFF; border-color: #B2C1D2; }

@media (max-width:991px){
  .otc-loyalty-2cards{grid-template-columns:1fr;gap:16px;}
  .otc-loyalty-card{padding:16px;gap:24px;}
  .otc-loyalty-card h3{font-size:20px;}
  .otc-loyalty-card p{font-size:16px;}
  .otc-loyalty-card__cta{width:100%;max-width:280px;}
  .otc-loyalty-earn-card{flex-direction:column;padding:16px;gap:16px;}
  .otc-loyalty-earn-card__decor{width:100%;max-width:200px;}
  .otc-loyalty-tiers{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;}
  .otc-loyalty-tier{padding:16px;width:100%;max-width:none;}
  .otc-loyalty-tier__name{font-size:20px;}
  .otc-loyalty-tier__rate,.otc-loyalty-tier__example{font-size:14px;}
  .otc-loyalty-earn-card__head h3{font-size:20px;}
  .otc-loyalty-earn-card__head p,.otc-loyalty-earn-card__list li{font-size:14px;}
}

/* Mobile responsive (extras не покриті основними правилами вище) */
@media (max-width:991px){
  /* Figma mobile hero spacing: title→(sub+flow) 40px, sub→flow 16px, →button 40px.
     Hero bleeds full viewport width (bg/decor edge-to-edge), so its CONTENT needs
     its own 16px inset to align with other sections + wrap the subtitle like Figma
     (351px). Not a double padding — the container inset doesn't reach a bled hero. */
  .otc-loyalty-hero{min-height:auto;padding:32px 16px;margin-bottom:0;gap:40px;}
  .otc-loyalty-hero__content{gap:16px;}
  .otc-info-page__content .otc-loyalty-hero__title{font-size:32px;margin:0;}
  .otc-info-page__content .otc-loyalty-hero__sub{font-size:16px;margin:0;}
  .otc-loyalty-hero__cta{width:auto;min-width:240px;font-size:16px;min-height:48px;}
  /* Steps flow "Shop → Collect → Save more" — Figma mobile: one line, ~16px text,
     28px arrows. Was 20px text → "Save more" wrapped. Force nowrap + smaller. */
  .otc-loyalty-hero__steps{gap:8px;flex-wrap:nowrap;}
  .otc-loyalty-hero__step{gap:6px;}
  .otc-loyalty-hero__step span{font-size:16px;white-space:nowrap;}
  .otc-loyalty-hero__step img{width:24px;height:24px;}
  .otc-loyalty-hero__arrow{width:24px;}
  /* Between-block spacing comes from .otc-info-page__content gap (40px) only —
     no extra margin-bottom, else blocks get ~72px apart. */
  .otc-loyalty-section{gap:24px;margin-bottom:0;}
  .otc-loyalty-section h2{font-size:24px;}
  .otc-loyalty-section p{font-size:16px;}
  .otc-loyalty-rate{width:100% !important;padding:16px;gap:16px;}
  .otc-loyalty-rate__icon{width:48px;height:48px;}
  .otc-loyalty-rate__text{font-size:20px;}
  .otc-loyalty-earn{grid-template-columns:1fr;gap:16px;}
  .otc-loyalty-earn__item{padding:16px;}
}
@media (max-width:500px){
  /* Prefix with .otc-info-page__content to beat .otc-info-page__content h2/p (0,1,1).
     Figma mobile: hero title 24px, subtitle 16px. */
  .otc-info-page__content .otc-loyalty-hero__title{font-size:24px;}
  .otc-info-page__content .otc-loyalty-hero__sub{font-size:16px;}
  .otc-loyalty-section h2{font-size:20px;}
  .otc-loyalty-rate{padding:14px;gap:12px;}
  .otc-loyalty-rate__icon{width:40px;height:40px;}
  .otc-loyalty-rate__text{font-size:16px;}
  .otc-loyalty-tiers{grid-template-columns:1fr !important;gap:12px;}
  .otc-loyalty-tier{padding:16px;width:100%;max-width:none;}
}

/* Logos responsive */
@media (max-width:991px){
  .otc-info-logos{gap:12px;}
  .otc-info-logo img{width:60px;height:40px;}
  .otc-info-logo span{font-size:12px;}
}

/* ══════════════════════════════════════════════════════════════════════
   Returns & Refunds (id=8) — Figma 873:126781 — 1:1 layout
   Hero 80px 0 padding (NO bg/gradient), CENTER title 24px Semibold + sub 20px Regular + 2 buttons row
   ══════════════════════════════════════════════════════════════════════ */
.otc-rr-hero{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  gap:40px;
  padding:80px 0;
  text-align:center;
  margin-bottom:0;
}
.otc-rr-hero__title{
  font:var(--otac-fw-semibold) 24px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
  text-align:center;
}
.otc-rr-hero__sub{
  font:var(--otac-fw-regular) 20px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
  text-align:center;
}
/* 2-button row (Start a return + FAQs) */
.otc-rr-hero__actions{
  display:flex;justify-content:center;align-items:center;
  gap:24px;
}
.otc-rr-hero__cta,
.otc-rr-hero__cta-outline{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:48px;padding:12px;
  border-radius:10px;
  font:var(--otac-fw-medium) 16px/1.25 var(--otac-ff);
  text-decoration:none;cursor:pointer;
  transition:background .15s, border-color .15s;
  box-sizing:border-box;
}
.otc-rr-hero__cta{
  background:var(--otc-btn-primary, #392923);
  color:var(--otc-btn-primary-text, #FFFFFF);
  border:0;
}
.otc-rr-hero__cta:hover{background:var(--otc-btn-primary-hover, #4D382E);color:#fff;text-decoration:none;}
.otc-rr-hero__cta-outline{
  background:#FFFFFF;
  color:var(--otac-text);
  border:1px solid var(--otac-border);
}
.otc-rr-hero__cta-outline:hover{background:#FAFAFA;color:var(--otac-text);text-decoration:none;}

/* RR sections тепер обгорнуті в .otc-loyalty-section → автоматично extending -80px each side
   через існуюче правило `.otc-info-page__content > section.otc-loyalty-section` → 1120 wide.
   Окремі extensions для .otc-rr-* елементів більше не потрібні (sections самі розширені). */

/* RR page: hide дубль h1 (.otc-info-page__title) — hero уже має centered title.
   Інші info-сторінки H1 залишають видимим. */
.otc-info-page:has(.otc-rr-hero) .otc-info-page__title{display:none;}
/* Loyalty (hero "Your Loyalty Program") + About (hero "BobrCraft") — hero вже є
   заголовком сторінки, тож ховаємо дубль/зайвий plain H1 (1:1 з Figma). */
.otc-info-page:has(.otc-loyalty-hero) .otc-info-page__title,
.otc-info-page:has(.otc-about-hero) .otc-info-page__title,
.otc-info-page:has(.otc-referral-banner) .otc-info-page__title{display:none;}

/* Referral page: тільки .otc-info-page__content має gap 40px між sections.
   У самих sections не повинно бути gap+margin-bottom — paragraphs flow природньо.
   Скидаємо тільки gap+margin для .otc-loyalty-section, text-align успадковується:
   --centered sections залишаються по центру (Share & earn + sub #606162), інші — left. */
.otc-info-page:has(.otc-referral-banner) .otc-loyalty-section{
  gap:0;
  margin-bottom:0;
}

/* Banner розширюємо за межі wrap padding (240px) щоб дійсно був 1440×160 на десктопі.
   Adaptive negative margins для кожного breakpoint щоб banner = повна ширина wrap. */
.otc-info-page__content:has(> .otc-referral-banner) > .otc-referral-banner,
.otc-info-page__content > .otc-referral-banner{
  margin-left:-240px;
  margin-right:-240px;
}
@media (max-width:1366px){
  .otc-info-page__content > .otc-referral-banner{
    margin-left:-60px;
    margin-right:-60px;
  }
}
@media (max-width:991px){
  /* No bleed on mobile — banner fills the content width (wrap padding is the only inset). */
  .otc-info-page__content > .otc-referral-banner{
    margin-left:0;
    margin-right:0;
  }
}
@media (max-width:500px){
  .otc-info-page__content > .otc-referral-banner{
    margin-left:0 !important;
    margin-right:0 !important;
    align-self:stretch !important;
    flex:0 0 auto !important;
  }
}
.otc-info-page:has(.otc-referral-banner) .otc-loyalty-section > p{
  margin:0;
}
.otc-info-page:has(.otc-referral-banner) .otc-loyalty-section > p + p{
  margin-top:8px;
}

/* 3-step process cards — Figma 873:126781 each card 346.67 Fill × 498 Fill, gap 40px between cards */
.otc-rr-steps{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:40px;
  align-items:stretch;
}
/* Card: F7F7F7 bg, 8px radius, padding 24px, column flex, gap 16px between siblings,
   min-height 498px per Figma. Card 1 з CTA — фикс 40px gap між body та CTA (по макету). */
.otc-rr-step{
  background:var(--otac-input-bg);
  border-radius:8px;padding:24px;
  display:flex;flex-direction:column;gap:16px;
  min-height:498px;
  box-sizing:border-box;
}
.otc-rr-step:has(.otc-rr-step__cta){
  gap:40px;
}
.otc-rr-step__body{
  display:flex;flex-direction:column;gap:16px;
}
/* White circle з border 1px DDDDDD, contains "1"/"2"/"3" Figma 1019:119855 */
.otc-rr-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:100px;
  background:#FFFFFF;
  border:1px solid var(--otac-border);
  color:var(--otac-text);
  font:var(--otac-fw-semibold) 14px/1 var(--otac-ff);
  flex-shrink:0;
}
.otc-rr-step h3{
  font:var(--otac-fw-semibold) 20px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-rr-step p{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-rr-step__muted{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:#606162;margin:8px 0 0;
}
/* CTA in Step 1 card */
.otc-rr-step__cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:48px;padding:12px;
  background:var(--otc-btn-primary, #392923);
  color:var(--otc-btn-primary-text, #FFFFFF);
  border-radius:10px;border:0;
  font:var(--otac-fw-medium) 16px/1.25 var(--otac-ff);
  text-decoration:none;cursor:pointer;align-self:flex-start;
}
.otc-rr-step__cta:hover{background:var(--otc-btn-primary-hover);color:#fff;text-decoration:none;}

/* Return overview table — Figma 1034:119881 2-col з border 1px DDDDDD radius 8px + F7F7F7 thead */
.otc-rr-table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--otac-border);
  border-radius:8px;overflow:hidden;
  margin:0;
}
.otc-rr-table th{
  background:var(--otac-input-bg, #F7F7F7);
  padding:16px 20px;text-align:left;
  font:var(--otac-fw-semibold) 16px/1.21 var(--otac-ff);
  color:var(--otac-text);
  border-bottom:1px solid var(--otac-border);
}
.otc-rr-table th:first-child{
  border-right:1px solid var(--otac-border);
}
.otc-rr-table td{
  padding:16px 20px;text-align:left;
  font:var(--otac-fw-regular) 16px/1.21 var(--otac-ff);
  color:var(--otac-text);
  border-bottom:1px solid var(--otac-border);
}
.otc-rr-table td:first-child{
  border-right:1px solid var(--otac-border);
}
.otc-rr-table tbody tr:last-child td{border-bottom:0;}

/* Alert box — Figma 1034:119911 row з yellow icon + body */
.otc-rr-alert{
  display:flex;align-items:center;gap:8px;
}
.otc-rr-alert__icon{
  flex-shrink:0;width:32px;height:32px;
}
.otc-rr-alert__text{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}

/* Right to modify policy section — h2 + sub LEFT (Figma TZ), button centered */
.otc-rr-modify{
  display:flex;flex-direction:column;
  gap:40px;
}
.otc-rr-modify h2{text-align:left;}
.otc-rr-modify p{text-align:left;}
.otc-rr-modify__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:300px;height:48px;padding:12px;
  background:#FFFFFF;
  color:var(--otac-text);
  border:1px solid var(--otac-border);
  border-radius:10px;
  font:var(--otac-fw-medium) 16px/1.25 var(--otac-ff);
  text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.otc-rr-modify__btn:hover{background:#FAFAFA;color:var(--otac-text);text-decoration:none;}
/* Plain link variant — Figma TZ 5.2 §5: brown 16px Medium underline (NOT button) */
.otc-rr-modify__link{
  color:var(--otc-btn-primary, #392923);
  font:var(--otac-fw-medium) 16px/1.21 var(--otac-ff);
  text-decoration:underline;
  text-underline-offset:3px;
}
.otc-rr-modify__link:hover{color:var(--otc-btn-primary-hover, #4D382E);text-decoration:underline;}

/* Exceptions cards (3 sub-cards, gap 16px, each gap 12px) */
.otc-rr-exceptions{
  display:flex;flex-direction:column;gap:16px;
}
.otc-rr-exception{
  display:flex;flex-direction:column;gap:12px;
}
.otc-rr-exception h3{
  font:var(--otac-fw-semibold) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-rr-exception p{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-rr-exception ul{
  display:flex;flex-direction:column;gap:8px;
  list-style:none;padding:0;margin:0;
}
.otc-rr-exception ul li{
  position:relative;padding-left:20px;
  font:var(--otac-fw-regular) 18px/1.4 var(--otac-ff);
  color:var(--otac-text);
}
.otc-rr-exception ul li::before{
  content:"•";position:absolute;left:0;top:0;
  color:var(--otac-text);font-size:18px;line-height:1.4;
}
/* RR-modify layout — h2 + sub LEFT (per Figma TZ), button centered (300px) */
.otc-rr-modify{
  align-items:stretch;text-align:left;
}
.otc-rr-modify > h2,
.otc-rr-modify > p{
  width:100%;text-align:left;
}
.otc-rr-modify > .otc-rr-modify__btn,
.otc-rr-modify > .otc-rr-modify__link{
  align-self:center;
}

@media (max-width:991px){
  .otc-rr-hero{padding:32px 16px;gap:24px;}
  .otc-rr-hero__title{font-size:20px;}
  .otc-rr-hero__sub{font-size:16px;}
  /* Figma mobile 873:126681: two buttons side-by-side (169×40, gap 12), not stacked. */
  .otc-rr-hero__actions{flex-direction:row;justify-content:flex-start;gap:12px;}
  .otc-rr-hero__cta,.otc-rr-hero__cta-outline{flex:1 1 0;width:auto;max-width:none;min-width:0;height:40px;padding:8px 12px;font-size:14px;}
  .otc-rr-steps{grid-template-columns:1fr;gap:16px;}
  .otc-rr-step{padding:16px;gap:16px;min-height:auto;}
  .otc-rr-step h3{font-size:18px;}
  .otc-rr-step p,.otc-rr-step__muted{font-size:14px;}
  .otc-rr-table td{font-size:14px;padding:10px;}
  .otc-rr-modify__btn{width:100%;max-width:280px;}
  .otc-rr-exception h3{font-size:16px;}
  .otc-rr-exception p{font-size:14px;}
}

/* ══════════════════════════════════════════════════════════════════════
   About Us (id=4) — Figma 983:117481 1:1
   Hero 48/600 title + 20/400 sub (max 618px), brands 5×192×100, reviews bar
   5 cards (3 col + 2 row), 10 reasons (number 32/500 + h3 20/500 + body 18/400)
   ══════════════════════════════════════════════════════════════════════ */
.otc-about-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:40px;text-align:center;
  padding:0;
  /* 120 + article gap 40 = 160 від sub-тексту вниз до Brands */
  margin-bottom:120px;
}
.otc-about-hero__title{
  font:var(--otac-fw-semibold) 48px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;letter-spacing:0;
}
.otc-about-hero__sub{
  font:var(--otac-fw-regular) 20px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
  max-width:618px;
}

/* Brand logos row — Figma 1016:110005 (5 brand cards 192×100, gap 40px) */
.otc-about-brands{
  display:flex;flex-direction:row;justify-content:center;align-items:center;
  gap:40px;flex-wrap:wrap;
}
.otc-about-brand{
  display:flex;align-items:center;justify-content:center;
  width:192px;height:100px;
  flex-shrink:0;
}
.otc-about-brand img{
  max-width:100%;max-height:100%;
  object-fit:contain;
}

/* Reviews bar — Figma 983:118877 (full-width F7F7F7 bg, 5 cards row, padding 24px 240px) */
.otc-info-page__content > section.otc-about-reviews-section{
  padding:0;
  margin-bottom:80px;
  /* Bleed на повну viewport ширину для F7F7F7 фону (override loyalty-section -80) */
  width:100vw;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.otc-about-reviews-section > h2,
.otc-about-reviews-section > p{display:none;}
.otc-about-trust{
  background:#F7F7F7;
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;
  padding:24px 240px;
  border-radius:0;
}
@media (max-width:1199px){
  .otc-about-trust{padding:20px 60px;}
}
@media (max-width:991px){
  .otc-about-trust{padding:16px 24px;}
}
@media (max-width:500px){
  .otc-about-trust{padding:12px 16px;}
}
.otc-about-trust__item{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;
  padding:0 24px;
  border-radius:8px;
}
.otc-about-trust__brand{
  display:flex;flex-direction:row;align-items:center;
  gap:8px;height:40px;
}
.otc-about-trust__small-logo{
  width:28px;height:28px;
  object-fit:contain;
  border-radius:0 !important;
}
.otc-about-trust__logo-wide{
  height:40px;width:auto;max-width:116px;
  object-fit:contain;
  border-radius:0 !important;
}
.otc-about-trust__brand-name{
  font-family:var(--otac-ff);
  font-size:18.33px;
  font-weight:var(--otac-fw-medium);
  color:var(--otc-btn-primary, #392923);
  letter-spacing:.02em;
}
.otc-about-trust__brand-name--trustpilot{
  font-family:'Roboto', sans-serif;
  font-size:22px;
  color:#000000;
}
.otc-about-trust__rating{
  display:flex;flex-direction:row;align-items:center;gap:8px;
}
.otc-about-trust__stars{
  display:inline-flex;align-items:center;gap:2px;
}
.otc-about-trust__stars img{
  width:18px;height:18px;display:block;
  border-radius:0 !important;
}
.otc-about-trust__score{
  font:var(--otac-fw-medium) 14px/1.43 var(--otac-ff);
  color:var(--otac-text);
}
.otc-about-trust__count{
  font:var(--otac-fw-regular) 14px/1.43 var(--otac-ff);
  color:var(--otac-text);
}
/* Cards 4-5: row layout з великим logo + (rating 32/500 + count) колонкою */
.otc-about-trust__item--horizontal{
  flex-direction:row;align-items:center;
  gap:10px;height:86px;
}
.otc-about-trust__big-logo{
  width:62px;height:62px;
  object-fit:contain;flex-shrink:0;
  border-radius:0 !important;
}
.otc-about-trust__right{
  display:flex;flex-direction:column;gap:6px;
}
.otc-about-trust__big-rating{
  font:var(--otac-fw-medium) 32px/1.21 var(--otac-ff);
  color:var(--otac-text);
}

/* 10 reasons — Figma 1008:109414 (rows з number 44px col + body, gap 16px) */
.otc-about-reasons{
  display:flex;flex-direction:column;
  gap:24px;width:100%;
  text-align:left;
}
.otc-about-reason{
  display:flex;flex-direction:row;align-items:flex-start;
  gap:16px;
  background:transparent;border:0;padding:0;
  text-align:left;
}
.otc-about-reason__num{
  width:44px;flex-shrink:0;
  font:var(--otac-fw-medium) 32px/1.21 var(--otac-ff);
  color:var(--otc-btn-primary, #392923);
  text-align:center;
  background:transparent;border-radius:0;height:auto;
  display:block;
}
.otc-about-reason__body{
  display:flex;flex-direction:column;gap:12px;
  padding:10px 0 0;flex:1;
}
.otc-about-reason h3{
  font:var(--otac-fw-medium) 20px/1.21 var(--otac-ff);
  color:var(--otac-text);margin:0;
}
.otc-about-reason p{
  font:var(--otac-fw-regular) 18px/1.21 var(--otac-ff);
  color:#3D3D3E;margin:0;
}

/* Mobile responsive */
@media (max-width:1199px){
  .otc-about-hero__title{font-size:40px;}
  .otc-about-brands{gap:24px;}
  .otc-about-brand{width:160px;height:80px;}
  .otc-about-trust{padding:20px;gap:16px;}
  .otc-about-trust__item{padding:0 12px;}
}
@media (max-width:991px){
  .otc-about-hero{gap:24px;padding-top:32px;}
  .otc-about-hero__title{font-size:32px;}
  .otc-about-hero__sub{font-size:16px;}
  /* Brand logos — single horizontally-scrollable row (Figma mobile 983:117434:
     5 cards 140×60, gap 20, swipe). No slider arrows / pagination — native scroll. */
  .otc-about-brands{
    gap:20px;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;
  }
  .otc-about-brands::-webkit-scrollbar{display:none;width:0;height:0;}
  .otc-about-brand{width:140px;height:60px;flex:0 0 140px;scroll-snap-align:start;}
  /* Reviews — Figma mobile 983:117434: ONE gray card, 2-col grid, items left-aligned
     directly on the card (NO white sub-cards). Left col: BobrCraft, Trustpilot;
     right col: Google, Google Play, App Store. */
  .otc-about-trust{
    display:grid;grid-template-columns:1fr 1fr;align-items:start;
    column-gap:16px;row-gap:24px;padding:24px 16px;border-radius:16px;
  }
  .otc-about-trust__item{
    align-items:flex-start;text-align:left;
    padding:0;width:auto;background:transparent;border-radius:0;gap:6px;
  }
  .otc-about-trust__item:nth-child(1){grid-column:1;grid-row:1;} /* BobrCraft */
  .otc-about-trust__item:nth-child(2){grid-column:2;grid-row:1;} /* Google */
  .otc-about-trust__item:nth-child(3){grid-column:1;grid-row:2;} /* Trustpilot */
  .otc-about-trust__item:nth-child(4){grid-column:2;grid-row:2;} /* Google Play */
  .otc-about-trust__item:nth-child(5){grid-column:2;grid-row:3;} /* App Store */
  .otc-about-trust__brand{height:auto;}
  .otc-about-trust__brand-name{font-size:16px;}
  .otc-about-trust__brand-name--trustpilot{font-size:18px;}
  .otc-about-trust__stars img{width:16px;height:16px;}
  .otc-about-trust__item--horizontal{flex-direction:row;align-items:center;gap:10px;height:auto;}
  .otc-about-trust__big-logo{width:32px;height:32px;}
  .otc-about-trust__right{gap:2px;}
  .otc-about-trust__big-rating{font-size:18px;line-height:1.2;}
  .otc-about-reason__num{font-size:28px;width:36px;}
  .otc-about-reason h3{font-size:18px;}
  .otc-about-reason p{font-size:16px;}
  .otc-about-reason__body{padding-top:4px;}
}
@media (max-width:500px){
  .otc-about-hero__title{font-size:28px;}
  .otc-about-hero__sub{font-size:14px;}
  /* Keep the single scrollable row (inherits nowrap/overflow from ≤991). */
  .otc-about-brands{gap:16px;}
  .otc-about-brand{width:140px;height:60px;flex:0 0 140px;}
  .otc-about-trust{column-gap:12px;row-gap:20px;padding:20px 14px;}
  .otc-about-trust__item{padding:0;}
  .otc-about-trust__brand-name{font-size:16px;}
  .otc-about-trust__brand-name--trustpilot{font-size:18px;}
  .otc-about-trust__big-rating{font-size:18px;}
  .otc-about-reason__num{font-size:24px;width:32px;}
  .otc-about-reason h3{font-size:16px;}
  .otc-about-reason p{font-size:14px;}
}
/* Returns hero (id=8) base responsive — extracted from old combined block */
@media (max-width:991px){
  /* No side padding — the wrap container already insets; no bottom margin — block
     gap handled by content flex-gap (40px). */
  .otc-rr-hero{padding:0;margin-bottom:0;}
  .otc-rr-hero__title{font-size:32px;}
  .otc-rr-hero__sub{font-size:16px;}
  .otc-rr-steps{grid-template-columns:1fr;gap:12px;}
  .otc-rr-step{padding:16px;}
  .otc-rr-table th,
  .otc-rr-table td{padding:12px;font-size:14px;}
}
@media (max-width:500px){
  .otc-rr-hero__title{font-size:24px;}
}

/* ════════════════════════════════════════════════════════════════════
   Return Request page (account/return_wizard) — accordion 1:1 з Figma
   refs: 955:99411 / 971:107600 / 978:110142 / 978:111016
   ════════════════════════════════════════════════════════════════════ */
.acc-ret-page{
  display:flex;flex-direction:column;gap:24px;
  font-family:'Inter',sans-serif;
  /* Figma tokens (можно ребрендить точкой) */
  --otc-ret-text: #131314;
  --otc-ret-text-muted: #7D7D7D;
  --otc-ret-text-light: #606162;
  --otc-ret-border: #DDDDDD;
  --otc-ret-bg: #FFFFFF;
  --otc-ret-bg-muted: #F4F4F5;
  --otc-ret-brand: #392923;
  --otc-ret-brand-hover: #4D382E;
  --otc-ret-link: #577B28;
  --otc-ret-success-bg: rgba(15, 163, 121, 0.1);
  --otc-ret-success-fg: #0FA379;
}
.acc-ret-title{
  margin:0;
  font:600 24px/1.21 'Inter',sans-serif;
  color:#131314;
  letter-spacing:-.01em;
}

/* ── Card (universal collapsible block) ────────────────────────────── */
.acc-ret-card{
  display:flex;flex-direction:column;gap:24px;
  background:#FFFFFF;
  border:1px solid #DDDDDD;
  border-radius:12px;
  padding:24px;
  transition:border-color .15s;
}
.acc-ret-card__header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
}
.acc-ret-card__title{
  margin:0;
  font:600 18px/1.21 'Inter',sans-serif;
  /* Неактивні (collapsed) картки — приглушений; активна — темна (Figma). */
  color:var(--otc-ret-text-muted);
  letter-spacing:0;
}
.acc-ret-card--active .acc-ret-card__title{
  color:var(--otc-ret-text);
}
/* "Change" link справа в header — показывается только в confirmed state */
.acc-ret-card__change{
  font:400 16px/1.375 'Inter',sans-serif;
  color:var(--otc-ret-link);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.acc-ret-card__change:hover{
  color:var(--otc-ret-link);
  text-decoration:underline;
}
.acc-ret-card__change[hidden]{display:none !important;}
.acc-ret-card__body{
  display:flex;flex-direction:column;gap:24px;
}
/* Collapsed state — body hidden, header стрелка вниз (no JS toggle) */
.acc-ret-card--collapsed .acc-ret-card__body{display:none;}
/* Confirmed state — body виден, но в compact-mode (см. далее), title gray (наследует) */
.acc-ret-card--confirmed .acc-ret-card__body{display:flex;}
/* Active state — full body, всё видно */
.acc-ret-card--active .acc-ret-card__body{display:flex;}

/* Disclaimer paragraph внутри Card 2/3 (Figma 978:110142) */
.acc-ret-card__disclaimer{
  margin:0;
  font:400 16px/1.375 'Inter',sans-serif;
  color:var(--otc-ret-text);
}

/* ── Toolbar (Select all) ───────────────────────────────────────────── */
.acc-ret-toolbar{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
  user-select:none;
}
.acc-ret-toolbar__label{
  font:400 16px/1.375 'Inter',sans-serif;
  color:#131314;
}

/* ── Chip-style checkbox (Onetap convention) ────────────────────────── */
.acc-ret-checkbox__box{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;
  background:#FFFFFF;
  border:1px solid #DDDDDD;
  border-radius:4px;
  transition:background .15s, border-color .15s;
}
.acc-ret-checkbox__box svg{opacity:0;transition:opacity .12s;}
input[type="checkbox"]:checked + .acc-ret-checkbox__box,
.acc-ret-item input[type="checkbox"]:checked ~ .acc-ret-item__check .acc-ret-checkbox__box{
  background:#392923;border-color:#392923;
}
input[type="checkbox"]:checked + .acc-ret-checkbox__box svg,
.acc-ret-item input[type="checkbox"]:checked ~ .acc-ret-item__check .acc-ret-checkbox__box svg{opacity:1;}

/* ── Items list ─────────────────────────────────────────────────────── */
.acc-ret-items{
  display:flex;flex-direction:column;gap:12px;
}
.acc-ret-divider{
  height:1px;background:#DDDDDD;
  margin:0;
}
.acc-ret-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:12px 0;
  cursor:pointer;
  position:relative;
}
.acc-ret-item__check{
  flex-shrink:0;
  padding-top:6px;
}
.acc-ret-item__center{
  display:flex;flex-direction:column;gap:24px;
  flex:1;min-width:0;
  max-width:629px;
}
.acc-ret-item__top{
  display:flex;align-items:flex-start;gap:8px;
}
.acc-ret-item__thumb{
  display:inline-flex;align-items:center;justify-content:center;
  width:110px;height:110px;flex-shrink:0;
  background:#F4F4F5;
  border-radius:4px;
  overflow:hidden;
}
.acc-ret-item__thumb img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.acc-ret-item__info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:8px;
  padding:4px 0;
}
.acc-ret-item__name{
  font:400 14px/20px 'Inter',sans-serif;color:#131314;
}
.acc-ret-item__meta{
  font:400 12px/1.43 'Inter',sans-serif;color:#7D7D7D;
}
/* Attribute chips (Stamp size, Stamp type, +1 More) */
.acc-ret-item__attrs{
  display:flex;flex-wrap:wrap;gap:4px;
  margin:2px 0;
}
.acc-ret-item__attr-chip{
  display:inline-flex;align-items:center;
  padding:5px 8px;
  background:rgba(0,0,0,.05);border-radius:100px;
  font:400 12px/1 'Inter',sans-serif;color:#131314;
}
/* Unit price + Quantity rows під info — як на Figma */
.acc-ret-item__price-row{
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
}
.acc-ret-item__price-row strong{
  font-weight:600;color:#131314;
}

/* Reason / photos / notes block — hidden by default, shown when checked */
.acc-ret-item__reason-block[hidden]{display:none !important;}
.acc-ret-item__reason-block{
  display:flex;flex-direction:column;gap:16px;
}
.acc-ret-item__field{
  display:flex;flex-direction:column;gap:4px;
}
.acc-ret-item__field-label{
  font:500 14px/1 'Inter',sans-serif;
  color:#131314;
}
.acc-ret-item__reason-select{
  height:48px;padding:12px;
  background:#FFFFFF;
  border:1px solid #DDDDDD;border-radius:8px;
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23131314' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:36px;
}
.acc-ret-item__reason-select:focus{outline:0;border-color:#392923;}

.acc-ret-item__uploader{
  display:flex;flex-direction:column;gap:8px;
  position:relative;
}
/* Native file input must NEVER be visible — hidden attr alone can be overridden by browser/CSS */
.acc-ret-item__uploader-input{
  position:absolute !important;
  width:0 !important;height:0 !important;
  padding:0 !important;border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
  clip:rect(0 0 0 0) !important;
  overflow:hidden !important;
}
/* Drop-zone 1:1 з Figma — dashed border, cloud-upload icon center, "Click to upload or drag and drop".
   Fixed h-144 щоб всі items були однакові. */
.acc-ret-item__dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  width:100%;
  height:144px;             /* фіксована висота — всі drop-zones ідентичні */
  padding:24px 16px;
  background:#FFFFFF;
  border:1px dashed #DDDDDD;border-radius:8px;
  cursor:pointer;
  text-align:center;
  transition:background .15s, border-color .15s;
  box-sizing:border-box;
}
.acc-ret-item__dropzone:hover{background:#FAFAFA;border-color:#7D7D7D;}
.acc-ret-item__dropzone-icon{color:#131314;flex-shrink:0;}
.acc-ret-item__dropzone-text{
  font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;
}
.acc-ret-item__dropzone-link{
  font-weight:500;color:#131314;
  text-decoration:underline;
}
.acc-ret-item__uploader-caption{
  font:400 12px/1.43 'Inter',sans-serif;color:#7D7D7D;
  text-align:right;
}
.acc-ret-item__uploader-thumbs{
  display:flex;flex-wrap:wrap;gap:8px;
}
/* Warning row під drop-zone — ⚠ icon + текст */
.acc-ret-item__warn{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:8px;
}
.acc-ret-item__warn-icon{flex-shrink:0;margin-top:2px;}
.acc-ret-item__warn-text{
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
}
.acc-ret-item__uploader-thumb{
  position:relative;
  width:64px;height:64px;
  border-radius:6px;overflow:hidden;
  background:#F4F4F5;
}
.acc-ret-item__uploader-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.acc-ret-item__uploader-thumb__rm{
  position:absolute;top:2px;right:2px;
  width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#FFF;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 11px/1 'Inter',sans-serif;
}

/* Notes wrap — поле + counter "0/1000" в нижньому правому */
.acc-ret-item__notes-wrap{position:relative;width:100%;}
.acc-ret-item__notes{
  width:100%;min-height:104px;
  padding:12px 12px 28px 12px;  /* bottom 28 — місце для counter */
  border:1px solid #DDDDDD;border-radius:8px;
  font:400 14px/1.5 'Inter',sans-serif;color:#131314;
  background:#FFFFFF;resize:vertical;
  box-sizing:border-box;
  line-height:1.5;
}
.acc-ret-item__notes::placeholder{color:#7D7D7D;}
.acc-ret-item__notes:focus{outline:0;border-color:#392923;}
.acc-ret-item__notes-counter{
  position:absolute;
  bottom:10px;right:12px;
  font:400 12px/1 'Inter',sans-serif;color:#7D7D7D;
  pointer-events:none;
}

/* ── Item right column (subtotal + qty) ─────────────────────────────── */
.acc-ret-item__right{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:16px;
  flex-shrink:0;
  min-height:110px;
  padding-top:4px;
}
.acc-ret-item__subtotal{
  display:flex;align-items:center;gap:16px;
}
.acc-ret-item__subtotal-label{
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
}
.acc-ret-item__subtotal-val{
  font:600 14px/1.43 'Inter',sans-serif;color:#131314;
  white-space:nowrap;
}
.acc-ret-item__qty{
  width:150px;height:40px;padding:0 12px;
  background:#FFFFFF;
  border:1px solid #DDDDDD;border-radius:8px;
  font:400 14px/1 'Inter',sans-serif;color:#131314;
  cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23131314' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;
}
.acc-ret-item__qty:focus{outline:0;border-color:#392923;}

/* ── Card footer / buttons ─────────────────────────────────────────── */
.acc-ret-card__footer{
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;
}
.acc-ret-card__placeholder{
  margin:0;font:400 14px/1.5 'Inter',sans-serif;color:#7D7D7D;text-align:center;
}
.acc-ret-cancel-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:40px;padding:0 24px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:8px;
  font:500 14px/1 'Inter',sans-serif;color:#131314;
  text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.acc-ret-cancel-btn:hover{background:#FAFAFA;text-decoration:none;color:#131314;}

.acc-ret-continue-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:300px;height:40px;padding:0 24px;
  border:0;border-radius:8px;
  font:500 14px/1 'Inter',sans-serif;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.acc-ret-continue-btn:disabled{
  background:#DDDDDD;color:#7D7D7D;cursor:not-allowed;
}
.acc-ret-continue-btn:not(:disabled){
  background:var(--otc-btn-primary, #392923);
  color:var(--otc-btn-primary-text, #FFFFFF);
}
.acc-ret-continue-btn:not(:disabled):hover{
  background:var(--otc-btn-primary-hover, #4D382E);
}

/* ── Card 2: action-cards (Refund / Resend) — Figma "How can we help you?" ── */
.acc-ret-actions-list{
  display:flex;flex-direction:column;gap:12px;
}
.acc-ret-action-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px;
  background:#FFFFFF;
  border:1px solid var(--otc-ret-border);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.acc-ret-action-card:hover{border-color:var(--otc-ret-text-muted);}
.acc-ret-action-card input[type="radio"]{
  position:absolute;opacity:0;pointer-events:none;
}
/* Custom radio dot */
.acc-ret-action-card__radio{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;
  margin-top:2px;
  background:#FFFFFF;
  border:1px solid var(--otc-ret-border);
  border-radius:50%;
  transition:border-color .15s;
}
.acc-ret-action-card__dot{
  width:10px;height:10px;
  background:var(--otc-ret-brand);
  border-radius:50%;
  transform:scale(0);
  transition:transform .15s;
}
.acc-ret-action-card.is-selected{border-color:var(--otc-ret-brand);}
.acc-ret-action-card.is-selected .acc-ret-action-card__radio{border-color:var(--otc-ret-brand);}
.acc-ret-action-card.is-selected .acc-ret-action-card__dot{transform:scale(1);}
/* Content stack */
.acc-ret-action-card__content{
  display:flex;flex-direction:column;gap:4px;
  flex:1;min-width:0;
}
.acc-ret-action-card__title{
  font:600 14px/1.43 'Inter',sans-serif;
  color:var(--otc-ret-text);
}
.acc-ret-action-card__desc{
  font:400 14px/1.43 'Inter',sans-serif;
  color:var(--otc-ret-text-muted);
  white-space:pre-line;  /* respect newlines (resend address lines) */
}
/* Mobile (≤500): більший padding-bottom, font 13 */
@media (max-width:500px){
  .acc-ret-action-card{padding:12px;}
  .acc-ret-action-card__title{font-size:13px;}
  .acc-ret-action-card__desc{font-size:12px;}
}

/* Submit button (внутри Card 3) — 300×40 br-8 14/Medium per Figma 978:110142 */
.acc-ret-submit-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:300px;height:40px;padding:0 24px;
  background:var(--otc-ret-brand);
  color:#FFFFFF;
  border:0;border-radius:8px;
  font:500 14px/1.286 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.acc-ret-submit-btn:hover{
  background:var(--otc-ret-brand-hover);
  text-decoration:none;color:#FFFFFF;
}

/* ── Confirmed-state items: trash icon вместо checkbox ─────────────── */
/* В confirmed state скрываем chip-checkbox колонку слева и reason-block.
   Trash icon добавляется в right column вместо qty select. */
.acc-ret-card--confirmed .acc-ret-item__check{display:none;}
.acc-ret-card--confirmed .acc-ret-item__reason-block{display:none !important;}
.acc-ret-card--confirmed .acc-ret-item__qty{display:none;}
.acc-ret-card--confirmed .acc-ret-item__trash{display:inline-flex;}
/* Hidden Continue button в confirmed Card 1 — visible only in active */
.acc-ret-card--confirmed .acc-ret-card__footer{display:none;}
/* Trash button — 24×24, по Figma fill_FTMWPD outline-style */
.acc-ret-item__trash{
  display:none; /* shown only when card confirmed (см. выше) */
  background:none;border:0;cursor:pointer;
  width:24px;height:24px;
  align-items:center;justify-content:center;
  color:var(--otc-ret-text);
  transition:color .15s;
}
.acc-ret-item__trash:hover{color:#EC2424;}

/* ═══════════════════════════════════════════════════════════════════
   Submitted Popup — modal 640w, success icon, "Go to orders" 300×48
   Figma 978:111016
   ═══════════════════════════════════════════════════════════════════ */
.acc-ret-popup-backdrop[hidden]{display:none !important;}
.acc-ret-popup-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0, 0, 0, 0.2);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.acc-ret-popup{
  width:640px;max-width:calc(100vw - 32px);
  padding:24px;
  background:#FFFFFF;
  border-radius:8px;
  display:flex;flex-direction:column;
  align-items:center;gap:40px;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}
.acc-ret-popup__close-row{
  display:flex;justify-content:flex-end;align-items:center;
  width:100%;gap:10px;
}
.acc-ret-popup__close{
  width:40px;height:40px;
  background:none;border:0;
  color:#131314;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;
  transition:background .12s;
}
.acc-ret-popup__close:hover{background:#F5F5F5;}
.acc-ret-popup__content{
  display:flex;flex-direction:column;
  align-items:center;gap:12px;
  width:100%;
}
.acc-ret-popup__icon{
  width:80px;height:80px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(15, 163, 121, 0.1);
  border-radius:50%;
}
.acc-ret-popup__title{
  margin:0;
  font:500 32px/1.21 'Inter',sans-serif;
  color:#131314;
  text-align:center;
}
.acc-ret-popup__sub{
  margin:0;
  font:400 16px/1.375 'Inter',sans-serif;
  color:#606162;
  text-align:center;
  max-width:592px;
}
.acc-ret-popup__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:300px;height:48px;
  padding:12px;gap:8px;
  background:#392923;color:#FFFFFF;
  border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.acc-ret-popup__btn:hover{
  background:#4D382E;
  color:#FFFFFF;text-decoration:none;
}
body.acc-popup-open{overflow:hidden;}
/* Hide floating mobile bottom-nav when popup/sheet is open (otherwise its z-index 9998 > sheet 1000) */
body.acc-popup-open .ot-mobile-nav,
body.acc-sheet-open .ot-mobile-nav{display:none !important;}

/* Summary-row під top-row: Quantity + Unit price у горизонтальній стрічці (mobile only) */
.acc-ret-item__summary-row{display:none;}
.acc-ret-item__sum-cell strong{font-weight:600;color:#131314;}
.acc-ret-item__sum-cell--right{text-align:right;}

/* Per-item "Describe the product issue" button — desktop: hidden always.
   Mobile: visible only when item has .is-selected class.
   Brown brand CTA full-width — Figma 955:99294 */
.acc-ret-describe-btn{display:none;}
.acc-ret-describe-btn[hidden]{display:none !important;}

/* Sheet preview rows — only inside open mobile sheet */
.acc-ret-sheet-preview__top,
.acc-ret-sheet-preview__row{display:none;}

/* ═══════════════════════════════════════════════════════════════════
   Mobile Bottom-Sheet "What is the issue?" — Figma 971:104159
   На desktop sheet header/footer скрыты, reason-block рендерится inline.
   На mobile (≤500) reason-block выезжает снизу как bottom-sheet.
   ═══════════════════════════════════════════════════════════════════ */
.acc-ret-sheet-head,
.acc-ret-sheet-footer,
.acc-ret-sheet-preview{display:none;}
.acc-ret-mobile-backdrop[hidden]{display:none !important;}
.acc-ret-mobile-backdrop{
  position:fixed;inset:0;
  background:rgba(0, 0, 0, 0.55);   /* раніше 0.2 — текст з-під sheet просвічував */
  z-index:9999;     /* must outrank .ot-mobile-nav (9998) */
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}
body.acc-sheet-open .acc-ret-mobile-backdrop{
  opacity:1;pointer-events:auto;
}
body.acc-sheet-open{overflow:hidden;}

/* ── Responsive ─────────────────────────────────────────────────── */
/* ── Responsive (OneTap breakpoints 1367/992/501/500) ─────────────── */
@media (max-width:1366px){
  .acc-ret-item{flex-wrap:wrap;}
  .acc-ret-item__center{flex-basis:100%;max-width:none;}
  .acc-ret-item__right{
    flex-direction:row;justify-content:space-between;align-items:center;
    min-height:0;width:100%;padding-top:0;
  }
  /* dropzone не плавает — всі items однакові за шириною */
  .acc-ret-item__dropzone{height:144px;}
}
@media (max-width:991px){
  .acc-ret-card{padding:20px;}
  .acc-ret-item__thumb{width:96px;height:96px;}
  .acc-ret-item__reason-select,
  .acc-ret-item__notes{font-size:14px;}
  .acc-ret-item__dropzone{height:128px;padding:16px 12px;}
  .acc-ret-item__dropzone-icon{width:28px;height:28px;}
  .acc-ret-item__center{gap:16px;}
  .acc-ret-item__reason-block{gap:12px;}
}
@media (max-width:768px){
  /* Tablet portrait — reduce font scale, dropzone narrower */
  .acc-ret-item{gap:12px;}
  .acc-ret-item__thumb{width:88px;height:88px;}
  .acc-ret-item__name{font-size:14px;}
  .acc-ret-item__price-row{font-size:13px;}
  .acc-ret-item__warn-text{font-size:13px;line-height:1.43;}
  .acc-ret-item__dropzone-text,
  .acc-ret-item__notes{font-size:13px;}
}
@media (max-width:500px){
  /* Page wrapper — 12px горизонтальний padding як на Figma 375 */
  .acc-ret-page{gap:16px;padding:0;}
  .acc-ret-title{
    font:600 20px/1.21 'Inter',sans-serif;  /* Text Font/20px Semibold */
    padding:0 12px;
  }
  /* Card — radius 8, padding 12, gap 24 (Figma 971:103856) */
  .acc-ret-card{
    padding:12px;gap:24px;
    border-radius:8px;
    margin:0 12px;
  }
  /* Card title — 18px Medium (500), НЕ Semibold (Figma Text Font/18px Medium) */
  .acc-ret-card__title{
    font:500 18px/1.11 'Inter',sans-serif;
  }
  /* "Change" link — 14px Regular (mobile) */
  .acc-ret-card__change{font-size:14px;}

  /* Item layout (Figma 955:99294):
       Row 1:  [check 20×20]  [thumb ~72×72]  [info: name + chip-attrs]
       Row 2:  Quantity: xN  ─  Unit price: $X  (summary-row)
       Row 3:  [Describe the product issue]  (тільки коли item .is-selected)
     Direction: column to stack rows; check + top stay aligned via top-row flex. */
  .acc-ret-item{padding:8px 0;gap:8px;flex-direction:row;align-items:flex-start;}
  .acc-ret-item__check{padding-top:4px;flex-shrink:0;}
  .acc-ret-item__center{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
  .acc-ret-item__top{gap:12px;align-items:flex-start;}
  .acc-ret-item__thumb{width:72px;height:72px;flex-shrink:0;}
  .acc-ret-item__info{gap:6px;flex:1;min-width:0;}
  .acc-ret-item__name{font-size:14px;line-height:1.43;font-weight:500;color:#131314;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .acc-ret-item__attr-chip{font-size:11px;padding:3px 6px;}

  /* Summary-row — Quantity left + Unit price right, повний рядок */
  .acc-ret-item__summary-row{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;
    font:400 13px/1.43 'Inter',sans-serif;color:#7D7D7D;
  }
  .acc-ret-item__sum-cell strong{font-weight:600;color:#131314;}
  .acc-ret-item__sum-cell--right{text-align:right;}

  /* Right column — повністю ховаємо на mobile (qty/subtotal живуть у sheet preview) */
  .acc-ret-item__right{display:none !important;}

  /* Reason block — Figma mobile: лейбли 14px Medium, select 44px/14px/radius10 */
  .acc-ret-item__reason-block{gap:16px;}
  .acc-ret-item__field-label{font-size:14px;}
  .acc-ret-item__reason-select{height:44px;padding:12px;font-size:14px;border-radius:10px;}

  /* Drop-zone — Figma mobile: текст 14px, dashed 6,6, radius 8 */
  .acc-ret-item__dropzone{height:120px;padding:12px;}
  .acc-ret-item__dropzone-icon{width:24px;height:24px;}
  .acc-ret-item__dropzone-text{font-size:14px;line-height:20px;}
  .acc-ret-item__warn{gap:8px;}
  .acc-ret-item__warn-text{font-size:12px;line-height:1.4;}

  /* Notes — Figma mobile: 14px */
  .acc-ret-item__notes{font-size:14px;min-height:88px;padding:10px 10px 24px 10px;}
  .acc-ret-item__notes-counter{font-size:11px;bottom:8px;right:10px;}

  /* Disclaimer (Card 2/3) — 14px mobile */
  .acc-ret-card__disclaimer{font-size:14px;}

  /* Card footer — full-width 44h buttons (Figma Button Font/Medium) */
  .acc-ret-card__footer{flex-direction:row;gap:10px;}
  .acc-ret-cancel-btn,
  .acc-ret-continue-btn,
  .acc-ret-submit-btn{
    width:100%;flex:1;height:44px;
    font:500 14px/1.286 'Inter',sans-serif;
  }
  /* Якщо 1 кнопка в footer — теж full-width */
  .acc-ret-card__footer:has(> :only-child) .acc-ret-cancel-btn,
  .acc-ret-card__footer:has(> :only-child) .acc-ret-continue-btn,
  .acc-ret-card__footer:has(> :only-child) .acc-ret-submit-btn{flex:none;}

  /* Popup responsive — 12px-side padding, h-44 button */
  .acc-ret-popup{padding:16px;gap:24px;}
  .acc-ret-popup-backdrop{padding:12px;}
  .acc-ret-popup__title{font-size:24px;}
  .acc-ret-popup__sub{font-size:14px;}
  .acc-ret-popup__btn{width:100%;height:44px;font-size:14px;border-radius:8px;}
  .acc-ret-popup__icon{width:64px;height:64px;}
  .acc-ret-popup__icon svg{width:32px;height:32px;}

  /* Breadcrumb — менший padding, 12px text */
  .acc-ret-page + nav.acc-breadcrumb,
  .acc-ret-page nav.acc-breadcrumb{padding:0 12px;}

  /* ── Bottom-sheet mobile ───────────────────────────────────────────
     Cli на item → JS викликає .is-sheet-open → reason-block виїжджає знизу.
     padding-top=0 — щоб sticky header був flush з верхнім краєм sheet (раніше 12px gap
     показував page content). */
  .acc-ret-item.is-sheet-open .acc-ret-item__reason-block{
    display:flex !important;
    position:fixed;left:0;right:0;bottom:0;
    z-index:10000;    /* must outrank backdrop 9999 + .ot-mobile-nav 9998 */
    background:#FFFFFF;
    border-radius:8px 8px 0 0;
    padding:0 12px 76px 12px;        /* top=0 — flush header; bottom — простір під sticky footer */
    margin:0;
    gap:24px;
    max-height:88vh;
    overflow-y:auto;
    box-shadow:0 -2px 12px rgba(0,0,0,0.08);
    animation:acc-sheet-slide-up .25s ease-out;
  }
  /* Sheet відкритий → ховаємо page-card контент (top/summary/describe) ВСІХ items —
     product name з картки на сторінці більше не дублюється/просвічує через backdrop.
     visibility (not display:none) — layout не стрибає при закритті sheet. */
  body.acc-sheet-open .acc-ret-item__top,
  body.acc-sheet-open .acc-ret-item__summary-row,
  body.acc-sheet-open .acc-ret-describe-btn{
    visibility:hidden;
  }
  /* Sheet header (показуємо тільки в sheet-mode) — solid bg обовʼязковий
     щоб scroll контент НЕ просвічувався з-під sticky хедера */
  .acc-ret-item.is-sheet-open .acc-ret-sheet-head{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;
    position:sticky;top:0;
    background:#FFFFFF;
    margin:0 -12px;
    padding:12px;
    border-bottom:1px solid #DDDDDD;
    z-index:10;
    box-shadow:0 1px 0 #FFFFFF;  /* nudge — covers any sub-pixel bleed under */
  }
  .acc-ret-sheet-title{
    margin:0;
    font:500 18px/1.11 'Inter',sans-serif;   /* Figma Text Font/18px Medium */
    color:#131314;
  }
  .acc-ret-sheet-close{
    width:32px;height:32px;
    background:none;border:0;cursor:pointer;
    color:#131314;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:6px;
    transition:background .12s;
  }
  .acc-ret-sheet-close:hover{background:#F5F5F5;}

  /* Sheet product preview — Figma 971:105081 (mobile sheet) */
  .acc-ret-item.is-sheet-open .acc-ret-sheet-preview{
    display:flex;flex-direction:column;gap:8px;
  }
  /* Top: thumb + name + chips */
  .acc-ret-item.is-sheet-open .acc-ret-sheet-preview__top{
    display:flex;align-items:flex-start;gap:8px;
  }
  .acc-ret-sheet-preview__thumb{
    display:inline-flex;align-items:center;justify-content:center;
    width:60px;height:60px;flex-shrink:0;            /* Figma mobile: 60×60 */
    background:#F4F4F5;border-radius:4px;overflow:hidden;
  }
  .acc-ret-sheet-preview__thumb img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .acc-ret-sheet-preview__info{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:4px;
  }
  .acc-ret-sheet-preview__name{
    font:400 14px/20px 'Inter',sans-serif;color:#131314;   /* Figma: 14px Regular */
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .acc-ret-sheet-preview__attr{display:flex;flex-wrap:wrap;gap:4px;}
  /* Чипи в sheet-прев'ю на моб — 10px (Figma) */
  .acc-ret-sheet-preview__attr .acc-ret-item__attr-chip{font-size:10px;padding:3px 5px;}

  /* Bottom rows: Quantity/Unit price + Qty SELECT/Subtotal — 14px, темні (Figma) */
  .acc-ret-item.is-sheet-open .acc-ret-sheet-preview__row{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    font:400 14px/20px 'Inter',sans-serif;color:#131314;
  }
  .acc-ret-sheet-preview__row strong{font-weight:600;color:#131314;}
  .acc-ret-sheet-preview__cell--right{text-align:right;color:#131314;}
  .acc-ret-sheet-preview__row--qty{padding-top:8px;border-top:1px solid var(--otc-ret-border);}
  .acc-ret-sheet-preview__qty-select{
    width:80px;height:36px;padding:0 28px 0 10px;
    background:#FFFFFF;border:1px solid var(--otc-ret-border);border-radius:8px;
    font:400 14px/1 'Inter',sans-serif;color:#131314;
    cursor:pointer;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23131314' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
  }

  /* Sheet-mode dropdown radius 10 (per Figma 971:105152) */
  .acc-ret-item.is-sheet-open .acc-ret-item__reason-select{
    border-radius:10px;
  }

  /* Mobile: items НЕ розгортають inline reason-block. Editing — тільки через bottom-sheet. */
  .acc-ret-item:not(.is-sheet-open) .acc-ret-item__reason-block{
    display:none !important;
  }

  /* Mobile Card 1: footer показує тільки Continue (Cancel ховаємо per Figma) */
  .acc-ret-card[data-card="1"] .acc-ret-cancel-btn{display:none;}

  /* Per-item "Describe the product issue" — shows ONLY коли batkivsky .acc-ret-item має .is-selected.
     Brown brand CTA full-width, height 44 — Figma 955:99294 */
  .acc-ret-describe-btn{display:none;}
  .acc-ret-item.is-selected .acc-ret-describe-btn{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:44px;padding:12px;
    background:var(--otc-ret-brand);
    color:#FFFFFF;
    border:0;border-radius:8px;
    font:500 14px/1.286 'Inter',sans-serif;
    cursor:pointer;
    transition:background .15s;
  }
  .acc-ret-item.is-selected .acc-ret-describe-btn:hover{
    background:var(--otc-ret-brand-hover, #4D382E);
  }

  /* Sheet sticky footer */
  .acc-ret-item.is-sheet-open .acc-ret-sheet-footer{
    display:flex;gap:10px;
    position:fixed;left:0;right:0;bottom:0;
    padding:10px 12px;
    background:#FFFFFF;
    border-top:1px solid #DDDDDD;
    box-shadow:0 0 15px rgba(0,0,0,0.2);
    z-index:10001;    /* must outrank sheet body 10000 */
  }
  .acc-ret-item.is-sheet-open .acc-ret-sheet-footer .acc-ret-cancel-btn,
  .acc-ret-item.is-sheet-open .acc-ret-sheet-footer .acc-ret-continue-btn{
    flex:1;width:auto;height:44px;
  }
}

@keyframes acc-sheet-slide-up{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}

/* ════════════════════════════════════════════════════════════════════
   Order Details — Figma 1:1 (652-68618 desktop / 652-68588 mobile)
   ════════════════════════════════════════════════════════════════════ */

.acc-od-detail-page{display:flex;flex-direction:column;gap:24px;}
.acc-od-detail-back{
  display:none;align-items:center;gap:6px;
  font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;text-decoration:none;padding:6px 0;
}
.acc-od-detail-back:hover{color:#131314;}

.acc-od-detail-header{display:flex;flex-direction:column;gap:12px;}
.acc-od-detail-title{font:600 24px/1.21 'Inter',sans-serif;color:#131314;margin:0;}
.acc-od-detail-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.acc-od-detail-meta__date{font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;}
.acc-od-detail-meta__divider{width:1px;height:14px;background:#DDDDDD;}
.acc-od-detail-meta__invoice{font:500 14px/1.286 'Inter',sans-serif;color:#392923;text-decoration:underline;}
.acc-od-detail-meta__invoice:hover{text-decoration:underline;color:#4D382E;}

.acc-od-detail-actions-mobile{display:none;}

.acc-od-detail-body{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:flex-start;}
.acc-od-detail-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
.acc-od-detail-side{display:flex;flex-direction:column;gap:16px;width:300px;}

.acc-od-detail-card{
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:8px;padding:12px;
  display:flex;flex-direction:column;gap:24px;          /* Figma layout_UD3HLZ — base */
}
.acc-od-detail-card--tight{gap:16px;}                  /* Status+Tracking (layout_PN3LDQ) */
.acc-od-detail-card__title{font:600 16px/1.375 'Inter',sans-serif;color:#131314;margin:0;}
.acc-od-detail-divider{height:1px;background:#DDDDDD;width:100%;}

/* Buttons */
.acc-od-detail-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 12px;border-radius:8px;
  font:500 14px/1.286 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .15s, border-color .15s;box-sizing:border-box;
}
.acc-od-detail-btn--primary{background:#392923;color:#FFFFFF;border:0;}
.acc-od-detail-btn--primary:hover{background:#4D382E;color:#FFFFFF;}
.acc-od-detail-btn--outline{background:#FFFFFF;color:#131314;border:1px solid #DDDDDD;}
.acc-od-detail-btn--outline:hover{background:#F7F7F7;color:#131314;}
.acc-od-detail-btn--sm{height:36px;padding:0 12px;font-weight:400;}

/* Delivery details */
.acc-od-detail-delivery{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.acc-od-detail-delivery__row{display:flex;gap:12px;align-items:flex-start;min-width:0;}
.acc-od-detail-delivery__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex-shrink:0;color:#131314;
}
.acc-od-detail-delivery__col{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.acc-od-detail-delivery__label{font:500 16px/1.375 'Inter',sans-serif;color:#131314;}
.acc-od-detail-delivery__value{font:400 16px/1.375 'Inter',sans-serif;color:#606162;}
/* Спосіб доставки — текст і ціна СТЕКОМ (Figma column gap 6), не в ряд */
.acc-od-detail-delivery__method{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.acc-od-detail-delivery__method-text,
.acc-od-detail-delivery__method-cost{font:400 16px/1.375 'Inter',sans-serif;color:#606162;}

/* Status header — Figma 16px (was 14) */
.acc-od-detail-status{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.acc-od-detail-status__label{font:600 16px/1.375 'Inter',sans-serif;color:#577B28;}
.acc-od-detail-status__date{font:400 16px/1.375 'Inter',sans-serif;color:#131314;}

/* Tracking inset strip */
/* Tracking inset strip — Figma: ОДИН рядок (бренд ліворуч, № праворуч), gap 24 */
.acc-od-detail-tracking{
  background:#F7F7F7;border:1px solid #DDDDDD;border-radius:8px;padding:10px;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.acc-od-detail-tracking__head{display:flex;align-items:center;}
.acc-od-detail-tracking__brand{display:inline-flex;align-items:center;gap:8px;font:500 16px/1.375 'Inter',sans-serif;color:#131314;}
.acc-od-detail-tracking__id-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.acc-od-detail-tracking__id-label{font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;}
.acc-od-detail-tracking__id{font:600 18px/1.21 'Inter',sans-serif;color:#131314;text-decoration:underline;}
.acc-od-detail-tracking__copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;min-width:24px;border-radius:4px;
  background:transparent;border:0;color:#131314;cursor:pointer;   /* іконка темна, як у макеті */
  transition:background .15s, color .15s;flex-shrink:0;
  padding:0;
}
/* фікс: svg не має стискатися у flex-рядку (рендерився 12×24) */
.acc-od-detail-tracking__copy svg{width:24px;height:24px;flex-shrink:0;display:block;}
.acc-od-detail-tracking__copy:hover{background:#FFFFFF;color:#131314;}

/* Vertical timeline */
.acc-od-detail-timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
.acc-od-detail-stage{display:flex;gap:12px;align-items:flex-start;padding:0;}
.acc-od-detail-stage__col{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  flex-shrink:0;width:20px;padding-top:2px;
}
.acc-od-detail-stage__dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:100px;
  background:#392923;flex-shrink:0;
}
.acc-od-detail-stage--delivered .acc-od-detail-stage__dot{
  width:20px;height:20px;border-radius:22px;background:#577B28;
}
.acc-od-detail-stage__line{width:2px;height:60px;background:#392923;display:block;}
.acc-od-detail-stage--delivered .acc-od-detail-stage__line{background:#577B28;}
.acc-od-detail-stage__body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.acc-od-detail-stage__label{font:600 16px/1.375 'Inter',sans-serif;color:#131314;}
.acc-od-detail-stage__date{font:400 16px/1.375 'Inter',sans-serif;color:#131314;}

.acc-od-detail-expand{
  display:inline-flex;align-items:center;gap:8px;
  font:600 16px/1.375 'Inter',sans-serif;color:#131314;text-decoration:none;cursor:pointer;
}
.acc-od-detail-expand:hover{color:#000;}

/* Products list — Figma layout_2NWRY4 ROW gap 16, 3 cols (thumb+info | price 150 | actions 160) */
.acc-od-detail-products{display:flex;flex-direction:column;gap:15px;}
.acc-od-detail-product{
  display:flex;flex-direction:row;align-items:center;gap:16px;
  padding-bottom:15px;border-bottom:1px solid #DDDDDD;
}
.acc-od-detail-product:last-child{border-bottom:0;padding-bottom:0;}

/* Col 1: thumb + info (fills remaining width) */
.acc-od-detail-product__main{
  display:flex;gap:8px;align-items:flex-start;
  flex:1;min-width:0;
}
.acc-od-detail-product__thumb{
  display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;border-radius:4px;
  background:#F7F7F7;overflow:hidden;flex-shrink:0;
}
.acc-od-detail-product__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.acc-od-detail-product__info{
  display:flex;flex-direction:column;justify-content:space-between;
  flex:1;min-width:0;height:80px;
}
.acc-od-detail-product__name{
  font:400 14px/1.428 'Inter',sans-serif;color:#131314;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.acc-od-detail-product__chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.acc-od-detail-product__chip{
  display:inline-flex;align-items:center;
  padding:5px 8px;background:rgba(0,0,0,0.05);border-radius:100px;
  font:400 12px/1.21 'Inter',sans-serif;color:#131314;
}
.acc-od-detail-product__chip--more{
  background:transparent;font-weight:500;padding:5px 6px;height:25px;
}

/* Col 2: price column — 150×84 col, justify space-between, align flex-end (layout_S4GXQL) */
.acc-od-detail-product__price{
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  width:150px;height:84px;flex-shrink:0;
}
.acc-od-detail-product__price-top{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.acc-od-detail-product__discount-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 8px;background:#AECF82;color:#131314;          /* Figma fill_YZ57I1 light green */
  border-radius:24px;                                          /* per Figma layout_ORUS01 */
  font:500 12px/1 'Inter',sans-serif;
}
.acc-od-detail-product__price-current{font:600 18px/1.21 'Inter',sans-serif;color:#131314;}
.acc-od-detail-product__price-current--sale{color:#577B28;}    /* Discount price token */
.acc-od-detail-product__price-old{font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;text-decoration:line-through;}
.acc-od-detail-product__qty{font:400 14px/1.43 'Inter',sans-serif;color:#3D3D3E;}

/* Col 3: actions — 160 col gap 8 (layout_VFDD0P) */
.acc-od-detail-product__actions{
  display:flex;flex-direction:column;gap:8px;
  width:160px;flex-shrink:0;
}
.acc-od-detail-product__actions .acc-od-detail-btn{
  width:100%;height:auto;padding:12px;font-weight:400;          /* Button Font/Medium Regular 14/400 */
}

/* Side actions (desktop) — Figma Button/Large 16/500/1.25, padding 12 → h:auto = 44 */
.acc-od-detail-side-actions{display:flex;flex-direction:column;gap:12px;}  /* layout_X5TW09 */
.acc-od-detail-side-actions .acc-od-detail-btn{
  width:100%;min-height:48px;padding:12px;border-radius:10px;box-sizing:border-box;
  font:500 16px/1.25 'Inter',sans-serif;       /* Figma: 48px, Button/Large 16/500 */
}

/* Order info summary — Figma 16px Regular throughout (was 14) */
.acc-od-detail-summary{display:flex;flex-direction:column;gap:16px;}  /* layout_VS8O96 */
.acc-od-detail-summary__row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font:400 16px/1.375 'Inter',sans-serif;color:#131314;            /* Figma Text Font/16px Regular */
}
.acc-od-detail-summary__value{text-align:right;}
.acc-od-detail-summary__row--discount .acc-od-detail-summary__value{color:#577B28;}
.acc-od-detail-summary__total-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.acc-od-detail-summary__total-label{
  display:flex;flex-direction:column;gap:4px;                       /* layout_96NKLT gap 4 */
  font:600 16px/1.375 'Inter',sans-serif;color:#131314;
}
.acc-od-detail-summary__total-label small{font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;}  /* Text Font/14px Regular */
.acc-od-detail-summary__total-value{
  display:inline-flex;align-items:center;gap:12px;                  /* layout_RYAZOL gap 12 */
  font:600 16px/1.375 'Inter',sans-serif;color:#131314;
}
.acc-od-detail-summary__total-old{font:400 14px/1.43 'Inter',sans-serif;color:#606162;text-decoration:line-through;}

.acc-od-detail-savings{
  display:flex;align-items:center;gap:10px;
  padding:8px;background:#F7F7F7;border-radius:8px;
  font:400 14px/1.286 'Inter',sans-serif;color:#131314;
}

/* Payment method card — Figma all text 16px (was 14) */
.acc-od-detail-payment{display:flex;flex-direction:column;gap:12px;}  /* layout_PBPRP3 */
.acc-od-detail-payment__row{display:flex;gap:12px;align-items:flex-start;}   /* layout_LB0Z23 */
.acc-od-detail-payment__icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:#131314;}
.acc-od-detail-payment__col{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.acc-od-detail-payment__label{font:500 16px/1.375 'Inter',sans-serif;color:#131314;}        /* Text Font/16px Medium */
.acc-od-detail-payment__details{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;                                     /* Text Font/16px Regular */
}
.acc-od-detail-payment__brand{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:32px;padding:2px 0;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:4px;
  font:700 11px/1 'Inter',sans-serif;color:#131314;
}
.acc-od-detail-payment__addr{
  display:flex;flex-direction:column;gap:4px;
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;                                     /* Text Font/16px Regular */
}

/* ════════════ Tablet (≤991px) — body stacks single column ════════════
   На розмірах 501-991 desktop 2-col grid (1fr 300px) надто тісно — products
   накладаються, total wrap'ниться. Stack у single col, products у mobile-style. */
@media (max-width:991px){
  /* Force full-width на всі контейнери — щоб main та side не залишалися
     constrained у grid режимі (desktop default 1fr 300px). */
  .acc-od-detail-page{padding:0;gap:16px;width:100%;max-width:none;}
  .acc-od-detail-body{
    display:flex !important;flex-direction:column !important;
    gap:16px !important;width:100% !important;max-width:none !important;
  }
  .acc-od-detail-main{width:100% !important;max-width:none !important;}
  .acc-od-detail-side{width:100% !important;max-width:none !important;position:static;}

  /* Product row stacks like mobile (Figma layout_MBMLAI tablet adaptation) */
  .acc-od-detail-product{flex-direction:column;align-items:stretch;gap:12px;}
  .acc-od-detail-product__main{gap:12px;}
  .acc-od-detail-product__info{height:auto;}
  /* Price row — full width row qty left, prices right */
  .acc-od-detail-product__price{
    flex-direction:row;width:auto;height:auto;
    justify-content:space-between;align-items:center;gap:20px;
  }
  .acc-od-detail-product__price-top{flex-direction:row;align-items:center;gap:8px;order:2;}
  .acc-od-detail-product__qty{order:1;margin-right:auto;}
  /* Actions — 2-col grid full width */
  .acc-od-detail-product__actions{
    flex-direction:row;width:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
  .acc-od-detail-product__actions .acc-od-detail-btn{width:100%;}

  /* Delivery details: stack 2-col → 1-col */
  .acc-od-detail-delivery{grid-template-columns:1fr;gap:16px;}
  /* Status header: stack to allow wrapping */
  .acc-od-detail-status{flex-direction:column;align-items:flex-start;gap:4px;}
}

/* ════════════ Mobile (≤500px) — Figma 652-68588 ════════════ */
@media (max-width:500px){
  .acc-od-detail-page{padding:0;gap:16px;}
  .acc-od-detail-back{display:inline-flex;}
  .acc-od-detail-title{font-size:20px;}
  .acc-od-detail-meta{gap:12px;}

  .acc-od-detail-actions-mobile{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .acc-od-detail-actions-mobile .acc-od-detail-btn{width:100%;}

  .acc-od-detail-body{display:flex;flex-direction:column;gap:16px;}
  .acc-od-detail-side{width:100%;}
  .acc-od-detail-side-actions{display:none;}

  .acc-od-detail-delivery{grid-template-columns:1fr;gap:12px;}
  .acc-od-detail-status{flex-direction:column;align-items:flex-start;gap:4px;}

  .acc-od-detail-stage__label{font-size:14px;}
  .acc-od-detail-stage__date{font-size:14px;}

  /* Mobile: product row stacks vertically (col gap 8) — Figma layout_MBMLAI */
  .acc-od-detail-product{flex-direction:column;align-items:stretch;gap:8px;}
  .acc-od-detail-product__main{gap:10px;}
  .acc-od-detail-product__thumb{width:60px;height:60px;}
  .acc-od-detail-product__info{height:auto;}
  .acc-od-detail-product__name{font-size:14px;}
  .acc-od-detail-product__chip{padding:3px 5px;font-size:10px;}
  .acc-od-detail-product__chip--more{padding:3px 5px;height:16px;}
  /* Price row — full width row qty left, prices right (layout_638BRD gap 20) */
  .acc-od-detail-product__price{
    flex-direction:row;width:auto;height:auto;
    justify-content:space-between;align-items:center;gap:20px;
  }
  .acc-od-detail-product__price-top{
    flex-direction:row;align-items:center;gap:6px;order:2;
  }
  .acc-od-detail-product__qty{order:1;margin-right:auto;}
  .acc-od-detail-product__price-current{font-size:14px;}
  .acc-od-detail-product__price-old{font-size:12px;}
  .acc-od-detail-product__discount-badge{font-size:11px;padding:3px 8px;}
  /* Actions — full width 2-col grid (layout_7XEPLE) */
  .acc-od-detail-product__actions{
    flex-direction:row;width:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
  .acc-od-detail-product__actions .acc-od-detail-btn{width:100%;height:36px;padding:6px 12px;}

  .acc-od-detail-summary__total-label{font-size:14px;}
  .acc-od-detail-summary__total-value{font-size:16px;}
}

/* ════════════════════════════════════════════════════════════════════
   Onetap Loyalty — Tier badge на Personal Data page.
   Figma node 1008-108455 layout: padding 24, gap 24, radius 14, border 1px.
   Background gradient inline через style="" — динамічно з admin tier.
   ════════════════════════════════════════════════════════════════════ */

.acc-loyalty-badge{
  display:flex;flex-direction:column;gap:24px;
  padding:24px;border-radius:14px;
  margin-bottom:24px;
  box-sizing:border-box;
}

.acc-loyalty-badge__head{
  display:flex;align-items:center;gap:8px;
}
.acc-loyalty-badge__icon{
  width:42px;height:46px;display:block;flex-shrink:0;
}

/* Hexagonal SVG shield with tier letter — Bronze/Silver/Gold/Platinum.
   Uses same CSS-SVG pattern as legacy .acc-tier__shield for visual consistency. */
.acc-loyalty-badge__shield{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:60px;flex-shrink:0;
  pointer-events:none;
}
.acc-loyalty-badge__shield svg{display:block;width:100%;height:auto;}
/* Per-tier text color override — слегка темнее заливка, чтобы буква читалась поверх gradient'а */
.acc-loyalty-badge__shield--bronze   svg text{fill:rgba(80,40,15,.7);}
.acc-loyalty-badge__shield--silver   svg text{fill:rgba(60,68,76,.7);}
.acc-loyalty-badge__shield--gold     svg text{fill:rgba(100,80,15,.75);}
.acc-loyalty-badge__shield--platinum svg text{fill:rgba(50,70,90,.7);}
.acc-loyalty-badge__name{
  font:500 24px/1.21 'Inter',sans-serif;color:#131314;
}
.acc-loyalty-badge__cashback{
  font:400 18px/1.21 'Inter',sans-serif;color:#131314;
}
.acc-loyalty-badge__balance{
  font:400 16px/1.4 'Inter',sans-serif;color:#131314;
}
.acc-loyalty-badge__balance strong{font-weight:600;font-size:18px;}
.acc-loyalty-badge__balance-eur{color:#606162;font-size:14px;margin-left:4px;}

/* Balance row: 2 columns "Ваши баллы" + "Получено всего" */
.acc-loyalty-badge__balance-row{
  display:flex;gap:24px;flex-wrap:wrap;
}
.acc-loyalty-badge__balance-col{
  flex:1;min-width:140px;display:flex;flex-direction:column;gap:4px;
}
.acc-loyalty-badge__balance-label{
  font:400 13px/1.2 'Inter',sans-serif;color:#606162;
}
.acc-loyalty-badge__balance-value{
  font:400 18px/1.2 'Inter',sans-serif;color:#131314;
}
.acc-loyalty-badge__balance-value strong{font-weight:700;font-size:24px;}
.acc-loyalty-badge__balance-value .acc-loyalty-badge__balance-eur{
  display:inline-block;margin-left:6px;color:#606162;font-size:13px;
}

.acc-loyalty-badge__progress{
  width:100%;height:6px;background:rgba(0,0,0,0.08);border-radius:100px;overflow:hidden;
}
.acc-loyalty-badge__progress-bar{
  height:100%;transition:width .3s ease;border-radius:100px;
}

.acc-loyalty-badge__hint{
  font:400 14px/1.4 'Inter',sans-serif;color:#131314;
}
.acc-loyalty-badge__hint-delta{color:#606162;}
.acc-loyalty-badge__hint--top{
  font-weight:600;font-size:16px;color:#131314;
  display:inline-flex;align-items:center;gap:6px;
}

.acc-loyalty-badge__perks{
  display:flex;flex-wrap:wrap;gap:6px;
}
.acc-loyalty-badge__perk-chip{
  display:inline-flex;align-items:center;
  padding:4px 10px;background:rgba(255,255,255,0.65);border-radius:100px;
  font:500 12px/1.4 'Inter',sans-serif;color:#131314;
}

/* COMPACT style — single-line inline */
.acc-loyalty-badge--compact{
  flex-direction:row;align-items:center;gap:12px;padding:12px 16px;
  border-radius:8px;
}
.acc-loyalty-badge--compact .acc-loyalty-badge__head{flex:0 0 auto;}
.acc-loyalty-badge--compact .acc-loyalty-badge__icon{width:32px;height:36px;}
.acc-loyalty-badge--compact .acc-loyalty-badge__name{font-size:18px;}
.acc-loyalty-badge--compact .acc-loyalty-badge__cashback{font-size:14px;flex:1;}
.acc-loyalty-badge--compact .acc-loyalty-badge__progress,
.acc-loyalty-badge--compact .acc-loyalty-badge__hint,
.acc-loyalty-badge--compact .acc-loyalty-badge__perks{display:none;}

/* Tablet ≤991 */
@media (max-width:991px){
  .acc-loyalty-badge{padding:20px;gap:20px;}
  .acc-loyalty-badge__name{font-size:22px;}
  .acc-loyalty-badge__cashback{font-size:16px;}
}

/* Mobile ≤500 — auto-compact-ish */
@media (max-width:500px){
  .acc-loyalty-badge{padding:16px;gap:16px;border-radius:12px;margin-bottom:16px;}
  .acc-loyalty-badge__name{font-size:18px;}
  .acc-loyalty-badge__cashback{font-size:14px;}
  .acc-loyalty-badge__balance{font-size:14px;}
  .acc-loyalty-badge__balance strong{font-size:16px;}
  .acc-loyalty-badge__hint{font-size:13px;}
  .acc-loyalty-badge__perks{gap:4px;}
  .acc-loyalty-badge__perk-chip{padding:3px 8px;font-size:11px;}
}

/* =============================================================================
   NPS Step 2 NEW — "Tell us what you liked" page (Figma 576-64174)
   ============================================================================= */
.nps-page--step2{
  max-width:1000px;   /* Figma container padding 0 500 в 2000-design → 1000 inner */
  position:relative;
}
.nps-page--step2 .nps-page__title,
.nps-page--step2 .nps-page__subtitle{
  max-width:920px;    /* Figma layout_4EQFNA width:920 inner content */
}

/* Back button — Figma layout_OOUTPX */
.nps-page--step2 .nps-back{
  position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;gap:6px;
  color:#131314;text-decoration:none;
  font:400 16px/1.375 'Inter',sans-serif;
  padding:6px 8px;
}
.nps-page--step2 .nps-back:hover{color:#392923;}

/* Progress bar — 5 segments × height 6, radius 12 (Figma layout_48NMDG/layout_S3X197) */
.nps-page--step2 .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;   /* 920 - 172*2 = 576 (Figma padding 0 172) */
  margin:0 auto 32px;
}
.nps-page--step2 .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;
  transition:background .2s;
}
.nps-page--step2 .nps-progress__seg.is-filled{background:#392923;}

/* Step 2 form layout */
.nps-step2-form{
  width:100%;max-width:920px;margin:0 auto;
  display:flex;flex-direction:column;gap:40px;
}

/* ── Feedback (voice recorder) block — Figma Frame 2085661817 ───── */
.nps-feedback{display:flex;flex-direction:column;gap:8px;}
.nps-feedback__label{
  font:500 16px/1.375 'Inter',sans-serif;
  color:#131314;
  text-align:left;
}
.nps-feedback__hint{
  font:400 16px/1.375 'Inter',sans-serif;
  color:#7D7D7D;     /* Figma: '300' */
  text-align:left;
  margin-bottom:4px;
}
.nps-feedback__input{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  background:#FFFFFF;
  border:1px solid #DDDDDD;
  border-radius:8px;
}
.nps-feedback__textfield{
  flex:1;border:0;outline:none;background:transparent;
  font:400 16px/1.375 'Inter',sans-serif;
  color:#131314;
}
.nps-feedback__textfield::placeholder{color:#7D7D7D;}
.nps-feedback__mic{
  width:40px;height:40px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#FFFFFF;
  border:1px solid #DDDDDD;
  border-radius:8px;
  color:#131314;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.nps-feedback__mic:hover{background:#F7F7F7;border-color:#BCBCBC;}
.nps-feedback__mic:focus-visible{outline:2px solid #392923;outline-offset:2px;}
.nps-feedback__mic svg{display:block;}
.nps-feedback__mic:active{background:#392923;color:#FFFFFF;border-color:#392923;}

/* ── Recorder states (idle/recording/locked/recorded) ─────
   (.nps-feedback__state ділить padding/border/radius з .nps-feedback__input) */
/* Hide additional state containers by default — JS toggles via [hidden] */
.nps-feedback__state[hidden]{display:none !important;}

/* Pulsing red dot during recording */
.nps-feedback__rec-dot{
  width:12px;height:12px;border-radius:100%;
  background:#DC2626;flex-shrink:0;
  animation:nps-rec-pulse 1s ease-in-out infinite;
}
@keyframes nps-rec-pulse{
  0%, 100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.85); }
}

/* Timer text */
.nps-feedback__timer{
  font:600 16px/1.25 'Inter',monospace;
  color:#131314;min-width:48px;
}

/* Slide hint while recording */
.nps-feedback__slide-hint{
  flex:1;display:inline-flex;align-items:center;gap:6px;
  font:400 14px/1.375 'Inter',sans-serif;
  color:#7D7D7D;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Lock target (icon) — slides right as user drags */
.nps-feedback__lock-target{
  width:40px;height:40px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#F7F7F7;border:1px solid #DDDDDD;border-radius:100%;
  color:#392923;
  transition:transform .1s ease, opacity .1s ease, background-color .15s ease;
  opacity:.5;
}
.nps-feedback__state--locked .nps-feedback__lock-target,
.nps-feedback[data-recording="locked"] .nps-feedback__lock-target{
  background:#392923;color:#FFFFFF;opacity:1;
}

/* Locked label */
.nps-feedback__locked-label{
  flex:1;display:inline-flex;align-items:center;gap:6px;
  font:500 14px/1.375 'Inter',sans-serif;
  color:#392923;
}

/* Cancel / Send / Remove buttons */
.nps-feedback__btn{
  width:36px;height:36px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #DDDDDD;border-radius:8px;
  background:#FFFFFF;cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.nps-feedback__btn:hover{background:#F7F7F7;border-color:#BCBCBC;}
.nps-feedback__btn:focus-visible{outline:2px solid #392923;outline-offset:2px;}
.nps-feedback__btn--cancel,
.nps-feedback__btn--remove{color:#DC2626;}
.nps-feedback__btn--cancel:hover,
.nps-feedback__btn--remove:hover{background:#FEE2E2;border-color:#DC2626;}
.nps-feedback__btn--send{
  background:#392923;color:#FFFFFF;border-color:#392923;
}
.nps-feedback__btn--send:hover{background:#4d382e;border-color:#4d382e;}

/* Recorded preview state */
.nps-feedback__recorded-label{
  flex:1;display:inline-flex;align-items:center;gap:8px;
  font:500 14px/1.375 'Inter',sans-serif;
  color:#131314;
}
.nps-feedback__recorded-duration{color:#7D7D7D;font-weight:400;}
.nps-feedback__audio-preview{
  height:32px;margin:0 8px;
}

/* ── Chips block — Figma Frame 2085661942 ───── */
.nps-chips{display:flex;flex-direction:column;gap:8px;}
.nps-chips__label{
  font:500 16px/1.375 'Inter',sans-serif;
  color:#131314;
  text-align:left;
}
.nps-chips__optional{color:#7D7D7D;font-weight:400;}
.nps-chips__list{
  display:flex;flex-wrap:wrap;gap:8px;
  width:100%;
}
.nps-chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;
  background:transparent;
  border:1px solid #DDDDDD;
  border-radius:24px;
  font:400 16px/1.375 'Inter',sans-serif;
  color:#606162;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.nps-chip:hover{background:#F7F7F7;border-color:#BCBCBC;color:#131314;}
.nps-chip:focus-visible{outline:2px solid #392923;outline-offset:2px;}
.nps-chip.is-selected{
  background:#392923;
  border-color:#392923;
  color:#FFFFFF;
}

/* ── Bottom buttons row — Figma layout_G0OQPF row space-between ───── */
.nps-actions--split{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:24px;
}
.nps-skip{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:12px;
  background:transparent;
  border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;
  color:#131314;
  text-decoration:none;
  cursor:pointer;
  transition:background .12s;
}
.nps-skip:hover{background:#F7F7F7;color:#131314;text-decoration:none;}
.nps-skip:focus-visible{outline:2px solid #392923;outline-offset:2px;}
/* Submit button reuses .nps-submit from Step 1 (200×48 #392923 radius 10) */

/* ── Responsive 4 OneTap breakpoints ───── */
@media (max-width:1367px){
  .nps-step2-form{max-width:800px;}
  .nps-page--step2 .nps-page__title,
  .nps-page--step2 .nps-page__subtitle{max-width:800px;}
}
@media (max-width:992px){
  .nps-step2-form{max-width:640px;}
  .nps-page--step2 .nps-page__title,
  .nps-page--step2 .nps-page__subtitle{max-width:640px;}
  .nps-page--step2 .nps-progress{max-width:480px;}
}
@media (max-width:501px){
  .nps-step2-form{max-width:100%;gap:32px;}
  .nps-page--step2 .nps-page__title{font-size:22px;}
  .nps-page--step2 .nps-progress{max-width:100%;}
  .nps-actions--split{flex-direction:column;gap:12px;align-items:stretch;}
  .nps-skip,
  .nps-actions--split .nps-submit{width:100%;}
}

/* =============================================================================
   NPS Step 4 NEW — "Rate your products" (Figma 600:63362) — overrides old step4
   ============================================================================= */
.nps-page--step4{max-width:1000px !important;position:relative;}
.nps-page--step4 .nps-page__title,
.nps-page--step4 .nps-page__subtitle{max-width:920px;margin-left:auto;margin-right:auto;}
.nps-page--step4 .nps-page__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0 0 8px;
}
.nps-page--step4 .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;margin:0 auto 32px;
}
.nps-page--step4 .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;transition:background .2s;
  position:relative;
}
.nps-page--step4 .nps-progress__seg.is-filled{background:#392923;}
/* Active segment з thumb (Figma layout_VHLIV9 — inner Frame 2085661526 #392923 radius 15) */
.nps-page--step4 .nps-progress__seg.is-active{background:#DDDDDD;}
.nps-page--step4 .nps-progress__thumb{
  display:block;position:absolute;left:0;top:0;
  width:18px;height:6px;border-radius:15px;background:#392923;
}

.nps-step4-form{
  width:100%;max-width:920px;margin:80px auto 0;
  display:flex;flex-direction:column;gap:40px;
}

/* Product row — Figma layout_UH8OXE: row image LEFT + rating RIGHT */
.nps-product-row{
  display:flex;flex-direction:row;align-items:flex-start;gap:40px;
  width:100%;
}
.nps-product-row__media{
  display:flex;flex-direction:column;width:200px;gap:8px;flex-shrink:0;
}
.nps-product-row__rating{
  flex:1;display:flex;flex-direction:column;gap:24px;
}
.nps-product__image{
  width:200px;height:200px;
  object-fit:cover;border-radius:4px;
  display:block;background:#F7F7F7;
}
.nps-product__name{
  font:400 16px/1.375 'Inter',sans-serif;
  color:#131314;
}

/* Item quality — 5 stars row */
.nps-quality{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.nps-quality__label{font:500 16px/1.375 'Inter',sans-serif;color:#131314;}
.nps-quality__stars{display:inline-flex;gap:8px;}
.nps-quality__star{
  background:none;border:0;cursor:pointer;padding:0;
  width:32px;height:32px;color:#DDDDDD;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s, transform .12s;
}
.nps-quality__star:hover{transform:scale(1.05);}
.nps-quality__star.is-filled{color:#F79E02;}
.nps-quality__star svg{display:block;width:32px;height:32px;}

/* Recommend rate 0-5 slider — based on nps-slider pattern */
.nps-recommend{display:flex;flex-direction:column;gap:12px;}
.nps-recommend__label{font:500 16px/1.375 'Inter',sans-serif;color:#131314;text-align:left;}
.nps-recommend__slider{
  position:relative;width:100%;
  padding:24px 0 36px;
}
.nps-recommend__numbers{
  display:flex;justify-content:space-between;align-items:flex-end;
  width:100%;position:relative;
}
.nps-recommend__num{
  background:transparent;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:40px;height:32px;position:relative;
  font:400 14px/1.43 'Inter',sans-serif;color:#606162;
  transition:font-weight .12s, color .12s, height .12s;
}
.nps-recommend__num:hover{color:#131314;}
.nps-recommend__num-text{display:block;line-height:1;}
.nps-recommend__num-mark{display:block;width:1px;height:14px;background:#BCBCBC;}
.nps-recommend__num-knob{
  position:absolute;top:46px;left:50%;
  transform:translate(-50%, 0);
  width:30px;height:30px;border-radius:100px;
  background:#FFFFFF;border:1px solid #DDDDDD;
  box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.nps-recommend__num-knob-dot{
  display:block;width:14px;height:14px;border-radius:100px;background:#392923;
}
.nps-recommend__num.is-active{
  height:38px;
  font:600 16px/1.375 'Inter',sans-serif;color:#131314;
}
.nps-recommend__num.is-active .nps-recommend__num-knob{opacity:1;}
.nps-recommend__slider.is-pristine .nps-recommend__num.is-ghost .nps-recommend__num-knob{opacity:.45;}
.nps-recommend__track{
  position:absolute;left:0;right:0;top:78px;
  height:14px;background:#F7F7F7;border-radius:9px;
  z-index:1;cursor:pointer;touch-action:none;
}
.nps-recommend__track:hover{background:#EFEFEF;}
/* Legend pill — full-width clickable buttons (left → 0, right → 5) */
.nps-recommend__legend{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;
  background:#F7F7F7;border-radius:8px;
  padding:4px;
}
.nps-recommend__legend-btn{
  background:transparent;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:6px;
  font:400 14px/1.375 'Inter',sans-serif;color:#131314;
  transition:background .12s;
}
.nps-recommend__legend-btn:hover{background:rgba(0,0,0,.04);}
.nps-recommend__legend-btn:focus-visible{outline:2px solid #392923;outline-offset:2px;}

/* Hide native file input inside .nps-photo-btn (label-wrapped) */
.nps-photo-btn input[type="file"]{
  position:absolute;width:0;height:0;opacity:0;pointer-events:none;
}

/* Multi-file list (after upload) */
.nps-files{
  display:flex;flex-direction:column;gap:8px;
  align-items:flex-start;width:100%;
}
.nps-files__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px;width:100%;
}
/* File row — left-aligned: icon + filename + trash packed together */
.nps-files__item{
  display:inline-flex;align-items:center;justify-content:flex-start;
  gap:8px;
  padding:6px 4px;
  font:400 14px/1.43 'Inter',sans-serif;color:#131314;
  width:fit-content;max-width:100%;
}
.nps-files__icon{flex-shrink:0;color:#606162;display:block;}
.nps-files__name{
  flex:0 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#131314;
  max-width:400px;
}
.nps-files__delete{
  background:none;border:0;padding:4px;cursor:pointer;
  color:#606162;border-radius:4px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s, background .12s;
}
.nps-files__delete:hover{color:#DC2626;background:#FEE2E2;}
.nps-files__delete svg{display:block;}

/* Simplified feedback input (step4 doesn't have voice recorder fully — just text field) */
.nps-page--step4 .nps-feedback{display:flex;flex-direction:column;gap:8px;}
.nps-page--step4 .nps-feedback__input{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:8px;
}
.nps-page--step4 .nps-feedback__textfield{
  flex:1;border:0;outline:none;background:transparent;
  font:400 16px/1.375 'Inter',sans-serif;color:#131314;
}
.nps-page--step4 .nps-feedback__textfield::placeholder{color:#7D7D7D;}

/* Add photo or video button — Figma 600:63362 Clear/Outline без бордера */
.nps-photo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;height:48px;
  background:transparent;border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;color:#131314;
  cursor:pointer;align-self:flex-start;
  transition:background .12s;
}
.nps-photo-btn:hover{background:#F7F7F7;}
.nps-photo-btn:focus-within{outline:2px solid #392923;outline-offset:2px;}

/* =============================================================================
   NPS Step 5 NEW — "Share your experience" intro (placeholder)
   ============================================================================= */
.nps-page--step5{max-width:1000px !important;position:relative;}
.nps-page--step5 .nps-page__title,
.nps-page--step5 .nps-page__subtitle{max-width:920px;margin-left:auto;margin-right:auto;}
.nps-page--step5 .nps-page__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0 0 8px;
}
.nps-page--step5 .nps-page__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0 0 40px;
}
.nps-page--step5 .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;margin:0 auto 32px;
}
.nps-page--step5 .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;transition:background .2s;
  position:relative;
}
.nps-page--step5 .nps-progress__seg.is-filled{background:#392923;}
.nps-page--step5 .nps-progress__seg.is-active{background:#DDDDDD;}
.nps-page--step5 .nps-progress__thumb{
  display:block;position:absolute;left:0;top:0;
  width:18px;height:6px;border-radius:15px;background:#392923;
}

.nps-step5-intro{
  width:100%;max-width:920px;margin:80px auto 0;
}
.nps-step5-intro__card{
  background:#F7F7F7;border-radius:14px;padding:40px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
}
.nps-step5-intro__icon{
  width:64px;height:64px;border-radius:100%;
  background:#FFFFFF;border:1px solid #DDDDDD;
  display:flex;align-items:center;justify-content:center;
}
.nps-step5-intro__title{
  font:600 20px/1.21 'Inter',sans-serif;color:#131314;
}
.nps-step5-intro__text{
  font:400 16px/1.5 'Inter',sans-serif;color:#606162;
  max-width:520px;
}

.nps-submit--link{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:48px;padding:12px;
  background:#392923;color:#FFFFFF;text-decoration:none;
  border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;
  transition:background .12s;
}
.nps-submit--link:hover{background:#4d382e;color:#FFFFFF;text-decoration:none;}

/* =============================================================================
   NPS Step 6 NEW — "Share + Trustpilot CTA" (Figma 939:97040)
   ============================================================================= */
.nps-page--step6{max-width:1000px !important;position:relative;}
.nps-page--step6 .nps-page__title,
.nps-page--step6 .nps-page__subtitle{max-width:920px;margin-left:auto;margin-right:auto;}
.nps-page--step6 .nps-page__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0 0 8px;
}
.nps-page--step6 .nps-page__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0 0 40px;
}
.nps-page--step6 .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;margin:0 auto 32px;
}
.nps-page--step6 .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;transition:background .2s;
}
.nps-page--step6 .nps-progress__seg.is-filled{background:#392923;}

/* ─────────────────────────────────────────────────────────────────────
   Shared "Share experience" CTA card — used by:
   · step5 (Google Maps — Figma 819:91033)
   · step6 (Trustpilot — Figma 939:97037)
   Layout: row, gap 24, left col 320 width + right rating card flex 1
   ───────────────────────────────────────────────────────────────────── */
/* Outer row — center both cols horizontally, vertically aligned center.
   No stretch — each col stays its own intrinsic size. */
.nps-share-card{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;
  width:100%;max-width:920px;margin:80px auto 0;
  flex-wrap:wrap;  /* allow wrap on narrower viewports — adaptive for long translations */
}
/* Left col — Figma layout_M5918T / layout_IGUQT0 width 320 gap 24 column, items vertically centered */
.nps-share-card__intro{
  width:320px;flex-shrink:0;max-width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;
  min-height:152px;  /* match rating card height for vertical alignment */
}
.nps-share-card__intro-text{
  display:flex;flex-direction:column;gap:12px;width:100%;
  text-align:left;
}
.nps-share-card__title{font:600 20px/1.21 'Inter',sans-serif;color:#131314;text-align:left;}
.nps-share-card__helper{font:400 16px/1.375 'Inter',sans-serif;color:#131314;text-align:left;}
.nps-share-card__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 20px;
  background:#392923;border:0;border-radius:10px;
  color:#FFFFFF;font:500 16px/1.25 'Inter',sans-serif;
  text-decoration:none;align-self:flex-start;
  transition:background .12s;
  white-space:nowrap;  /* prevents button text wrap on short translations; multilang-safe via max-width below */
  max-width:100%;
}
.nps-share-card__btn:hover{background:#4d382e;color:#FFFFFF;text-decoration:none;}
.nps-share-card__btn:focus-visible{outline:2px solid #392923;outline-offset:2px;}
.nps-share-card__btn svg{display:block;flex-shrink:0;}
/* Allow wrap if translation is very long — fallback */
.nps-share-card__btn span{overflow:hidden;text-overflow:ellipsis;}

/* Right col — fixed 220×152 white card with rating preview (Figma spec) */
.nps-share-card__rating{
  width:220px;height:152px;flex-shrink:0;max-width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:8px;
  box-sizing:border-box;
}
.nps-share-card__rate-label{font:500 14px/1.43 'Inter',sans-serif;color:#131314;text-align:center;}
.nps-share-card__stars{display:flex;gap:8px;}
.nps-share-card__star{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
}
.nps-share-card__star svg{display:block;width:28px;height:28px;}

/* Logo line */
.nps-share-card__logo{display:inline-flex;align-items:center;gap:4px;}
.nps-share-card__logo-text{font:500 16px/1.625 'Roboto','Inter',sans-serif;color:#000000;}

/* ── Modifier: GOOGLE (step5) — yellow filled stars + Google multicolor letters ── */
.nps-share-card--google .nps-share-card__star{color:#F79E02;}
.nps-share-card__google-letter{
  font:500 20px/1 'Roboto','Inter',sans-serif;
}
.nps-share-card__logo--google{gap:1px;}

/* ── Modifier: TRUSTPILOT (step6) — GREEN TILES 28×28 with WHITE star inside (brand style) ── */
.nps-share-card--trustpilot .nps-share-card__star{
  background:#219653;
  border-radius:2px;
  width:28px;height:28px;
  color:#FFFFFF;            /* SVG fill via currentColor = white star */
}
.nps-share-card--trustpilot .nps-share-card__star svg{width:22px;height:22px;}
.nps-share-card__trustpilot-icon{display:block;}

/* ─────────────────────────────────────────────────────────────────────
   "Have you left your review?" confirmation footer (shared by step5/6)
   Figma layout_L3ICW0 / layout_1TLN6O column gap 24
   ───────────────────────────────────────────────────────────────────── */
.nps-share-confirm{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  margin-top:40px;
}
.nps-share-confirm__label{font:600 16px/1.375 'Inter',sans-serif;color:#131314;}
.nps-share-confirm__buttons{display:flex;gap:24px;}
.nps-share-confirm__btn--no{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:12px 20px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:10px;
  color:#131314;font:500 16px/1.25 'Inter',sans-serif;
  text-decoration:none;cursor:pointer;
  transition:background .12s, border-color .12s;
}
.nps-share-confirm__btn--no:hover{background:#F7F7F7;border-color:#BCBCBC;color:#131314;text-decoration:none;}
.nps-share-confirm__btn--yes{
  width:200px;height:48px;padding:12px;
  background:#392923;border:0;border-radius:10px;
  color:#FFFFFF;font:500 16px/1.25 'Inter',sans-serif;
  cursor:pointer;
  transition:background .12s, transform .08s;
}
.nps-share-confirm__btn--yes:hover:not(:disabled){background:#4d382e;}
.nps-share-confirm__btn--yes:active:not(:disabled){transform:scale(.97);}
.nps-share-confirm__btn--yes:disabled{opacity:.5;cursor:not-allowed;}

/* ── Responsive 4 OneTap breakpoints для step4/5/6 ──── */
@media (max-width:1367px){
  .nps-step4-form,
  .nps-step5-intro,
  .nps-share-card{max-width:800px;}
  .nps-page--step4 .nps-page__title,
  .nps-page--step5 .nps-page__title,
  .nps-page--step6 .nps-page__title,
  .nps-page--step4 .nps-page__subtitle,
  .nps-page--step5 .nps-page__subtitle,
  .nps-page--step6 .nps-page__subtitle{max-width:800px;}
}
@media (max-width:992px){
  .nps-step4-form,
  .nps-step5-intro,
  .nps-share-card{max-width:640px;}
  .nps-page--step4 .nps-page__title,
  .nps-page--step5 .nps-page__title,
  .nps-page--step6 .nps-page__title,
  .nps-page--step4 .nps-page__subtitle,
  .nps-page--step5 .nps-page__subtitle,
  .nps-page--step6 .nps-page__subtitle{max-width:640px;}
  /* Share card stays row at this breakpoint — intro 320 + rating 220 fits */
  .nps-share-card{gap:24px;}
}
@media (max-width:660px){
  /* Below 660: stack vertically (intro + rating columns won't fit side by side) */
  .nps-share-card{flex-direction:column;}
  .nps-share-card__intro{width:100%;min-height:auto;align-items:center;text-align:center;}
  .nps-share-card__intro-text{text-align:center;}
  .nps-share-card__btn{align-self:center;}
}
@media (max-width:501px){
  .nps-step4-form,
  .nps-step5-intro,
  .nps-share-card{max-width:100%;gap:24px;}
  .nps-page--step4 .nps-page__title,
  .nps-page--step5 .nps-page__title,
  .nps-page--step6 .nps-page__title{font-size:22px;}
  .nps-share-confirm__buttons{flex-direction:column;width:100%;gap:12px;}
  .nps-share-confirm__btn--no,
  .nps-share-confirm__btn--yes{width:100%;max-width:280px;align-self:center;}
  /* Long button text on small screens — allow wrap as last resort */
  .nps-share-card__btn{white-space:normal;text-align:center;line-height:1.2;}

  /* Step 4 — Mobile layout per Figma PATH A Mobile */
  /* Image LEFT (small 96×96) + name RIGHT in row; ratings stack below */
  .nps-product-row{flex-direction:column;gap:16px;align-items:stretch;}
  .nps-product-row__media{
    flex-direction:row;align-items:center;gap:12px;width:100%;
  }
  .nps-product__image{width:96px;height:96px;flex-shrink:0;}
  .nps-product__name{font-size:14px;line-height:1.4;text-align:left;}
  .nps-product-row__rating{width:100%;gap:20px;}
  /* Quality row stays horizontal: label + 5★ */
  .nps-quality{align-items:center;}
  .nps-quality__label{font-size:14px;}
  .nps-quality__star,
  .nps-quality__star svg{width:28px;height:28px;}
  /* Recommend slider — adjust click targets for touch */
  .nps-recommend__num{min-width:36px;}
  /* Photo button + actions full width */
  .nps-photo-btn{align-self:flex-start;}
}

/* =============================================================================
   NPS Step 7 — "Thank you for your feedback" completion page
   Figma desktop 614:67749 / mobile 614:67709
   ============================================================================= */
.nps-page--step7{max-width:1000px !important;}

/* Thanks block — mascot + title + subtitle, all centered */
.nps-thanks{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:40px;
  width:100%;max-width:920px;margin:80px auto 0;
}
/* Mascot — 150×150 desktop (Figma 80×80 enlarged per design feedback), 40px gap below to title */
.nps-thanks__mascot{
  width:150px;height:150px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nps-thanks__mascot img{
  display:block;width:100%;height:100%;object-fit:contain;
}
/* Title group — Figma layout_LH0FY1 column gap 8 */
.nps-thanks__text{
  display:flex;flex-direction:column;gap:8px;width:100%;
}
.nps-thanks__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0;
}
.nps-thanks__heart{display:inline-block;margin-left:4px;line-height:1;}
.nps-thanks__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0;
}

/* Rewards card — Figma layout_UMZDA5 width 600 fixed padding 24 */
.nps-rewards-card{
  display:flex;flex-direction:row;align-items:flex-start;gap:12px;
  width:600px;max-width:100%;
  padding:24px;
  background:#FFFFFF;border:1px solid #DDDDDD;border-radius:8px;
  margin:24px auto 0;
  text-align:left;
}
.nps-rewards-card__icon{
  width:24px;height:24px;color:#131314;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.nps-rewards-card__icon svg{display:block;}
.nps-rewards-card__text{
  flex:1;display:flex;flex-direction:column;gap:4px;
}
.nps-rewards-card__title{font:600 16px/1.375 'Inter',sans-serif;color:#131314;}
.nps-rewards-card__helper{font:400 16px/1.375 'Inter',sans-serif;color:#7D7D7D;}

/* ── Responsive step7 ── */
@media (max-width:992px){
  .nps-thanks{max-width:640px;}
}
@media (max-width:660px){
  /* mid-tablet: rewards card stretches more naturally */
  .nps-rewards-card{width:100%;}
}
@media (max-width:501px){
  /* Mobile per design feedback */
  .nps-thanks{margin-top:40px;gap:24px;}
  .nps-thanks__mascot{width:75px;height:100px;}
  .nps-thanks__title{font-size:20px;}
  .nps-thanks__subtitle{font-size:14px;line-height:1.43;}
  .nps-rewards-card{width:100%;padding:12px;margin-top:24px;}
}

/* =============================================================================
   NPS Step 2neg (Negative Path B) — Figma 600:61851 desktop / mobile
   Chips + voice recorder + skip/continue
   ============================================================================= */
.nps-page--step2neg{max-width:1000px !important;}
.nps-page--step2neg .nps-page__title,
.nps-page--step2neg .nps-page__subtitle{max-width:920px;margin-left:auto;margin-right:auto;}
.nps-page--step2neg .nps-page__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0 0 8px;text-align:center;
}
.nps-page--step2neg .nps-page__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0;text-align:center;
}
.nps-page--step2neg .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;margin:0 auto 32px;
}
.nps-page--step2neg .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;transition:background .2s;
}
.nps-page--step2neg .nps-progress__seg.is-filled{background:#392923;}

/* Form — Figma container 0 500 padding → 920 effective, 80px top gap (subtitle→form) */
.nps-step2neg-form{
  width:100%;max-width:920px;margin:80px auto 0 !important;
  display:flex;flex-direction:column;gap:40px;
}

/* "What went wrong?" block — Figma layout_HFLDN3 column gap 40 */
.nps-page--step2neg .nps-issue-block{
  display:flex;flex-direction:column;gap:16px;
}
.nps-page--step2neg .nps-issue-block__label{
  font:500 16px/1.375 'Inter',sans-serif !important;
  color:#131314 !important;text-align:left;
}

/* Chips grid — Figma layout_QHS52N row wrap gap 16 24, each 290×32 */
.nps-page--step2neg .nps-issue-grid{
  display:flex;flex-wrap:wrap;
  gap:16px 24px;
  width:100%;
}
.nps-page--step2neg .nps-issue-cell{
  display:inline-flex;align-items:center;gap:8px;
  width:290px;height:32px;
  cursor:pointer;user-select:none;
  font:400 16px/1.375 'Inter',sans-serif !important;
  color:#131314 !important;
}
.nps-page--step2neg .nps-issue-cell__box{
  width:20px;height:20px;border-radius:4px;flex-shrink:0;
  background:#FFFFFF;border:1.5px solid #DDDDDD;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, border-color .12s;
}
.nps-page--step2neg .nps-issue-cell__box svg{opacity:0;transition:opacity .1s;}
.nps-page--step2neg .nps-issue-cell input:checked + .nps-issue-cell__box{
  background:#392923;border-color:#392923;
}
.nps-page--step2neg .nps-issue-cell input:checked + .nps-issue-cell__box svg{opacity:1;}
.nps-page--step2neg .nps-issue-cell:hover .nps-issue-cell__box{border-color:#392923;}

/* Voice recorder block — reuse step2 positive pattern */
.nps-page--step2neg .nps-feedback{
  display:flex;flex-direction:column;gap:8px;width:100%;
}
.nps-page--step2neg .nps-feedback__label{
  font:500 16px/1.375 'Inter',sans-serif;color:#131314;text-align:left;
}
.nps-page--step2neg .nps-feedback__hint{
  font:400 14px/1.43 'Inter',sans-serif;color:#7D7D7D;text-align:left;
  margin-bottom:4px;
}

/* Skip + Continue split — Figma layout_ZPDTAL row space-between */
.nps-page--step2neg .nps-actions--split{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;
}
.nps-page--step2neg .nps-skip{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:12px;
  background:transparent;border:0;color:#131314;
  font:500 16px/1.25 'Inter',sans-serif;text-decoration:none;cursor:pointer;
}
.nps-page--step2neg .nps-skip:hover{color:#392923;}
.nps-page--step2neg .nps-submit{
  width:200px;height:48px;padding:12px;
  background:#392923;color:#FFFFFF;border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;cursor:pointer;
  transition:background .12s;
}
.nps-page--step2neg .nps-submit:hover:not(:disabled){background:#4d382e;}
.nps-page--step2neg .nps-submit:disabled{opacity:.5;cursor:not-allowed;}

/* ── Responsive 4 OneTap breakpoints ── */
@media (max-width:1367px){
  .nps-step2neg-form{max-width:800px;}
  .nps-page--step2neg .nps-page__title,
  .nps-page--step2neg .nps-page__subtitle{max-width:800px;}
  .nps-page--step2neg .nps-issue-cell{width:calc(50% - 12px);}
}
@media (max-width:992px){
  .nps-step2neg-form{max-width:640px;}
  .nps-page--step2neg .nps-page__title,
  .nps-page--step2neg .nps-page__subtitle{max-width:640px;}
  .nps-page--step2neg .nps-issue-cell{width:calc(50% - 12px);}
}
@media (max-width:501px){
  /* Mobile per Figma negative path B mobile */
  .nps-step2neg-form{max-width:100%;margin-top:40px !important;gap:32px;}
  .nps-page--step2neg .nps-page__title{font-size:22px;}
  .nps-page--step2neg .nps-page__subtitle{font-size:14px;}
  .nps-page--step2neg .nps-issue-grid{gap:12px 16px;}
  .nps-page--step2neg .nps-issue-cell{width:calc(50% - 8px);font-size:14px;}
  .nps-page--step2neg .nps-actions--split{flex-direction:row;}
  .nps-page--step2neg .nps-submit{width:auto;min-width:120px;padding:12px 20px;}
}

/* =============================================================================
   NPS Step 3neg (Negative Path B) — Delivery + Customer service stars
   Mirrors step3 positive design — 1000/920 container, 80px subtitle→form gap
   ============================================================================= */
.nps-page--step3neg{max-width:1000px !important;}
.nps-page--step3neg .nps-page__title,
.nps-page--step3neg .nps-page__subtitle{max-width:920px;margin-left:auto;margin-right:auto;}
.nps-page--step3neg .nps-page__title{
  font:500 32px/1.21 'Inter',sans-serif;color:#131314;margin:0 0 8px;text-align:center;
}
.nps-page--step3neg .nps-page__subtitle{
  font:400 16px/1.375 'Inter',sans-serif;color:#606162;margin:0;text-align:center;
}
.nps-page--step3neg .nps-progress{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:576px;margin:0 auto 32px;
}
.nps-page--step3neg .nps-progress__seg{
  flex:1 1 auto;height:6px;border-radius:12px;
  background:#DDDDDD;transition:background .2s;
}
.nps-page--step3neg .nps-progress__seg.is-filled{background:#392923;}

/* Form — 920 wide, 80px gap from subtitle */
.nps-step3neg-form{
  width:100%;max-width:920px;margin:80px auto 0 !important;
  display:flex;flex-direction:column;gap:32px;
}

/* Rate rows — Delivery + Customer service */
.nps-page--step3neg .nps-rate-row{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;gap:24px;
}
.nps-page--step3neg .nps-rate-row__label{
  font:500 16px/1.375 'Inter',sans-serif;color:#131314;
}
.nps-page--step3neg .nps-stars{display:inline-flex;gap:8px;}
.nps-page--step3neg .nps-star{
  background:none;border:0;cursor:pointer;padding:0;
  width:32px;height:32px;color:#DDDDDD;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .12s, transform .12s;
}
.nps-page--step3neg .nps-star:hover{transform:scale(1.05);}
.nps-page--step3neg .nps-star.is-filled{color:#F79E02;}
.nps-page--step3neg .nps-star svg{display:block;}

/* Skip + Continue split */
.nps-page--step3neg .nps-actions--split{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;margin-top:24px;
}
.nps-page--step3neg .nps-skip{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:12px;
  background:transparent;border:0;color:#131314;
  font:500 16px/1.25 'Inter',sans-serif;text-decoration:none;cursor:pointer;
}
.nps-page--step3neg .nps-skip:hover{color:#392923;}
.nps-page--step3neg .nps-submit{
  width:200px;height:48px;padding:12px;
  background:#392923;color:#FFFFFF;border:0;border-radius:10px;
  font:500 16px/1.25 'Inter',sans-serif;cursor:pointer;
  transition:background .12s;
}
.nps-page--step3neg .nps-submit:hover:not(:disabled){background:#4d382e;}
.nps-page--step3neg .nps-submit:disabled{opacity:.5;cursor:not-allowed;}

/* ── Responsive 4 OneTap breakpoints ── */
@media (max-width:1367px){
  .nps-step3neg-form{max-width:800px;}
  .nps-page--step3neg .nps-page__title,
  .nps-page--step3neg .nps-page__subtitle{max-width:800px;}
}
@media (max-width:992px){
  .nps-step3neg-form{max-width:640px;}
  .nps-page--step3neg .nps-page__title,
  .nps-page--step3neg .nps-page__subtitle{max-width:640px;}
}
@media (max-width:501px){
  .nps-step3neg-form{max-width:100%;margin-top:40px !important;gap:24px;}
  .nps-page--step3neg .nps-page__title{font-size:22px;}
  .nps-page--step3neg .nps-page__subtitle{font-size:14px;}
  .nps-page--step3neg .nps-star,
  .nps-page--step3neg .nps-star svg{width:28px;height:28px;}
  .nps-page--step3neg .nps-rate-row__label{font-size:14px;}
  .nps-page--step3neg .nps-submit{width:auto;min-width:120px;padding:12px 20px;}
}