/* ============================================================
   TrendiestStore — the account area

   THIS FILE OWNS /my-account/ AND NOTHING ELSE OWNS IT. The rules that
   used to live in ts-woo.css §9 and ts-fixes.css §12 were deleted when
   this was written, because ts-fixes.css loads last on every page and a
   second definition of the same component there wins every tie this
   file could not see coming.

   It is enqueued from ts_enqueue_last() with `ts-fixes` as its
   dependency, so on an account page it is the LAST stylesheet in the
   document — after WooCommerce's own woocommerce.css, which is what
   draws `form.login` and `form.register` as bordered panels and had to
   be beaten with three-class selectors before.

   WRITTEN MOBILE-FIRST, unlike the rest of the theme. The account page
   is the one screen where the phone layout is not a correction of the
   desktop one: a phone gets one card, a desktop gets the same card
   centred, and the signed-in area gets a sidebar only when there is
   room for one beside the content. Starting from the phone is fewer
   rules, not more.

   1  Auth page shell
   2  The card and its head
   3  Sign in with Google, and the divider
   4  The Log in / Sign up tabs
   5  Fields
   6  Actions, links, the guest strip
   7  Signed in: layout, navigation, dashboard
   8  Signed in: orders, addresses, details
   9  Wider screens
   ============================================================ */

/* ---------- 1. auth page shell -------------------------------- */
/* ONE COLUMN, ALWAYS. The old layout was a two-column grid with no
   phone override, so at 390px both cards were 175px wide: "Username or
   email address" wrapped onto three lines above a box that could not
   hold a word, and the register card was cut in half. A log-in screen
   is a single decision and reads as one card. */
.ts-auth {
  max-width: 460px;
  margin: 0 auto;
}

/* The page heading is printed by page.php, outside this template, and a
   left-aligned "My account" over a centred 460px card reads as a card
   that has slipped. `body:not(.logged-in)` is how the signed-out state
   is addressed from CSS — WordPress puts `logged-in` on the body of
   every page for a signed-in user, and the signed-in account area below
   is a full-width layout that wants its heading where it is. */
body:not(.logged-in).woocommerce-account .ts-collhead__inner {
  text-align: center;
}

/* ---------- 2. the card and its head -------------------------- */
.ts-auth__card {
  padding: clamp(20px, 5vw, 32px);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  background: var(--ts-panel-grad);
  box-shadow: var(--ts-sh-2);
}

.ts-auth__head {
  margin: 0 0 20px;
  text-align: center;
}

.ts-auth__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ts-brand-wash);
}

.ts-auth__badge svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ts-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The heading and the line under it are swapped by ts-account.js when
   the tab changes, so both are addressable and neither is baked into a
   panel that is hidden half the time. */
.ts-auth__title {
  margin: 0 0 5px;
  font-size: 1.8333rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ts-text);
}

.ts-auth__sub {
  margin: 0;
  font-size: 1.1667rem;
  line-height: 1.5;
  color: var(--ts-muted);
}

/* ---------- 3. Sign in with Google ---------------------------- */
/* The button itself is Google's, rendered into this box by the Site Kit
   module's script — see woocommerce/myaccount/form-login.php for why it
   is hoisted out of the log-in form and up here. Its inner markup
   belongs to Google and cannot be styled, so this only centres it and
   reserves its height so the card does not jump when it arrives. */
.ts-auth__social {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin: 0;
}

.ts-auth__social .googlesitekit-sign-in-with-google__frontend-output-button {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The word between the two ways in. One rule rather than a border on
   each side, because the line has to stop at the text and resume after
   it whatever the text is translated to. */
.ts-auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 1.0833rem;
  color: var(--ts-muted-2);
}

.ts-auth__or::before,
.ts-auth__or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--ts-line);
}

/* ---------- 4. the tabs --------------------------------------- */
/* A SEGMENTED CONTROL, NOT TWO STACKED FORMS. The brief was that the
   log-in screen fits on a phone with the sign-up option visible on it,
   and that tapping sign-up opens the sign-up form. Two cards down the
   page cannot do the first; a link to a second page cannot do the
   second.

   The tabs are real links — `?ts-auth=register` — and the server picks
   the open panel from that, so the page works with JavaScript off.
   ts-account.js turns the navigation into a swap without a reload. */
.ts-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border-radius: var(--ts-r-pill);
  background: var(--ts-bg-3);
}

.ts-auth__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ts-r-pill);
  background: transparent;
  font-family: inherit;
  font-size: 1.1667rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ts-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ts-ease), color 0.18s var(--ts-ease),
    box-shadow 0.18s var(--ts-ease);
}

.ts-auth__tab:hover {
  color: var(--ts-brand);
}

.ts-auth__tab[aria-selected='true'] {
  background: var(--ts-surface);
  color: var(--ts-brand);
  box-shadow: var(--ts-sh-1);
}

.ts-auth__tab:focus-visible {
  outline: 2px solid var(--ts-brand);
  outline-offset: 2px;
}

/* `hidden` is what the script toggles, and any `display` rule elsewhere
   in the cascade beats the attribute on its own. */
.ts-auth__panel[hidden] {
  display: none !important;
}

/* ---------- 5. fields ----------------------------------------- */
/* A CARD INSIDE A CARD IS ONE CARD TOO MANY. WooCommerce draws
   `form.login` and `form.register` as bordered, padded, rounded panels
   of their own. The element is in the selector because Woo's own rule
   is `.woocommerce form.login` at (0,2,1), and a two-class rule loses
   that tie however late this file loads. */
.ts-auth form.woocommerce-form-login,
.ts-auth form.woocommerce-form-register,
.woocommerce .ts-auth form.login,
.woocommerce .ts-auth form.register {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* EVERY SELECTOR BELOW IS LISTED TWICE, AND THE SECOND COPY IS THE ONE
   THAT WORKS. WooCommerce styles its fields through
   `.woocommerce form .form-row .input-text` and its labels through
   `.woocommerce form .form-row label` — (0,3,1) and (0,2,2). A rule
   written `.ts-auth input[type='text']` is (0,2,1) and loses to both,
   however late this file loads, which is why the first version of this
   card came out with Woo's near-black border and 8px padding on every
   field. The `.woocommerce` wrapper is the shortcode's own div and is
   always the card's ancestor; adding it and `.form-row` clears Woo by
   one class.

   The short forms are kept rather than deleted: they are what applies
   if WooCommerce ever stops printing that wrapper, and on that day
   Woo's own rules stop matching too. */
.ts-auth .form-row,
.woocommerce .ts-auth form .form-row {
  display: block;
  width: auto;
  float: none;
  margin: 0 0 15px;
  padding: 0;
}

.ts-auth label,
.woocommerce .ts-auth form .form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 1.0833rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ts-text-2);
}

.ts-auth .required {
  color: var(--ts-brand);
  text-decoration: none;
  border: 0;
}

.ts-auth input[type='text'],
.ts-auth input[type='email'],
.ts-auth input[type='password'],
.woocommerce .ts-auth .form-row input[type='text'],
.woocommerce .ts-auth .form-row input[type='email'],
.woocommerce .ts-auth .form-row input[type='password'] {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ts-line-2);
  border-radius: var(--inputs-radius, 10px);
  background: var(--ts-surface);
  font-family: inherit;
  /* 16px at this root size. Below that iOS zooms the page in on focus
     and leaves the shopper scrolled sideways through the rest of the
     form. */
  font-size: 1.3333rem;
  line-height: 1.4;
  color: var(--ts-text);
  transition: border-color 0.18s var(--ts-ease), box-shadow 0.18s var(--ts-ease);
  -webkit-appearance: none;
  appearance: none;
}

.ts-auth input::placeholder {
  color: var(--ts-muted-2);
}

.ts-auth input:focus,
.woocommerce .ts-auth .form-row input:focus {
  outline: none;
  border-color: var(--ts-brand);
  box-shadow: 0 0 0 3px var(--ts-brand-wash);
}

/* --- show / hide on a password field ---
   WOOCOMMERCE ALREADY SHIPS THIS CONTROL AND THE THEME BRIEFLY SHIPPED
   A SECOND ONE. woocommerce.js wraps every password field on a Woo form
   in `<span class="password-input">` and appends
   `<button class="show-password-input">` to it — at RUNTIME, so nothing
   in the template mentions it and it is easy to miss until two eyes are
   sitting in the same corner of the same field. Woo's is the one that
   stays: it is the same control on the checkout and on the
   reset-password screen, already bound to a handler.

   BOTH SCOPES ARE LISTED because the same button appears on the log-in
   card and again on Account details, which asks for a password three
   times. The glyph is a background image with its colour baked into the
   data URI, so `color` cannot reach it and the picture has to be
   swapped instead — see --ts-eye in ts-tokens.css. */
.woocommerce .ts-auth .form-row .password-input input[type='password'],
.woocommerce .ts-auth .form-row .password-input input[type='text'],
.woocommerce .ts-account__content .form-row .password-input input[type='password'],
.woocommerce .ts-account__content .form-row .password-input input[type='text'] {
  padding-right: 48px;
}

.woocommerce .ts-auth .show-password-input,
.woocommerce .ts-account__content .show-password-input {
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ts-r-sm);
}

.woocommerce .ts-auth .show-password-input:hover,
.woocommerce .ts-account__content .show-password-input:hover {
  background: var(--ts-brand-wash);
}

.woocommerce .ts-auth .show-password-input::before,
.woocommerce .ts-account__content .show-password-input::before {
  width: 20px;
  height: 20px;
  background-image: var(--ts-eye);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.woocommerce .ts-auth .show-password-input.display-password::before,
.woocommerce .ts-account__content .show-password-input.display-password::before {
  background-image: var(--ts-eye-off);
}

/* --- remember me, and the lost-password link beside it --- */
.ts-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px;
}

/* `.woocommerce` again, and for the third reason in this file:
   woocommerce.css sets `display: inline-block` on this one through a
   three-class selector of its own. */
.ts-auth .woocommerce-form-login__rememberme,
.woocommerce .ts-auth .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.0833rem;
  font-weight: 500;
  color: var(--ts-muted);
  cursor: pointer;
}

.ts-auth .woocommerce-form-login__rememberme input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--ts-brand);
}

/* ---------- 6. actions, links, the guest strip ---------------- */
.ts-auth .button,
.ts-auth button[type='submit'] {
  width: 100%;
  min-height: 50px;
  font-size: 1.25rem;
}

.ts-auth__lost {
  margin: 0;
  font-size: 1.0833rem;
  font-weight: 500;
}

.ts-auth__lost a {
  color: var(--ts-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ts-auth__lost a:hover {
  color: var(--ts-brand);
}

.ts-auth__fine {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ts-muted-2);
  text-align: center;
}

/* An account is optional, and this is the screen where somebody is
   deciding whether to make one — so the sentence belongs here rather
   than in a policy page. Outside the card, because it is about
   leaving it. */
.ts-auth__guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px dashed var(--ts-line-2);
  border-radius: var(--ts-r);
  font-size: 1.0833rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ts-muted);
}

.ts-auth__guest b {
  color: var(--ts-text);
}

.ts-auth__guest .ts-btn {
  flex: none;
}

/* --- lost password, and the reset form the emailed link opens ---
   Two more screens on the same journey, rendered by WooCommerce's own
   templates on this same page. They are not worth overriding — there is
   one field on each — but they are very much worth looking like the card
   the shopper just came from rather than like the plugin. */
.woocommerce-account form.lost_reset_password,
.woocommerce-account form.woocommerce-ResetPassword {
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 32px);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  background: var(--ts-panel-grad);
  box-shadow: var(--ts-sh-2);
}

.woocommerce-account form.lost_reset_password > p:first-child {
  margin-top: 0;
  font-size: 1.1667rem;
  line-height: 1.55;
  color: var(--ts-muted);
}

.woocommerce-account form.lost_reset_password .form-row,
.woocommerce-account form.woocommerce-ResetPassword .form-row {
  display: block;
  width: auto;
  float: none;
  margin: 0 0 15px;
}

.woocommerce-account form.lost_reset_password label,
.woocommerce-account form.woocommerce-ResetPassword label {
  display: block;
  margin: 0 0 6px;
  font-size: 1.0833rem;
  font-weight: 600;
  color: var(--ts-text-2);
}

.woocommerce-account form.lost_reset_password input[type='text'],
.woocommerce-account form.lost_reset_password input[type='email'],
.woocommerce-account form.woocommerce-ResetPassword input[type='password'] {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ts-line-2);
  border-radius: var(--inputs-radius, 10px);
  background: var(--ts-surface);
  font-family: inherit;
  font-size: 1.3333rem;
  line-height: 1.4;
  color: var(--ts-text);
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-account form.lost_reset_password input:focus,
.woocommerce-account form.woocommerce-ResetPassword input:focus {
  outline: none;
  border-color: var(--ts-brand);
  box-shadow: 0 0 0 3px var(--ts-brand-wash);
}

.woocommerce-account form.lost_reset_password .button,
.woocommerce-account form.woocommerce-ResetPassword .button {
  width: 100%;
  min-height: 50px;
}

/* ---------- 7. signed in -------------------------------------- */
.ts-account {
  display: grid;
  gap: 20px;
  align-items: start;
}

/* WOOCOMMERCE'S TWO FLOAT WIDTHS HAVE TO BE UNDONE HERE, AND THEY ARE
   THE REASON THE SIGNED-IN PAGE LOOKED BROKEN. woocommerce-layout.css
   ships

     .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30% }
     .woocommerce-account .woocommerce-MyAccount-content    { float: right; width: 68% }

   and `float` is the only half of that a grid container ignores. The
   two `width` declarations went on applying to the grid ITEMS, so each
   column was sized to a percentage of the track it had already been
   given: the sidebar came out 30% of 232px — a 70px white card with the
   endpoint rows hanging out of its right-hand side — and the dashboard
   came out 68% of the rest, which is why the greeting card and the
   tiles stopped a third of the way short of the page and the tiles were
   squeezed to three cramped columns.

   Woo's own small-screen sheet resets both to 100% under 768px, so the
   phone was accidentally correct and a tablet at 800px was not. These
   two rules are (0,2,0), the same as Woo's, and this file loads after
   woocommerce-layout.css, so the tie goes here. `float: none` goes with
   them: the grid ignores it, but the lost-password and order-detail
   screens below are not grids and inherited the float too.

   --- the navigation ---
   One column of real rows on a desktop; a row of chips that scrolls
   sideways on a phone, because five endpoints stacked full-width push
   the content itself below the fold on every single visit. */
.ts-account .woocommerce-MyAccount-navigation,
.ts-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

.ts-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ts-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
  display: none;
}

.ts-account .woocommerce-MyAccount-navigation li {
  flex: none;
  margin: 0;
}

.ts-account .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-pill);
  background: var(--ts-surface);
  color: var(--ts-text-2);
  font-size: 1.1667rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--ts-ease), color 0.18s var(--ts-ease),
    border-color 0.18s var(--ts-ease);
}

.ts-account .woocommerce-MyAccount-navigation a svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-account .woocommerce-MyAccount-navigation a:hover {
  border-color: var(--ts-brand);
  color: var(--ts-brand);
}

.ts-account .woocommerce-MyAccount-navigation .is-active a {
  border-color: var(--ts-brand);
  background: var(--ts-brand);
  color: var(--ts-on-brand);
}

/* --- the content column --- */
.ts-account__content {
  min-width: 0;
}

/* The account area clears its own floats even where one survives; it is
   a grid, and a stray float from a plugin's endpoint markup must not
   drag the features strip up beside it. */
.ts-account::after {
  content: '';
  display: table;
  clear: both;
}

/* --- the dashboard greeting --- */
.ts-account__hello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  background: var(--ts-panel-grad);
}

.ts-account__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--ts-brand);
  color: var(--ts-on-brand);
  font-size: 1.6667rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.ts-account__hello-text {
  flex: 1 1 180px;
  min-width: 0;
}

.ts-account__hello-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ts-text);
}

.ts-account__hello-sub {
  margin: 2px 0 0;
  font-size: 1.0833rem;
  line-height: 1.5;
  color: var(--ts-muted);
  overflow-wrap: anywhere;
}

.ts-account__hello .ts-btn {
  flex: none;
}

/* --- the shortcut tiles --- */
/* 200px, not 150px. At 150 a 390px phone fits two columns of 170px, and
   "Name, email and password" came out as three wrapped lines beside a
   36px icon — a tile taller than it is wide, twice. One column on a
   phone, two from a large phone up, three on a tablet. */
.ts-account__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.ts-account__tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r);
  background: var(--ts-surface);
  box-shadow: var(--ts-sh-1);
  color: var(--ts-text);
  text-decoration: none;
  transition: border-color 0.18s var(--ts-ease), transform 0.18s var(--ts-ease),
    box-shadow 0.18s var(--ts-ease);
}

.ts-account__tile:hover {
  border-color: var(--ts-brand);
  transform: translateY(-2px);
  box-shadow: var(--ts-sh-2);
}

.ts-account__tile-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--ts-r-sm);
  background: var(--ts-brand-wash);
}

.ts-account__tile-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ts-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-account__tile b {
  display: block;
  font-size: 1.1667rem;
  font-weight: 600;
  line-height: 1.3;
}

.ts-account__tile span {
  display: block;
  margin-top: 1px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ts-muted);
}

/* ---------- 8. orders, addresses, details --------------------- */
/* Everything WooCommerce renders inside the content column, given the
   same card as the rest of the theme rather than left on the page
   ground in Woo's own grey. */
.ts-account__content > p:first-child {
  margin-top: 0;
}

.ts-account__content .woocommerce-orders-table,
.ts-account__content .woocommerce-table--order-details,
.ts-account__content .shop_table {
  width: 100%;
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--ts-surface);
  font-size: 1.1667rem;
}

.ts-account__content .shop_table th,
.ts-account__content .shop_table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--ts-line);
  text-align: left;
  vertical-align: middle;
}

.ts-account__content .shop_table thead th {
  background: var(--ts-bg-2);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ts-muted);
}

.ts-account__content .shop_table tr:last-child td {
  border-bottom: 0;
}

.ts-account__content .woocommerce-orders-table__cell-order-actions .button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 1.0833rem;
}

/* The two address cards. Woo floats them at 47%; a grid holds them at
   any width and stacks them on its own on a phone. */
.ts-account__content .woocommerce-Addresses,
.ts-account__content .u-columns.addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
}

.ts-account__content .woocommerce-Address {
  width: auto;
  float: none;
  padding: 18px;
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r);
  background: var(--ts-surface);
}

.ts-account__content .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}

.ts-account__content .woocommerce-Address-title h2,
.ts-account__content .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 1.3333rem;
  font-weight: 700;
  color: var(--ts-text);
}

.ts-account__content .woocommerce-Address address {
  font-size: 1.1667rem;
  font-style: normal;
  line-height: 1.65;
  color: var(--ts-muted);
}

/* Edit-account and edit-address are ordinary Woo forms; they get the
   same field as the log-in card above, so the whole area is one
   design rather than two. */
.ts-account__content form.woocommerce-EditAccountForm,
.ts-account__content form.edit-account,
.ts-account__content .woocommerce-address-fields {
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid var(--ts-line);
  border-radius: var(--ts-r-lg);
  background: var(--ts-surface);
  box-shadow: var(--ts-sh-1);
}

.ts-account__content fieldset {
  margin: 22px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--ts-line);
}

.ts-account__content legend {
  padding: 0;
  font-size: 1.3333rem;
  font-weight: 700;
  color: var(--ts-text);
}

/* Doubled for the same reason as §5 — Woo's `.woocommerce form .form-row`
   family outranks anything shorter. */
.ts-account__content .form-row,
.woocommerce .ts-account__content form .form-row {
  display: block;
  width: auto;
  float: none;
  margin: 0 0 15px;
  padding: 0;
}

.ts-account__content .form-row label,
.woocommerce .ts-account__content .form-row label {
  display: block;
  margin: 0 0 6px;
  font-size: 1.0833rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ts-text-2);
}

.ts-account__content .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.ts-account__content input[type='text'],
.ts-account__content input[type='email'],
.ts-account__content input[type='tel'],
.ts-account__content input[type='password'],
.ts-account__content select,
.ts-account__content textarea,
.woocommerce .ts-account__content .form-row input[type='text'],
.woocommerce .ts-account__content .form-row input[type='email'],
.woocommerce .ts-account__content .form-row input[type='tel'],
.woocommerce .ts-account__content .form-row input[type='password'],
.woocommerce .ts-account__content .form-row select,
.woocommerce .ts-account__content .form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ts-line-2);
  border-radius: var(--inputs-radius, 10px);
  background: var(--ts-surface);
  font-family: inherit;
  font-size: 1.3333rem;
  line-height: 1.4;
  color: var(--ts-text);
  -webkit-appearance: none;
  appearance: none;
}

.ts-account__content select {
  padding-right: 40px;
  background-image: var(--ts-caret);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.ts-account__content input:focus,
.ts-account__content select:focus,
.ts-account__content textarea:focus,
.woocommerce .ts-account__content .form-row input:focus,
.woocommerce .ts-account__content .form-row select:focus,
.woocommerce .ts-account__content .form-row textarea:focus {
  outline: none;
  border-color: var(--ts-brand);
  box-shadow: 0 0 0 3px var(--ts-brand-wash);
}

/* SELECT2 DRAWS THE COUNTRY AND PROVINCE FIELDS HERE TOO, and the rules
   for it in ts-fixes.css §6 are scoped to `.woocommerce-checkout` — so
   on the address screen the widget was the one control on the page
   still wearing base.css's 19px body type in a box with no padding,
   directly under two text inputs that had been styled. Four rules,
   because select2 builds its own box, its own text row and its own
   arrow, and any one left out is a control at a different height. The
   open list is appended to <body>, outside this column, and is styled
   globally in ts-fixes.css. */
.ts-account__content .select2-container {
  width: 100% !important;
}

.ts-account__content .select2-container--default .select2-selection--single {
  height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--ts-line-2);
  border-radius: var(--inputs-radius, 10px);
  background: var(--ts-surface);
}

.ts-account__content .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-size: 1.3333rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--ts-select-text);
}

.ts-account__content .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 10px;
  height: auto;
  transform: translateY(-50%);
}

.ts-account__content em {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--ts-muted-2);
}

/* "No order has been made yet" on a new account is a normal state, not
   an error, and Woo prints it as a notice with a coloured bar. */
.ts-account__content .woocommerce-info,
.ts-account__content .woocommerce-Message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px dashed var(--ts-line-2);
  border-radius: var(--ts-r);
  background: var(--ts-bg-2);
  color: var(--ts-text-2);
  font-size: 1.1667rem;
  list-style: none;
}

.ts-account__content .woocommerce-info::before,
.ts-account__content .woocommerce-Message::before {
  content: none;
}

/* ---------- 9. wider screens ---------------------------------- */
@media screen and (min-width: 600px) {
  .ts-auth__guest {
    justify-content: space-between;
    text-align: left;
  }
}

@media screen and (min-width: 900px) {
  /* The sidebar arrives only where there is room for the content beside
     it. Below this the chip row above the content IS the navigation,
     and it is the better one on a narrow screen: a stack of five
     full-width rows is a screenful the shopper scrolls past every
     time they open the page. */
  .ts-account {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
  }

  .ts-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-r);
    background: var(--ts-surface);
    box-shadow: var(--ts-sh-1);
    overflow: visible;
  }

  .ts-account .woocommerce-MyAccount-navigation a {
    justify-content: flex-start;
    width: 100%;
    border: 0;
    border-radius: var(--ts-r-sm);
    background: transparent;
  }

  .ts-account .woocommerce-MyAccount-navigation a:hover {
    background: var(--ts-bg-2);
  }

  .ts-account .woocommerce-MyAccount-navigation .is-active a {
    background: var(--ts-brand-wash);
    color: var(--ts-brand);
  }
}