/* ============================================================
   Craque House — My Account page.

   WooCommerce's [woocommerce_my_account] shortcode renders everything
   here — login, registration, lost password, dashboard, orders,
   addresses, account details, logout — via its classic myaccount/*.php
   templates (not Blocks, unlike Checkout). Every class name below was
   confirmed against WooCommerce's own shipped template files rather than
   guessed, the same way the checkout/order-received styling was verified
   earlier. Cosmetic overrides only — no geometry changes to form
   controls, same rule as checkout-page.css.
   ============================================================ */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex; gap: .5rem; align-items: center;
  padding-block: var(--space-4) 0;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--color-ink); }

.account-section { padding-block: var(--space-6) clamp(4rem, 8vw, 7rem); min-height: 50vh; }

/* ── Notices (login/registration errors, "address saved", etc.) ── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  max-width: 1000px;
  margin: 0 auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.6;
}
.woocommerce-error { background: var(--color-red-tint); border-left: 4px solid var(--color-red); color: var(--color-ink); }
.woocommerce-error li::before { content: '⚠ '; }
.woocommerce-message { background: #f0f7f0; border-left: 4px solid #3a8a3a; color: var(--color-ink); }
.woocommerce-info { background: var(--color-bg); border-left: 4px solid rgba(20,20,20,.25); color: var(--color-ink); }
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button { margin-left: var(--space-3); }

/* ============================================================
   LOGGED OUT — Login + Register, side by side
   ============================================================ */

#customer_login {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin-inline: auto;
  align-items: stretch;
}
@media (min-width: 860px) { #customer_login { grid-template-columns: 1fr 1fr; } }

/* "Login" heading — WooCommerce renders it as a SIBLING of the <form>
   (not nested inside it), so it has to be targeted where it actually
   lives: a direct child of the shortcode's .woocommerce wrapper when
   registration is off, or of .u-column1/.u-column2 when it's on. */
.woocommerce-account .woocommerce > h2,
#customer_login h2 {
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-ink);
  text-align: center;
  max-width: 460px;
  margin: 0 auto var(--space-5);
}
#customer_login h2 { text-align: left; margin: 0 0 var(--space-5); }

/* Standalone login card (the common case — registration is off on most
   stores by default) — centered card on the plain page background. */
.woocommerce-form-login {
  max-width: 460px; margin-inline: auto;
  border: 1.5px solid rgba(20,20,20,.15);
  background: #fff;
  padding: clamp(2rem, 4vw, 3rem);
}

/* Two-column case (registration enabled): #customer_login supplies the
   card look for each column, so the form inside .u-column1 shouldn't be
   double-boxed — and that column is the dark "Sign In" panel. */
#customer_login .u-column1 { background: var(--color-ink); padding: clamp(2rem, 4vw, 3rem); }
#customer_login .u-column1 h2 { color: #fff; }
#customer_login .u-column1 .woocommerce-form-login {
  max-width: none; margin-inline: 0; border: none; background: transparent; padding: 0;
}
#customer_login .u-column2 {
  border: 1.5px solid rgba(20,20,20,.15);
  background: #fff;
  padding: clamp(2rem, 4vw, 3rem);
}
#customer_login .u-column2 h2 { color: var(--color-ink); }

/* ── Shared classic form styling (login, register, edit-account, edit-address) ── */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
  display: flex; flex-direction: column; gap: var(--space-4);
}
.woocommerce-form-row,
.woocommerce-address-fields .form-row {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0;
}
.woocommerce-form-row label,
.woocommerce-address-fields label {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(20,20,20,.5);
}
.woocommerce-form-row .required { color: var(--color-red); text-decoration: none; }
.woocommerce-form-row .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

input.woocommerce-Input,
select.woocommerce-Input,
textarea.woocommerce-Input,
.woocommerce-address-fields input,
.woocommerce-address-fields select {
  width: 100%; padding: .8rem 1rem;
  border: 1.5px solid rgba(20,20,20,.18); border-radius: 0;
  background: #fff;
  font-family: var(--font-body); font-size: .95rem;
  color: var(--color-ink); outline: none;
  transition: border-color 0.15s, background 0.15s;
}
/* Room for the browser's own native "show password" icon (Edge and some
   other browsers add one automatically) so it doesn't sit on top of the
   typed text, and so it's actually visible/clickable at a sane size. */
input.woocommerce-Input[type="password"],
.woocommerce-address-fields input[type="password"] {
  padding-right: 2.75rem;
}
input.woocommerce-Input[type="password"]::-ms-reveal,
input.woocommerce-Input[type="password"]::-ms-clear {
  margin-right: .25rem;
  width: 1.1rem; height: 1.1rem;
}

input.woocommerce-Input:focus,
select.woocommerce-Input:focus,
textarea.woocommerce-Input:focus,
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus { border-color: var(--color-red); }
input.woocommerce-Input::placeholder { color: rgba(20,20,20,.3); }

/* Dark signin panel — override the shared light styling above */
#customer_login .u-column1 .woocommerce-form-row label { color: rgba(255,255,255); }
#customer_login .u-column1 input.woocommerce-Input {
  border-color: rgba(255,255,255);
  background: rgba(255,255,255,.04);
  color: #fff;
}
#customer_login .u-column1 input.woocommerce-Input::placeholder { color: rgba(255,255,255); }
#customer_login .u-column1 input.woocommerce-Input:focus { background: rgba(255,255,255,.07); }

/* Remember me + submit row */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}
.woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(20,20,20,.55);
}
.woocommerce-form-login__rememberme input[type="checkbox"] { accent-color: var(--color-red); }
.woocommerce-LostPassword {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
}
.woocommerce-LostPassword a {
  color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-red);
}
.woocommerce-LostPassword a:hover { color: var(--color-red); }

/* Dark signin panel (two-column, registration enabled) — override the
   light defaults above for these two elements too. */
#customer_login .u-column1 .woocommerce-form-login__rememberme { color: rgba(255,255,255); }
#customer_login .u-column1 .woocommerce-LostPassword a { color: rgba(255,255,255); }
#customer_login .u-column1 .woocommerce-LostPassword a:hover { color: #fff; }

/* Submit buttons */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"],
.woocommerce-ResetPassword button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem; line-height: 1;
  padding: 1.1rem 2rem;
  border: 2px solid transparent; border-radius: var(--radius-md);
  background: var(--color-red); color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-sticker);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.woocommerce-form-login__submit:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
  background: var(--color-red-hover);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--color-ink);
}
.woocommerce-form-register__submit {
  background: transparent; border-color: var(--color-ink); color: var(--color-ink);
  box-shadow: none;
}
.woocommerce-form-register__submit:hover { background: var(--color-ink); color: #fff; }

/* ============================================================
   LOGGED IN — nav sidebar + content
   ============================================================ */

/* Scoped with :has() so this nav+content grid only kicks in when a nav
   actually exists (logged in) — the same .woocommerce wrapper also holds
   the logged-out login/register form, which must stay normal block flow. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 100%; margin-inline: auto;
}
@media (min-width: 860px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 220px 1fr; align-items: start; }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  border: 1.5px solid rgba(20,20,20,.12);
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(20,20,20,.1); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: .85rem 1.1rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--color-ink); color: #fff; }

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p { color: rgba(20,20,20,.7); line-height: 1.7; margin-bottom: var(--space-4); font-size: .95rem; }
.woocommerce-MyAccount-content a { color: var(--color-red); }
.woocommerce-MyAccount-content strong { color: var(--color-ink); }

/* Orders table */
.woocommerce-orders-table.shop_table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: .9rem;
  margin-bottom: var(--space-5);
}
.woocommerce-orders-table.shop_table th,
.woocommerce-orders-table.shop_table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1.5px solid rgba(20,20,20,.12);
  text-align: left; vertical-align: middle;
}
.woocommerce-orders-table__header {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(20,20,20,.5);
  border-bottom: 1.5px solid rgba(20,20,20,.2) !important;
}
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid rgba(20,20,20,.25); background: #fff; color: var(--color-ink);
  padding: .5rem .9rem; text-decoration: none; margin-right: .4rem;
  transition: all .15s;
}
.woocommerce-orders-table__cell-order-actions .button:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.woocommerce-orders-table__cell-order-actions .view { border-color: var(--color-red); color: var(--color-red); }
.woocommerce-orders-table__cell-order-actions .view:hover { background: var(--color-red); color: #fff; border-color: var(--color-red); }

.woocommerce-pagination { margin-top: var(--space-5); display: flex; gap: var(--space-3); }
.woocommerce-pagination .button {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1.5px solid rgba(20,20,20,.2); background: #fff; color: var(--color-ink);
  padding: .55rem 1rem; text-decoration: none; transition: all .15s;
}
.woocommerce-pagination .button:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* Addresses */
.woocommerce-Addresses.col2-set {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .woocommerce-Addresses.col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address { border: 1.5px solid rgba(20,20,20,.12); padding: var(--space-5); }
.woocommerce-Address-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.woocommerce-Address-title h2 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--color-ink);
}
.woocommerce-Address-title .edit {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-red); text-decoration: none; border-bottom: 1px solid var(--color-red);
  white-space: nowrap;
}
.woocommerce-Address-title .edit:hover { color: var(--color-red-hover); }
.woocommerce-Address address { font-style: normal; color: rgba(20,20,20,.65); line-height: 1.75; font-size: .92rem; }

/* Account details / address edit forms */
.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
  border: none; padding: 0; margin: var(--space-2) 0 0;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.woocommerce-EditAccountForm legend,
.woocommerce-address-fields legend {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--color-ink);
  margin: var(--space-4) 0 var(--space-2); padding: 0;
}

/* Downloads / payment methods — inherit table + button styles above */
.woocommerce-MyAccount-downloads-table,
.woocommerce-MyAccount-paymentMethods {
  width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: .9rem;
}
.woocommerce-MyAccount-downloads-table th,
.woocommerce-MyAccount-downloads-table td,
.woocommerce-MyAccount-paymentMethods th,
.woocommerce-MyAccount-paymentMethods td {
  padding: var(--space-3) var(--space-2); border-bottom: 1.5px solid rgba(20,20,20,.12); text-align: left;
}