/*
 * Barbara Rizzi website: My Account (/my-account/), the WordPress theme's page-my-account.php (.bra, its inline styles)
 * with the WooCommerce rules its forms, tables and notices get on WordPress (woocommerce-layout.css,
 * woocommerce-smallscreen.css, woocommerce.css, woocommerce-br.css, the Elementor kit's link colours), scoped to .bra.
 * Changed: the hero clears the fixed header (WordPress hid it under the header); the account's content takes the whole
 * main column (WooCommerce's 68% float hit the theme's column); the lost password and new password panels, never shown
 * on WordPress, have the Sign In panel's design; text 12 px at least, with less letter-spacing (readability pass).
 * Not ported: the selectWoo country lists and the password meter. WordPress' colours everywhere
 * (docs/phases/07-checkout-payments/07f-accounts.md lists the exceptions).
 */

/* The page's background as on WordPress' WooCommerce pages (woocommerce-br.css: .woocommerce-page) */
body { background: #faf8f5; }
.bra { min-height: 80vh; font-family: 'Montserrat', sans-serif; background: #faf8f5; }
.bra a { color: #1a1816; }
.bra a:hover { color: #5a5650; }
.bra .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.bra .clear { clear: both; }

/* Hero: "Barbara Rizzi · My Account", "Your Account." or "Welcome back, Name." */
.bra__hero {
  margin-top: -1px;
  padding: 152px 40px 40px;
  background: #1a1816;
  border-bottom: 0.5px solid rgba(184, 146, 58, 0.2);
}
.bra__hero-eye {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b8923a;
}
.bra__hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 300;
  color: #ffffff;
}
.bra__hero-title em { font-style: italic; color: #b8923a; }
/* Fix: a long name or email wraps (WordPress let it run out of the hero and the menu). */
.bra__hero-title, .bra__nav-name, .bra__nav-email { overflow-wrap: anywhere; }

/* Logged out: Sign In and Create Account; the lost password and new password panels */
.bra__auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 40px;
}
.bra__auth--single { grid-template-columns: minmax(0, 1fr); max-width: 490px; }
.bra__notices { grid-column: 1 / -1; }
/* The panels' titles, lines and forms in shared rows: the forms start at the same height (fix: WordPress' did not). */
.bra__panel {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 40px;
  background: #ffffff;
  border: 0.5px solid #e2ddd6;
}
.bra__auth--single .bra__panel { display: block; grid-row: auto; }
.bra__panel--light { background: #faf8f5; }
.bra__panel-title {
  margin-bottom: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 300;
  color: #1a1816;
}
.bra__panel-sub { margin-bottom: 24px; font-size: 14px; line-height: 1.7; color: #8a8580; }

/* WooCommerce's form rows (woocommerce-layout.css, through the body's woocommerce-page class) */
.bra form .form-row::before, .bra form .form-row::after { content: ' '; display: table; }
.bra form .form-row::after { clear: both; }
.bra form .form-row label { display: block; }
.bra form .form-row .input-text { box-sizing: border-box; width: 100%; }
.bra form .form-row select { width: 100%; }
.bra form .form-row-first, .bra form .form-row-last { width: 47%; overflow: visible; }
.bra form .form-row-first { float: left; }
.bra form .form-row-last { float: right; }
.bra form .form-row-wide { clear: both; }
.bra .woocommerce-form-login p.form-row-first,
.bra .woocommerce-form-login p.form-row-last,
.bra .lost_reset_password p.form-row-first,
.bra .lost_reset_password p.form-row-last { width: 100%; float: none; margin-right: 0; }

/* The theme's form look */
.bra .woocommerce-form__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8580;
}
.bra .woocommerce-form__input, .bra .woocommerce-Input {
  width: 100%;
  margin-bottom: 16px;
  padding: 13px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #1a1816;
  background: #ffffff;
  border: 0.5px solid #e2ddd6;
  outline: none;
  transition: border-color 0.2s;
}
.bra .woocommerce-form__input:focus, .bra .woocommerce-Input:focus { border-color: #b8923a; }
/* Sign In's "Email address" as tall as the other fields, in the colours it had on WordPress: the browser's own field
   there (the theme styled WooCommerce's other fields, not this one), with the browser's focus ring */
.bra #username { color: #000; border-color: #767676; }
.bra #username:focus { border-color: #767676; outline: revert; }
/* Fix: "Remember me" beside its box, on the left (WordPress stretched the box over a line of its own). */
.bra .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bra .woocommerce-form-login__rememberme .woocommerce-form__input-checkbox { width: auto; margin: 0; padding: 0; }
.bra .woocommerce-form-login__submit,
.bra .woocommerce-form-register__submit,
.bra .woocommerce-Button--next,
.bra .lost_reset_password button[type=submit],
.bra button[name=login],
.bra button[name=register] {
  display: block;
  width: 100%;
  padding: 15px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: #1a1816;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.bra button[name=login]:hover,
.bra button[name=register]:hover,
.bra .lost_reset_password button[type=submit]:hover { background: #b8923a; }
.bra .woocommerce-privacy-policy-text { margin: 10px 0 20px; font-size: 13px; color: #8a8580; }
.bra .woocommerce-privacy-policy-text p { line-height: 1.7; }
.bra .woocommerce-privacy-policy-text a { color: #b8923a; }
.bra .lost_password { display: block; margin-top: 16px; text-align: center; }
.bra .lost_password a { font-size: 13px; color: #8a8580; text-decoration: none; }
.bra .lost_password a:hover { color: #b8923a; }
.bra .lost_reset_password > p:first-child { margin-bottom: 24px; font-size: 14px; line-height: 1.7; color: #8a8580; }

/* Notices: the theme's colours on top of WooCommerce's (site.css). Fix: a notice's button ("Browse products") centred
   inside it (WordPress floated it out of the box). */
.bra .woocommerce-error, .bra .woocommerce-info, .bra .woocommerce-message { font-size: 14px; line-height: 1.6; }
.bra .woocommerce-error { border-top-color: #c0392b; }
.bra .woocommerce-info:has(> .button) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.bra .woocommerce-info:has(> .button)::before { top: 50%; transform: translateY(-50%); }
.bra .woocommerce-info > .button { white-space: nowrap; }

/* Logged in: the menu beside the account's content */
.bra__wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 40px 80px;
}
.bra__nav { position: sticky; top: 80px; background: #ffffff; border: 0.5px solid #e2ddd6; }
.bra__nav-head { padding: 20px 24px; background: #1a1816; border-bottom: 0.5px solid #e2ddd6; }
.bra__nav-name { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 300; color: #ffffff; }
.bra__nav-email { margin-top: 4px; font-size: 12px; color: rgba(250, 248, 245, 0.4); }
.bra__nav ul { margin: 0; padding: 0; list-style: none; }
.bra__nav ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8580;
  text-decoration: none;
  border-bottom: 0.5px solid #f0ede8;
  transition: all 0.2s;
}
.bra__nav ul li a:hover { padding-left: 24px; color: #1a1816; }
.bra__nav ul li.is-active a { padding-left: 18px; color: #b8923a; border-left: 2px solid #b8923a; }
.bra__main { min-width: 0; }
.bra__main h2 {
  margin-bottom: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  color: #1a1816;
}
.bra__main-sub { margin-bottom: 24px; font-size: 14px; line-height: 1.7; color: #8a8580; }
/* Titles without an introduction (an order, the logout question): room under them */
.bra__main h2 + .woocommerce-MyAccount-content { margin-top: 18px; }

/* The account's content (WooCommerce's templates). Fixes: paragraphs (the dashboard's) and the address forms' rows
   spaced (the theme's reset left them touching). The address forms' lists keep the browser's colours, as the theme's
   rule left them on WordPress. */
.bra .woocommerce-MyAccount-content > p { margin-bottom: 14px; }
.bra .woocommerce-address-fields .form-row { margin-bottom: 18px; }
.bra .woocommerce-MyAccount-content h2 {
  margin-bottom: 24px;
  font-family: var(--br-font-serif);
  font-size: 28px;
  font-weight: 300;
}
.bra .woocommerce-MyAccount-content mark { font-weight: 700; color: inherit; background-color: transparent; }
.bra .woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; }
.bra .woocommerce-MyAccount-content table.shop_table th {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8580;
  background: none;
  border-bottom: 0.5px solid #e2ddd6;
}
.bra .woocommerce-MyAccount-content table.shop_table td {
  padding: 16px 14px;
  font-size: 14px;
  color: #5a5650;
  vertical-align: middle;
  border-bottom: 0.5px solid #e2ddd6;
}
.bra .woocommerce-MyAccount-content .button, .bra .woocommerce-MyAccount-content .woocommerce-Button {
  display: inline-block;
  padding: 11px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  background: #1a1816;
  border: none;
  border-radius: 0;
  transition: background 0.3s;
}
.bra .woocommerce-MyAccount-content .button:hover { color: #ffffff; background: #b8923a; }
/* My Orders' actions: Pay, View, Cancel in a row (Cancel is a form: the cancel is posted). */
.bra .woocommerce-orders-table__cancel { display: inline; }
.bra .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.bra .woocommerce-orders-table__cell-order-actions .button { margin: 2px 0 2px 6px; padding: 11px 12px; cursor: pointer; }
.bra .woocommerce-MyAccount-content form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #8a8580;
}
.bra .woocommerce-MyAccount-content form .form-row input, .bra .woocommerce-MyAccount-content form .form-row select {
  width: 100%;
  padding: 13px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  border: 0.5px solid #e2ddd6;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
}
.bra .woocommerce-MyAccount-content form .form-row input:focus,
.bra .woocommerce-MyAccount-content form .form-row select:focus { border-color: #b8923a; }
.bra .woocommerce-MyAccount-content form p button[type=submit] {
  padding: 15px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: #1a1816;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.bra .woocommerce-MyAccount-content form p button[type=submit]:hover { background: #b8923a; }

/* Addresses and order details in two equal columns. Fixes: space under the addresses' introduction; each address'
   title with its "Edit …" link on one line (WordPress floated the link under the title's margin); the address set
   apart from them. */
.bra .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.bra .addresses .title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 14px;
}
.bra .woocommerce-MyAccount-content .addresses .title h2 { margin-bottom: 0; }
.bra .addresses address { line-height: 1.8; }
.bra .woocommerce-MyAccount-content .woocommerce-order-details { margin-top: 32px; }

/* Account Details: "Password change" in the page's style (fix: WordPress showed the browser's grey frame) */
.bra .edit-account fieldset { margin: 28px 0 0; padding: 18px 0 0; border: 0; border-top: 0.5px solid #e2ddd6; }
.bra .edit-account legend {
  padding-right: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: #1a1816;
}
.bra .edit-account fieldset + .clear + p { margin-top: 10px; }

@media (max-width: 960px) {
  .bra__hero { padding-top: 124px; }
}
@media (max-width: 768px) {
  .bra__hero { padding: 100px 20px 28px; }
  .bra__auth { grid-template-columns: 1fr; padding: 32px 20px; }
  .bra__panel { padding: 32px 24px; }
  .bra__wrap { grid-template-columns: 1fr; gap: 20px; padding: 32px 20px 56px; }
  .bra__nav { position: static; }
  .bra .col2-set { grid-template-columns: 1fr; gap: 28px; }

  /* My Orders: one block per order, each value with its name (woocommerce-smallscreen.css) */
  .bra table.shop_table_responsive thead, .bra table.shop_table_responsive tbody th { display: none; }
  .bra table.shop_table_responsive tr { display: block; }
  .bra table.shop_table_responsive tr td { display: block; text-align: right; }
  .bra table.shop_table_responsive tr td::before { content: attr(data-title) ': '; float: left; font-weight: 700; }
  .bra table.shop_table_responsive tr:nth-child(2n) td { background-color: rgba(0, 0, 0, 0.025); }
}