/* ===== MAS My Account – Modern UI ===== */

:root{
  /* inherits your site vars; fallback colors below */
  --theme: #fff7d6;
  --ink: #111;
  --muted: #6b7280;
  --border: #e6e6e6;
  --surface: #fff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* wrapper (Woo outputs .woocommerce) */
.mas-account{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}

/* NAV (left column) */
.mas-account__nav{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0;
  box-shadow: var(--shadow);
  padding:16px 0;
}

.mas-account__nav ul{
  list-style:none; margin:0; padding:0;
}

.mas-account__nav li a{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  color:#111; text-decoration:none; border-left:3px solid transparent;
}

.mas-account__nav li a:hover{
  background:#fafafa;
}

.mas-account__nav li.is-active a{
  border-left-color:var(--theme);
  background:#fff7d6;
  font-weight:700;
}

/* CONTENT (right column) */
.mas-account__content{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0;
  box-shadow:var(--shadow);
  padding:20px 20px 24px;
}

/* greeting */
.mas-account__hello{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:baseline; margin:0 0 14px;
}
.mas-account__hello strong{ color:var(--ink) }
.mas-account__hello small a{ color:var(--ink); text-decoration:underline }

/* tiles grid */
.mas-tiles{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 1060px){
  .mas-account{ grid-template-columns: 1fr; }
}
@media (max-width: 840px){
  .mas-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .mas-tiles{ grid-template-columns: 1fr; }
}

/* tile */
.mas-tile{
  display:flex; flex-direction:column; gap:12px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:0;
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow);
}

.mas-tile:hover{
  outline:1px solid var(--ink);
}

.mas-tile__icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  border-radius:0;
}

.mas-tile__label{
  font-weight:800; letter-spacing:.2px;
}

/* Generic button style (matches cart/checkout) */
.mas-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 18px;
  font-weight:800; border-radius:0;
  border:1px solid var(--theme); background:var(--theme); color:#fff;
  text-decoration:none;
}
.mas-btn:hover{ background:#111; color:#fff; border-color:#111; }

/* Muted text */
.mas-muted{ color:var(--muted); }

/* Tables inside endpoints still look decent */
.woocommerce .mas-account__content table.shop_table{
  border-radius:0;
  border-color:var(--border);
}