/* ============================================================================
   MY ACCOUNT PAGES (my-account.html, my-account-payment-methods.html) —
   WooCommerce [woocommerce_my_account] endpoints. Each sidebar tab is its
   own WC endpoint / URL (edit-account, payment-methods, orders,
   customer-logout), not a JS-toggled panel — hence separate HTML files
   sharing this one set of classes, same pattern as catalog/blog/checkout.
   Header and footer reuse the rules above unchanged.
   ============================================================================ */
.account{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:100%;
  margin-block-start:24px;
  padding-inline: var(--gutter);
}
.account h1{
  font-size: var(--fs-h1);
  font-weight:700;
  line-height:1.1;
  text-align:center;
  color: var(--color-brown);
  width:100%;
}
.account-layout{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.account-card{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
  background: var(--color-white);
  border-radius:16px;
  padding:16px;
}
.account-fields{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.account-fields__col{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.account-card__divider{ width:100%; border:none; border-block-start:1px solid var(--color-border); }
/* ---------- field with a leading "editable" pencil icon ----------
   Same box look as checkout.html's .form-field (bg var(--color-border),
   2px #ececeb border, 10px radius, --fs-quote), just with an icon slot the
   plain checkout fields didn't need. */
.account-field__box{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  background: var(--color-border);
  border:2px solid #ececeb;
  border-radius:10px;
  padding:16px;
  cursor:text;
}
.account-field__icon{
  width:18px; height:18px;
  flex-shrink:0;
  display:flex;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.account-field__icon img{ width:100%; height:100%; display:block; }
.account-field__box input{
  flex:1 1 0;
  min-width:0;
  width:100%;
  background:none;
  border:none;
  padding:0;
  margin:0;
  font-family:inherit;
  font-size: var(--fs-quote);
  line-height:1.2;
  color: var(--color-brown);
  text-align:start;
}
.account-field__box input::placeholder{ color:#acacaf; }
.account-field__box input:focus{ outline:none; }
.account-field__box input[readonly]{ cursor:default; }
.account-security{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.account-security__intro{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:start;
  text-align:start;
  width:100%;
}
.account-security__intro h2{ font-size: var(--fs-body); font-weight:600; line-height:1.1; color: var(--color-brown); }
.account-security__intro p{ font-size: var(--fs-quote); line-height:1.2; color: var(--color-brown); }
/* ---------- sidebar: user + nav ---------- */
.account-nav{
  flex:0 0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background: var(--color-white);
  border-radius:16px;
  overflow:hidden;
}
.account-nav__user{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  width:100%;
  padding:16px 8px;
  border-block-end:1px solid var(--color-border);
  font-size: var(--fs-name);
  color:#0c0c0c;
}
.account-nav__avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid #d36b2c;
  flex-shrink:0;
}
.account-nav__avatar img{ width:24px; height:24px; }
.account-nav__list{ display:flex; flex-direction:column; width:100%; list-style:none; }
.account-nav__link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  width:100%;
  padding:16px 24px;
  border-block-end:1px solid var(--color-border);
  font-size: var(--fs-quote);
  color: var(--color-brown);
  transition: color .2s ease;
}
.account-nav__link:hover{ color:#d36b2c; }
.account-nav__link img{ width:24px; height:24px; }
.account-nav__link.is-active{
  color:#d36b2c;
  border-inline-start:2px solid #d36b2c;
}
.account-nav__link--logout{ color:#db2323; border-block-end:none; padding-block:18px; }
.account-nav__link--logout:hover{ opacity:.75; color:#db2323; }
/* ============================================================
   ACCOUNT — edit-field modal (Figma node 1:1917, "Desktop/Account/
   Personal Data" search-modal component)
   One shared dialog per page: any field's .account-field__icon button
   opens it, pre-filled with that field's current value shown as a muted
   placeholder (same #acacaf tone Figma itself renders the value in) —
   typing a new value and pressing "לשמור" writes it back into the real
   (readonly) field. No mobile Figma frame was provided; width shrinks to
   the viewport with the same 16px floor as --gutter below the 492px
   desktop size.
   Centered with inset:0 + margin:auto rather than the usual translate
   -50%/-50% trick — avoids the RTL sign issues called out above for
   .breadcrumbs--product's transform-based centering.
   ============================================================ */
.account-edit-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background: rgba(0,0,0,.8);
  opacity:0;
  transition: opacity .3s ease;
}
.account-edit-overlay.is-visible{ opacity:1; }
.account-edit-modal{
  position:fixed;
  inset:0;
  z-index:210;
  margin:auto;
  width:min(492px, calc(100% - 32px));
  height:fit-content;
  max-height:calc(100vh - 32px);
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  padding:32px 24px 24px;
  background: var(--color-bg);
  border-radius:8px;
  opacity:0;
  transform:scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}
.account-edit-modal.is-open{ opacity:1; transform:scale(1); }
.account-edit-modal[hidden]{ display:none; }
.account-edit-modal__close{
  position:absolute;
  inset-block-start:16px;
  inset-inline-end:16px;
  width:35px; height:35px;
  flex-shrink:0;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.account-edit-modal__close img{ width:100%; height:100%; display:block; }
.account-edit-modal__title{
  font-size: 24px;
  font-weight:600;
  line-height:1.1;
  color:#0c0c0c;
  text-align:end;

  padding-inline-end:59px;
}
@media (min-width:600px){
.account-edit-modal__title{ font-size:32px; }
}
.account-edit-modal__actions{ display:flex; gap:16px; width:100%; }
.account-edit-modal__save{ padding:21px 46px; }
/* ============================================================================
   MY ACCOUNT — ORDERS (my-account-orders.html) — reuses .account /
   .account-layout / .account-card / .account-nav from the tabs above;
   only the card body (status tabs + empty state) is new here.
   ============================================================================ */
.orders h1{ font-size: var(--fs-h2); font-weight:600; }
.orders-tabs{
  display:flex;
  gap:20px;
  width:100%;
  overflow-x:auto;
  scrollbar-width:none;
}
.orders-tabs::-webkit-scrollbar{ display:none; }
.orders-tab{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  padding-block-end:8px;
  border-block-end:1px solid transparent;
  font-size: var(--fs-quote);
  color: var(--color-brown);
  white-space:nowrap;
}
.orders-tab.is-active{ border-block-end-color: var(--color-gold); }
.orders-tab__count{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding-inline:2px;
  border-radius:32px;
  background:#f9f9f9;
  color:#717171;
  font-size: var(--fs-quote);
}
.orders-tab__count.is-active{ background: var(--color-gold); color: var(--color-white); }
@media (min-width:768px){
.orders-tabs{ gap:32px; }
}
.orders-list{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.orders-list[hidden]{ display:none; }
.order-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.order-card__info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:16px;
  background:#fbf7f1;
  border-radius:4px;
}
.order-card__meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex:1 1 110px;
  text-align:center;
}
.order-card__meta-label{ font-size: var(--fs-name); font-weight:400; color:#0c0c0c; }
.order-card__meta-value{ font-size: var(--fs-quote); color:#0c0c0c; }
.order-card__status{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  font-size: var(--fs-btn);
  font-weight:700;
  font-family:inherit;
  color: var(--color-gold);
}
.order-card__status img{ width:24px; height:24px; transform:rotate(90deg); }
.order-card__status[aria-expanded="true"]{ color:#d36b2c; }
.order-card__status[aria-expanded="true"] img{ transform:rotate(-90deg); }
.order-card__images{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  width:100%;
}
.order-card__thumb-link{
  display:block;
  flex:1 1 110px;
  min-width:0;
}
.order-card__thumb-link:hover{ opacity:.85; }
.order-card__thumb{
  display:block;
  width:100%;
  height:116px;
  border-radius:4px;
  object-fit:cover;
}
.order-card__more{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 110px;
  height:116px;
  border-radius:4px;
  background:#fbf7f1;
  border:1px solid #f6f6f6;
  color:#444;
  font-size: var(--fs-name);
}
.order-card__images--compact{ justify-content:flex-start; }
.order-card__images--compact .order-card__thumb-link{ flex:0 1 143px; }
@media (min-width:600px){
.order-card__meta{ flex:1 1 140px; }
.order-card__thumb-link,
.order-card__more{ flex-basis:143px; }
}
/* ---------- order-card accordion detail (Figma node 1:1815) ---------- */
.order-card__detail{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.order-card__detail[hidden]{ display:none; }
.order-detail__meta{ width:100%; }
.order-detail__row{
  display:grid;
  grid-template-columns: minmax(140px, 40%) 1fr;
  align-items:center;
  border-radius:8px;
}
.order-detail__row:nth-child(odd){ background:#f9f9f9; }
.order-detail__row dt{
  padding:14px 12px;
  font-size: var(--fs-quote);
  font-weight:400;
  color:#2d2d2d;
  text-align:end;
}
.order-detail__row dd{
  padding:14px 12px;
  margin:0;
  font-size: var(--fs-quote);
  color:#444;
  text-align:end;
}
.order-detail__products{ list-style:none; width:100%; }
.order-product{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  width:100%;
  padding-block:16px;
  border-block-end:1px solid #cbcbcb;
}
.order-detail__products li:last-child .order-product{ border-block-end:none; }
.order-product:hover .order-product__name{ text-decoration:underline; }
.order-product__info{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:4px;
  min-width:0;
  text-align:end;
}
.order-product__name{
  font-size: var(--fs-name);
  font-weight:600;
  color: var(--color-brown);
}
.order-product__qty,
.order-product__price{ font-size: var(--fs-quote); color: var(--color-brown); }
.order-product__image{
  flex-shrink:0;
  width:88px; height:88px;
  border-radius:14px;
  object-fit:cover;
}
@media (min-width:600px){
.order-product__image{ width:120px; height:120px; }
}
/* ============================================================
   ACCOUNT — ≥ 768px
   ============================================================ */
@media (min-width: 768px){
.account-fields{ flex-direction:row; align-items:flex-start; }
/* Password change needs THREE fields — current, new, confirmation — because
   WooCommerce refuses the change without all three, and a hidden confirmation
   would let a typo lock the customer out. Figma drew two beside the heading;
   with three the heading takes the whole line and the fields sit under it.
   flex-basis lives here, not in the base rule: below 768px the container is a
   COLUMN, where basis would set the field's height. */
.account-security{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; }
.account-security__intro{ order:-1; flex:1 1 100%; }
.account-security > .form-field{ flex:1 1 200px; min-width:0; }
}
/* ============================================================
   ACCOUNT — ≥ 992px : sidebar + content become a row
   ============================================================ */
@media (min-width: 992px){
.account{ gap:40px; }
.account-card{ padding:24px; }
/* flex-wrap — чтобы уведомление WooCommerce, если оно всё-таки попадёт внутрь
   ряда, встало отдельной строкой, а не третьей колонкой (см. woo-notices.css). */
.account-layout{ flex-direction:row-reverse; flex-wrap:wrap; align-items:flex-start; gap:32px; }
.account-nav{ flex:0 0 357px; }
}