/* newage account area: sign in / register, dashboard, forms, lists, side navigation */

/* layout: the account menu (right column in the data) sits on the left */
.layout.has-right { grid-template-columns: 240px minmax(0, 1fr); }
.layout.has-right > .side-col { order: -1; }
@media (max-width: 860px) { .layout.has-right { grid-template-columns: minmax(0, 1fr); } .layout.has-right > .side-col { order: 2; } }
.acc-nav { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 18px; position: sticky; top: 100px; }
.acc-nav h2 { font-family: var(--body); font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #6b6764; margin-bottom: 10px; }
.acc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acc-nav a { display: block; padding: 9px 10px; border-radius: 4px; font-size: 15px; }
.acc-nav a:hover { background: var(--offwhite); color: var(--orange-text); }

/* content headings */
.content > h1, .acard h2, .auth-card h2 { text-transform: uppercase; }
.content > h1 { font-size: clamp(28px, 3.2vw, 40px); margin: 6px 0 18px; }
.auth-note { margin: -6px 0 18px; color: #454341; }

/* cards and forms */
.acard { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: clamp(18px, 2.4vw, 28px); }
.acard h2 { font-size: 20px; margin-bottom: 14px; }
.aform { display: grid; gap: 16px; }
.aform h2 { font-size: 20px; text-transform: uppercase; margin: 8px 0 0; }
.aform h2:first-child { margin-top: 0; }
.aform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aform-grid > .co-field { flex: none; }
.aform .co-field { display: grid; gap: 6px; }
.aform .co-field input[type="text"], .aform .co-field input[type="email"], .aform .co-field input[type="tel"], .aform .co-field input[type="password"], .aform .co-field select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--white);
  font-family: var(--body); font-size: 16px; color: var(--charcoal);
}
.aform .co-field input:focus, .aform .co-field select:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.aform .co-field.has-error input, .aform .co-field.has-error select { border-color: var(--orange-cta); }
.aform fieldset { border: 0; padding: 0; margin: 0; }
.aform-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.aform-actions:only-child, .aform-actions > :only-child { margin-left: auto; }
@media (max-width: 560px) { .aform-grid { grid-template-columns: 1fr; } .aform-actions .btn { width: 100%; justify-content: center; } }

/* sign in / register */
.auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-lg); align-items: start; }
.auth-single { grid-template-columns: minmax(0, 560px); }
.auth-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 14px; }
.auth-card h2 { font-size: 24px; }
.auth-lead { margin: 0; }
.auth-copy { color: #454341; font-size: 15.5px; }
.auth-forgot { padding: 3px 0; font-size: 14.5px; color: var(--orange-cta); font-weight: 600; text-decoration: underline; justify-self: start; }
@media (max-width: 760px) { .auth { grid-template-columns: minmax(0, 1fr); } }

/* dashboard */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--g-md); }
.alinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alinks a { display: block; padding: 11px 6px; border-bottom: 1px solid var(--line); font-weight: 500; }
.alinks li:last-child a { border-bottom: 0; }
.alinks a:hover { color: var(--orange-text); }

/* address book */
.addr-list { list-style: none; margin: 0 0 var(--g-md); padding: 0; display: grid; gap: var(--g-sm); }
.addr-list .acard { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.addr-list address { font-style: normal; line-height: 1.6; }
.addr-actions { display: flex; gap: 8px; }
.btn.danger { color: var(--orange-cta); border-color: var(--orange-cta); }
.btn.danger:hover { background: var(--orange-cta); color: #fff; }

/* tables (orders and other lists): rows stack into labelled blocks on phones */
.atable-wrap { overflow-x: auto; }
.atable { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 6px; }
.atable th { text-align: left; padding: 12px 14px; background: var(--offwhite); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #6b6764; }
.atable td { padding: 13px 14px; border-top: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.atable .num { text-align: right; }
@media (max-width: 900px) {
  .atable thead { display: none; }
  .atable, .atable tbody, .atable tr, .atable td { display: block; }
  .atable tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .atable td { border: 0; padding: 4px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .atable td::before { content: attr(data-label); color: #6b6764; text-align: left; }
}

.wish-remove { display: block; margin: -6px 18px 14px; font-size: 13.5px; text-align: center; }
.btn-link.danger { color: var(--orange-cta); }

/* blog: on narrow screens the articles come first, the category and search panel after them */
@media (max-width: 960px) {
  .layout:has(.blog-nav) > aside { order: 1; }
}