/* ------------------------------------------------------------------
   Navohi — My Account
   The account area had no styles of its own, so Storefront's defaults
   showed through: WooCommerce purple links, icons colliding with the
   labels, and a cramped column that ignored the page grid. This brings
   it onto the same type, colour and spacing as navohi.com.
   ------------------------------------------------------------------ */

/* Page shell -------------------------------------------------------
   Storefront nests a second .site-main inside .content-area and reserves
   room for a sidebar this page does not have, so the shell is set on the
   outer main and everything inside is flattened. Without this the content
   is inset twice and the columns end up a third of their width. */
.woocommerce-account .site-main {
  max-width: 1040px !important;
  /* Storefront's sidebar layout sets margin-left on .site-main; without an
     explicit override the whole account block sits 100px off centre. */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 56px var(--px) 120px;
}
.woocommerce-account .content-area .site-main {
  max-width: none !important;
  padding: 0 !important;
}
.woocommerce-account .content-area,
.woocommerce-account .entry-content,
.woocommerce-account article.page {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce-account .widget-area { display: none !important; }
.woocommerce-account .entry-title {
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 6vw, 56px) !important;
  font-weight: 300 !important;
  text-align: center;
  margin: 0 0 56px !important;
  letter-spacing: -0.5px;
}

/* Two columns: a quiet index on the left, the work on the right. */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 72px;
  align-items: start;
}
@media (max-width: 860px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Storefront floats these two at ~25% / ~68% of their container. Inside a
   grid track that collapses the nav to a column one letter wide. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Navigation ------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--border);
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--ink);
  opacity: 1;
}
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ink);
}
/* Storefront hangs an icon off each item; it landed on top of the label.
   There is no icon set worth keeping here — the list reads fine as type. */
.woocommerce-MyAccount-navigation li a::before,
.woocommerce-MyAccount-navigation li a::after {
  content: none !important;
  display: none !important;
}

/* Content ---------------------------------------------------------- */
.woocommerce-MyAccount-content {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.woocommerce-MyAccount-content p {
  margin: 0 0 16px;
  color: var(--muted);
}
.woocommerce-MyAccount-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--ink);
  margin: 40px 0 18px;
  padding: 0;
  border: 0;
}
.woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h3:first-child { margin-top: 0; }

/* Notices — Woo's default is a grey slab with a coloured bar. Keep the
   bar as a hairline, drop the slab. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--muted) !important;
  padding: 4px 0 4px 18px !important;
  margin: 0 0 28px !important;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.woocommerce-account .woocommerce-error { border-left-color: #6E1E2E !important; }
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-notice::before { content: none !important; }
/* The "browse products" button sat far to the right of its own sentence. */
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-message .button {
  float: none !important;
  margin: 0 !important;
}

/* Buttons ---------------------------------------------------------- */
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
  display: inline-block;
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 13px 28px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: opacity 0.2s;
}
.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover { opacity: 0.85; }
/* A secondary action next to a primary one reads as an outline. */
.woocommerce-account .woocommerce-Address .edit {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

/* Forms ------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-content form { max-width: 560px; }
/* Storefront draws a grey slab around a fieldset, which on this page put a
   box round "change password" and nothing else — reads as an error state. */
.woocommerce-account fieldset {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin: 36px 0 0 !important;
  padding: 28px 0 0 !important;
}
.woocommerce-account fieldset legend {
  margin: 0 0 20px !important;
  padding: 0 !important;
  float: none;
  width: auto;
}
/* Two fields on one row get a real gutter rather than a percentage float. */
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last { width: calc(50% - 12px) !important; float: none !important; display: inline-block; vertical-align: top; }
.woocommerce-account .form-row-first { margin-right: 20px !important; }
.woocommerce-account .form-row-wide { width: 100% !important; float: none !important; }
.woocommerce-account .woocommerce-MyAccount-content form::after { content: ''; display: table; clear: both; }
.woocommerce-account .form-row { margin: 0 0 22px; padding: 0; }
.woocommerce-account label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 0;
  outline: none;
  transition: border-color 0.2s;
}
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus { border-bottom-color: var(--ink); }
.woocommerce-account .woocommerce-form-row .required { color: #6E1E2E; text-decoration: none; }
.woocommerce-account em,
.woocommerce-account .description { font-size: 13px; color: var(--ghost); font-style: normal; }

/* Any two-up block — login/register, and the two addresses. Storefront floats
   these at percentages of a container that is already a narrow grid track, so
   the columns collapse and every word wraps onto its own line. */
.woocommerce-account .col2-set { display: grid !important; grid-template-columns: 1fr 1fr; gap: 56px; }
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 { width: auto !important; float: none !important; margin: 0 !important; }
@media (max-width: 860px) {
  .woocommerce-account .col2-set { grid-template-columns: 1fr; gap: 40px; }
}

/* Orders table ----------------------------------------------------- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
  width: 100%;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-sans);
  font-size: 14px;
}
.woocommerce-account table.shop_table th {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 12px 12px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ghost) !important;
  text-align: left;
}
.woocommerce-account table.shop_table td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 18px 12px 18px 0 !important;
  color: var(--ink);
  vertical-align: middle;
}
.woocommerce-account table.shop_table tbody tr:nth-child(2n) td { background: transparent !important; }

/* Addresses -------------------------------------------------------- */
.woocommerce-account .woocommerce-Address { width: auto !important; float: none !important; }
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  margin: 0 !important;
  padding: 0 !important;   /* Storefront indents the heading away from its own column */
  white-space: nowrap;
}
.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  color: var(--muted);
  line-height: 1.8;
}
/* The edit control sat as a bare dashicon glyph beside the heading. A small
   underlined word reads better next to type and needs no icon font. */
.woocommerce-account .woocommerce-Address-title .edit {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.woocommerce-account .woocommerce-Address-title .edit:hover { color: var(--ink) !important; }
.woocommerce-account .woocommerce-Address-title .edit::before,
.woocommerce-account .woocommerce-Address-title .edit::after { content: none !important; display: none !important; }

/* Scoped to the account block on purpose: an earlier version coloured every
   link on the page, which turned the footer wordmark ink-on-ink and made it
   disappear. Nothing here may reach the header or the footer. */
.woocommerce-account .woocommerce a { color: var(--ink); }
.woocommerce-account .woocommerce mark { background: transparent; color: var(--ink); font-weight: 500; }