/* ==========================================================================
   Makhmal — My Account (WooCommerce)
   Every selector is WooCommerce's own markup: the account pages are rendered
   by WC templates we deliberately do NOT override, so all of this is skin.
   Scoped under .woocommerce-account so nothing here can reach another page.
   Icons are inline data-URIs rather than the sprite, because CSS cannot pull
   a <use> reference and these are decorative only.
   ========================================================================== */

.woocommerce-account .dmhouse-woocommerce-content {
  padding-block: 26px 70px;
}

/* ---- Page head ----
   The page title is printed by the page template, outside anything this file
   otherwise touches; it had no vertical rhythm of its own, so it sat glued
   to the header above and the panel below. */
.woocommerce-account .entry-title,
.woocommerce-account .woocommerce-products-header__title,
.woocommerce-account .dmhouse-woocommerce-content > h1,
.woocommerce-account .dmhouse-woocommerce-content > .entry-header {
  margin: 18px 0 22px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-2xl);
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-color-text);
}

/* notices are skinned once for every WooCommerce page in makhmal-wc.css */

/* ==========================================================================
   Logged OUT — the login / register pair
   ========================================================================== */
.woocommerce-account .u-columns#customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.woocommerce-account .u-columns#customer_login > div {
  position: relative;
  width: 100% !important; /* WC's float-era 47.05% inline-ish width */
  float: none !important;
  padding: 26px 24px 28px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
  overflow: hidden;
}

/* a paw watermark in the corner of each card — the "گوگولی" touch that costs
   no DOM and no request */
.woocommerce-account .u-columns#customer_login > div::after {
  content: '';
  position: absolute;
  top: -14px;
  inset-inline-start: -10px;
  width: 96px;
  height: 96px;
  opacity: 0.07;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23556EF2'><ellipse cx='7' cy='8' rx='2' ry='2.6'/><ellipse cx='12' cy='6.4' rx='2' ry='2.8'/><ellipse cx='17' cy='8' rx='2' ry='2.6'/><ellipse cx='12' cy='16' rx='5' ry='4'/></svg>");
  pointer-events: none;
}

.woocommerce-account .u-columns#customer_login h2 {
  margin: 0 0 6px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-xl);
  font-weight: 700;
  color: var(--mk-color-text);
}

.woocommerce-account .u-columns#customer_login .col-1 h2::after {
  content: 'خوش برگشتی! پتت دلش برات تنگ شده بود.';
  display: block;
  margin-top: 4px;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-xs);
  font-weight: 400;
  line-height: 1.9;
  color: var(--mk-color-text-muted);
}

.woocommerce-account .u-columns#customer_login .col-2 h2::after {
  content: 'یک‌بار ثبت‌نام کن، سفارش‌های بعدی چند ثانیه‌ای تمام می‌شه.';
  display: block;
  margin-top: 4px;
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-xs);
  font-weight: 400;
  line-height: 1.9;
  color: var(--mk-color-text-muted);
}

/* ---- Forms (shared by login, register, lost password, edit account) ---- */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  width: 100%;
  float: none;
}

.woocommerce-account .form-row label,
.woocommerce-account fieldset legend {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  color: var(--mk-color-text-soft);
}

.woocommerce-account .required {
  color: var(--mk-color-accent-2);
  text-decoration: none;
}

/* ⚠ WooCommerce's own stylesheet targets these as
   `.woocommerce form .form-row input.input-text`, which out-specifies a
   plain `.woocommerce-account .input-text` — that is why the account-details
   form kept its square native inputs. The declarations that decide the look
   are forced; everything else stays in the normal cascade. */
.woocommerce-account .woocommerce-Input,
.woocommerce-account .input-text,
.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,
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select {
  box-sizing: border-box;
  width: 100% !important;
  padding: 12px 15px !important;
  border-radius: var(--mk-radius-md) !important;
  border: 1px solid var(--mk-color-border) !important;
  background: var(--mk-color-bg-soft) !important;
  color: var(--mk-color-text);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  line-height: 1.9;
  transition: border-color var(--mk-transition), box-shadow var(--mk-transition),
              background var(--mk-transition);
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account .input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  outline: none;
  background: var(--mk-color-surface);
  border-color: var(--mk-blue-highlight);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-blue-highlight) 22%, transparent);
}

/* WC's password field wraps the input in a relative span with a toggle */
.woocommerce-account .woocommerce-password-hint,
.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account form .woocommerce-form__label-for-checkbox ~ em,
.woocommerce-account .woocommerce-form-login__rememberme + * em {
  font-size: var(--mk-fs-xs);
  line-height: 1.9;
  color: var(--mk-color-text-muted);
}

.woocommerce-account .password-input {
  display: block;
  position: relative;
  width: 100%;
}

.woocommerce-account .show-password-input {
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  translate: 0 -50%;
  width: 22px;
  height: 22px;
  border: none;
  background: no-repeat center/18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B84A6' stroke-width='1.8'><path d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/><circle cx='12' cy='12' r='2.6'/></svg>");
  cursor: pointer;
}

.woocommerce-account .show-password-input.display-password {
  filter: none;
  opacity: 0.55;
}

/* remember-me + "lost password" share one tidy row */
.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-text-soft);
}

.woocommerce-account .woocommerce-form-login__rememberme input {
  width: 16px;
  height: 16px;
  accent-color: var(--mk-color-primary);
}

.woocommerce-account .woocommerce-LostPassword {
  margin: 12px 0 0;
  font-size: var(--mk-fs-xs);
}

.woocommerce-account .woocommerce-LostPassword a {
  color: var(--mk-color-primary-hover);
  font-weight: 700;
}

/* ---- Buttons ---- */
.woocommerce-account .woocommerce-Button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 26px;
  border: none;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  box-shadow: var(--mk-shadow-md);
  transition: transform var(--mk-transition), box-shadow var(--mk-transition);
}

.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account a.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--mk-shadow-lg);
}

/* the "view order" style links inside tables stay quiet, not primary */
.woocommerce-account .woocommerce-orders-table a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button--previous,
.woocommerce-account .woocommerce-Button--next {
  min-height: 38px;
  padding: 0 16px;
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-primary-hover);
  box-shadow: none;
}

/* ==========================================================================
   Logged IN — sidebar + content
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 14px;
  list-style: none;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px !important;
  border-radius: var(--mk-radius-md);
  color: var(--mk-color-text-soft);
  font-size: var(--mk-fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--mk-transition), color var(--mk-transition);
}

/* one icon per WooCommerce endpoint, drawn as a mask so it can take the
   current colour and light up with the active state */
/* ⚠ longhands only, never the `mask:` shorthand here: the shorthand resets
   mask-image to none, and measured in the browser it beat the per-item
   image below — every icon rendered as a solid coloured square. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M4 11l8-6 8 6v8a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M4 11l8-6 8 6v8a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1Z'/></svg>");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 7h14l-1 12H6Z'/><path d='M9 7a3 3 0 0 1 6 0'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 7h14l-1 12H6Z'/><path d='M9 7a3 3 0 0 1 6 0'/></svg>");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M12 4v10'/><path d='m8 11 4 4 4-4'/><path d='M5 19h14'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M12 4v10'/><path d='m8 11 4 4 4-4'/><path d='M5 19h14'/></svg>");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/><circle cx='12' cy='10' r='2.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/><circle cx='12' cy='10' r='2.4'/></svg>");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='8.5' r='3.4'/><path d='M5 20a7 7 0 0 1 14 0'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='8.5' r='3.4'/><path d='M5 20a7 7 0 0 1 14 0'/></svg>");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M14 5H7a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h7'/><path d='M17 15l3-3-3-3'/><path d='M20 12h-9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M14 5H7a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h7'/><path d='M17 15l3-3-3-3'/><path d='M20 12h-9'/></svg>");
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--mk-color-bg-soft);
  color: var(--mk-color-primary-hover);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--mk-gradient-cta);
  color: var(--mk-color-text-on-brand);
  box-shadow: var(--mk-shadow-md);
}

/* logout is the one destructive-ish action: quiet by default, pink on hover */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: color-mix(in srgb, var(--mk-color-accent-2) 12%, #fff);
  color: var(--mk-color-accent-2);
}

.woocommerce-account .woocommerce-MyAccount-content {
  padding: 26px 24px 28px;
  border-radius: var(--mk-radius-lg);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  box-shadow: var(--mk-shadow-sm);
  font-size: var(--mk-fs-sm);
  line-height: 2;
  color: var(--mk-color-text-soft);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content p {
  margin: 0 0 14px;
}

.woocommerce-account .woocommerce-MyAccount-content strong {
  color: var(--mk-color-text);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--mk-color-primary-hover);
  font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
  margin: 0 0 14px;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-lg);
  font-weight: 700;
  color: var(--mk-color-text);
}

/* ---- Dashboard greeting (printed by inc/woocommerce.php) ---- */
.mk-account-hello {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 16px 18px;
  border-radius: var(--mk-radius-md);
  background: color-mix(in srgb, var(--mk-color-primary) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--mk-color-primary) 18%, #fff);
}

.mk-account-hello__paw {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  color: var(--mk-color-primary);
}

.mk-account-hello__paw svg {
  width: 22px;
  height: 22px;
}

.mk-account-hello__title {
  margin: 0 !important;
  font-family: var(--mk-font-heading);
  font-size: var(--mk-fs-base);
  font-weight: 700;
  color: var(--mk-color-text);
}

.mk-account-hello__desc {
  margin: 2px 0 0 !important;
  font-size: var(--mk-fs-xs);
  line-height: 1.9;
  color: var(--mk-color-text-muted);
}

/* ---- Orders / downloads tables ---- */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  display: table;
  width: 100%;
  margin: 0 0 18px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
  display: table-cell;
  padding: 12px 14px;
  text-align: start;
  vertical-align: middle;
  border: none;
  font-size: var(--mk-fs-sm);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--mk-color-bg-muted);
  color: var(--mk-color-text);
  font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--mk-color-border);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td {
  background: color-mix(in srgb, var(--mk-color-bg-soft) 70%, #fff);
}

/* ---- Account details form: field grid, password fieldset, submit row ---- */
.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
.woocommerce-account form .form-row-first,
.woocommerce-account form .form-row-last {
  width: 100% !important;
  float: none !important;
  margin-inline: 0 !important;
}

/* first/last name share a row on desktop without WooCommerce's floats */
@media (min-width: 600px) {
  .woocommerce-account .woocommerce-EditAccountForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }

  .woocommerce-account .woocommerce-EditAccountForm > *:not(.form-row-first):not(.form-row-last) {
    grid-column: 1 / -1;
  }
}

.woocommerce-account fieldset {
  margin: 8px 0 20px;
  padding: 18px 20px 6px;
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
}

.woocommerce-account fieldset legend {
  padding: 5px 14px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  font-size: var(--mk-fs-xs);
  color: var(--mk-color-primary-hover);
}

/* the submit row was flush against the fieldset above it */
.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button {
  margin-top: 6px;
}

.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type {
  padding-top: 14px;
  border-top: 1px solid var(--mk-color-border);
}

/* ---- Addresses ---- */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* ⚠ WooCommerce floats these two at 47% via `.woocommerce .col2-set .col-1`
   — a rule our grid alone does not beat, which is what left one card high
   and the other dropped and offset. Both the float and the width have to be
   overridden on the column classes, not only on .woocommerce-Address. */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Address {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 18px 20px 20px;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-soft);
  border: 1px dashed var(--mk-color-border);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
  font-size: var(--mk-fs-base);
}

.woocommerce-account .woocommerce-Address-title .edit {
  padding: 6px 14px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-surface);
  border: 1px solid var(--mk-color-border);
  font-size: var(--mk-fs-xs);
}

.woocommerce-account .woocommerce-Address address {
  margin: 0;
  font-style: normal;
  line-height: 2.1;
  color: var(--mk-color-text-soft);
}

/* ---- Empty states (no orders / no downloads) ----
   Row, not column: stacking put the badge on a line of its own above the
   sentence, which is the icon-floating-above-the-text complaint. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  border-style: dashed;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
  align-self: center;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
  margin-inline-start: 0;
  background: var(--mk-gradient-cta) !important;
  border-color: transparent !important;
  color: var(--mk-color-text-on-brand) !important;
}

/* ==========================================================================
   Layout: sidebar beside content on desktop, stacked everywhere narrower.
   WooCommerce floats these two, so the widths above are reset to 100% and
   the placement is done with grid instead.
   ========================================================================== */
/* The grid is switched on by a body class added in inc/woocommerce.php, not
   by :has() — the same wrapper element also holds the logged-OUT login pair,
   which must stay a single full-width column, and a body class says which
   state we are in without depending on selector support. */
@media (min-width: 901px) {
  .mk-account-dashboard .woocommerce {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  /* explicit tracks, not auto-placement: a screen that renders the content
     without the nav (some endpoints do) would otherwise drop the panel into
     the 260px sidebar track and squeeze everything inside it */
  .mk-account-dashboard .woocommerce > .woocommerce-MyAccount-navigation {
    grid-row: 1;
    grid-column: 1;
  }

  .mk-account-dashboard .woocommerce > .woocommerce-MyAccount-content {
    grid-row: 1;
    grid-column: 2;
  }

  /* WC prints its notices inside the same wrapper: keep them full width
     above both columns instead of letting them take a grid track */
  .mk-account-dashboard .woocommerce > .woocommerce-message,
  .mk-account-dashboard .woocommerce > .woocommerce-info,
  .mk-account-dashboard .woocommerce > .woocommerce-error,
  .mk-account-dashboard .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  /* the sidebar becomes a swipeable chip row above the content */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 16px !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
    gap: 8px;
    scrollbar-width: none;
  }

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

  .woocommerce-account .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    white-space: nowrap;
  }

  .woocommerce-account .u-columns#customer_login {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-account .u-columns#customer_login > div {
    padding: 20px 16px 22px;
  }

  .woocommerce-account .woocommerce-Button,
  .woocommerce-account button.button,
  .woocommerce-account input.button {
    width: 100%;
  }

  /* ⚠ An orders table cannot fit a phone as a table. WooCommerce already
     ships data-title attributes on every cell, so each row becomes a card
     with its own labels instead of a horizontal scrollbar. */
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table,
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody,
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr,
  .woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    display: block;
    width: 100%;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
    display: none;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    border: none;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
    margin-bottom: 12px;
    padding: 6px 4px;
    border-radius: var(--mk-radius-md);
    border: 1px solid var(--mk-color-border);
    background: var(--mk-color-bg-soft);
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: none !important;
    text-align: end;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before {
    content: attr(data-title);
    flex-shrink: 0;
    color: var(--mk-color-text-muted);
    font-size: var(--mk-fs-xs);
    font-weight: 700;
    text-align: start;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions {
    justify-content: stretch;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions::before {
    display: none;
  }

  .woocommerce-account .woocommerce-orders-table a.button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-account .woocommerce-Button:hover,
  .woocommerce-account button.button:hover,
  .woocommerce-account input.button:hover,
  .woocommerce-account a.button:hover {
    transform: none;
  }
}