/* ==========================================================================
   10 MY ACCOUNT :: eyebrow header, dashboard KPI tiles, nav icons,
   2-column login/register layout. Uses the same .label/.mh-panel language
   as the rest of the site so the account area doesn't feel bolted on.
   ========================================================================== */

.mh-account-head{ margin-bottom:var(--s-6); max-width:62ch; }
.mh-account-head .label{ margin-bottom:var(--s-3); }
.mh-account-head h2{
  font-family:var(--font-display); font-size:clamp(26px,3.2vw,38px); font-weight:800;
  letter-spacing:-.035em; line-height:1.1; color:var(--text); margin:0 0 10px;
}
.mh-account-lead{ color:var(--text-2); font-size:var(--t-sm); line-height:1.6; margin:0; }

/* --- Dashboard KPI tiles --------------------------------------------------- */
.mh-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3);
  margin-bottom:var(--s-6);
}
.mh-kpi{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5); display:flex; flex-direction:column; gap:4px;
}
.mh-kpi__v{
  font-family:var(--font-display); font-size:26px; font-weight:800;
  letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums;
}
.mh-kpi__v .woocommerce-Price-amount{ font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--text); }
.mh-kpi__l{ font-size:var(--t-xs); color:var(--text-3); }
@media (max-width:900px){ .mh-kpis{ grid-template-columns:repeat(2,1fr); } }

/* --- Account navigation icons ---------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:flex; align-items:center; gap:10px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  content:""; width:16px; height:16px; flex:none;
  background-color:var(--text-3); transition:background-color .2s var(--ease);
  mask-repeat:no-repeat; mask-position:center; mask-size:contain;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::before{ background-color:var(--text); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before{ background-color:var(--cyan-300); }

/* --- Sidebar user card (sits above the nav panel) --------------------------- */
.mh-account-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-5) var(--s-4); margin-bottom:var(--s-3);
}
.mh-account-card__avatar{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--cyan-400),var(--cyan-600)); color:var(--on-cyan);
  font-family:var(--font-display); font-size:22px; font-weight:800; margin-bottom:4px;
  box-shadow:0 6px 18px rgba(34,211,238,.28);
}
.mh-account-card__name{
  font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--text);
}
.mh-account-card__email{
  font-size:var(--t-xs); color:var(--text-3); word-break:break-all;
}

/* --- Sidebar nav panel + active-item polish --------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation{ padding:0; overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ padding:8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  padding:12px 14px; border-radius:10px; position:relative;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--cyan-soft); color:var(--cyan-300); font-weight:700;
  box-shadow:inset 3px 0 0 var(--cyan-400);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--warn); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before{ background-color:var(--warn); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background:rgba(251,113,133,.12); color:var(--warn); }

.woocommerce-MyAccount-navigation-link--dashboard a::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.4'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.4'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.4'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.4'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.4'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.4'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.4'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.4'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h7.5L19 9v11.5H6z'/%3E%3Cpath d='M13 3.5V9h6'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h7.5L19 9v11.5H6z'/%3E%3Cpath d='M13 3.5V9h6'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--downloads a::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4'/%3E%3Cpath d='M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4'/%3E%3Cpath d='M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 1 0 5 9.5C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 1 0 5 9.5C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-4 3.5-6.5 7-6.5s7 2.5 7 6.5'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-4 3.5-6.5 7-6.5s7 2.5 7 6.5'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

/* --- Login / Register: single-form view, toggled via ?register=1 ----------
   Only one of the two WooCommerce-generated columns is shown at a time --
   default is Login, body.mh-auth-register (set by functions.php reading the
   ?register query var) swaps to Register. Presented as one centered card,
   matching a conventional dedicated sign-in / sign-up screen instead of the
   default side-by-side layout. */
.woocommerce-account .u-columns.col2-set{
  display:block; max-width:460px; margin:0 auto;
}
.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2{ width:100%; float:none; }

.woocommerce-account .u-column2{ display:none; }
body.mh-auth-register .u-column1{ display:none; }
body.mh-auth-register .u-column2{ display:block; }

/* The eyebrow block above already carries the Login/Register heading role */
.woocommerce-account .u-columns.col2-set h2{ display:none; }

.woocommerce-account form.login,.woocommerce-account form.register{ height:auto; }
.woocommerce-account .lost_password a{ color:var(--cyan-300); font-size:var(--t-sm); }
.woocommerce-account .woocommerce-form-login__rememberme{ color:var(--text-2); font-size:var(--t-sm); }

.mh-auth-switch{
  text-align:center; margin:var(--s-5) 0 0; padding-top:var(--s-4);
  border-top:1px solid var(--line); color:var(--text-3); font-size:var(--t-sm);
}
.mh-auth-switch a{ color:var(--cyan-300); font-weight:700; }
.mh-auth-switch a:hover{ color:var(--cyan-200,var(--cyan-300)); }

/* Center the eyebrow/heading only for the guest sign-in/sign-up screen --
   the logged-in dashboard greeting stays left-aligned like a normal page head */
body.woocommerce-account:not(.logged-in) .mh-account-head{
  text-align:center; max-width:460px; margin-inline:auto;
}
body.woocommerce-account:not(.logged-in) .mh-account-head .label{ justify-content:center; }

.woocommerce-account form.login,.woocommerce-account form.register{
  padding:var(--s-6) !important;
}
.woocommerce-account form.login .button,
.woocommerce-account form.register .button{ width:100%; justify-content:center; margin-top:4px; }

/* --- Account details / addresses forms -------------------------------------- */
.woocommerce-EditAccountForm legend,
.woocommerce-address-fields legend{
  font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); margin-bottom:var(--s-3);
}
/* real markup: .woocommerce-Address > header.woocommerce-Address-title.title (h2 + .edit link) + <address> */
.woocommerce-Addresses.u-columns{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); max-width:none; }
.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2{ width:100%; float:none; }
@media (max-width:700px){ .woocommerce-Addresses.u-columns{ grid-template-columns:1fr; } }

.woocommerce-Address{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden;
}
.woocommerce-Address-title{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); background:var(--ink-800) !important; border-bottom:1px solid var(--line);
}
.woocommerce-Address-title h2{
  font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--text) !important; margin:0;
}
.woocommerce-Address-title .edit{ color:var(--cyan-300) !important; font-weight:700; font-size:var(--t-sm); }
.woocommerce-Address-title .edit:hover{ color:var(--cyan-200,var(--cyan-300)) !important; }
.woocommerce-Address address{
  padding:var(--s-5); font-style:normal; color:var(--text-2); font-size:var(--t-sm); line-height:1.75; background:transparent;
}


.mh-account-head--minimal{ margin-bottom:var(--s-5); }
.mh-account-head--minimal h2{
  font-family:var(--font-display); font-size:26px; font-weight:800;
  letter-spacing:-.025em; color:var(--text); margin:0;
}


/* --- Dashboard: Your Library (real purchased assets) ----------------------- */
.mh-library{ margin-top:var(--s-2); }
.mh-library__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  margin-bottom:var(--s-4);
}
.mh-library__head h3{
  font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--text); margin:0;
}
.mh-library__viewall{ font-size:var(--t-sm); color:var(--cyan-300); font-weight:600; }

.mh-library__empty{
  background:var(--glass); border:1px dashed var(--line-2); border-radius:var(--r-card);
  padding:var(--s-7); text-align:center; color:var(--text-3);
}
.mh-library__empty p{ margin:0 0 var(--s-4); font-size:var(--t-sm); }
.mh-library__cta{
  display:inline-flex; align-items:center; gap:8px; background:linear-gradient(180deg,var(--cyan-300),var(--cyan-500));
  color:var(--on-cyan) !important; border-radius:var(--r-pill); padding:12px 24px; font-weight:700; font-size:var(--t-sm);
}

.mh-library__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);
}
@media (max-width:900px){ .mh-library__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mh-library__grid{ grid-template-columns:1fr; } }

.mh-asset-card{
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out),border-color .3s var(--ease),background-color .3s var(--ease);
}
.mh-asset-card:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--glass-2); }
.mh-asset-card__media{ position:relative; aspect-ratio:4/3; background:var(--ink-800); overflow:hidden; }
.mh-asset-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.mh-asset-card__badges{ position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:6px; flex-wrap:wrap; }
.mh-asset-card__body{ padding:var(--s-4); display:flex; flex-direction:column; gap:10px; flex:1; }
.mh-asset-card__title{
  font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text);
  line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mh-asset-card__dl{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:9px 14px;
  font-size:var(--t-xs); font-weight:700; color:var(--text-2); background:var(--glass);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.mh-asset-card__dl:hover{ border-color:var(--cyan-400); color:var(--cyan-300); background:var(--cyan-soft); }