/* Stoke Tiles redesign: order received and My Account (Phase 2 fix round 1,
   items 8 and 9). No design exists for either: this is a minimal restyle of
   WooCommerce's own markup with the redesign tokens. No hex values. */

/* ------------------------------------------------------------------ Page */

.st-account { background: var(--st-ivory); padding: 56px 0 96px; overflow-wrap: break-word; }
/* The page column lines up with the header (st-wrap); the content inside it
   is held to a readable width. */
.st-account__wrap > .woocommerce,
.st-account__wrap > .st-thankyou { max-width: 1080px; }
.st-account__head { margin-bottom: 32px; }
.st-account__title,
.st-thankyou__title {
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: var(--st-h1);
  line-height: 1.05;
  margin: 0;
  color: var(--st-espresso);
}
.st-account h2,
.st-account .st-account__h2 {
  font-family: var(--st-serif);
  font-weight: 500;
  font-size: var(--st-h3);
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--st-espresso);
  text-transform: none;
  letter-spacing: 0;
}
.st-account p { margin: 0 0 16px; font-size: var(--st-body); line-height: 1.6; }
.st-account a:not(.st-btn):not(.button) { color: var(--st-bronze); text-decoration: underline; text-underline-offset: 3px; }
.st-account a:not(.st-btn):not(.button):hover { color: var(--st-espresso); }
.st-account mark { background: transparent; color: var(--st-espresso); font-weight: 500; }

/* WooCommerce's buttons, wherever a template prints a bare .button */
.st-account .button:not(.st-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--st-espresso);
  border-radius: var(--st-radius);
  background: transparent;
  color: var(--st-espresso);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.st-account .button:not(.st-btn):hover { background: var(--st-espresso); color: var(--st-ivory); }
.st-account .st-btn--block { width: 100%; }

/* Notices */
.st-account .woocommerce-error,
.st-account .woocommerce-message,
.st-account .woocommerce-info {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  border-radius: 0;
  color: var(--st-espresso);
  font-size: 15px;
}
.st-account .woocommerce-error { color: var(--st-alert); }
.st-account .woocommerce-error::before,
.st-account .woocommerce-message::before,
.st-account .woocommerce-info::before { display: none; }

/* Fields */
.st-account .form-row { margin: 0 0 18px; padding: 0; }
.st-account .form-row label:not(.woocommerce-form__label-for-checkbox) { display: block; font-size: var(--st-small); font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
.st-account .form-row .required { color: var(--st-alert); text-decoration: none; border: 0; }
.st-account input.input-text,
.st-account select,
.st-account textarea {
  width: 100%;
  height: var(--st-control-h);
  padding: 0 16px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  font-family: var(--st-sans);
  font-size: var(--st-body);
  color: var(--st-espresso);
  box-sizing: border-box;
}
.st-account textarea { height: auto; padding: 14px 16px; }
.st-account input.input-text:focus,
.st-account select:focus,
.st-account textarea:focus { outline: 3px solid var(--st-focus); border-color: var(--st-espresso); }
.st-account .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 10px; min-height: var(--st-tap-min); font-size: 15px; cursor: pointer; }
.st-account .woocommerce-form__label-for-checkbox input { width: 18px; height: 18px; margin: 0; accent-color: var(--st-sage); }
.st-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.st-account .woocommerce-form-login__submit,
.st-account .woocommerce-form-register__submit { float: none; margin: 0; }
.st-account .lost_password { margin: 4px 0 0; font-size: var(--st-small); }
.st-account .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--st-taupe); }

/* ------------------------------------------- Logged out: log in / register */

.st-account #customer_login.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: auto;
}
.st-account #customer_login::before,
.st-account #customer_login::after { display: none; }
.st-account #customer_login > .col-1,
.st-account #customer_login > .col-2 {
  float: none;
  width: auto;
  max-width: none;
  padding: 32px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
}
.st-account .woocommerce-form-login,
.st-account .woocommerce-form-register { margin: 0; padding: 0; border: 0; border-radius: 0; }

/* ------------------------------------------------- Logged in: dashboard */

.st-account.is-logged-in .woocommerce {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.st-account.is-logged-in .woocommerce::before,
.st-account.is-logged-in .woocommerce::after { display: none; }
.st-account.is-logged-in .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.st-account .woocommerce-MyAccount-navigation,
.st-account .woocommerce-MyAccount-content { float: none; width: auto; }
.st-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-divider); }
.st-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border-bottom: 1px solid var(--st-divider); }
.st-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--st-espresso) !important;
  text-decoration: none !important;
  font-size: 15px;
}
/* Client round 4: theme-settings.php prints `li a:hover` and `li:hover a`
   rules (teal #00a2a5, white text) at a higher specificity, so hover and
   focus need !important to keep the redesign look. */
.st-account .woocommerce-MyAccount-navigation li a:hover,
.st-account .woocommerce-MyAccount-navigation li a:focus,
.st-account .woocommerce-MyAccount-navigation li:hover a {
  background: var(--st-panel) !important;
  color: var(--st-espresso) !important;
}
/* The same settings paint a teal background behind plain links in notices
   and the "Edit" links on the Addresses tab. */
.st-account .woocommerce-info a:not(.button):not(.st-btn):hover,
.st-account .woocommerce-message a:not(.button):not(.st-btn):hover,
.st-account .woocommerce-Address header a:not(.button):not(.st-btn):hover {
  background: transparent !important;
  color: var(--st-espresso) !important;
}
/* ...and behind any form .woocommerce-Button on hover, which caught the
   Register button (st-btn--secondary). */
.st-account form .st-btn--primary:hover { background: var(--st-sage-dark) !important; color: var(--st-white) !important; }
.st-account form .st-btn--secondary:hover { background: var(--st-espresso) !important; color: var(--st-ivory) !important; }
.st-account .woocommerce-MyAccount-navigation li a:focus-visible {
  outline: 3px solid var(--st-focus);
  outline-offset: -3px;
}
.st-account .woocommerce-MyAccount-navigation li.is-active a,
.st-account .woocommerce-MyAccount-navigation li.is-active:hover a,
.st-account .woocommerce-MyAccount-navigation li.is-active a:hover,
.st-account .woocommerce-MyAccount-navigation li.is-active a:focus {
  /* !important: the theme's colour settings print a teal active tab inline. */
  background: var(--st-white) !important;
  color: var(--st-espresso) !important;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--st-sage);
}
.st-account .woocommerce-MyAccount-content {
  padding: 32px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  min-width: 0;
}

/* ------------------------------------- Tables (orders, order details) */

.st-account table.shop_table,
.st-account table.woocommerce-table {
  width: 100%;
  margin: 0 0 32px;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-size: 15px;
  background: var(--st-white);
}
.st-account table.shop_table th,
.st-account table.shop_table td {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--st-divider);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  line-height: 1.5;
}
.st-account table.shop_table thead th,
.st-account table.shop_table tfoot th {
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  color: var(--st-taupe);
}
.st-account table.shop_table tfoot tr:last-child th,
.st-account table.shop_table tfoot tr:last-child td { color: var(--st-espresso); font-weight: 500; }
.st-account table.shop_table .woocommerce-orders-table__cell-order-actions .button { margin: 0 6px 6px 0; }
.st-account table.shop_table .wc-item-meta { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--st-taupe); }
.st-account table.shop_table .wc-item-meta p { display: inline; margin: 0; font-size: inherit; }

/* Addresses */
.st-account .woocommerce-customer-details .col2-set,
.st-account .woocommerce-Addresses.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: auto; }
.st-account .col2-set::before,
.st-account .col2-set::after { display: none; }
.st-account .col2-set > .col-1,
.st-account .col2-set > .col-2 { float: none; width: auto; max-width: none; }
.st-account address {
  margin: 0;
  padding: 20px 24px;
  border: 1px solid var(--st-linen);
  border-radius: 0;
  background: var(--st-white);
  font-style: normal;
  line-height: 1.7;
}
.st-account address p { margin: 6px 0 0; }

/* ------------------------------------------------------ Order received */

.st-thankyou__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.st-thankyou__lead { margin: 0; font-size: var(--st-body-l); font-weight: 300; color: var(--st-espresso); background: none; padding: 0; border: 0; }
.st-thankyou__actions { display: flex; flex-wrap: wrap; gap: 12px; background: none; border: 0; padding: 0; }
.st-account ul.st-thankyou__overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin: 0 0 40px;
  padding: 0;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
}
.st-account ul.st-thankyou__overview::before,
.st-account ul.st-thankyou__overview::after { display: none; }
.st-account ul.st-thankyou__overview li {
  float: none;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-right: 1px solid var(--st-divider);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--st-small);
  text-transform: none;
  min-width: 0;
}
.st-account ul.st-thankyou__overview li:last-child { border-right: 0; }
.st-thankyou__label { font-size: var(--st-label); letter-spacing: var(--st-track-nav); text-transform: uppercase; color: var(--st-taupe); }
.st-account ul.st-thankyou__overview strong { font-size: var(--st-body); font-weight: 500; color: var(--st-espresso); text-transform: none; overflow-wrap: anywhere; }
.st-account--thankyou section { margin: 0 0 40px; }
.st-account--thankyou .wc-bacs-bank-details { list-style: none; padding: 20px 24px; margin: 0 0 24px; background: var(--st-white); border: 1px solid var(--st-linen); }
.st-account--thankyou .wc-bacs-bank-details li { margin: 0 0 8px; font-size: var(--st-small); }
.st-account--thankyou .wc-bacs-bank-details-heading,
.st-account--thankyou .wc-bacs-bank-details-account-name { font-family: var(--st-serif); font-size: var(--st-h3); font-weight: 500; }

/* ------------------------------------------------- Phones and tablets */

@media (max-width: 1024px) {
  .st-account.is-logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .st-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .st-account .woocommerce-MyAccount-navigation li { border: 0; }
  .st-account .woocommerce-MyAccount-navigation li a { min-height: 44px; padding: 0 14px; border: 1px solid var(--st-linen); background: var(--st-white); }
  .st-account .woocommerce-MyAccount-navigation li.is-active a { box-shadow: none; border-color: var(--st-espresso); }
}

@media (max-width: 767px) {
  .st-account { padding: 32px 0 64px; }
  .st-account .st-account__wrap { padding: 0 16px; }
  .st-account #customer_login.col2-set,
  .st-account .woocommerce-customer-details .col2-set,
  .st-account .woocommerce-Addresses.col2-set { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .st-account #customer_login > .col-1,
  .st-account #customer_login > .col-2,
  .st-account .woocommerce-MyAccount-content { padding: 20px 16px; }
  .st-account ul.st-thankyou__overview { grid-template-columns: minmax(0, 1fr); }
  .st-account ul.st-thankyou__overview li { border-right: 0; border-bottom: 1px solid var(--st-divider); padding: 14px 16px; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .st-account ul.st-thankyou__overview li:last-child { border-bottom: 0; }
  .st-account ul.st-thankyou__overview strong { text-align: right; }
  .st-account table.shop_table th,
  .st-account table.shop_table td { padding: 12px 8px; }
  /* Responsive tables stack each row as label and value (the same as
     WooCommerce's smallscreen sheet, which this page does not load). */
  .st-account table.shop_table_responsive thead { display: none; }
  .st-account table.shop_table_responsive tr td { display: flex; justify-content: space-between; gap: 12px; text-align: right !important; }
  .st-account table.shop_table_responsive tr td[data-title]::before { content: attr(data-title); font-weight: 500; text-align: left; color: var(--st-taupe); }
  .st-account table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-actions { justify-content: flex-start; flex-wrap: wrap; }
  .st-account table.shop_table_responsive tbody tr { display: block; border-bottom: 1px solid var(--st-linen); }
  .st-account table.shop_table_responsive tbody tr td { border-bottom: 0; }
}